Как настроить отслеживание событий в Google Tag Manager с помощью dataLayer

Уровень данных или dataLayer — это массив объектов и переменных JavaScript, который содержит в себе определенную информацию о действиях пользователей на сайте. DataLayer служит коннектором между сайтом и, установленным на нем, контейнером Google Tag Manager — передает информацию о совершенных действиях. Такая передача нужна для настройки их отслеживания. Все google tag manager события можно отследить в реальном времени в отладчике GTM, включив режим предварительного просмотра:

Если вы имели дело с Менеджером Тегов, то, наверняка, встречались с dataLayer и даже пользовались им, сами того не подозревая. Можно ли самостоятельно настроить событие в google tag manager? Да, об этом далее.

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

В Менеджере Тегов есть 4 основные группы триггеров:

• просмотр страницы (например, 2,3);
• клики (4);
• взаимодействия пользователей (например, Отправка форм 5);
• другое (например, Пользовательское событие 6).

** gtm.js (1)  — библиотека javascript. Если этого файла нет, ваш Тег Менеджер не будет работать.

Если с первыми тремя группами все уже сделано за вас — берите и пользуйтесь, то триггер типа «Пользовательское событие» требует особого внимания.

В этой статье я расскажу вам, как пользоваться dataLayer для отслеживания неотслеживаемого, с помощью метода dataLayer.push() и программиста.

Бывают события, отслеживание которых занимает много времени и нервов. Например:

•  google tag manager отправка формы заявки, при условии корректного заполнения всех полей (исключаем возможность валидации формы);
• клик по кнопкам «Добавить в корзину» или «В избранное», при условии выбора определенного параметра товара или авторизации на сайте.

В таких случаях стандартные триггеры google tag manager — отправка формы или клик — не совсем работоспособны. Да, они отслеживают события, но не все они релевантны: если поля формы заполнены некорректно, событие ‘Form Submit’ при нажатии на кнопку «Отправить» не равно отправленной форме; клик по кнопке «В корзину» без выбора параметра товара, не значит, что он попал в корзину.

Что делать? Можно ли самостоятельно настроить событие в google tag manager и передачу о корректной отправке формы или нажатии на кнопку, при помощи метода dataLayer.push()? Необходимо внедрить в код элемента определенную команду, это можно сделать самому.

Самый простой синтаксис для настройки событий в google tag manager выглядит так:

где, ‘event’ — переменная уровня данных,

‘event_name’ — название события, указанное вами.

Например, чтобы настроить событие нажатия кнопки, можно изменить саму ссылку кнопки, добавив в нее оператор push():

А при отправке формы ajax вызвать push() в секцию success JS обработчика формы:

В примерах выше ‘onclick’ и ‘onsubmit’ указывают на то, при каком взаимодействии пользователя с элементом отправлять событие.

Используя конструкцию push, можно передавать дополнительные параметры. Для этого в dataLayer.push() необходимо добавить переменные, названия которых вы можете указывать сами, заключая их в кавычки. Например, ‘eventAction’, ‘eventCategory’, ‘name’, ‘color’, ‘price’ и т.д. При этом, синтаксис отправки события будет выглядеть следующим образом:

Реализация на примере отслеживания формы «Принять участие»

Проблема

Формы на данной странице идентичны, за исключением названий в Title. Отследить отправку заявки на конкретную акцию стандартным триггером GTM «Отправка формы» невозможно, так как формы имеют одинаковый class и id. А selector CSS «ловит» название только первой формы в списке, независимо от того какая была открыта.

Решение

Настраиваем отправку события в dataLayer, при отправке формы с указанием названия акции в переменной eventAction.

Реализация

1. Настройка отправки события в dataLayer.

   Составляем техническое задание для программиста, содержащее:

   При корректном заполнении полей и успешной отправке форм необходимо передавать событие в уровень данных:

   1 2 3 4

   onsubmit = "dataLayer.push({ 'eventAction':'{название акции}', 'event':'zayavka-aktsii-success' })"

   В указанную переменную eventAction необходимо подтягивать название акции:
   

   После корректного внедрения, в отладчике GTM на вкладке dataLayer при отправке формы будут отображаться следующие данные:

   

   Важно детально проверять выполнение оператора push(), соответствие всех параметров и их значений.

2. Настройка отслеживания события в Google Tag Manager

   1. Создаем переменную, передающую название акции:Тип — Переменная уровня данных.
      Имя переменной — eventAction.
   2. Создаем триггер активации события:Тип триггера — Пользовательское событие.
      Имя события — значение, которое передается в переменной ‘event’.
      В нашем случае “zayavka-aktsii-success”.
      Условие активации: переменная ‘eventAction’ содержит название конкретной формы, например, «Вигідний старт».Таким образом, триггер будет срабатывать при отправке формы, заголовок которой содержит «Вигідний старт».
   3. Создаем тег, который будет срабатывать при заданном условии активации триггера и передавать событие об отправке формы в Google Analytics. Для Universal Analytics: Тип тега — Google Аналитика – Universal Analytics.
      Тип отслеживания — Событие.
      Триггером активации устанавливаем созданный на предыдущем шаге.

Для Google Analytics 4: Тип тега — Google Аналитика: событие GA4. Триггером активации устанавливаем созданный на предыдущем шаге.

Примечание: Важно знать, что сам Google Analytics 4 имеет список рекомендуемых событий, что по сути во время настройки является списком названий, которым рекомендуется пользоваться для корректной работы системы аналитики. То есть если ваше действие сходится с рекомендуемым то важно брать название с данного списка. В случае если не сходится, можете дать событию произвольное название, рекомендовано латиницей, без пробелов и символов, например, в таком формате — event_name.

Аналогичным образом можно настроить отслеживание остальных форм на странице.

Преимущества метода dataLayer.push()

1. Реально отследить любое взаимодействие пользователя с вашим сайтом: от просмотра элемента до отправки формы.
2. Можно передавать дополнительные параметры, например, название формы, цену товара и все, что вам необходимо отслеживать.
3. Имя события и других переменных задается вами самостоятельно. При этом желательно, чтобы название было понятно всем, кто имеет доступ к настройкам и данным аналитики.
4. Метод имеет простой синтаксис, что упрощает написание технического задания и само внедрение. Даже для малоопытного программиста реализация будет достаточно легкой.
5. Легко проверить корректности работы конструкции с помощью отладчика Google Tag Manager.
6. Простая и понятная настройка отслеживания событий с помощью базового функционала Google Tag Manager.

В данной статье я описала один из способов работы с dataLayer — метод dataLayer.push(). Помимо отправки простых однострочных событий, уровень данных может собирать и передавать данные о транзакциях; перехватывать данные сторонних систем для настройки отслеживания взаимодействий с их элементами. Например, отслеживание Contact Form 7 от WordPress.