A/B testing là một phương pháp phổ biến được nhiều doanh nghiệp sử dụng để thử nghiệm và tối ưu hóa chiến lược tiếp thị, từ đó nâng cao trải nghiệm người dùng và tạo tỷ lệ chuyển đổi cao trong mỗi chiến dịch. Trong bài viết dưới đây, Vietnix sẽ hướng dẫn bạn cách thiết lập A/B testing bằng Microsoft Clarity và GA4.
Microsoft Clarity Custom Tag là gì?
Microsoft Clarity là một công cụ phân tích heatmap miễn phí được sử dụng phổ biến hiện nay. Công cụ này cung cấp đầy đủ chức năng phân đoạn dữ liệu cần thiết để người dùng có thể thiết lập A/B testing, nhất là khi Google Optimize sẽ dừng hoạt động và bạn cần phương pháp thay thế trong thời gian sắp tới.
Tìm hiểu Microsoft Clarity Custom Tag là gì?
Cụ thể, Microsoft Clarity Custom Tag cho phép người dùng gán các loại nhãn tùy ý bằng chữ cái hoặc số cho khách truy cập để phân đoạn dữ liệu, từ đó phân tích các Recording (bản ghi) và Heatmap (bản đồ nhiệt) cho các nhóm thử nghiệm khác nhau.
Microsoft Clarity Custom Tag giúp phân tích recording và heatmap
Để lập thử nghiệm A/B testing (hay split testing), bạn cần tạo 2 phiên bản của trang web rồi phân tích, so sánh hiệu suất của chúng bằng cách sử dụng các custom tag của Microsoft Clarity và các tính năng hữu ích của GA4. Cụ thể các bước sẽ được hướng dẫn cụ thể ở phần tiếp theo của bài viết.
Cùng tham khảo thêm một số bài viết về phân tích website có thể bạn quan tâm:
Có giới hạn nào đối với các Custom Tag trong Microsoft Clarity không?
Câu trả lời là không, người dùng sẽ không bị giới hạn về số lượng thẻ tag mà có thể thêm các thẻ tag tùy ý dựa trên yêu cầu riêng của từng dự án, chiến lược.
Cách gắn thẻ tag khách truy cập bằng Microsoft Clarity
Để gắn thẻ cho khách truy cập với Microsoft Clarity, bạn chỉ cần chạy một đoạn code JavaScript như sau:
clarity("set", "experiment", "group_name");
Tuy nhiên, trong bài viết này, Vietnix sẽ hướng dẫn bạn thiết lập A/B testing qua một ví dụ thực tế để bạn hình dung rõ hơn về quy trình này.
Các ví dụ dưới đây chủ yếu nghiên cứu cách mà những yếu tố như loại quảng cáo và bố cục trang web tác động đến hành vi của người dùng. Cụ thể là:
Mục tiêu của thử nghiệm là để xác định trường hợp nào người dùng sẽ dừng lại ở bài viết lâu hơn và liệu rằng sự thay đổi menu label có thúc đẩy lượt click chuột tăng cao hơn hay không.
Ngoài ra, nếu bạn đang có nhu cầu xây dựng website và muốn tìm một nhà cung cấp hosting uy tín và chất lượng, thì Vietnix là lựa chọn không thể bỏ qua. Hiện tại, Vietnix đang mang tới nhiều gói dịch vụ như Hosting Giá Rẻ, Hosting Cao Cấp, Business Hosting, SEO Hosting và WordPress Hosting được tích hợp nhiều tính năng cùng công nghệ hiện đại như: sử dụng ổ cứng SSD/NVMe, công nghệ LiteSpeed Enterprise, Vietnix Firewall chống DDoS độc quyền,… giúp website của bạn hoạt động mượt mà và nhanh chóng và bảo mật.
HOSTING PREMIUM 4
Bán chạy
71,280đ
-20%
89,100đ
/Tháng
2 Core
3GB RAM
3GB NVMe
1 Domain
SSL Miễn Phí
Tặng theme & plugin trị giá 60.000.000 VND
HOSTING PREMIUM 5
85,680đ
-20%
107,100đ
/Tháng
2 Core
3GB RAM
3GB NVMe
2 Domain
SSL Miễn Phí
Tặng theme & plugin trị giá 60.000.000 VND
HOSTING PREMIUM 6
107,280đ
-20%
134,100đ
/Tháng
2 Core
4GB RAM
4GB NVMe
2 Domain
SSL Miễn Phí
Tặng theme & plugin trị giá 60.000.000 VND
HOSTING PREMIUM 7
157,680đ
-20%
197,100đ
/Tháng
4 Core
4GB RAM
4GB NVMe
4 Domain
SSL Miễn Phí
Tặng theme & plugin trị giá 60.000.000 VND
HOSTING PREMIUM 8
215,280đ
-20%
269,100đ
/Tháng
4 Core
6GB RAM
6GB NVMe
4 Domain
SSL Miễn Phí
Tặng theme & plugin trị giá 60.000.000 VND
HOSTING PREMIUM 9
287,280đ
-20%
359,100đ
/Tháng
4 Core
8GB RAM
8GB NVMe
4 Domain
SSL Miễn Phí
Tặng theme & plugin trị giá 60.000.000 VND
HOSTING PREMIUM 10
Siêu tốc
395,280đ
-20%
494,100đ
/Tháng
8 Core
10GB RAM
10GB NVMe
4 Domain
SSL Miễn Phí
Tặng theme & plugin trị giá 60.000.000 VND
HOSTING PREMIUM 1
28,080đ
-20%
35,100đ
/Tháng
1 Core
1GB RAM
1GB NVMe
1 Domain
SSL Miễn Phí
Tặng theme & plugin trị giá 60.000.000 VND
HOSTING PREMIUM 2
42,480đ
-20%
53,100đ
/Tháng
1 Core
2GB RAM
2GB NVMe
1 Domain
SSL Miễn Phí
Tặng theme & plugin trị giá 60.000.000 VND
HOSTING PREMIUM 3
49,680đ
-20%
62,100đ
/Tháng
2 Core
2GB RAM
2GB NVMe
1 Domain
SSL Miễn Phí
Tặng theme & plugin trị giá 60.000.000 VND
Plugin: WP Rocket
Plugin: Rank Math SEO Pro
Plugin: Elementor Pro
Plugin: WPML
Plugin: WP Smush Pro
Theme + plugin: WP Astra Growth Bundle
Theme + plugin: MyThemeShop
Theme: Divi
Theme: Bricks
Nhanh tay liên hệ Vietnix để được tư vấn gói hosting phù hợp.
Hướng dẫn thiết lập A/B testing bằng Microsoft Clarity và GA4
Dưới đây là hướng dẫn cụ thể cho 3 ví dụ trên:
A/B Testing giữa Static Banner Ads với Animated Banner Ads
Bước 1: Đầu tiên, bạn tải quảng cáo lên trang web của mình bằng Google Ad Manager, sau đó sử dụng API của Google Publisher Tag API (GPT API) để chuyển thông tin, dữ liệu quan trọng đến ad server của bạn.
Bước 2: Phân chia traffic một cách đồng đều bằng hàm Math.random() trong JavaScript, hàm này sẽ trả về kết quả 1 hoặc 2. Để chạy thử nghiệm, bạn chỉ cần copy và paste đoạn code bên dưới.
<script>
window.group_name = "animated_ads";
let randomNumber = Math.floor(Math.random() * 2) + 1; // either 1 or 2
if( randomNumber == 2 ){
group_name = "static_ads";
}
document.addEventListener('DOMContentLoaded', function() {
//make sure publisher tag has loaded
if( typeof googletag != 'undefined' ){
googletag.pubads().setTargeting("ads_type", group_name );
}
//check if clarity has loaded and set tag "experiment" with values "static_ads" or "animated_ads"
if( typeof window.clarity != 'undefined' ){
window.clarity("set", "experiment", window.group_name );
}
});
</script>
Lưu ý: Ví dụ này sẽ sử dụng key “ads_type” với các giá trị đã được xác định trước là “static_ads” và “animated_ads” để đánh dấu, phân loại quảng cáo trong GAM, từ đó chạy các báo cáo về hiệu suất của từng loại quảng cáo trên GAM (chẳng hạn như tỷ lệ nhấp chuột – CTR) và so sánh chúng. Sau đó, ở phần <head> của trang web, bạn có thể copy và dán mã JS hoặc sử dụng thẻ HTML tùy chỉnh GTM trên mỗi lần hiển thị trang mà bạn gắn quảng cáo.
Phân loại quảng cáo trong GAM
Bước 3: Khi event DOMContentLoaded được kích hoạt, các publisher tag và Clarity sẽ được tải lên. Nếu như tiến trình này không xảy ra, bạn có thể đặt mã JS vào bên trong hàm setTimeout() để đảm bảo rằng lệnh được thực thi sau một thời gian trễ.
Bước 4: Với key “ads_type” trong GAM, bạn có thể cấu hình các loại banner khác nhau để thực hiện phân tích cho từng nhóm. Trước đó, chúng ta đã thiết lập key này như một giá trị thẻ cho key “experiment” trong Clarity, nên bạn có thể bắt đầu chạy các báo cáo và phân tích dữ liệu cho từng nhóm.
Mẫu phân tích website trong Clarity
Bước 5: Trong trường hợp bạn muốn thiết lập cụ thể yêu cầu mã hóa nâng cao, hãy nhờ đến sự hỗ trợ của ChatGPT, công cụ này sẽ tiến hành viết code cho bạn.
Bước 6: Để theo dõi sự thay đổi của tỷ lệ chuyển đổi với GA4, bạn có thể thêm vào một custom dimension với key “experiment” trong GA4 và điền dữ liệu vào thẻ cấu hình bằng cách sử dụng phương pháp datalayer.push.
dataLayer.push({ 'experiment': group_name });
Bước 7: Ngoài ra, bạn cũng có thể sử dụng biến GTM JavaScript để lấy giá trị global variable (biến toàn cục) window.group_name mà chúng ta đã thiết lập ở trên như một tham số thử nghiệm.
Có thể sử dụng biến GTM JavaScript để lấy giá trị global variable
Bước 8: Trong thẻ cấu hình, bạn cần thiết lập custom dimension để chuyển giá trị biến đó như hình ảnh minh họa dưới đây:
Tiến hành thiết lập custom dimension
Bước 9: Điền “experiment” từ custom dimension JS global window.group_name là hoàn tất.
Như vậy, custom dimension thử nghiệm của bạn đã được chuyển sang cho GA4 và bạn đã có thể lọc báo cao bằng cách sử dụng custom dimension “experiment.”.
Lưu ý: Khi đặt tên cho custom dimension, bạn không nên sử dụng bất kỳ tên reserved parameter (tham số riêng) nào để đảm bảo rằng hệ thống có thể hoạt động một cách bình thường.
2. Sidebar bên trái với sidebar bên phải
Nhìn chung, nguyên tắc thiết lập A/B testing cho sidebar bên trái và sidebar bên phải cũng tương tự với hướng dẫn trên.
Bước 1: Đầu tiên, bạn sử dụng hàm Math.random() trong JavaScript với câu lệnh sau:
<style>
/*when adding this class to the content div it swaps sidebar position */
.main_content_right{
flex-direction: row-reverse;
}
</style>
<script>
// since we have no any css under .main_content_left class it will do nothing i.e. sidebar will be the default right;
window.group_name = "main_content_left"
let randomNumber = Math.floor(Math.random() * 2) + 1; // either 1 or 2.
//let randomNumber = Math.floor(Math.random() * 5) + 1; // random number from 1-5. use this if you want to run test on the sample of your traffic e.g. on the 25%.
if( randomNumber == 2 ){
group_name = "main_content_right" // we will use group_name as a class name and a custom tag at the same time;
}
//If DOMContentLoaded has loaded run the code, otherwise attach an event listener
if (document.readyState === 'complete') {
move_sidebar( group_name )
} else {
// DOMContentLoaded event has not yet fired
document.addEventListener('DOMContentLoaded', function() {
move_sidebar( group_name );
});
}
function move_sidebar( class_name ){
document.querySelector('.sej-sect>div').classList.add(class_name);// add class
//check if clarity has loaded and set tag "experiment" with values "right_sidebar" or "left_sidebar"
if( typeof window.clarity != 'undefined' ){
window.clarity("set", "experiment", class_name );
}
console.log('sidebar position', class_name );
}
</script>
Lưu ý: Ví dụ này đang thay đổi bố cục trang web bằng cách thay đổi DOM. Khi áp dụng vào trường hợp cụ thể của bạn, bạn có thể điều chỉnh bằng CSS và sử dụng ChatGPT để viết code tùy chỉnh.
Bước 2: Sau khi triển khai được một khoảng thời gian, bạn đã sở hữu đủ dữ liệu để phục vụ cho split testing. Bây giờ, hãy sử dụng bộ lọc thẻ “experiment=main_content_left” hoặc “experiment=main_content_right” của Microsoft Clarity để phân đoạn dữ liệu một cách dễ dàng.
A/B Testing với Menu Label
Ở hướng dẫn này, chúng ta vẫn sẽ tiếp tục sử dụng hàm Math.random() và thay đổi DOM trong JavaScript.
Trong ví dụ này, chúng ta sẽ tiến hành thử nghiệm menu label “Latest” và “News” trên thanh điều hướng của trang web. Để làm được điều đó, bạn cần lấy đường dẫn của JS bằng cách sử dụng công cụ DevTools của trình duyệt như hình minh họa:
Cách copy JS path từ công cụ DevTools
Bước 1: Dùng đường dẫn JS để truy cập vào các phần tử trong DOM và thay đổi menu label với tập lệnh sau:
<script>
//We want to test the menu label for the Latest section in our website's navigation bar
window.group_name = "Latest"
let randomNumber = Math.floor(Math.random() * 2) + 1; // either 1 or 2.
//let randomNumber = Math.floor(Math.random() * 5) + 1; // random number from 1-5. use this if you want to run test on the sample of your traffic e.g. on the 25%.
if( randomNumber == 2 ){
group_name = "News" // we will use group_name as a label and a custom tag at the same time;
}
//If DOMContentLoaded has loaded run the code, otherwise attach an event listener
if (document.readyState === 'complete') {
change_label( menu_label )
} else {
// DOMContentLoaded event has not yet fired
document.addEventListener('DOMContentLoaded', function() {
change_label( menu_label );
});
}
function change_label( menu_label ){
document.querySelector("#main-navigation > li:nth-child(1) > a").textContent=menu_label;//set label, in your case it will be different
//check if clarity has loaded and set tag "experiment" with values "right_sidebar" or "left_sidebar"
if( typeof window.clarity != 'undefined' ){
window.clarity("set", "experiment", menu_label );
}
console.log('menu label', menu_label );
}
</script>
Bước 2: Để thêm code, bạn có thể chèn chúng vào phần <head> của trang web hoặc sử dụng GTM như hướng dẫn ở những phần trên của bài viết.
Lưu ý: Nếu bạn đang theo dõi hiệu suất bằng GA4, bạn cần sử dụng custom dimension
Bước 3: Để tạo báo cáo trong GA4, bạn cần sử dụng “Explorer Reports“, sau đó lọc chỉ số bằng custom dimension “experiment” là hoàn tất.
Cùng tham khảo thêm một số bài viết liên quan tới website có thể bạn quan tâm:
Vietnix – Dịch vụ Hosting VPS tốc độ cao hàng đầu Việt Nam
Vietnix với hơn 11 năm hoạt động đã đồng hành với hơn 50.000 khách hàng cá nhân và doanh nghiệp thông qua hệ sinh thái dịch vụ gồm: Hosting, VPS, Firewall, máy chủ, tên miền và email,… Đến năm 2022 Vietnix vinh dự được nhận giải Thương hiệu Việt Nam xuất sắc.
Với tỷ lệ 97% khách hàng sau khi sử dụng dịch vụ tại Vietnix đã giới thiệu đến bạn bè, đồng nghiệp,… cũng là một minh chứng cho chất lượng dịch vụ luôn đáp ứng được mọi nhu cầu của khách hàng.
Do đó, bạn có thể hoàn toàn yên tâm khi sử dụng dịch vụ tại Vietnix.
Địa chỉ: 265 Hồng Lạc, Phường 10, Quận Tân Bình, Thành Phố Hồ Chí Minh.
Hotline: 1800 1093
Email: sales@vietnix.com.vn
Lời kết
Bên trên là hướng dẫn cách thiết lập A/B testing bằng Microsoft Clarity và GA4 mà bạn có thể tham khảo. Mặc dù hướng dẫn trên đòi hỏi bạn phải sử dụng các đoạn code, nhưng bạn có thể nhờ đến sự hỗ trợ của ChatGPT để tối ưu hóa quy trình này. Ngoài ra, đừng quên chia sẻ bài viết để mọi người cùng tham khảo nhé.
Tôi là Nguyễn Thanh Trường - Deputy Marketing Manager tại Vietnix. Bằng những hiểu biết và kinh nghiệm của mình trong lĩnh vực WordPress và SEO, tôi đã ứng dụng và triển khai tối ưu On-page và Off-page cho Vietnix với kết quả đạt được là lượng chuyển đổi khách hàng chất lượng. Hy vọng với những kiến thức mà tôi chia sẻ có thể mang đến nhiều giá trị về chiến dịch SEO cũng như Marketing doanh nghiệp của bạn.
Đăng ký nhận tin
Để không bỏ sót bất kỳ tin tức hoặc chương trình khuyến mãi từ Vietnix