How To Setup A/B Testing Using Microsoft Clarity And GA4 With Examples

एक मार्केटर के रूप में, आप अपनी वेबसाइट के प्रदर्शन में सुधार करना चाहते हैं और अधिक रूपांतरण प्राप्त करना चाहते हैं। कई मामलों में, ए / बी परीक्षण उत्तर हो सकता है।

किसी वेबपेज के दो संस्करणों की तुलना करके, आप यह निर्धारित कर सकते हैं कि कौन सा आपके लक्ष्यों को प्राप्त करने में अधिक प्रभावी है।

इस लेख में, हम आपको ए/बी परीक्षण सेट अप करने के चरणों के बारे में बताएंगे माइक्रोसॉफ्ट स्पष्टता और GA4.

माइक्रोसॉफ्ट क्लैरिटी एक फ्री हीटमैप एनालिटिक्स टूल है जिसमें ए/बी टेस्टिंग सेट अप करने के लिए सभी जरूरी सेगमेंटेशन फंक्शंस हैं, खासकर तब जब गूगल ऑप्टिमाइज सूरज की स्थापना एक बाज़ारिया के रूप में; आप की जरूरत है विकल्प अपने परीक्षण चलाने के तरीके।

A/B टेस्टिंग सेट अप करने का सबसे आसान और सबसे सीधा तरीका वेबपेज के दो संस्करण सेट करना और प्रत्येक पर सीधे ट्रैफ़िक सेट करना है।

Microsoft Clarity के URL फ़िल्टर का उपयोग करके, आप डेटा को विभाजित कर सकते हैं और अपने वेबपेज के विभिन्न संस्करणों के लिए उनका विश्लेषण कर सकते हैं।

लेकिन क्या होगा यदि आप अलग-अलग URL के बिना लाइव ट्रैफ़िक पर पृष्ठ के विभिन्न लेआउट का परीक्षण करना चाहते हैं?

सौभाग्य से, स्पष्टता है कस्टम टैग (और GA4 कस्टम आयाम), ताकि आप अपने उपयोगकर्ताओं को टैग कर सकें और उन्हें रिपोर्ट में फ़िल्टर कर सकें.

Microsoft स्पष्टता कस्टम टैग क्या हैं?

क्लैरिटी के कस्टम टैग स्वैच्छिक अल्फ़ान्यूमेरिक कस्टम लेबल हैं जिन्हें आप विज़िटर को असाइन कर सकते हैं और बाद में डेटा को विभाजित करने और विभिन्न परीक्षण समूहों के लिए रिकॉर्डिंग और हीटमैप का विश्लेषण करने के लिए उपयोग कर सकते हैं।

क्या Microsoft स्पष्टता में कस्टम टैग की सीमाएँ हैं?

कोई सीमा नहीं है। आप अपनी परियोजना में बिना किसी प्रतिबंध या सीमाओं के जितने चाहें उतने टैग जोड़ सकते हैं।

Microsoft Clarity का उपयोग करके किसी विज़िटर को कैसे टैग करें

टैग करना उतना ही सरल है जितना कि JavaScript कोड का एक छोटा सा स्निपेट चलाना:

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

लेकिन मैं आपको एक विशिष्ट, वास्तविक जीवन के उदाहरण के माध्यम से मार्गदर्शन करना चाहता हूं कि हमारे अनुभव से इसका उपयोग कैसे किया जा सकता है।

SEJ में, हम विभिन्न प्रकार के विज्ञापनों और वेबपेज लेआउट पर विभिन्न परीक्षण करते हैं ताकि यह जानकारी प्राप्त की जा सके कि बैनर विज्ञापन या वेबपेज लेआउट के प्रकार जैसे कारकों से उपयोगकर्ता व्यवहार कैसे प्रभावित होता है।

हमारे द्वारा चलाए जा रहे A/B परीक्षणों के उदाहरण:

• स्थिर बैनर विज्ञापन बनाम एनिमेटेड बैनर विज्ञापन।
• लेफ्ट साइडबार बनाम राइट साइडबार।
• मेनू लेबल बदलना।

लक्ष्य यह समझना है कि किस मामले में उपयोगकर्ता लेख में गहराई से स्क्रॉल करते हैं और इस प्रकार पढ़ने में संलग्न होते हैं – या क्या मेनू लेबल बदलने से अधिक क्लिक प्राप्त करने में मदद मिल सकती है।

1. ए / बी परीक्षण स्थिर बैनर विज्ञापन बनाम। एनिमेटेड बैनर विज्ञापन

हम अपने वेबपेज पर विज्ञापनों को लोड करने के लिए Google Ad Manager का उपयोग करते हैं, और इस प्रकार हम इसका उपयोग कर सकते हैं Google प्रकाशक टैग हमारे विज्ञापन सर्वर को मुख्य मान भेजने के लिए एपीआई।

हम जावास्क्रिप्ट में Math.random() फ़ंक्शन का उपयोग करके ट्रैफ़िक को समान रूप से वितरित करते हैं, जो 1 या 2 देता है।

प्रयोग को चलाने के लिए, नीचे कॉपी और पेस्ट करें।

हम GAM में पूर्वनिर्धारित मानों “स्थिर_विज्ञापन” और “एनिमेटेड_विज्ञापन” के साथ कुंजी “विज्ञापन_प्रकार” का उपयोग करते हैं, साथ ही प्रत्येक समूह के लिए CTR जैसे GAM पक्ष पर विज्ञापनों की रिपोर्ट चलाने में सक्षम होते हैं।

