Подключение и настройка Google Optimize с помощью ГТМ

 

Google Оптимизация (Google Optimize) — это мощный инструмент, используемый маркетологами и веб-мастерами для проведения A/B-тестов и экспериментов над интерфейсом или контентом сайта, и позволяющий выявить наиболее эффективный вариант для повышения конверсии сайта.

GO имеет широкий набор настроек, что позволяет легко и быстро создать необходимые условия для тестирования и экспериментов (работа с объектами и текстом, цели, таргетинг, распределение трафика). Также ГО легко интегрируется с Google Аналитикой, что позволяет без труда просматривать отчёты в обеих системах.

В данной статье разберёмся, как подключить и настроить Google Optimize в Google Tag Manager.

В первую очередь необходимо убедиться, что код ГТМ есть на сайте. Если его ещё нет, читайте как его установить.

Далее необходимо создать аккаунт и контейнер GO и связать его с Google Аналитикой. Это делается практически также, как и в ГТМ, поэтому описывать его нет смысла. В списке контейнеров будет таблица, из которой нам понадобится запомнить только идентификатор контейнера.

Затем переходим в ГТМ в Переменные и создадим там пользовательскую переменную с названием Google Optimize ID.

Выберем тип переменной Константа

а в Значение пропишем идентификатор созданного контейнера GO

Сохраняем

Затем переходим в Теги и создадим там тег с названием Google Optimize

 

Выберем тип тега Google Optimize

и заполняем следующие поля:

  • Идентификатор Google Оптимизации: {{Google Optimize ID}}
  • Настройки Google Analytics: {{Google Analytics ID}}
  • в Расширенных настройках выбираем раздел Порядок активации тегов и ставим галочку Активировать тег после тега Google Optimize, а в Тег cleanup выбираем тег Google Analytics Counter — то есть тег Google Analytics активируется только после Google Optimize.

В качестве триггера укажем All pages — Просмотр страницы.

Сохраняем и опубликовываем контейнер.

Также Google рекомендует установить код анти-мерцания на страницы, которые планируется тестировать, так как без него посетитель на мгновение может увидеть исходный вариант страницы, что может вызвать недоверие к сайту. Код этого анти-фликера:

<!-- Anti-flicker snippet (recommended)  -->
<style>.async-hide { opacity: 0 !important} </style>
<script>(function(a,s,y,n,c,h,i,d,e){s.className+=' '+y;h.start=1*new Date;
h.end=i=function(){s.className=s.className.replace(RegExp(' ?'+y),'')};
(a[n]=a[n]||[]).hide=h;setTimeout(function(){i();h.end=null},c);h.timeout=c;
})(window,document.documentElement,'async-hide','dataLayer',4000,
{'OPT_CONTAINER_ID':true});</script>

Его необходимо разместить перед кодом ГТМ, а вместо OPT_CONTAINER_ID необходимо вставить идентификатор контейнера Google Tag Manager.

Этот код находится в документации Google Optimize по ссылке: https://support.google.com/optimize/answer/7100284

выглядеть это должно примерно так:

Этот код на 4 секунды задержит отображение страницы и скроет от посетителя эффект мерцания.

На этом настройка завершена.

P.S.: Если сайт не использует ГТМ, то вместо OPT_CONTAINER_ID необходимо вставить идентификатор Google Оптимизации.

Поделиться ссылкой:

 

Читайте также