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

Ранее мы рассматривали поведенческие характеристики 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

Вот и все!

Понравилась статья? Подписывайтесь на социальные сети:

Yakov Osipenkov | 03.01.2019
Отслеживание глубины прокрутки
4.5 Всего оценок: 2

КонтактыКонтакты

Связаться

Контактная информация

Выпускник МГТУ им. Баумана (2008-2014), ведущий специалист по контекстной рекламе компании ConvertMonster (2016-2017), сертифицированный специалист по Google AdWords и Google Analytics, автор курса Google Adwords 3.0 (2017) и публикаций учебных материалов по продуктам Google на seonews.ru, searchengines.ru, webpromoexperts.com.ua, менеджер по мобильному трафику в компании Kokoc (2017-март 2018)

По вопросам консультаций, сотрудничества и предложений:

Skype

yasha.cmteam

E-mail

ya.osipenkov@icloud.com

Обратная связь

Имя:

E-mail:

Тема письма:

Ваше сообщение:


УслугиУслуги

Чем полезен
E-Commerce

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Responsive Design

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Web Security

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Behold appear first, kind all i saying fowl man itself moved which every open shall moved subdue appear.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

  •  Contabile computer 100% responsive design
  •  Contabile laptop 100% responsive design
  •  Contabile tablet 100% responsive design
  •  Contabile smartfon 100% responsive design

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

E-COMMERCE

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

КонтактыКонтакты

Связаться

Контактная информация

Выпускник МГТУ им. Баумана (2008-2014), ведущий специалист по контекстной рекламе компании ConvertMonster (2016-2017), сертифицированный специалист по Google AdWords и Google Analytics, автор курса Google Adwords 3.0 (2017) и публикаций учебных материалов по продуктам Google на seonews.ru, searchengines.ru, webpromoexperts.com.ua, менеджер по мобильному трафику в компании Kokoc (2017-март 2018)

По вопросам консультаций, сотрудничества и предложений:

Skype

yasha.cmteam

E-mail

ya.osipenkov@icloud.com

Обратная связь

Имя:

E-mail:

Тема письма:

Ваше сообщение:


УслугиУслуги

Чем полезен
E-Commerce

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Responsive Design

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Web Security

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Behold appear first, kind all i saying fowl man itself moved which every open shall moved subdue appear.

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

  •  Contabile computer 100% responsive design
  •  Contabile laptop 100% responsive design
  •  Contabile tablet 100% responsive design
  •  Contabile smartfon 100% responsive design

I am text block. Click edit button to change this text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

E-COMMERCE

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Creative Ideas

Minima maxime quam architecto quo inventore harum ex magni, dicta impedit.

Бесплатные уроки по контекстной

рекламе и веб-аналитике!

Решаем задачи

Общаемся

Делимся

Спасибо за подписку!