Как маркетолог, вы хотите повысить производительность своего веб-сайта и получить больше конверсий. Во многих случаях ответом может быть A/B-тестирование.

Сравнивая две версии веб-страницы, вы можете определить, какая версия более эффективно достигает ваших целей.

В этой статье мы расскажем вам, как настроить A/B-тестирование с помощью Microsoft Clarity и GA4.

Microsoft Clarity — это бесплатный инструмент для анализа тепловых карт, который имеет все необходимые функции сегментации для настройки A/B-тестирования, особенно когда Google Optimize выбывает из числа маркетологов; Вам нужны альтернативные способы запуска тестов.

Самый простой и понятный способ настроить A/B-тестирование — настроить две версии веб-сайта и направить трафик на каждую из них.

Используя URL-фильтр Microsoft Clarity, вы можете сегментировать и анализировать данные для разных версий вашей веб-страницы.

Но что, если вы хотите протестировать разные макеты страницы в режиме реального времени без разных URL-адресов?

К счастью, Кларити пользовательские теги (и настраиваемые параметры GA4), чтобы вы могли помечать своих пользователей и фильтровать их в отчетах.

Что такое пользовательские теги Microsoft Clarity?

Пользовательские теги Clarity — это любые буквенно-цифровые пользовательские метки, которые вы можете назначать посетителю, а затем использовать для сегментации данных и анализа записей и тепловых карт для различных тестовых групп.

Существуют ли какие-либо ограничения для пользовательских тегов в Microsoft Clarity?

Нет границ. Вы можете добавить в свой проект столько тегов, сколько захотите, без каких-либо ограничений или ограничений.

Как пометить посетителя с помощью Microsoft Clarity

Пометить так же просто, как запустить небольшой фрагмент кода JavaScript:

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

Но я хочу показать вам конкретный пример из реальной жизни, как это использовать, исходя из нашего опыта.

В SEJ мы проводим различные тесты для различных типов объявлений и макетов веб-страниц, чтобы получить представление о том, как на поведение пользователей влияют такие факторы, как тип рекламного баннера или макет веб-страницы.

Примеры A/B-тестов, которые мы проводим:

• Статические баннеры против анимированных баннеров.
• Левая боковая панель против правой боковой панели.
• Изменить метки меню.

Цель состоит в том, чтобы понять, когда пользователи глубже прокручивают статью и читают, или может ли изменение меток меню помочь увеличить количество кликов.

1. A/B-тестирование статических баннеров и анимированных баннеров.

Мы используем Google Ad Manager, чтобы загружать рекламу на наш веб-сайт и иметь возможность использовать ее таким образом. Тег издателя Google API для передачи значений ключей на наш рекламный сервер.

Мы равномерно распределяем трафик с помощью функции Math.random() в JavaScript, которая возвращает 1 или 2.

Чтобы начать эксперимент, скопируйте и вставьте следующее.

Мы используем ключ «ads_type» с предопределенными значениями «static_ads» и «animated_ads» в GAM, чтобы также иметь возможность создавать отчеты по объявлениям на стороне GAM, например, CTR для каждой группы.

Затем скопируйте в раздел Добавьте код JS на свой сайт и вставьте его, или вы можете использовать GTM пользовательский HTML Отметьте каждый просмотр страницы, на котором вы показываете рекламу.

<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 в установить время ожидания () Функция с небольшой задержкой.

С помощью ключа «ads_type» в GAM можно настроить различные типы баннеров, которые будут отображаться для каждой группы. Поскольку мы установили этот ключ как значение тега для ключа «Эксперимент» в Clarity, мы можем анализировать данные для каждой группы и создавать ваши отчеты.

Если вам нужна конкретная настройка, требующая расширенного кодирования, вы можете попробовать использовать ChatGPT, чтобы написать код для вас.

Если вы хотите отслеживать, как меняются коэффициенты конверсии пользователей в GA4, вы можете добавить специальный параметр в GA4 с ключом «experiment» и заполнить его при загрузке тега конфигурации с помощью datalayer.push.

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

Кроме того, вы можете использовать GTM Переменная JavaScript для получения значения глобальной переменной window.group_name, которое мы установили в качестве тестового параметра выше.

И настройте пользовательский параметр в теге конфигурации, чтобы передать это значение переменной, как показано ниже:

Заполните пользовательское измерение «experiment» из глобальной переменной JS window.group_name и вуаля!

Теперь ваш тестовый специальный параметр передается в GA4, и вы можете фильтровать отчеты, используя специальный параметр «Эксперимент».

(Совет: называя свои специальные параметры, будьте осторожны, чтобы не использовать ни один из этих зарезервированный параметр имена, чтобы заставить его работать правильно.)

2. Левая боковая панель против правой боковой панели

Принцип тот же. Используйте функцию Math.random() в JavaScript, чтобы разбить тест.

<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 через JavaScript.

Мы хотели бы протестировать ярлык меню «Последние» и «Что нового» на панели навигации нашего веб-сайта.

Для этого давайте получим путь 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>

Чтобы добавить свой код, вы можете либо добавить его в раздел включать или использовать на своем веб-сайте ГТкак уже объяснялось.

Обратите внимание, что при отслеживании с помощью GA4 вы также должны использовать специальный параметр.

Чтобы получить отчеты в GA4, вам нужно использовать «Отчеты Explorer» и отфильтровать метрику по пользовательскому параметру «Эксперимент».

Диплом

Инструменты A/B-тестирования могут быть дорогими, и они не всегда могут предлагать конкретные функции, необходимые для достижения ваших целей.

Например, ни один из протестированных нами инструментов A/B-тестирования не смог предоставить удобный интерфейс для тестирования различных типов объявлений без специального кода.

Однако описанные здесь методы могут потребовать некоторых усилий для изучения пользовательского кодирования.

Однако, поскольку ChatGPT доступен вам во время написания кода, этот процесс не должен быть слишком сложным.

Дополнительные ресурсы:

---

Избранное изображение: Илья Бурдун/Shutterstock