फिर अपने वेबपेज सेक्शन में JS कोड को कॉपी और पेस्ट करें, या आप 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” इवेंट शुरू होता है, तो प्रकाशक टैग और क्लैरिटी आमतौर पर लोड हो जाते हैं। यदि नहीं, तो आप जेएस को अंदर लपेटने पर विचार कर सकते हैं सेटटाइमआउट () थोड़ी देरी से कार्य करें।

GAM में ads_type कुंजी के साथ, प्रत्येक समूह को प्रदान किए जाने वाले विभिन्न बैनर प्रकारों को कॉन्फ़िगर करना संभव है। जैसा कि हमारे पास स्पष्टता में “प्रयोग” कुंजी के लिए एक टैग मान के रूप में कुंजी सेट अप है, हम प्रत्येक समूह के लिए डेटा का विश्लेषण कर सकते हैं और आपकी रिपोर्ट चला सकते हैं।

यदि आपको एक विशिष्ट सेटअप की आवश्यकता है जिसके लिए उन्नत कोडिंग की आवश्यकता है तो आप इसका उपयोग करने का प्रयास कर सकते हैं चैटजीपीटी आपके लिए एक कोड लिखने के लिए.

अगर आप ट्रैक करना चाहते हैं कि GA4 में उपयोगकर्ताओं की कन्वर्ज़न दरें कैसे बदलती हैं, तो आप एक जोड़ सकते हैं कस्टम आयाम GA4 में कुंजी “प्रयोग” के साथ और डेटालेयर.पुश विधि का उपयोग करके कॉन्फ़िगरेशन टैग लोड होने पर इसे पॉप्युलेट करें।

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

वैकल्पिक रूप से, आप जीटीएम का उपयोग कर सकते हैं विंडो.ग्रुप_नाम ग्लोबल वेरिएबल वैल्यू प्राप्त करने के लिए जावास्क्रिप्ट वेरिएबल जिसे हमने परीक्षण पैरामीटर के रूप में ऊपर सेट किया है।

और कॉन्फ़िगरेशन टैग में, उस वेरिएबल मान को पास करने के लिए एक कस्टम डाइमेंशन सेट अप करें, जैसा कि नीचे दिखाया गया है:

वैश्विक JS चर window.group_name, और वॉइला से कस्टम आयाम “प्रयोग” को पॉप्युलेट करें!

अब आपका प्रयोग कस्टम आयाम GA4 को पास कर दिया गया है और आप कस्टम आयाम “प्रयोग” का उपयोग करके रिपोर्ट फ़िल्टर कर सकते हैं।

(त्वरित टिप: अपने कस्टम आयामों का नामकरण करते समय, सुनिश्चित करें कि आप इनमें से किसी का भी उपयोग नहीं करते हैं आरक्षित पैरामीटर इसे ठीक से काम करने के लिए नाम।)

2. लेफ्ट साइडबार बनाम। राइट साइडबार

सिद्धांत वही है। परीक्षण विभाजित करने के लिए JavaScript में 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 के टैग फ़िल्टर “प्रयोग = main_content_left” या “प्रयोग = main_content_right” का उपयोग कर सकते हैं।

3. ए/बी परीक्षण मेनू लेबल

फिर से हम Math.random() फ़ंक्शन का उपयोग करेंगे और जावास्क्रिप्ट के माध्यम से DOM में हेरफेर करेंगे।

हम अपनी वेबसाइट के नेविगेशन बार में मेनू लेबल “नवीनतम” बनाम “समाचार” का परीक्षण करना चाहते हैं।

उसके लिए, ब्राउज़र DevTools का उपयोग करके JS पथ प्राप्त करें जैसा कि नीचे दिखाया गया है।

हम DOM में तत्वों तक पहुँचने और लेबल बदलने के लिए JS पथ का उपयोग करेंगे।

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

अपना कोड जोड़ने के लिए, आप या तो इसे अपने वेबपेज के अनुभाग में डाल सकते हैं या उपयोग कर सकते हैं जीटीएमजैसा कि पहले बताया गया है।

ध्यान दें कि अगर आप GA4 से ट्रैक कर रहे हैं, तो आपको एक कस्टम डाइमेंशन का भी इस्तेमाल करना होगा.

GA4 में रिपोर्ट निकालने के लिए आपको “ का उपयोग करना होगाएक्सप्लोरर रिपोर्ट” और अपनी मीट्रिक को कस्टम आयाम “प्रयोग” के आधार पर फ़िल्टर करें।

निष्कर्ष

क्रय करना ए / बी परीक्षण उपकरण महंगा हो सकता है, और हो सकता है कि वे हमेशा आपके लक्ष्यों के लिए आवश्यक विशिष्ट सुविधाओं की पेशकश न करें।

उदाहरण के लिए, हमारे द्वारा आजमाए गए ए/बी परीक्षण उपकरणों में से कोई भी कस्टम कोडिंग के बिना विभिन्न प्रकार के विज्ञापनों के परीक्षण के लिए उपयोगकर्ता के अनुकूल इंटरफेस प्रदान नहीं कर सका।

हालाँकि, यहाँ वर्णित विधियों को कस्टम कोडिंग सीखने के लिए कुछ प्रयासों की आवश्यकता हो सकती है।

हालाँकि, कोड लिखने में आपकी सहायता के लिए उपलब्ध ChatGPT के साथ, प्रक्रिया बहुत कठिन नहीं होनी चाहिए।

और अधिक संसाधनों:

---

विशेष रुप से प्रदर्शित चित्र: बर्दुन इलिया / शटरस्टॉक