глубина скроллинга

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

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

История создания

Когда у меня появилась необходимость отслеживать глубину скроллинга, я искала готовые решения, но в них всех отправка события осуществлялась по мере прокрутки, то есть отправлялись не только окончательные данные по скроллингу для страницы, но и промежуточные, причем принцип отправки данных заключался в фиксации события каждый раз по достижении определенного значения, а не в отправке максимального значения, как того хотелось бы. Это затрудняло последующий анализ. Хотелось иметь перед глазами более точную картину происходящего, поэтому я написала собственное решение – скрипт, в котором я отправляю максимальную глубину скроллинга и точное время пребывания на текущей странице перед ее закрытием, обновлением или переходом на другую страницу.

Описание скрипта

Мой скрипт позволяет отправлять максимальные значения скроллинга и точного времени на странице, так как я использую событие beforeunload, которое назначается объекту window, и действие которого будет выполнено в момент перед завершением работы пользователя со страницей (ее закрытие, обновление или переход на другую страницу). В каждый момент прокрутки страницы я сравниваю текущее значение глубины скроллинга с уже зафиксированным и выбираю наибольшее из них, таким образом, в момент закрытия окна у меня имеется максимальное значение глубины скроллинга. С помощью функции getTime() класса Date я фиксирую время при заходе пользователя на страницу и время при наступлении события beforeunload (завершение работы со страницей), затем определяю разность этих величин и получаю общее время на странице. Полученные значения времени и скроллинга записываю в переменные, которые передаю в GTM посредством datalayer.push(). Помимо точных значений времени и скроллинга для удобства последующего анализа в скрипте я также группирую данные по диапазонам.

Скрипт доступен по ссылке

Инструкция по внедрению

1. Добавляем новый тег типа “Пользовательский тег HTML”

Вставляем в текстовое поле скрипт, о котором шла речь выше.

инструкция

В качестве условия активации тега указываем событие gtm.dom.

инструкция

2. Создаем следующие переменные уровня данных:

time_on_page и percent_of_scrolling, percent_of_scrolling_interval, time_on_page_interval

инструкция

инструкция

скроллинг

прокрутка

3. Создаем новый триггер типа “Пользовательское событие” Scroll to.

скроллинг

4. Добавляем новый тег типа Universal Analytics, который будет отправлять данные о нашем событии в аналитику.

В настройках тега в качестве типа отслеживания выбираем “Событие”. Указываем Категорию и Действие. В качестве правила активации добавляем пользовательское событие “Scroll to”.

скроллинг

Хочу обратить внимание на опцию “Не взаимодействие” (ВАЖНО!).

время на странице

Если вы хотите, чтобы отправка события влияла на ваш показатель отказов, то необходимо установить значение “false” для этого параметра. В противном случае – устанавливайте значение “true”.

В качестве категории события я передаю URL текущей страницы: {{Page Path}}.

В качестве действия события я передаю строку вида:

Scrolling to {{percent_of_scrolling}} and time on page {{time_on_page}}.

Таким образом в отчетах по поведению, выбрав в качестве основного параметра “Действие по событию”, я смогу видеть данные в следующем виде для каждой категории события – страницы моего сайта.

лучшие события

Для группировки этих данных можно воспользоваться регулярными выражениями (Подробнее я рассматривала примеры использования регулярных выражений тут). Например, если я считаю, что показателем вовлеченности пользователя в контент определенной страницы является скроллинг глубиной не менее 80% и время на странице не менее 2 минут, то я могу настроить соответствующее регулярное выражение:

регулярное выражение

Scrolling to (([8-9][0-9])|100)% and time on page [0-9][0-9]:[0-5][2-9]:[0-5][0-9]

Но все же работать с данными в таком виде не слишком удобно, поэтому для удобства последующего анализа я добавила в скрипт группировку по диапазонам. Тут нам понадобятся переменные percent_of_scrolling_interval, time_on_page_interval.

Например, передав в качестве действия события строку Scrolling {{percent_of_scrolling_interval}}, а в качестве ярлыка события – Time on page {{time_on_page_interval}}, мы сможем увидеть данные о скроллинге и времени для каждой страницы, сгруппированные по диапазонам.

Данные о скроллинге для каждой страницы, сгруппированные по диапазонам.

