Установка Google Optimize (3 варианта)

Приветствую, друзья! На связи Евгений Тридчиков, и в этом видео мы рассмотрим три варианта установки Google Optimize на сайте. В видео понятнее!

Вариант 1 – для Universal Analytics

Если на вашем сайте установлен Universal Analytics обычным способом, то есть без Диспетчера тегов, то вам необходимо сделать три простых действия:

  1. перенести счетчик как можно ближе к открывающему тегу <head>
  2. активировать плагин для загрузки Google Optimize
  3. добавить скрипт задержки отображения контента

Как вы помните из прошлого урока, пошаговая инструкция по установке Google Optimize для Universal Analytics предлагается здесь по умолчанию. Переходим на уровень контейнера, кнопка “Добавить код” – вот она.

Установка Google Optimize (3 варианта)
Для Universal Analytics

Как видите, друзья, ничего сложного. Перемещаем счетчик как можно выше, если он не там. Добавляем строчку кода после объявления ресурса (это кстати и есть подключение плагина). И затем перед счетчиком вставляем скрипт задержки.

Установка Google Optimize (на англ): https://support.google.com/optimize/answer/6262084

Настройки задержки мы разберем в конце ролика, но если коротко – то с помощью данного скрипта мы избегаем возможного мерцания, которое так знакомо при динамической подмене контента. По умолчанию задержка составляет 4 секунды.

Вариант 2 – для Global Site Tag

Если на вашем сайте установлен Global Site Tag обычным способом, то есть без Диспетчера тегов, то порядок действий такой же:

  1. двигаем счетчик как можно выше
  2. активируем плагин для Google Optimize
  3. добавляем перед счетчиком скрипт задержки

Разница в синтаксисе. Вот так выглядит стандартный сниппет Global Site Tag для ресурса, с которым я работаю в данном курсе. А включение плагина – это просто добавление пары ключ-значение в предпоследней строчке.

Установка Google Optimize (3 варианта)
Для Global Site Tag

Как видите, после объявления ресурса мы ставим запятую и далее в фигурных скобках указываем ключ и его значение. В данном случае это идентификатор контейнера Google Optimize, который вы можете найти в интерфейсе.

Вариант 3.1 – Рекомендуемый способ для Google Tag Manager

Если на вашем сайте установлен Universal Analytics с помощью Диспетчер тегов, то рекомендуемый способ установки выглядит так:

  1. добавить на сайт сниппет Universal Analytics из первого варианта (то есть с подключенным плагином Google Optimize)
  2. удалить команду pageview
  3. добавить перед сниппетом скрипт задержки

Как видите, похоже на первый самый простой вариант. Разница в том, что мы удаляем команду просмотра страницы. Это нужно, чтобы Аналитика не фиксировала лишние хиты, ведь тег Universal Analytics по-прежнему работает в Диспетчере тегов.

Рекомендуемая последовательность тегов на сайте: https://support.google.com/optimize/answer/6262084#tagging-best-practices

Также обратите внимание, что видоизмененный сниппет Universal Analytics должен быть выше, чем вызов контейнера Диспетчера тегов. Про рекомендуемый порядок вызова сущностей на сайте читайте в справке – ссылку прикладываю под видео.

Вариант 3.2 – Простой вариант для Диспетчера тегов

Если на вашем сайте установлен Universal Analytics с помощью Диспетчер тегов и предыдущий вариант вам не понравился, можете сделать так:

  1. активировать тег для Google Optimize в Диспетчере тегов
  2. для тега Universal Analytics установить очередь активации после тега Google Optimize
  3. добавить на сайт как можно выше к <head> скрипт задержки
  4. изменить в скрипте задержки идентификатор контейнера Google Optimize на идентификатор контейнера Диспетчера тегов

Этот способ я использовал для своего блога, давайте покажу. Для начала активируем тег Google Optimize. Вставляем идентификатор контейнера Google Optimize, выбираем переменную настроек Google Analytics. Данный тег сохраняем без триггера.

Далее переходим к основному тегу Universal Analytics, который отправляет просмотры всех страниц сайта. Переходим в очередь активации и ставим запуск после тега Google Optimize.

Установка Google Optimize (3 варианта)
Простой вариант для Tag Manager

Далее берем скрипт задержки из интерфейса Google Optimize, меняем айди по умолчанию на айди контейнера Диспетчера тегов. И в таком виде жестко вставляем в шапку сайта как можно выше к открывающему тегу. Готово.

Я использовал этот метод, потому что в Диспетчере тегов среди стандартных шаблонов есть шаблон для установки Google Optimize.

Скрипт задержки

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

Стандартный скрипт задержки, предлагаемый Google Optimize, выглядит так:

<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, {'GTM-XXXXXX':true});</script>

Здесь мы, как неискушенные пользователи, можем настроить хотя бы три сущности.

  • Во-первых, подключить еще один контейнер Google Optimize. Для этого просто через запятую добавляем ключ-значение: айди контейнера и true.
  • Во-вторых, мы можем изменить время задержки. Как вы уже догадались, оно объявляется в этом месте и по умолчанию составляет 4 секунды, что соответствует 4000 миллисекунд.
  • В-третьих, мы можем изменить название класса async-hide, если он уже используется в таблице стилей на вашем сайте. Это вопрос, скорее, к вашему разработчику.

Таким образом, перед добавлением скрипта задержки на сайт вы можете настроить его подходящим образом.

Настройка фрагмента кода Оптимизации, скрывающего страницу: https://developers.google.com/optimize/devguides/pagehiding

Смотрите видео

В следующем видео мы запустим ваш первый эксперимент и посмотрим, что означают цифры в отчетах. Если видео получилось полезным, расскажите друзьям и смотрите дальше. С вами был Евгений Тридчиков, и я желаю вам великолепного дня!

comments powered by HyperComments
(1 оценок, среднее: 5,00 из 5)
Загрузка ...
CONTEXT-KILL.BY