Триггер скроллинга в Google Tag Manager

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

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

Три года назад я уже писала статью на тему отслеживания скроллинга в Google Analytics. Тогда я создавала собственный скрипт для Google Tag Manager, который отправлял данные о  максимальной глубине прокрутки страницы, а также точное время пребывания на текущей странице перед ее закрытием, обновлением или переходом на другую страницу. С тех пор в функционале диспетчера тегов произошли большие изменения, добавилось больше встроенных триггеров и переменных. Поэтому теперь настроить отслеживание скроллинга в GTM можно без использования сторонних скриптов. Сегодня мы разберемся, как это сделать.

Scroll-переменные

Первым делом в интерфейсе Google Tag Manager нам необходимо активировать переменные из блока “Прокрутка”:

• Scroll Depth Threshold — это число, которое показывает глубину прокрутки. При выборе процентов может принимать значение от 0 до 100%. При выборе пикселей это количество пикселей, установленное в качестве пороговой величины.
• Scroll Depth Units — единицы измерения глубины скроллинга (проценты или пиксели).
• Scroll Direction — направление прокрутки (может быть вертикальная или горизонтальная).

Далее мы создаем новый триггер типа “Глубина прокрутки”:

В настройках триггера мы выбираем направление прокрутки (вертикальная или горизонтальная). В одном и том же триггере можно задавать условие и для вертикального, и для горизонтального скроллинга.

Далее указываем глубину скроллинга (в пикселях или в процентах), при достижении которой должно отправляться событие. Нужно указать одно или несколько чисел, разделив их запятыми. Если указанная глубина скроллинга входит в область просмотра при загрузке страницы, триггер сработает без скрола. Также важно учитывать, что триггер срабатывает единожды для каждого порогового значения на странице. То есть, если в текстовом поле для указания глубины скроллинга вы написали значения 70% и 90%, то триггер в этом случае активирует тег два раза — при скроллинге страницы до отметки 70% и при достижении отметки 90%. Если после этого пользователь прокрутит страницу снизу вверх, триггер второй раз не активируется.

Далее нужно создать тег отправки данных в Google Analytics. Добавляем новый тег типа “Universal Analytics”, выбираем тип отслеживания “Событие”. В атрибутах события (категория, действие, ярлык) мы можем указать переменные прокрутки, которые мы активировали в самом начале.

Обращаю внимание на опцию “Не взаимодействие”. Если вам нужно, чтобы отправка ивента влияла на показатель отказов, то установите “false”. В ином случае — “true”.

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

Далее включаем отладчик GTM, переходим на сайт и проверяем правильность работы тега:

Таблица регулярных выражений

Бывают случаи, когда нужно реализовать отслеживание скроллинга на сайте, который имеет разные типы страниц. Например, на сайте есть страницы услуг, для которых мы хотим отправлять событие прокрутки при достижении, например, отметки в 50% и есть страницы статей, для которых мы считаем оптимальным фиксировать событие скроллинга только при значении 90%. В зависимости от структуры сайта, таких вариантов передачи данных может быть много. Чтобы не создавать под каждую группу страниц отдельный тег/триггер, мы можем воспользоваться таблицей регулярных выражений. Если вдруг вы еще не знаете, что такое регулярные выражения, и какую пользу они несут для аналитика, рекомендую прочитать эту статью.

Таблица регулярных выражений принимает на вход переменную и сопоставляет ее значение с шаблонами в таблице в порядке следования шаблонов. Если найдено соответствие, то в качестве результата возвращается значение из поля “Результат” соответствующей строки. Для скроллинга в качестве входной переменной можно указать Page URL, в текстовых полях шаблонов вводим регулярные выражения для нужных страниц. А в результирующих текстовых полях — значения скроллинга, которые должны передаваться для каждого типа страниц. Например, для страниц блога (при условии, что все они содержат слово “blog” в URL) пороговое значение прокрутки, при котором отправится событие, будет 90%. Для страниц услуг, контактных данных и портфолио (страницы, содержащие “service”, “kontakty”, “portfolio” в URL) — 40%, 60%, 80%, 100%. Для страниц, которые не соответствуют ни одному из шаблонов — 70% и 90%.

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

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

Удачных настроек! Если у вас есть вопросы по статье, с нетерпением жду их в комментариях-)