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

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

В чем польза

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

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

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

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

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

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

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

1. selection method: ID или CSS-selector. В моём случае ID, если используете классы, выбираем CSS-selector;
2. Element ID или Element Selector (в зависимости от первого пункта — указываем идентификатор или селектор;
3. When to fire this trigger: Once per page;
4. Minimum Percent Visible: указываем % блока, который должен попасть в экран;
5. Set a minimum on-screen duration: указываем время, которое блок должен быть видимым;
6. Observe DOM changes: если блок по-умолчанию скрыт (выпадайка, акордеон, уведомление), то эта функция позволит будет проверять блок на предмет появления;
7. This trigger fires on: можно конкретизировать условия, при которых будет проходить проверка, например, указать конкретную страницу, на которой мы хотим отслеживать появление элемента.

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

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

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

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

Создаем тег

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

• Category: form;
• Action: viewed;
• Label: {{Page URL}};
• Non-Interaction Hit: True (чтобы не влиять на показатель отказов).

Указываем триггер, который мы создавали на предыдущем этапе.

Проверяем отчет Google Analytics в режиме реального времени

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