نحوه راه اندازی تست A/B با استفاده از Microsoft Clarity و GA4

به عنوان یک بازاریاب، شما می خواهید عملکرد وب سایت خود را بهبود بخشید و تبدیل های بیشتری را افزایش دهید. در بسیاری از موارد، تست A/B می تواند پاسخگو باشد.

با مقایسه دو نسخه از یک صفحه وب، می توانید تعیین کنید که کدام یک در دستیابی به اهداف شما مؤثرتر است.

در این مقاله، شما را با مراحل راه‌اندازی تست A/B با استفاده از Microsoft Clarity و GA4 آشنا می‌کنیم.

Microsoft Clarity یک ابزار رایگان تجزیه و تحلیل نقشه حرارتی است که دارای تمام عملکردهای بخش بندی لازم برای راه اندازی تست A/B است، به خصوص زمانی که Google Optimize به عنوان یک بازاریاب غروب می کند. شما به روش های جایگزین برای اجرای تست های خود نیاز دارید.

ساده ترین و ساده ترین راه برای راه اندازی تست A/B، راه اندازی دو نسخه از صفحه وب و هدایت ترافیک به هر کدام است.

با استفاده از فیلتر URL Microsoft Clarity، می توانید داده ها را تقسیم بندی کنید و آنها را برای نسخه های مختلف صفحه وب خود تجزیه و تحلیل کنید.

اما اگر بخواهید طرح‌بندی‌های مختلف صفحه را در ترافیک زنده بدون URL های مختلف آزمایش کنید، چه؟

خوشبختانه، Clarity دارای برچسب های سفارشی (و ابعاد سفارشی GA4) است، بنابراین می توانید کاربران خود را برچسب گذاری کرده و آنها را در گزارش ها فیلتر کنید.

برچسب های سفارشی شفافیت مایکروسافت چیست؟

برچسب‌های سفارشی Clarity برچسب‌های سفارشی الفبایی و عددی دلخواه هستند که می‌توانید به بازدیدکننده اختصاص دهید و بعداً برای تقسیم‌بندی داده‌ها و تجزیه و تحلیل ضبط‌ها و نقشه‌های حرارتی برای گروه‌های آزمایشی مختلف استفاده کنید.

آیا محدودیت هایی برای برچسب های سفارشی در Microsoft Clarity وجود دارد؟

هیچ محدودیتی وجود ندارد. شما می توانید هر تعداد تگ را که می خواهید به پروژه خود بدون هیچ محدودیت یا محدودیتی اضافه کنید.

چگونه با استفاده از Microsoft Clarity یک بازدیدکننده را برچسب گذاری کنیم

برچسب گذاری به سادگی اجرای یک قطعه کوچک از کد جاوا اسکریپت است:

clarity("set", "experiment", "group_name");

اما من می خواهم شما را از طریق یک مثال واقعی و خاص راهنمایی کنم که چگونه می توان از تجربه ما استفاده کرد.

در SEJ، ما آزمایش‌های مختلفی را بر روی انواع مختلف تبلیغات و طرح‌بندی صفحه وب انجام می‌دهیم تا بینشی در مورد اینکه چگونه رفتار کاربر تحت تأثیر عواملی مانند نوع تبلیغات بنر یا طرح‌بندی صفحه وب قرار می‌گیرد، به دست آوریم.

نمونه هایی از تست های A/B که در حال اجرا هستیم:

• تبلیغات بنری ثابت در مقابل تبلیغات بنری متحرک.
• نوار کناری چپ در مقابل نوار کناری سمت راست.
• تغییر برچسب های منو

هدف این است که بفهمیم در چه مواردی کاربران عمیق‌تر به مقاله پیمایش می‌کنند و بنابراین درگیر خواندن می‌شوند – یا اینکه تغییر برچسب‌های منو می‌تواند به کلیک‌های بیشتر کمک کند.

1. تست A/B تبلیغات بنری ثابت در مقابل. تبلیغات بنری متحرک

ما از Google Ad Manager برای بارگیری تبلیغات در صفحه وب خود استفاده می کنیم و بنابراین می توانیم از API برچسب ناشر Google برای ارسال مقادیر کلیدی به سرور تبلیغات خود استفاده کنیم.

ما با استفاده از تابع Math.random() در جاوا اسکریپت که 1 یا 2 را برمی گرداند، ترافیک را به طور مساوی توزیع می کنیم.

برای اجرای آزمایش، موارد زیر را کپی و جایگذاری کنید.

ما از کلید “ads_type” با مقادیر از پیش تعریف شده “static_ads” و “animated_ads” در GAM استفاده می‌کنیم تا بتوانیم گزارش‌هایی از تبلیغات را در سمت GAM نیز اجرا کنیم، مانند CTR برای هر گروه.

سپس در بخش صفحه وب خود، کد JS را کپی و جایگذاری کنید، یا می توانید از تگ HTML سفارشی GTM در هر صفحه نمایشی که در آن تبلیغات دارید استفاده کنید.

