Скроллинг одно из основных событий, которые совершают пользователи на сайте. Отслеживание этого действия позволяет вам более глубоко понять, как посетители взаимодействуют с контентом на странице. В рамках сегодняшней статьи мы разберем функционал диспетчера тегов Google, который поможет нам с этим.
- Базовое отслеживание скроллинга
- Определяем влияет ли скроллинг на показатель отказов
- Разные пороги скроллинга для разных страниц
- Изменяем порог скроллинга в зависимости от длины страницы
Базовое отслеживание скроллинга
Отслеживание скроллинга с помощью встроенного в GTM триггера — одна из самых простых задач. Сейчас вы сможете в этом убедиться. Нам понадобится:
- Настройка триггера скроллинга;
- Активация встроенных переменных категории Scrolling;
- Тег для передачи данных в Google Analytics.
Настройка триггера скроллинга
При создании нового триггера выбираем тип Scroll Depth (Глубина прокрутки) с категории User Engagement (Взаимодействие пользователя).
Google Tag Manager позволяет отслеживать как вертикальную, так и горизонтальную прокрутку. Но, так как на большинстве сайтов присутствует только вертикальная (т.е. прокрутка сверху вниз), мы остановимся именно на ней.
Условно настройку триггера можно разделить на три части:
- Выбор направления прокрутки. В нем помимо направления можно выбрать единицу измерения пороговых значений: проценты или пиксели. А также указать эти самые значения. Если вы хотите перечислить несколько значений — разделяйте их запятыми.
- Момент включения триггера. Позволяет активировать триггер после наступления одного из событий загрузки страницы: Page View, DOM Ready или Window Load. Благодаря этому параметру вы можете выбрать момент, когда ваш контент на странице полностью загружен. Скорее всего это будет DOM Ready или Window Load. Если вы не знаете, какое именно событие выбрать — используйте Window Load.
- Дополнительные условия срабатывания триггера. В этом блоке вы можете задать любые дополнительные условия по аналогии с другими триггерами. Например, если вы хотите отслеживать скроллинг только на главной странице вашего сайта, условие будет следующим:
Активация встроенных переменных категории Scrolling
Для активации встроенных переменных перейдите в раздел Переменные и нажмите кнопку Configure (Настроить):
Данные, которые собираются в момент достижения порогового значения, хранятся в трех встроенных переменных:
- Scroll Depth Threshold — в этой переменной вы сможете найти пороговое значение, которого достиг пользователь. Например, в нашем случае это будет одно из следующих значений: 25, 50, 75, 100.
- Scroll Depth Units — хранится значение единицы измерения порогового значения: percent или pixels.
- Scroll Direction — направления прокрутки: vertical или horizontal.
Тег для передачи данных в 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 и настраиваем следующим образом:
- В первом блоке мы указываем переменную с достигнутым пороговым значением — Scroll Depth Threshold, которую мы будем анализировать.
- Во втором, со стороны Input — пороговые значения, при которых вы хотите отправлять событие, влияющее на показатель отказов. Для них со стороны Output мы укажем значение false.
- В последнем блоке задаем значение по умолчанию — true, которое будет отображаться для других пороговых значений.
Не забудьте использовать созданную переменную в поле Не взаимодействие:
Разные пороги скроллинга для разных страниц
В зависимости от типа страницы, вам может понадобиться отслеживать разные пороговые значения скроллинга. Например, для главной страницы своего блога я хочу использовать пороговые значения 25, 50, 75, 100. Для страницы Чем я могу быть вам полезен — значения 50, 100. А для остальных страниц — 10, 25, 50, 75, 100.
Есть два подхода к решению этой задачи:
- создать несколько триггеров, где в дополнительных условиях срабатывания триггера будете указывать перечень страниц. Например, для главной из примера выше:
- использовать пользовательскую переменную типа Таблица поиска.
Именно второй способ мы и разберем более детально. Мы уже разобрали, как работать с таким типом переменных. Только на этот раз будем анализировать путь страницы, вместо порога скроллинга:
Теперь, созданную переменную нужно поместить в поле, вместо указанных ранее пороговых значений:
Изменяем порог скроллинга в зависимости от длины страницы
Напоследок, разберем ситуацию, когда нам необходимо менять пороговые значения динамически, в зависимости от длины страницы. Это особенно актуально, если у вас на сайте есть страницы, размер которых равняется одному экрану. Google Tag Manager в таком случае передаст все пороговые значения одновременно при просмотре первого экрана.
Чтобы исправить это, используем переменную типа Пользовательский JavaScript со следующим кодом:
function() {
var heightOfPage = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
var heightOfViewport = Math.max(document.documentElement.clientHeight, window.innerHeight);
var ratio = heightOfViewport / heightOfPage;
var fallbackDepths = '101';
if (ratio < 0.2) {
verticalScrollDepths = '20,40,60,80,100';
} else if (ratio < 0.25) {
verticalScrollDepths = '25,50,75,100';
} else if (ratio < 0.5) {
verticalScrollDepths = '50,75,100';
} else if (ratio < 0.75) {
verticalScrollDepths = '75,100';
} else {
verticalScrollDepths = fallbackDepths;
}
return verticalScrollDepths;
}
Давайте разберем, что здесь происходит. В этом блоке мы вычисляем высоту нашей страницы:
var heightOfPage = Math.max(document.body.scrollHeight, document.body.offsetHeight, document.documentElement.clientHeight, document.documentElement.scrollHeight, document.documentElement.offsetHeight);
Далее вычисляем высоту первого экрана:
var heightOfViewport = Math.max(document.documentElement.clientHeight, window.innerHeight);
В переменную ratio записываем коэффициент, который показывает соотношение размера первого экрана к высоте страницы:
var ratio = heightOfViewport / heightOfPage;
Чуть дальше, именно на основе этого коэффициента мы и будем формировать пороги скроллинга.
var fallbackDepths = '101';
В фрагменте кода выше указываем значение на случай, когда мы не хотим, чтобы триггер скроллинга срабатывал. Например, когда у нас размер страницы равен одному экрану.
В следующем фрагменте с if мы задаем пороговые значения скроллинга в зависимости от значения переменной ratio. Этот блок вы можете менять по своему усмотрению.
Созданную переменную необходимо использовать в поле Проценты в триггере Глубины прокрутки.
Остальные настройки отправки события аналогично пункту Базовое отслеживание скроллинга.
Вместо заключения
Отслеживание глубины прокрутки является одним из основных способов понять, как пользователи взаимодействуют с контентом на вашей странице. Среди всех методов, описанных в этой статье выбирайте тот, который подходит вам больше всего. Если же у вас остались вопросы по отслеживанию скроллинга — пишите о них в комментариях.
P.S. Еще одним примером взаимодействия пользователей с контентом является просмотр видео. О том, как отследить такие действия через GTM, читайте в следующей статье.
