Microsoft Clarity ve GA4 Kullanarak A/B Testini Kurma

Bir pazarlamacı olarak, web sitenizin performansını iyileştirmek ve daha fazla dönüşüm elde etmek istiyorsunuz. Çoğu durumda A/B testi cevap olabilir.

Bir web sayfasının iki sürümünü karşılaştırarak, hedeflerinize ulaşmada hangisinin daha etkili olduğunu belirleyebilirsiniz.

Bu makalede, Microsoft Clarity ve GA4 kullanarak A/B testi kurma adımlarında size yol göstereceğiz.

Microsoft Clarity, özellikle Google Optimize’ın bir pazarlamacı olarak sona erdiği zamanlarda, A/B testi kurmak için gerekli tüm segmentasyon işlevlerine sahip ücretsiz bir ısı haritası analiz aracıdır; testlerinizi çalıştırmak için alternatif yollara ihtiyacınız var.

A/B testi kurmanın en kolay ve en doğrudan yolu, web sayfasının iki sürümünü ayarlamak ve trafiği her birine yönlendirmektir.

Microsoft Clarity’nin bir URL filtresini kullanarak, verileri bölümlere ayırabilir ve web sayfanızın farklı sürümleri için analiz edebilirsiniz.

Ancak, farklı URL’ler olmadan canlı trafikte sayfanın farklı düzenlerini test etmek isterseniz ne olur?

Neyse ki, Clarity’nin özel etiketleri (ve GA4 özel boyutları) vardır, böylece kullanıcılarınızı etiketleyebilir ve raporlarda filtreleyebilirsiniz.

Microsoft Clarity Özel Etiketleri Nedir?

Clarity’nin özel etiketleri, ziyaretçiye atayabileceğiniz ve daha sonra farklı test grupları için verileri bölümlere ayırmak ve kayıtları ve ısı haritalarını analiz etmek için kullanabileceğiniz isteğe bağlı alfanümerik özel etiketlerdir.

Microsoft Clarity’de Özel Etiketlerin Sınırları Var mı?

Sınır yok. Herhangi bir kısıtlama veya sınırlama olmaksızın projenize istediğiniz kadar etiket ekleyebilirsiniz.

Microsoft Clarity Kullanarak Bir Ziyaretçiyi Etiketleme

Etiketleme, küçük bir JavaScript kodu parçasını çalıştırmak kadar basittir:

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

Ancak, bunun kendi deneyimlerimizden nasıl kullanılabileceğine dair gerçek hayattan belirli bir örnekle size rehberlik etmek istiyorum.

SEJ’de, kullanıcı davranışının banner reklam türü veya web sayfası düzeni gibi faktörlerden nasıl etkilendiğine dair içgörüler elde etmek için farklı türde reklamlar ve web sayfası düzenleri üzerinde çeşitli testler yürütürüz.

Yürüttüğümüz A/B testlerine örnekler:

• Statik banner reklamlar ve animasyonlu banner reklamlar.
• Sol kenar çubuğuna karşı sağ kenar çubuğu.
• Menü etiketlerini değiştirme.

Amaç, kullanıcıların hangi durumda makaleyi daha derine kaydırarak okumaya başladığını veya menü etiketlerini değiştirmenin daha fazla tıklama sağlamaya yardımcı olup olmayacağını anlamaktır.

1. A/B Testi Statik Banner Reklamlar Vs. Animasyonlu Banner Reklamlar

Web sayfamıza reklam yüklemek için Google Reklam Yöneticisi’ni kullanıyoruz ve bu nedenle, anahtar değerleri reklam sunucumuza iletmek için Google Yayıncı Etiketi API’sini kullanabiliriz.

JavaScript’te 1 veya 2 döndüren Math.random() işlevini kullanarak trafiği eşit şekilde dağıtırız.

Denemeyi çalıştırmak için aşağıdakileri kopyalayıp yapıştırın.

Her grup için TO gibi GAM tarafındaki reklam raporlarını da çalıştırabilmek için GAM’de “static_ads” ve “animated_ads” önceden tanımlanmış değerlerle “ads_type” anahtarını kullanıyoruz.

Ardından, web sayfanızın bölümüne JS kodunu kopyalayıp yapıştırın veya reklamlarınızın olduğu her sayfa görüntülemede GTM özel HTML etiketini kullanabilirsiniz.

