Отслеживание глубины прокрутки с помощью GTM

Февраль 10, 2020

В одной из публикаций в блоге я затрагивал настройку глубины скроллинга с помощью скрипта Роба Флаэрти (scrolldepth.parsnip.io) и Google Analytics, без использования Google Tag Manager. В этой статье разберем способ отслеживания глубины прокрутки с помощью GTM.

Последовательность действий:

  1. активация встроенных переменных;
  2. настройка триггера;
  3. создание тегов для Google Analytics.

Давайте разберем каждый из этапов более подробно.

1. Активация встроенных переменных

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

Отслеживание глубины прокрутки с помощью GTM

Встроенные переменные типа «Прокрутка»

Переменные:

  • Scroll Depth Threshold — возвращает значение порога прокрутки. В зависимости от настроек будет либо в процентах (%), либо в пикселях (px);
  • Scroll Depth Units — переменная возвращает значение в пикселях (pixels) или процентах (percent), в зависимости от настроек триггера;
  • Scroll Direction – переменная возвращает значение направления прокрутки (vertical или horizontal), в зависимости от настроек.

2. Настройка триггера

После активации переменных переходим на вкладку Триггеры и создаем триггер типа Глубина прокрутки:

Отслеживание глубины прокрутки с помощью GTM

Триггер «Глубина прокрутки»

Доступны следующие виды настроек:

Отслеживание глубины прокрутки с помощью GTM

Настройка триггера

Можно выбрать тип прокрутки (вертикальная или горизонтальная), а также задать пороги активации (проценты или пиксели). Условия активации триггера можно задать как на все страницы, так и на некоторые, а начать отслеживание выбранных взаимодействий по событию gtm.js (после загрузки страницы), gtm.dom (когда модель DOM готова) или по gtm.load (когда загрузится весь первоначальный контент страницы). Если вы не знаете, какое именно событие выбрать, оставьте по умолчанию Window Load.

В качестве примера я выберу наиболее популярный вариант настройки для сайтов — отслеживание вертикальной прокрутки на всех страницах с порогами 10, 25, 50, 75, 100 (см. скриншот выше).

3. Создание тегов

Перейдите на вкладке Теги и создайте тег типа Google Аналитика — Universal Analytics с типом отслеживания Событие:

Отслеживание глубины прокрутки с помощью GTM

Тег Google Аналитика

В Категория и Действие вы можете добавить произвольные значения. Подробнее о событиях Google Analytics читайте в этой статье. В Ярлык добавляем встроенную переменную Scroll Depth Threshold (ее можно добавить и в Категорию и Действие, кому как удобнее), в которой возвращается значение порога прокрутки (в процентах). В конце можно добавить % или любой другой текст (например, слово «процентов»), чтобы не забыть единицу измерения переменной.

В Ярлык также можно добавить и другие переменные. Я передаю вместе с порогом прокрутки URL-страницы, на которой совершено событие. Эта информация хранится в переменной Page Path. Таким образом, в Google Analytics я получу конструкцию вида 10% — /event-google-analytics. В настройке Не взаимодействие указываем True в том случае, если вы не хотите, чтобы порог глубины прокрутки в 10% влиял на показатель отказов.

Если вы хотите влиять на настройку Не взаимодействие и в зависимости от достижения определенного порога прокрутки событие влияло/не влияло на показатель отказов, нужно сделать еще один шаг и создать пользовательскую переменную типа Таблица поиска.

Отслеживание глубины прокрутки с помощью GTM

Таблица поиска для глубины прокрутки

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

Как работает таблица поиска?

  1. Задается входная переменная. В данном примере — это {{Scroll Depth Threshold}};
  2. Далее идет проверка по таблице поиска и входным данным;
  3. Если переменная {{Scroll Depth Threshold}} принимает одно из значений из таблицы, то входная переменная {{Scroll Depth Threshold}} примет значение из поля «Результат»;
  4. Если значение переменной {{Scroll Depth Threshold}} не найдено среди таблицы поиска, то будет использовано значение по умолчанию (если указано в настройках).

В примере с глубиной прокрутки — когда переменная {{Scroll Depth Threshold}} принимает значение 10, 25 или 50, то результат в переменной Не взаимодействие будет true (не будет влиять на показатель отказов). В случае с порогами 75 и 100 Не взаимодействие будет false (будет влиять на показатель отказов).

Все, что осталось сделать, это добавить в тег Google Аналитика — Universal Analytics в поле Не взаимодействие нашу таблицу поиска.

Отслеживание глубины прокрутки с помощью GTM

Таблица поиска в поле Не взаимодействие

Триггер активации для данного тега — Глубина прокрутки. Сохраняем изменения.

Иногда требуется кастомизировать отслеживание глубины прокрутки. Например, использовать разные пороги прокруток на различных страницах. Подробнее о таких настройках вы можете прочитать в блоге Симо Ахавы (Simo Ahava) по ссылке (на английском языке).

Проверить корректность сбора данных и отслеживание можно с помощью режима отладки GTM и отчетов «В режиме реального времени» в Google Analytics.

Отслеживание глубины прокрутки с помощью GTM

В режиме реального времени

Данные в отчетах Google Analytics будут отображаться в разделе Поведение – События – Лучшие события.

Отслеживание глубины прокрутки с помощью GTM

События по скроллингу в Google Analytics

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике