Google Tag Manager для googлят: Руководство по управлению тегами

В примере выше с помощью иконки (поле шаблона) «Переменная» для типа тега «Отслеживание конверсий AdWords» задаются значения для различных полей – идентификатор отслеживания, ярлык конверсии, ценность конверсии и т.д.

Также с переменными можно работать и в пользовательских HTML-тегах. Для этого нам необходимо использовать специальную конструкцию, заключенную в теги . Тег . Существует несколько вариантов того, когда, каким образом и в каком месте должен быть описан уровень данных.

● описание ДО кода контейнера GTM. Конструкция ДО контейнера GTM выглядит так:

К тому моменту, когда зафиксируется первое стандартное событие «Просмотр страницы» (Page View), информация, которую мы передали с помощью данной конструкции, уже будет присутствовать в Google Tag Manager и мы с ней сможем работать.

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

Рис. 305. Пример описания ДО кода контейнера GTM

Для отслеживания различных действий пользователя в GTM предусмотрена специальная переменная event. Event можно использовать внутри обработчика того или иного события. Наличие ключа event сообщает GTM, что нужно что-то сделать. Далее он действует в зависимости от содержания event, в данном случае выводит значение «ДО GTM». Если event отсутствует или не задано, то в режиме отладки мы увидим слово «Message» и надпись:

Рис. 306. Отсутствие event, сообщение “Message»”

Например, при клике на кнопку, которая открывает форму с заказом услуги веб-аналитики, можно использовать конструкцию:

Заказать услугу

● описание ПОСЛЕ кода контейнера GTM. Конструкция ПОСЛЕ контейнера GTM выглядит так:

dataLayer.push ({'ключ':'значение'});

Отличие от описания ДО заключается в том, что здесь используется метод push (), который добавляет один или более элементов в конец массива и возвращает новую длину массива. Помимо этого, квадратные скобки и равно заменились на круглые.

Рис. 307. Пример описания ПОСЛЕ кода контейнера GTM

Подробнее о методе push () читайте на javascript.ru. Описывая данные ДО кода GTM, уровень данных (dataLayer) еще не создан самим Google Tag Manager, а если ПОСЛЕ кода GTM, то уровень данных уже есть и нужно данные в нем дополнить теми, которые вам необходимы, а не создавать новый объект.

● универсальное описание. Для того, чтобы упростить работу в дальнейшем и не задаваться вопросом о том, когда вызывать уровень данных (ДО или ПОСЛЕ), используется конструкция следующего вида:

В режиме предварительного просмотра Google Tag Manager будут зафиксированы сразу два события:

Рис. 308. Универсальное описание

С помощью первой строки window.dataLayer = window.dataLayer || [] мы проверяем, существует ли объект dataLayer. Если он существует, то используем его. В противном случае мы его создаем и он у нас пустой. Второй строчкой window.dataLayer.push({'event':'value'}) мы дополняем с помощью метода push () тот объект (массив), который был создан в первой строчке.

Объект window сочетает два в одном: глобальный объект JavaScript и окно браузера. При добавлении объекта window эта переменная уровня данных также будет доступна из другого скрипта.

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

С помощью уровня данных можно передавать пользовательские события. Давайте разберем простой пример – передать данные в Google Analytics с помощью метода push () по клику на кнопке одной из форм.

Рис. 309. Кнопка на одной из форм

Если бы вы не использовали GTM в своей работе, а только Google Analytics (код отслеживания Global Site Tag), и библиотеку gtag.js, то конструкция в коде страницы выглядела бы так:

Рис. 310. Пример кода реализации конструкцией из Google Analytics

Событие onclick возникает при щелчке левой кнопкой мыши на элементе, к которому добавлен атрибут onclick. Таким образом, когда пользователь нажимает на кнопку «Весь перечень», срабатывает событие, которое передает два обязательных условия (Категория event_category и Действие event_action) в Google Analytics, тем самым фиксируя цель.

Но когда Google Analytics установлен через GTM, так отслеживать события уже не получится. И поможет нам в этом уровень данных. Данные о событии мы можем передать сначала в dataLayer, а только оттуда – в Analytics.

Добавляем уровень данных к нашему элементу:

Рис. 311. Добавление dataLayer.push () к элементу

где ‘event’: ‘UAevent’ – пользовательское событие, а eventCategory и eventAction – все те же обязательные условия.

Крайне важно: следите за символами кавычек. Копирование из разных мест (из чужих блогов и сайтов) и кодировок недопустимо.

Рис. 312. Используйте одинаковые кавычки