<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>

وقتی رویداد «DOMContentLoaded» فعال می‌شود، معمولاً برچسب ناشر و Clarity بارگیری می‌شوند. در غیر این صورت، می توانید JS را در داخل تابع setTimeout() با کمی تاخیر در نظر بگیرید.

با کلید ads_type در GAM، می‌توان انواع بنرهای مختلفی را برای ارائه به هر گروه پیکربندی کرد. از آنجایی که ما آن کلید را به عنوان یک مقدار برچسب برای کلید “آزمایش” در Clarity تنظیم کرده‌ایم، می‌توانیم داده‌های هر گروه را تجزیه و تحلیل کنیم و گزارش‌های شما را اجرا کنیم.

اگر به تنظیمات خاصی نیاز دارید که به کدنویسی پیشرفته نیاز دارد، می‌توانید از ChatGPT برای نوشتن کد برای شما استفاده کنید.

اگر می‌خواهید نحوه تغییر نرخ تبدیل کاربران در GA4 را ردیابی کنید، می‌توانید یک بعد سفارشی را با کلید “آزمایش” در GA4 اضافه کنید و با استفاده از روش datalayer.push آن را هنگام بارگیری برچسب پیکربندی پر کنید.

dataLayer.push({ 'experiment': group_name });

یا می توانید از GTM استفاده کنید متغیر جاوا اسکریپت برای دریافت مقدار متغیر جهانی window.group_name که در بالا به عنوان پارامتر تست تنظیم کردیم.

و در تگ پیکربندی، یک بعد سفارشی برای عبور آن مقدار متغیر مانند شکل زیر تنظیم کنید:

بعد سفارشی “آزمایش” را از متغیر JS جهانی window.group_name و voila پر کنید!

اکنون بعد سفارشی آزمایش شما به GA4 منتقل می‌شود و می‌توانید گزارش‌ها را با استفاده از «آزمایش» بعد سفارشی فیلتر کنید.

(نکته سریع: هنگام نامگذاری ابعاد سفارشی خود، مطمئن شوید که از هیچ یک از نام پارامترهای رزرو شده برای عملکرد صحیح آن استفاده نمی کنید.)

2. نوار کناری چپ در مقابل. نوار کناری سمت راست

اصل همین است. از تابع Math.random() در جاوا اسکریپت برای تقسیم تست استفاده کنید.

<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>

در این مورد، ما DOM را به منظور تغییر چیدمان دستکاری می کنیم.

در مورد خاص خود، ممکن است لازم باشد CSS های مختلف را برای تنظیمات طرح بندی اعمال کنید. می توانید از ChatGPT به عنوان یک ابزار مفید برای کمک به کدنویسی سفارشی خود استفاده کنید.

پس از مدت زمان معینی، زمانی که داده‌های نمونه کافی برای تست تقسیم خود دارید، می‌توانید از فیلتر برچسب Microsoft Clarity “experiment=main_content_left” یا “experiment=main_content_right” برای تقسیم‌بندی داده‌های خود استفاده کنید.

3. برچسب های منوی تست A/B

دوباره از تابع Math.random() استفاده می کنیم و DOM را از طریق جاوا اسکریپت دستکاری می کنیم.

ما می خواهیم برچسب منو “آخرین” در مقابل “اخبار” را در نوار ناوبری وب سایت خود آزمایش کنیم.

برای این کار، بیایید مسیر JS را با استفاده از DevTools مرورگر مانند شکل زیر دریافت کنیم.

ما از مسیر JS برای دسترسی به عناصر در DOM و تغییر برچسب استفاده خواهیم کرد.

<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>

برای اضافه کردن کد خود، می توانید آن را در بخش صفحه وب خود وارد کنید یا همانطور که قبلا توضیح داده شد از GTM استفاده کنید.

توجه داشته باشید که اگر با GA4 ردیابی می کنید، باید از یک بعد سفارشی نیز استفاده کنید.

برای جمع‌آوری گزارش‌ها در GA4، باید از «گزارش‌های کاوشگر» استفاده کنید و معیارهای خود را براساس «آزمایش» بعد سفارشی فیلتر کنید.

نتیجه

خرید ابزارهای تست A/B ممکن است گران باشد و ممکن است همیشه ویژگی‌های خاصی را که برای اهدافتان نیاز دارید ارائه ندهند.

به عنوان مثال، هیچ یک از ابزارهای تست A/B که ما امتحان کردیم، نتوانستند یک رابط کاربرپسند برای آزمایش انواع مختلف تبلیغات بدون کدنویسی سفارشی ارائه کنند.

با این حال، روش های توضیح داده شده در اینجا ممکن است نیاز به تلاش برای یادگیری کدنویسی سفارشی داشته باشد.

با وجود ChatGPT در دسترس برای کمک به نوشتن کد، این فرآیند نباید خیلی سخت باشد.

منابع بیشتر:

---

تصویر ویژه: Burdun Iliya/Shutterstock