Отслеживание глубины прокрутки

Январь 03, 2019

Ранее мы рассматривали поведенческие характеристики Google Analytics, в числе которых: показатель отказов, средняя длительность сеанса, страниц/сеанс. Ситуация, когда пользователь, перейдя из поисковой выдачи на сайт, не возвращается обратно в поиск, является наилучшей для Google и Яндекса, и подходит под многие типы веб-сайтов.

Но что делать, если у вас Landing Page, который «заточен» под один продукт или услугу? Действительно ли время на сайте будет для нас так важно? А страниц/сеанс, если их всего 1-2? Про показатель отказов речь вообще не идет, если в Analytics вы решили его оставить без изменений.

Для оценки вовлеченности пользователей в ваш контент можно использовать еще один критерий – глубина просмотра (глубина прокрутки, глубина пролистывания, % скроллинга). Будь то это новостной сайт, блог, или LP со множеством экранов – глубина просмотра поможет вам оценить эффективность посадочной страницы. Вы всегда будете знать какой % скроллинга совершил пользователь, дошел ли он до того экрана/информации, которую вы хотели ему показать. И если нет, то произвести изменения в структуре контента.

Так уж довелось, что для решения этой задачи все чаще используют Google Tag Manager. Вернее, GTM ставят потому, что там есть встроенные переменные и триггер «Глубина прокрутки», который позволяет отслеживать горизонтальную и вертикальную прокрутку (в процентах или пикселях).

Отслеживание глубины прокрутки Google Analytics

Глубина прокрутки в Google Tag Manager

На этом все. Если бы не этот функционал в GTM, то многие маркетологи не усложняли бы себе процесс установки диспетчера тегов от Google. Однако очень мало кто знает, как реализовать данный функционал с помощью Google Analytics. До сегодняшнего момента. Давайте разберем процесс отслеживания глубины прокрутки в Google Analytics без Google Tag Manager для библиотек analytics.js и gtag.js.

Для этого нам понадобится готовый плагин на jQuery сторонних разработчиков, который позволяет отслеживать % прокрутки (25%, 50%, 75% и 100%) пользователя, а потом отправляет эту информацию в Google Analytics как событие. Скачать его можно на github.com или в моем блоге по ссылке.

  • Официальный сайт плагинаscrolldepth.parsnip.io
  • Автор плагина – Rob Flaherty
  • Последнее обновление – июнь 2018 года (добавлена поддержка gtag.js)
  • Лицензия – MIT
  • Совместимость — jQuery (v1.7+).
  • Браузеры — Все современные браузеры
Отслеживание глубины прокрутки Google Analytics

Поддержка браузеров

  • Может не работать на старых версиях Android
Отслеживание глубины прокрутки Google Analytics

Архив плагина

В папке два файла – jquery.scrolldepth.min.js и jquery.scrolldepth.js. Они практически одинаковые, просто один из них (min) сжат и его размер составляет 3,5 Кбайт, а второй весит 9,8 Кбайт. Но есть одно существенное отличие: jquery.scrolldepth.js обновлен для работы с библиотекой gtag.js и новым кодом Google Analytics, поскольку там есть такой фрагмент:

Отслеживание глубины прокрутки Google Analytics

jquery.scrolldepth.js обновлен под gtag.js

Нам его все равно нужно будет чуть модифицировать согласно синтаксису команд Google Analytics. Но об этом чуть позже. Главное, не используйте их одновременно (jquery.scrolldepth.min.js и jquery.scrolldepth.js). Подключайте один из них. Я буду использовать в примере только jquery.scrolldepth.js.

analytics.js

Распакуйте все файлы (кроме папки test и jquery.scrolldepth.min.js) и загрузите их на сервер в папку, где находится ваш сайт.

Далее необходимо проделать следующие действия:

Примечание: рекомендуется подключать jQuery в header до кода Google Analytics.

  • подключить сам скрипт;
  • добавить настройки плагина;
