Приветствую, друзья! На связи Евгений Тридчиков и в этом видео я рассмотрю два практических примера использования триггера типа “Доступность элемента” в 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 содержит соответствующие атрибуты. Теперь можно использовать данный триггер для настройки условия активации тега и передавать в веб-аналитику успешные заказы звонка.
Если в настройках триггера в качестве метода выбора вы планируете использовать класс элемента, то не забудьте поставить в начале точку. Например, для настройки триггера из примера выше я мог использовать название класса иконки Вконтакте.
Если видео получилось полезным, поделитесь с коллегами и смотрите дальше! Это был Евгений Тридчиков и я желаю вам великолепного дня!