Как настроить передачу скроллинга страницы с помощью Google Tag Manager

Константин Булгаков Подружиться

15 Июн.2019

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

В этой статье мы поговорим про настройку другого события, которое также имеет отношение к анализу взаимодействия и вовлёченности пользователя в контент веб-сайта — настройка глубины скроллинга страницы с помощью Google Tag Manager.

Применение

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

Приведу несколько конкретных примеров из практики.

• Для авторов новостных порталов и блогов, согласованными KPI могут являться не только количество просмотров опубликованной статьи, но и вовлечённость в контент — прочтение на 50% и более.
• Для интернет-магазинов и лендингов, можно настроить дополнительно ремаркетинг, так как посетители, которые прокручивали страницу до конца, могут представлять для нас наибольшую ценность.
• Такая гипотеза наводит нас на мысль, что можно создать дополнительный сегмент по пользователям прокручивающим посадочную страницу с рекламным сообщением до конца, а далее задать настройки ремаркетинга с уникальным продающим предложением на эту группу.
• Для контекстных рекламных кампаний можно на такие группы пользователей установить повышающие корректировки ставок.

Я думаю, что теперь суть задачи ясна и понятна. Приступаем к реализации!

Если вы используете сайт на платформе WordPress, то в одном из материалов я рассказывал как без использования Google Tag Manager можно настроить передачу скроллинга в Google Analytics стандартными плагинами WP. Подробнее читайте здесь.

Шаг 1: Настройка переменной

Для начала нам необходимо активировать переменную в Google Tag Manager.

1. Входим в аккаунт в Google Tag Manager и открываем нужный нам контейнер;
2. Переходим в раздел Переменные и нажимаем кнопку Настроить;
3. Далее активируем встроенную переменную Scroll Depth Threshold.

Переменная будем принимать значение скроллинга и служить макросом при передачи событий в Google Analytics и Яндекс.Метрику.

Готово! Теперь нам потребуется создать дополнительный триггер.

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

1. Переходим в раздел Триггеры и нажимаем на кнопку Создать;
2. В блоге Взаимодействие пользователей выбираем триггер Глубина прокрутки;
3. Устанавливаем галочку напротив Глубина вертикальной прокрутки;
4. Далее указываем через запятую значение глубины прокрутки страницы в процентах для которых будет регистрироваться событие;
5. В своем примере я укажу пороговые значения 75 и 100%;
6. В блоке Условия активации триггера оставляем Все страницы.

Важно! Если указанная глубина прокрутки входит в область просмотра при загрузке страницы, триггер срабатывает без прокручивания. Обратите внимание, что триггер активирует тег только один раз для каждого порогового значения на странице.

Другими словами, если вы прокрутили страницу вниз до 75%, а потом вернулись в самое начало, а далее вновь прокрутили вниз, но уже до самого конца, то GTM передаст событие со значением 75%. Этот нюанс важно учитывать про анализе данных.

Шаг 3: Передача события в Google Analytics

С настройкой триггера разобрались. Теперь приступаем к созданию тегов и передачи события в аналитические системы. Начнем с Google Analytics!

1. Переходим в раздел меню Теги и нажимаем Создать;
2. Выбираем тип триггера Google Аналитика — Universal Analytics;
3. В поле Тип отслеживания выбираем Событие;
4. Заполняем в свободной форме латинскими символами поле Категория, а в поле Действие добавляем созданную переменную уровня данных Scroll Depth Threshold;
5. В поле Настройки Google Analytics добавляем переменную с идентификатором отслеживания Google Analytics.

Как создать переменную c идентификатором отслеживания Google Analytics в Google Tag Manager можно почитать в этой статье.

В результате получаем следующие настройки:

В нижнем блоке триггеры добавляем ранее созданные нами триггер для активации тега;

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

Где посмотреть статистику в Google Analytics

Отчеты по событиям в Google Analytics можно посмотреть здесь:

1. Войдите в аккаунт Google Analytics;
2. Выберите нужное представление;
3. Откройте отчеты Поведение > События.

Также можно проверить результат настройки передачи с помощью Отчет в режиме реального времени. Если все настроено корректно, то вы увидите примерно такую картину:

С Google Analytics разобрались, теперь разберем настройку для Яндекс.Метрики.

Шаг 4: Передача события в Яндекс.Метрику

Делаем все по аналогии с предыдущим примером, но выбираем другой тип тега.

1. Переходим в раздел меню Теги и создаем новый;
2. Выбираем тип тега — Пользовательский HTML;
3. В пустую область вставляем специальный код, который будет отправлять данные в Метрику;

<script>yaCounterXXXXXXX.reachGoal('{{Scroll Depth Threshold}}');</script>

Здесь, XXXXXXX — номер счетчика, а {{Scroll Depth Threshold}} — созданная ранее переменная.

В нижнем блоке Триггеры выбираем доступным нам триггер для активации тега.

Где посмотреть статистику в Яндекс.Метрике

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

1. Войдите в Метрику и выберите из списка нужный счетчик;
2. Выберите меню Настройки и перейдите в Цели;
3. Нажмите на кнопку Добавить цель и выберите Java-Script событие;
4. Укажите понятное название для создаваемой цели;
5. В поле идентификатор укажите значение скроллинга;
6. Сохраняем цель.

Накопленные данные по выполненным целям можно будет посмотреть в стандартном отчете Конверсии.

Готово! Мы настроили передачу событий в Google Analytics и Яндекс.Метрику при достижение пользователем пороговых значений вертикального скроллинга страницы.

Не помогла статья?

Друзья, надеюсь, что инструкция в материале была полезна для вас и всё получилось настроить корректно. Однако, если удалось не все или заметили ошибку, то пишите на почту info@konstantinbulgakov.com. Также можно оставлять комментарии в специальной форме ниже.

Не забывайте сохранять ссылку на пост в закладки и делиться ей с коллегами, возможно, настройка пригодится в будущем вновь!