Отслеживание глубины прокрутки Google Analytics

Установка плагина для библиотеки analytics.js

, где UA-XXXXX-Y – идентификатор вашего счетчика Google Analytics.

Достаточно подключить jQuery.scrollDepth({}); Но разберем все настройки данного плагина, которые можно вынести в отдельный файл:

// отключить отслеживание скролла, если документ меньше, чем:

minHeight: 0,

// массив элементов для записи событий прокрутки:

elements: [],

// включение/отключение отслеживания прокрутки в процентах:

percentage: true,

// включение/отключение отслеживания временных событий пользователя:

userTiming: true,

// включение/отключение отслеживания pixelDepth:

pixelDepth: true,

// true: события прокрутки не будут влиять на показатель отказов (не-взаимодействие):

nonInteraction: true,

// Если вы используете Universal Analytics и изменили имя глобального объекта, напишите его:

gaGlobal: false,

// Если вы используете GTM, но не используете его для Google Analytics, вы можете установить этот параметр в true, а Scroll Depth будет игнорировать GTM:

gtmOverride: false,

// Пользовательское имя для трекера:

trackerName: false,

// Пользовательское имя для dataLayer:

dataLayer: ‘dataLayer’

API методы:

// добавляем элементы для отслеживания:

jQuery.scrollDepth.addElements([‘#comments’, ‘footer’]);

// удаляем элементы из отслеживания

jQuery.scrollDepth.removeElements([‘#comments’]);

// перезагрузка функции

jQuery.scrollDepth.reset();

Интеграция с GTM. Необходимо указать следующие имена переменных:

  • Scroll Distance Event Name = ScrollDistance
  • Scroll Timing Event Name = ScrollTiming
  • Event Category = {{eventCategory}}
  • Event Action = {{eventAction}}
  • Event Label = {{eventLabel}}
  • Event Value = {{eventValue}}
  • Event Non-Interaction = {{eventNonInteraction}}

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

Нам не нужны все настройки плагина, а только % скроллинга и не-взаимодействие. Поэтому их можно удалить. Итоговый код для отслеживания глубины скроллинга библиотеки analytics.js в Google Analytics у меня выглядит так:

Отслеживание глубины прокрутки Google Analytics

Финальный код для библиотеки analytics.js

Загрузив все это на сервер и перейдя с меткой https://site.ru/?utm_source=yakov&utm_medium=osipenkov на тестовый сайт, выполним скроллинг всей страницы. В отчетах Google Analytics «В режиме реального времени» получим:

Отслеживание глубины прокрутки Google Analytics

Глубина скроллинга в отчетах GA

Перейдя в категорию события, увидим в ярлыке события % скроллинга:

Отслеживание глубины прокрутки Google Analytics

Проценты скроллинга в ярлыке события

Данные по глубине скроллинга успешно передаются в Google Analytics в качестве события. Вы можете настроить на эти события цель-событие (конверсию). Подробнее об этом читайте в разделе «Цели Google Analytics».

Дополнительную информацию по глубине скроллинга можно получить в отчетах «События – Лучшие события», или построив свой собственный (специальный) отчет.

Отслеживание глубины прокрутки Google Analytics

Специальный отчет

gtag.js

Все шаги те же самые. Все, что нужно сделать, это изменить код Google Analytics, а все остальное оставить как есть. Получим следующее:

Отслеживание глубины прокрутки Google Analytics

Финальный код для библиотеки gtag.js

, где UA-123435899-1 – идентификатор отслеживания Google Analytics.

На завершающем этапе нам нужно изменить конструкцию в jquery.scrolldepth.js. Найти следующие строчки (слева) и заменить (справа):

Отслеживание глубины прокрутки Google Analytics

Корректировка отправки события в gtag.js

Вот и все!

Отслеживание глубины прокрутки
4.5 Всего оценок: 2
Метки: , , ,

Получайте бесплатные уроки и фишки

По контекстной, таргетированной рекламе и аналитике