Дано: Яндекс.Метрика, Google Tag Manager, Рекламные кампании.
Задача: Настроить А/Б тестирование посадочных.
Хочу сразу предупредить, что не настаиваю на именно такой форме реализации. Просто предлагаю взять метод на вооружение.
В общем и целом задача сводится к двум пунктам:
- Настройка подмены содержимого страницы для проведения тестирования.
- Отправка в метрику параметров визита, соответствующих каждой подмене.
Для настройки подмены содержимого страницы используем параметры в ссылках наших объявлений.
Для простоты рассмотрим проведение тестирования двух вариантов посадочной http://c0ntext.com/blog/
- В первом варианте будем отображать заголовок черного цвета (не меняя исходное содержимое страницы).
- Во втором варианте заменим цвет заголовка.
Настройка подмены содержимого страницы для проведения тестирования
Будем делать подмену в зависимости от значения метки ab-test.
Создаем копии наших объявлений. В одних указываем в конце ссылки значение метки ab-test=1, например:
http://c0ntext.com/?ab-test=1
а еще
http://c0ntext.com/?utm_source=yandex&ab-test=1
А в других можно вообще не добавлять нашу метку в ссылку, т.к. подмену содержимого будем осуществлять только при ab-test=1.
Ставим равномерную ротацию объявлений, если есть такая возможность (в Adwords ищите настройки ротации объявлений в настройках кампании).
Реализуем подмену в Google Tag Manager:
Создаем переменную:
Указал название как «ab-test», тип «запрос» и ключ запроса «ab-test». Источник URL — URL страницы/по умолчанию.
Теперь создаем триггер для проверки значения нашей переменной.
Событие — просмотр страницы; условие активации ab-test = 1.
Осталось создать тег для изменения цвета оригинального заголовка на тестовый. Предлагаю при наличии метки аб-тест менять цвет заголовка с черного на красный.
Создаем пользовательский html тег.
Указываем следующий код:
<script type=»text/javascript»>
jQuery.noConflict();
jQuery(«h1:nth-child(1):first a»).css({
‘color’ : ‘red’
});
</script>
где «h1:nth-child(1):first a» — CSS селектор для выбора элемента, цвет которого хотим заменить.
В качестве условия активации выбираем триггер, созданный ранее: «Проверка ab-test — 1».
Сохраняем тег, переходим в режим предварительного просмотра (либо сразу опубликовываем изменения) и сравниваем:
http://c0ntext.com/blog/
http://c0ntext.com/blog/?ab-test=1
Наш тег успешно сработал и цвет нужного элемента изменен на красный.
Осталось настроить отслеживание статистики по переходам на страницы с измененным и исходным содержанием.
Отправка в метрику параметров визита
Для настройки отслеживания эффективности вариантов посадочных воспользуемся параметрами визитов Яндекс.Метрики.
Что такое параметры визитов?
Наиболее подробное описание есть на сайте помощи Яндекс.Метрики.
Если кратко:
Нам необходимо сохранить в объект yaParams все параметры, которые хотим передать в Метрику и вызвать метод params для передачи в метрику произвольных параметров визита.
Общая логика такая:
Если у нас значение метки равно 1, то отправляем в метрику одни данные.
Если оно не равно 1, то отправляем другие.
У вас на сайте уже может быть установлен обычный счетчик метрики через Google Tag Manager.
Но обычный код счетчика тут не подойдет. Чтобы пользоваться методами API, нам нужно использовать следующий код:
<script src=»//mc.yandex.ru/metrika/watch.js» type=»text/javascript»></script>
<script type=»text/javascript»>
var yaCounterXXXXXX = new Ya.Metrika({id: XXXXXX});
</script>
где ХХХХХХ — номер нашего счетчика
Погодите менять код в теге со счетчиком метрики.
Мы будем добавлять код инициализации счетчика перед отправкой параметров визита.
Старый тег добавления счетчика на сайт можно удалить. Если будет нужно, мы легко сможем откатиться до старой версии.
У нас уже есть пользовательский html тег, который срабатывает при значении метки равном единице — это тег «ab-test — 1» (в котором мы вставляли код изменения цвета заголовка).
Добавляем в него следующий код:
<script src=»//mc.yandex.ru/metrika/watch.js» type=»text/javascript»></script>
<script type=»text/javascript»>
var yaCounterXXXXXX = new Ya.Metrika({id: XXXXXX});var yaParams = {ab_test: «красный заголовок»};
yaCounterXXXXXX.params(yaParams);
</script>
где ХХХХХХ — номер нашего счетчика
В параметре ab_test указываем отличительную особенность посадочной A (так, чтобы мы потом в метрике смогли понять о чем идет речь).
Если эту статью читают кодеры: да, инициализацию объекта счетчика (yaCounterXXXXXX) используем тут же. Если использовать отдельный тег для определения объекта счетчика, то наш тег менеджер постарается вызвать метод объекта до того, как он будет определен. Даже если мы зададим приоритеты активации тегов. И даже если мы попробуем задать правило «не активировать тег «ab-test — 1», пока не сработает тег инициализации. Не знаю почему так, но факт. Буду благодарен, если кто-то объяснит причину.
В итоге в этом контейнере у меня получился вот такой код:
<script src=»//mc.yandex.ru/metrika/watch.js» type=»text/javascript»></script>
<script type=»text/javascript»>
jQuery.noConflict();
jQuery(«h1:nth-child(1):first a»).css({
‘color’ : ‘red’
});var yaCounterХХХХХХ = new Ya.Metrika({id: ХХХХХХ});
var yaParams = {ab_test: «красный заголовок»};
yaCounterХХХХХХ.params(yaParams);
</script>
Как обычно, заменяем ХХХХХХ на номер счетчика.
Теперь создадим триггер, который будет проверять чтобы значение пользовательской переменной «ab-test» не было равно 1.
Можно просто скопировать созданный ранее триггер и изменить условие активации.
И создаем пользовательский html тег для отправки информации о том, что заголовок был черного цвета.
Не забываем изменить условие активации на «Проверка ab-test не равно 1».
Код для тега:
<script src=»//mc.yandex.ru/metrika/watch.js» type=»text/javascript»></script>
<script type=»text/javascript»>
var yaCounterХХХХХХ = new Ya.Metrika({id: ХХХХХХ});
var yaParams = {ab_test: «черный заголовок»};
yaCounterХХХХХХ.params(yaParams);
</script>
Сохраняем, опубликовываем (либо переходим в режим отладки).
Проверяем, чтобы в консоли не было ошибок связанных с инициализацией объекта счетчика (таких как referenceError yaCounterXXXXXX is not defined).
На всякий случай, небольшой ликбез:
Если вы пользуетесь хромом или Яндекс.Браузером, то достаточно кликнуть правой кнопкой мыши и выбрать «посмотреть код» во всплывающем меню (либо CTRL+SHIFT+I). В появившемся окне выбираем пункт меню «console».
Красным шрифтом выделены ошибки.
Если ошибок нет, ждем 5 минут и заходим в Метрику, в «Отчеты» => «Стандартные отчеты» => «Содержание» => «Параметры визитов».
И радуемся.
Спасибо, что прочитали пост до конца! Надеюсь, что все было понятно.
Большая просьба при размещении статьи где-либо давать ссылку на источник — эту страницу.
Добавляйтесь в Вконтакте: http://vk.com/cntxt
Я регулярно размещаю там интересную информацию на смежные темы.