Отслеживание видимости в Google Tag Manager и GA4

Материал обновлен 28 ноября 2023 и адаптирован к последней версии Google Analytics 4.

Есть в Гугл Тег Менеджере замечательнейшая возможность отслеживать появление элемента в экране пользователя. Помню, на заре появления ГТМа были весьма популярны всякие scrolldepth.js, которые измеряли процент скрола и передавали ивенты в Гугл Аналитику. Сам таким пользовался, но успеха в промышленных масштабах добиться не смог (в не промышленных тоже). Все-таки очень уж эфемерны эти показатели 25—50—75—100 % скрола, чтобы на их основании что-то предпринимать. В GA4 теперь тоже есть скроллтрекинг, который фиксирует прокрутку до 90% страницы, но это все бесполезная ерунда. А вот с видимостью элемента история уже иная.

В чем польза

У меня есть статья про конверсии, где я писал про микро- и макро-конверсии. Кратко суть в том, что у нас есть, допустим, форма заявки, которая расположена внизу страницы. Заполнение формы — лид, то есть макро-конверсия. В случае, когда количество макро-конверсий низкое, у нас банально не хватает данных для оптимизации рекламы и вообще для какого-либо понимания эффективности рекламы (нормальная ситуация в Б2Б-рекламе). Чтобы это исправить мы используем микро-конверсии, то есть определяем действия, которые предшествуют заполнению формы.

Очевидно, если форма находится внизу, то факт её появления в экране пользователя будет обязательным шагом к её заполнению. Или, если форма находится на странице «Контакты», то переход на эту страницу и будет микро-конверсией (так устроено на нашем сайте, на момент написания этого текста).

Процесс настройки

Проверяем верстку

Для начала необходимо убедиться, что наш элемент размечен в верстке, чтобы триггеру было за что зацепиться. У меня уже проставлен id=”form” для div’а, в котором лежит форма. Это оптимальный вариант — ЦСС-селекторы по классу или другим параметрам менее надежны — они могут повторяться для разных элементов (id тоже, но это скорее исключение). Если ни id, ни классов нет, добавляем их (или просим разработчика) и переходим к настройке триггера.

Создаем триггер

Gtm Visibility 2

В разделе Triggers (Триггеры) создаем новый триггер типа Element Visibility и задаем конфигурацию:

Selection MethodID или CSS-selector, у меня ID
Element IDform (указывайте ID вашего элемента)
When to fire this triggerOnce per page
Minimum Percent Visible% блока, который должен попасть в экран, у меня — 40%
Set a minimum on-screen durationвремя, которое блок должен быть в видимости, у меня 2,5 секунды
Observe DOM changesесли блок по-умолчанию скрыт (выпадайка, акордеон, уведомление), то эта функция будет проверять блок на предмет появления
This trigger fires onможно добавить доп. условия, например, указать конкретную страницу, на которой мы хотим отслеживать появление элемента

Важные моменты

Observe DOM changes — эта настройка может быть использована для отслеживания отправки формы, если после отправки появляется сообщение об успешной отправке. Это, своего рода, костыль, но, если других вариантов нет, то вполне допустимо его использовать.

Minimum Percent Visible стоит применять осторожно. Конечно, всегда есть соблазн поставить 100%, но необходимо учитывать специфику устройств пользователей — если блок не помещается целиком, то при такой настройке триггер не будет срабатывать.

Set a minimum on-screen duration работает кумулятивно (счетчик считает суммарное время на протяжении просмотра страницы и обнуляется при перезагрузке страницы).

Создаем тег

В разделе Tags создаем новый тег, типа Google Analytics: GA4 Event и задаем следующую настройку:

Gtm Visibility 3
  • вводим наш GA4 ID;
  • даем название нашему событию, у меня — form_view;
  • добавляем наш триггер из предыдущего шага.

Финальная часть

Остается запустить Preview-режим (через Tag Assistant) и отладчик GA4, который DebugView, чтобы убедиться, что все работает корректно. Обязательно проверяйте на разных экранах (используйте эмуляцию мобильного устройства в Хроме или Сафари) — как я писал выше, некоторые элементы могут не помещаться в экран и, если процент блока в экране стоит слишком большой, триггер не будет активироваться. Также, Observe DOM changes не всегда корректно работает, поэтому если элемент появляется после какого-то действия, нужно это детально тестировать. Статические элементы обычно отслеживаются без проблем.



Leave a Reply

Your email address will not be published. Required fields are marked *