Триггер видимость элемента в Google Tag Manager (2018)

Приветствую, друзья! На связи Евгений Тридчиков и в этом видео я рассмотрю два практических примера использования триггера типа “Доступность элемента” в Google Tag Manager. Лень читать? Смотрите видео в конце статьи!

Данный триггер позволяет фиксировать взаимодействия пользователей с сайтом, которые основаны на просмотре или видимости определенных объектов. Для начала давайте настроим триггер, который фиксирует успешные отправки форм на сайте.

Настройки триггера Доступность элемента

Перемещаемся в аккаунт Диспетчера тегов, Триггеры, активируем триггер “Доступность элемента”. Пробежимся по конфигурации.

В поле “Метод выбора” можно задать идентификатор либо селектор CSS отслеживаемого объекта. Триггер сработает, если объект с указанным атрибутом появится в окне просмотра.

Правила запуска, я думаю, не нуждаются в комментариях.

В разделе “Дополнительно” можно задать минимальный процент видимости элемента, по умолчанию установлено значение 50%. А также поставить галочку и указать минимальное время видимости элемента, выраженное в миллисекундах. При этом нужно учитывать, что время просмотра указанного объекта суммируется в рамках просмотра одной страницы.

Видимость элементов в справке Диспетчера тегов: https://support.google.com/tagmanager/answer/7679410

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

Пример использования #1

Итак, для демонстрации рассмотрим сайт тату салона в Санкт-Петербурге. Здесь есть несколько открытых форм, отправка которых заканчивается появлением поп-ап окна. Я делаю тестовую конверсию и перехожу к коду поп-ап окна.

Как видите, сообщение об успешной отправке формы находится в блоке DIV, у которого есть атрибут id=»afterSubmit». Это то, что нужно для настройки  триггера. Копируем айди элемента и перемещаемся в интерфейс Диспетчера тегов.

Метод выбора – идентификатор. Идентификатор элемента – afterSubmit, вставляем из буфера обмена. Правила запуска – при каждом появлении элемента на экране, чтобы фиксировать все успешные отправки форм. Сохраняем, даем понятное название.

Активируем режим отладки, перемещаемся на сайт, обновляем страницу, отправляем тестовую форму и видим, что триггер сработал. Ключ gtm.elementVisibility содержит соответствующие атрибуты.

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

Теперь можно использовать данный триггер в качестве условия активации тега и передавать в системы веб-аналитики сигналы об успешной отправке формы. Ну а затем настроить цели.

Пример использования #2

Второй пример связан с отслеживанием виджета обратного звонка LpTracker. Дело в том, что данный инструмент до сих пор в 2018 году не научился по умолчанию пушить события в системы веб-аналитики. Но расстраиваться не стоит, потому что это легко решается с помощью триггера видимости элемента.

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

Я выбираю ссылку “Не успели?”, перехожу к просмотру кода и вижу, что у этого элемента есть атрибут id=»lptrack_no_time». Копирую айди элемента, перемещаюсь в интерфейс Диспетчера тегов и копирую прежний триггер.Меняю название, вставляю идентификатор элемента из буфера обмена.

Здесь я ставлю галочку “Регистрация изменений DOM”, потому что это тот самый случай, когда изначально в объектной модели документа не было элемента с данным айди. Поэтому сейчас важно, чтобы триггер учитывал это. Сохраняю, даю понятное название и перемещаюсь на сайт для проверки.

Заказываю тестовый звонок и вижу, что триггер сработал. Ключ gtm.elementVisibility содержит соответствующие атрибуты. Теперь можно использовать данный триггер для настройки условия активации тега и передавать в веб-аналитику успешные заказы звонка.

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

Если видео получилось полезным, поделитесь с коллегами и смотрите дальше! Это был Евгений Тридчиков и я желаю вам великолепного дня!