Отслеживание скроллинга на страницах средствами Google Tag Manager: Расширенное руководство

Отслеживание скроллинга на страницах средствами Google Tag Manager: Расширенное руководство

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

  1. Базовое отслеживание скроллинга
  2. Определяем влияет ли скроллинг на показатель отказов
  3. Разные пороги скроллинга для разных страниц
  4. Изменяем порог скроллинга в зависимости от длины страницы

 

Базовое отслеживание скроллинга

      Отслеживание скроллинга с помощью встроенного в GTM триггера — одна из самых простых задач. Сейчас вы сможете в этом убедиться. Нам понадобится:

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

      При создании нового триггера выбираем тип Scroll Depth (Глубина прокрутки) с категории User Engagement (Взаимодействие пользователя).Триггер глубины прокрутки Scroll Depth в Google Tag Manager

      Google Tag Manager позволяет отслеживать как вертикальную, так и горизонтальную прокрутку. Но, так как на большинстве сайтов присутствует только вертикальная (т.е. прокрутка сверху вниз), мы остановимся именно на ней.Настройка триггера скроллинга Scroll Depth в GTM

      Условно настройку триггера можно разделить на три части:

  • Выбор направления прокрутки. В нем помимо направления можно выбрать единицу измерения пороговых значений: проценты или пиксели. А также указать эти самые значения. Если вы хотите перечислить несколько значений — разделяйте их запятыми.
  • Момент включения триггера. Позволяет активировать триггер после наступления одного из событий загрузки страницы: Page View, DOM Ready или Window Load. Благодаря этому параметру вы можете выбрать момент, когда ваш контент на странице полностью загружен. Скорее всего это будет DOM Ready или Window Load. Если вы не знаете, какое именно событие выбрать — используйте Window Load.
  • Дополнительные условия срабатывания триггера. В этом блоке вы можете задать любые дополнительные условия по аналогии с другими триггерами. Например, если вы хотите отслеживать скроллинг только на главной странице вашего сайта, условие будет следующим:Настройка условия срабатывания триггера скроллинга на главной странице в GTM

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

      Для активации встроенных переменных перейдите в раздел Переменные и нажмите кнопку Configure (Настроить):Активация встроенных переменных в Google Tag Manager

      Данные, которые собираются в момент достижения порогового значения, хранятся в трех встроенных переменных:

  • Scroll Depth Threshold — в этой переменной вы сможете найти пороговое значение, которого достиг пользователь. Например, в нашем случае это будет одно из следующих значений: 25, 50, 75, 100.
  • Scroll Depth Units — хранится значение единицы измерения порогового значения: percent или pixels.
  • Scroll Direction — направления прокрутки: vertical или horizontal.Активация встроенных переменных Scroll Depth Threshold, Scroll Depth Units, Scroll Direction

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

      И, напоследок, уже знакомый нам тег передачи события в Google Analytics:Тег для передачи данных о скроллинге в Google Analytics

  • Категория — прописываем значение Scrolling;
  • Действие — указываем переменную Scroll Depth Threshold, в которой хранится пороговое значение достигнутое посетителем. В конце можно также добавить знак “%” или другой текст, чтобы не забыть единицу измерения;
  • Ярлык — указываем значение страницы, на которой произошло событие. Это можно сделать с помощью двух встроенных переменных: Page Hostname — в которой хранится название домена и Page Path — со значением пути страницы;
  • Не взаимодействие — указываем True, если вы не хотите, чтобы скролл страницы на 25% влиял на показатель отказов.

      Не забывайте также указать переменную Google Analytics с соответствующими настройками и триггер, который мы создали ранее.

Определяем влияет ли скроллинг на показатель отказов

      В варианте настройки выше, мы по умолчанию задали значение параметра Не взаимодействие как True. Но что, если мы хотим, чтобы какое-то из пороговых значений влияло на показатель отказов, например — 75% и 100%, а остальные нет?

      Чтобы настроить такое событие, нам понадобится собственная переменная типа Lookup Table (Таблица поиска). Называем ее LT — Scrolling Non-Interaction и настраиваем следующим образом:Настройка переменной типа Lookup Table для пороговых значений скроллинга

  • В первом блоке мы указываем переменную с достигнутым пороговым значением — Scroll Depth Threshold, которую мы будем анализировать.
  • Во втором, со стороны Input — пороговые значения, при которых вы хотите отправлять событие, влияющее на показатель отказов. Для них со стороны Output мы укажем значение false.
  • В последнем блоке задаем значение по умолчанию — true, которое будет отображаться для других пороговых значений.

      Не забудьте использовать созданную переменную в поле Не взаимодействие:Использования переменной Lookup Table в теге для влияния скроллинга на показатель отказов

Разные пороги скроллинга для разных страниц

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

      Есть два подхода к решению этой задачи:

  • создать несколько триггеров, где в дополнительных условиях срабатывания триггера будете указывать перечень страниц. Например, для главной из примера выше:Настройка условия срабатывания триггера скроллинга на главной странице в GTM
  • использовать пользовательскую переменную типа Таблица поиска.

      Именно второй способ мы и разберем более детально. Мы уже разобрали, как работать с таким типом переменных. Только на этот раз будем анализировать путь страницы, вместо порога скроллинга:Настройка переменной типа Lookup Table для указания разных порогов скроллинга на разных страницах

      Теперь, созданную переменную нужно поместить в поле, вместо указанных ранее пороговых значений:Использование переменной с разными порогами скроллинга для разных страниц в триггере глубины прокрутки Scroll Depth

Изменяем порог скроллинга в зависимости от длины страницы

      Напоследок, разберем ситуацию, когда нам необходимо менять пороговые значения динамически, в зависимости от длины страницы. Это особенно актуально, если у вас на сайте есть страницы, размер которых равняется одному экрану. Google Tag Manager в таком случае передаст все пороговые значения одновременно при просмотре первого экрана.

      Чтобы исправить это, используем переменную типа Пользовательский JavaScript со следующим кодом:

      Давайте разберем, что здесь происходит. В этом блоке мы вычисляем высоту нашей страницы:

      Далее вычисляем высоту первого экрана:

      В переменную ratio записываем коэффициент, который показывает соотношение размера первого экрана к высоте страницы:

      Чуть дальше, именно на основе этого коэффициента мы и будем формировать пороги скроллинга.

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

      В следующем фрагменте с if мы задаем пороговые значения скроллинга в зависимости от значения переменной ratio. Этот блок вы можете менять по своему усмотрению.

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

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

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

     P.S. Еще одним примером взаимодействия пользователей с контентом является просмотр видео. О том, как отследить такие действия через GTM, читайте в следующей статье.