лучшие события

Данные о времени для каждой страницы, сгруппированные по диапазонам.

прокрутка

Группировка значений прокрутки и времени осуществляется в функциях getTimeInterval() и getScrollingInterval() соответственно. Эти функции принимают на входе переменные deep и time, в которых я храню значение глубины скроллинга и времени на странице, и возвращают диапазоны, к которым относятся значения переменных. Если вам захочется изменить диапазоны, например еще больше детализировать их, то в тело этих функций нужно будет добавить дополнительные условия.

прокрутка

Анализируем своих читателей

Часто отслеживание глубины скроллинга и времени на странице применяется в анализе блогов и позволяет сделать выводы о ценности публикуемого контента для пользователей.

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

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

Характеристика читателя статьиСкроллинг, %Время
Читал вдумчиво70-100Более 70% от эталонного времени
Читал по диагонали70-100Менее 70%, но более 10% от эталонного времени
Не читал вовсе0-10Любое время
Бросил читать на середине40-70Более 35% от эталонного времени
Бросил читать в начале10-40Более 17.5% от эталонного времени
Просмотрел материал до середины40-70Менее 35% от эталонного времени
Начал просматривать, но бросил в начале10-40Менее 17.5% от эталонного времени
Проскроллил до конца, не читая70-100Менее 10% от эталонного времени

где эталонное время – это время, которое на Ваш взгляд либо исходя из каких-то экспериментов, является оптимальным для прочтения статьи.

Я его выбирала исходя из соответствия длины страницы в пикселях и времени, которое затрачивается на ее прочтение. Кратко опишу свой подход. Рассматриваем несколько статей анализируемого блога, находим длину этих страниц в пикселях, засекаем, сколько времени нужно группе людей, чтобы прочитать статью. Находим среднее время, которое тратится читателями на прочтение каждой статьи. Зная длины страниц в пикселях и полученные средние значения времени, можем получить некоторый коэффициент, который показывает, сколько пикселей страницы прочитывается за единицу времени в среднем. Я нахожу два таких коэффициента: для пк и мобильных устройств. Эти показатели я и использую для подсчета эталонного времени прочтения каждой статьи. Выбранные коэффициенты подходят в моем случае, и, вполне вероятно, подойдут еще для каких-то ресурсов, размещающих статьи. Однако следует помнить, что они зависят от особенностей отображения статей на сайте и их содержимого, а значит могут нуждаться в корректировке. Желательно проводить такую корректировку в рамках каждого контентного ресурса отдельно, так как идеально подстроиться под стили отображения текста на странице, шрифты и т. д. нескольких блогов одновременно невозможно.

Итак, если вы каким-то образом определили это магическое число, то в скрипте в переменной “etalon” вам нужно заменить мои значения на свои. Еще раз акцентирую внимание, в переменной “etalon” хранится коэффициент, который показывает, сколько пикселей страницы оптимально должно быть прочитано за единицу времени.

время на странице

Для присваивания категории читателю в исходный скрипт я добавила функцию getCharacters().  Функция getCharacters() принимает на входе переменные deep и time. В теле функции я реализую определение принадлежности читателя статьи категории. Вы можете модифицировать критерии, по которым присваивается категория читателю статьи, если пожелаете.

Таким образом, чтобы помимо данных о скроллинге и времени на странице, передавать также характеристику читателя, нужно использовать версию скрипта с функцией getCharacters(), а также  добавить еще одну переменную уровня данных и внести небольшие изменения в тег отправки события скроллинга GUA.

Добавляем присваивание категории читателю

1. Создаем переменную уровня данных character

скроллинг

2. В качестве пользовательского тега HTML используем новую версию скрипта, содержащую функцию getCharacters()

Скрипт доступен по ссылке

3. Вносим изменения в тег отправки события скроллинга GUA

тег отправки события

Таким образом в аналитике мы сможем увидеть вот такой отчет по каждой статье (отчет Поведение>>События>>Лучшие события>>выбираем категорию события – интересующую нас статью):

лучшие события

Надеюсь, что моя работа будет полезной для вас, и кто-нибудь попробует внедрить мой скрипт на своем сайте! Если возникают вопросы/предложения – пишите, буду рада получить фидбек!