<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” olayı tetiklendiğinde, genellikle yayıncı etiketi ve Clarity yüklenir. Değilse, JS’yi küçük bir gecikmeyle bir setTimeout() işlevine sarmayı düşünebilirsiniz.

GAM’deki ads_type anahtarı ile her gruba sunulacak farklı banner türleri yapılandırılabilir. Bu anahtarı Clarity’de “deney” anahtarı için bir etiket değeri olarak ayarladığımız için, her grup için verileri analiz edebilir ve raporlarınızı çalıştırabiliriz.

Gelişmiş kodlama gerektiren belirli bir kuruluma ihtiyacınız varsa, sizin için bir kod yazmak üzere ChatGPT’yi kullanmayı deneyebilirsiniz.

Kullanıcıların dönüşüm oranlarının GA4’te nasıl değiştiğini izlemek istiyorsanız, GA4’te “deney” anahtarıyla özel bir boyut ekleyebilir ve datalayer.push yöntemini kullanarak yapılandırma etiketi yüklendiğinde bunu doldurabilirsiniz.

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

Alternatif olarak, GTM’yi kullanabilirsiniz. Yukarıda bir test parametresi olarak belirlediğimiz window.group_name global değişken değerini almak için JavaScript değişkeni.

Yapılandırma etiketinde, bu değişken değerini aşağıda gösterildiği gibi iletmek için özel bir boyut ayarlayın:

Özel boyut “deneyini” global JS değişkeni window.group_name’den doldurun ve işte oldu!

Artık deneme özel boyutunuz GA4’e geçirildi ve raporları “deneme” özel boyutunu kullanarak filtreleyebilirsiniz.

(Hızlı ipucu: Özel boyutlarınızı adlandırırken, düzgün çalışması için ayrılmış parametre adlarından herhangi birini kullanmadığınızdan emin olun.)

2. Sol Kenar Çubuğuna Karşı. Sağ Kenar Çubuğu

İlke aynıdır. Testi bölmek için JavaScript’te Math.random() işlevini kullanın.

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

Bu durumda, düzeni değiştirmek için DOM’u manipüle ediyoruz.

Özel durumunuzda, düzen ayarlamaları için farklı CSS uygulamanız gerekebilir. Özel kodlamanızda size yardımcı olması için ChatGPT’yi kullanışlı bir araç olarak kullanabilirsiniz.

Belirli bir süre sonra, bölünmüş testiniz için yeterli örnek veriye sahip olduğunuzda, verilerinizi bölümlere ayırmak için Microsoft Clarity’nin “experiment=main_content_left” veya “experiment=main_content_right” etiket filtresini kullanabilirsiniz.

3. A/B Testi Menü Etiketleri

Yine Math.random() işlevini kullanacağız ve DOM’u JavaScript aracılığıyla manipüle edeceğiz.

Web sitemizin gezinme çubuğundaki “Son” ve “Haberler” menü etiketini test etmek istiyoruz.

Bunun için aşağıda gösterildiği gibi tarayıcı DevTools’u kullanarak JS yolunu bulalım.

DOM’daki öğelere erişmek ve etiketi değiştirmek için JS yolunu kullanacağız.

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

Kodunuzu eklemek için, onu web sayfanızın bölümüne ekleyebilir veya daha önce açıklandığı gibi GTM’yi kullanabilirsiniz.

GA4 ile izleme yapıyorsanız özel bir boyut kullanmanız gerekeceğini unutmayın.

GA4’te rapor almak için “Gezgin Raporları”nı kullanmanız ve metriğinizi özel boyut “denemesine” göre filtrelemeniz gerekir.

Çözüm

A/B test araçları satın almak pahalı olabilir ve hedefleriniz için ihtiyaç duyduğunuz belirli özellikleri her zaman sunmayabilir.

Örneğin, denediğimiz A/B test araçlarından hiçbiri, özel kodlama olmadan farklı reklam türlerini test etmek için kullanıcı dostu bir arayüz sağlayamadı.

Ancak burada açıklanan yöntemler, özel kodlamayı öğrenmek için biraz çaba gerektirebilir.

Bununla birlikte, kod yazmanıza yardımcı olacak ChatGPT ile işlem çok zor olmamalıdır.

Daha fazla kaynak:

---

Öne Çıkan Resim: Burdun İliya/Shutterstock