Отслеживание глубины скроллинга и времени на активной вкладке с помощью Google Tag Manager

Отслеживание глубины скроллинга и времени на активной вкладке с помощью Google Tag Manager

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

  • во-первых, на основе собранной информации можно понять, насколько контент на странице интересен пользователю и приносит ему пользу;
  • во-вторых, можно сегментировать пользователей в зависимости от их взаимодействия с определенной страницей. Потом эти же сегменты можно использовать в том числе для создания аудиторий ремаркетинга.

      Ранее я уже писал об отслеживании скроллинга с помощью встроенного функционала диспетчера тегов Google, а также о том, как оценить взаимодействие с контентом передавая событие, основанное на глубине прокрутки и времени проведенном на странице. Сегодня мы разберем еще одно решение, основанное на пользовательском JS скрипте. С помощью этого метода вы сможете передать информацию о максимальной глубине прокрутки и точном времени проведенном на странице. Нам понадобится следующее:

  1. Тег для сбора данных о глубине прокрутки и времени на странице
  2. Переменные типа Data Layer для хранения информации
  3. Триггера пользовательского события
  4. Тег для передачи данных в Google Analytics

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

      В Google Tag Manager существует стандартный триггер для отслеживания глубины прокрутки. Он имеет свой минус: данные отправляются в момент достижения порогового значения. Получается, что с помощью этого триггера нет возможности отследить максимальное значение процента скроллинга. Для того, чтобы обойти это ограничение, мы используем пользовательский скрипт, который добавим на сайт с помощью тега типа Пользовательский HTML.

      Когда-то давно сам скрипт придумала Настя Тимошенко, а спустя несколько лет ее решение было мной улучшено. Ранее скрипт отслеживал время на странице просто измеряя разницу между временем наступления события beforeunload (моментом, перед выгрузкой страницы с браузера) и началом запуска на странице. Теперь, после усовершенствования, скрипт считает время только тогда, когда вкладка пользователя активна.

      Для удобства дальнейшей работы с данными, в скрипте также описаны методы группировки значений в интервалы, которые вы можете отредактировать индивидуально под ваш проект. Для того, чтобы добавить скрипт на сайт, используйте тег со следующими настройками:

  • Тип тега — Custom HTML (Пользовательский HTML);
  • В поле HTML вставляем код скрипта;
  • Триггер — All Pages (Все страницы).Тег для отслеживания максимальной глубины прокрутки и времени когда вкладка была активна

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

      Нужное нам событие — Scroll to. Как видите, в момент этого события в dataLayer передается много интересной информации:

  • time_on_page  — время от начала загрузки страницы до наступления события beforeunload;
  • time_on_page_interval — время от начала загрузки страницы до наступления события beforeunload, сгруппированное по интервалам;
  • time_on_page_active — время активности вкладки, от момента начала загрузки страницы до наступления события beforeunload;
  • time_on_page_interval_active — время активности вкладки, от момента начала загрузки страницы до наступления события beforeunload, сгруппированное по интервалам;
  • time_invisibility — время когда вкладка была неактивна;
  • percent_of_scrolling — максимальное значение глубины прокрутки, выраженное в процентах;
  • percent_of_scrolling_interval — максимальное значение глубины прокрутки, выраженное в процентах и сгруппированное по интервалам;
  • character — тип читателя. Значение определяется на основании данных глубины скроллинга и времени проведенного на странице.

      Скорее всего, вам не понадобится вся информация, которую передает скрипт, поэтому создайте переменные типа Data Layer только для тех ключей, которые вам необходимы.

Переменные типа Data Layer для хранения информации

      Как вы уже знаете, при работе с уровнем данных, для получения значения вам необходимо создать соответствующую переменную. Ниже скриншоты каждой из таких переменных:

  • time_on_page:Пример настройки переменной типа dataLayer для хранения времени проведенного на странице
  • time_on_page_interval:Пример настройки переменной типа dataLayer для хранения времени проведенного на странице в интервалах
  • time_on_page_active:Пример настройки переменной типа dataLayer для хранения времени активности вкладки
  • time_on_page_interval_active:Пример настройки переменной типа dataLayer для хранения времени активности вкладки в интервалах
  • time_invisibility:Пример настройки переменной типа dataLayer для хранения времени когда вкладка была неактивна
  • percent_of_scrolling_interval:Пример настройки переменной типа dataLayer для хранения значения максимальной глубины скроллинга в интервалах
  • character:Пример настройки переменной типа dataLayer для хранения информации о типе читателя

      Если вы все сделали верно, то в режиме предварительного просмотра в момент события Scroll to ваши переменные будут хранить в себе нужные значения:Пример данных которые отображаются в режиме отладки

Триггер пользовательского события

      Выше я уже не раз говорил о событии Scroll to. Это пользовательское событие, на которое нам необходимо настроить триггер. Выглядит он следующим образом:Триггер типа пользовательского события для отслеживания глубины прокрутки и времени активности вкладки

Тег для передачи данных в Google Analytics

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

      ВАЖНО! Не забудьте указать значение параметра Не взаимодействие как True, чтобы не испортить значение показателя отказов.

      ВАЖНО! В переменной настроек Google Analytics добавьте настраиваемое поле transport со значением beacon. “Эта настройка позволит преобразовать обычный GET запрос, который по умолчанию отправляет Google Analytics в POST, и передать его асинхронно используя navigator.sendBeacon().Более подробно можно почитать в официальной документации.

Вместо заключения

      Решение, описанное в этой статье, позволит вам еще лучше понять, как посетители вашего сайта взаимодействуют с контентом на нем, а также настроить аудитории ремаркетинга на основе собранных данных. Если у вас остались вопросы по настройке — задавайте их в комментариях.