Сейчас в сети: 1K
Учитесь работать в Google Analytics вместе с нами!
star_border

Отслеживаем глубину скроллинга и время на странице в 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().

 

Версия скрипта, содержащая функцию getCharacters()

  

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

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

 

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

 

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

 

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

 

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

Анастасия Тимошенко

Меня зовут Анастасия. Занимаюсь интернет-рекламой и веб-аналитикой в компании OdesSeo. Сертифицированный специалист по Google AdWords и Google Analytics. Всегда рада поделиться опытом и узнать что-то новое=)

Комментарии
Yanko Ведущий участник
июня 2015

Спасибо, Анастасия! Нет слов просто! Читал вдумчиво)

a_timo_ Ведущий участник
июня 2015

Андрей,  спасибо! Очень радостный

agrigoryeva
июня 2015

Настя, очень здоровская статья!

Присоединяюсь к вдумчивым читателям))

 

a_timo_ Ведущий участник
июня 2015

Алена, спасибо!!

Ігор Лемешев
июня 2015
Спасибо, поставил в задачи для реализации )
Maxim-M Ведущий участник
июня 2015

Читал вдумчиво и впечатлился!

Супер!Очень радостный

a_timo_ Ведущий участник
июня 2015

@Ігор Лемешев, спасибо, это очень вдохновляет))

a_timo_ Ведущий участник
июня 2015

Максим, большое спасибо!!

Ekaterina L
июня 2015

Анастастасия, спасибо вам за интересную статью!
Этот скрипт можно адаптировать под обычный UA (без GTM)?

a_timo_ Ведущий участник
июня 2015

@Ekaterina L, спасибо за отзыв!

 

Да, скрипт можно адаптировать для случая, когда код установлен на сайт напрямую. Вам нужно удостовериться, что на сайте подключена библиотека jQuery (если нет, то подключить), так как мой скрипт использует методы этой библиотеки. И нужно будет передавать переменные, которые сейчас передаются в dataLayer, сразу как параметры события (Категория, Действие, Ярлык).

 

 

Андрей У
июня 2015

/Практическая ценность этого скритпа какая? Как позволяет улучшить работу сайта?

a_timo_ Ведущий участник
июня 2015

/Практическая ценность этого скритпа какая?

 

@Андрей У, практическая ценность скрипта - получение дополнительной возможности анализа трафика сайта с учетом значений точного времени пребывания на странице и глубины прокурутки. По умолчанию в GA, как Вы знаете, такого нет.

 

Как позволяет улучшить работу сайта?

 

У Вас появляется возможность определить, какой контент действительно представляет для людей ценность, а какой остается вне зоны их внимания. 

МаксимSM
июня 2015

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

a_timo_ Ведущий участник
июня 2015

Макс, спасибо!!Очень радостный

Леша Н
июня 2015

Скажите, а скрипт не должен начинаться и заканчиваться с <script> и закрывающим тегом соответственно? Весь день сегодня ломаюсь и никак не могу привести в рабочий вид ваш метод. Если вставляю без < > , начиная с (function , то на сайте просто под футером вылезает код скрипта. если ставлю в начале и конце скрипт, то режим отладки негодует, говоря "Ошибка компилятора Javascript - Ошибка в строке 14, символ 19. Parse error. ')' expected "

Сама строка 

return(current_max &gt; current_value ? current_max : current_value);

Помогите разобраться, пожалуйста. Очень хочу такую лакомку на сайт.

a_timo_ Ведущий участник
июня 2015

Леша, продублирую свой ответ Вам в фб и тут на всякий случай, вдруг у кого-то те же вопросы. Да, обязательно скрипт нужно заключать в HTML-теги скрипта <script>...</script>, как собственно и все фрагменты JavaScript, которые хотим установить как пользовательские теги. По поводу ошибки, проблема была в том, что редактор, через который я добавила статью, заменил все специальные знаки, например >, <... на их HTML-сущности, из-за этого и ошибка. Сейчас залила скрипты на гугл диск и открыла доступ по ссылке, ссылки в статье. И спасибо большое, что написали о проблеме!

Skinwalker
июля 2015

 Подскажите пожалуйста!

"событие gtm.dom" - это тригер, который следует создать заранее? Если да, то как?

Спасибо!

a_timo_ Ведущий участник
июля 2015

@Skinwalker, да, этот триггер нужно создать заранее http://prntscr.com/7q65bt

Skinwalker
июля 2015

Спасибо!

a_timo_ Ведущий участник
июля 2015

Не за что!Подмигивающий

Отличная идея и статья! Благодаря Вашей идее сделал другую простенькую реализацию для одностраничных сайтов (Landing Page) - делаем их "виртуальными многостраничниками" и получаем отчеты по времени, количеству посещений и прочих показателей по каждому разделу страницы. 
Может кому пригодиться: http://esliklientov.net/articles/%D0%B2%D0%B5%D0%B1-%D0%B0%D0%BD%D0%B0%D0%BB%D0%B8%D1%82%D0%B8%D0%BA...

a_timo_ Ведущий участник
июля 2015

@Андрей М, спасибо! 

Александр А
сентября 2015

а каким образом эта опция влияет на показатель отказов?:

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

 

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

Александр А
сентября 2015

также заметил, что почему то не всегда при переходе на другую страницу срабатывает отправка события в GUA http://c2n.me/3nwZy6i.png , но при этом сам скрипт скролла всегда запускается http://c2n.me/3nwZIyb.png . Получается проблема в вызове события "Scroll to" в самом скрипте скролла?

- и еще вопрос: подскажите, пожалуйста, можно ли настроить цель в аналитикс, когда в течении сеанса/посещения сайта юзер выполнит две разные цели (то есть, он не обязательно их должен выполнить одновременно, а в течении посещения сайта) ?

Александр А
сентября 2015

- по поводу срабатывания события в GUA http://c2n.me/3nwZy6i.png : заметил, что проблема наблюдается только в браузере Мозила (последняя версия), пробовал на двух компах. Это у всех так?

a_timo_ Ведущий участник
сентября 2015

@Александр А

 

а каким образом эта опция влияет на показатель отказов?:

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

 

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

 

также заметил, что почему то не всегда при переходе на другую страницу срабатывает отправка события в GUA http://c2n.me/3nwZy6i.png , но при этом сам скрипт скролла всегда запускается http://c2n.me/3nwZIyb.png . Получается проблема в вызове события "Scroll to" в самом скрипте скролла?

 

Отправка события осуществляется перед закрытием текущей страницы, обновлением или переходом на другую страницу. В отладчике Вы не всегда можете успеть увидеть загрузку этого тега. Проверяйте в отчете "Режим реального времени", вторая вкладочка отчета: "События (за последние 30 мин.)". Там все события видны. 

 

- и еще вопрос: подскажите, пожалуйста, можно ли настроить цель в аналитикс, когда в течении сеанса/посещения сайта юзер выполнит две разные цели (то есть, он не обязательно их должен выполнить одновременно, а в течении посещения сайта) ?

 

То есть цель должна засчитываться, если выполнены две цели в рамках сеанса или хотя бы одна из них?

 

- по поводу срабатывания события в GUA http://c2n.me/3nwZy6i.png : заметил, что проблема наблюдается только в браузере Мозила (последняя версия), пробовал на двух компах. Это у всех так?

 

Протестировала сейчас, у меня работает и в мозиле. Я еще проверю позже, возникают ли проблемы, в зависимости от версии. Спасибо Вам за наводку!

 

 

 

Александр А
сентября 2015

- То есть цель должна засчитываться, если выполнены две цели в рамках сеанса или хотя бы одна из них?

когда выполнены две цели в рамках сеанса

 

- по поводу мозилы: данная проблема наблюдается только на данном сайте (на другом сайте все ок) и только в мозиле (пробовал в мозиле на разных компах). Получается, тут дело в связке сайт-мозила (могу в личку написать сайт и дать доступ) . Буду благодарен за помощь в определении причины...

Александр А
сентября 2015

- и еще подскажите, пожалуйста, можно ли как- то сделать, чтоб если пользователь в рамках сеанса достигает несколько раз одну и ту же цель, то фиксировать эту цель в аналитикс только 1 раз?

a_timo_ Ведущий участник
сентября 2015

@Александр А,

 

- То есть цель должна засчитываться, если выполнены две цели в рамках сеанса или хотя бы одна из них?

когда выполнены две цели в рамках сеанса

 

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

 

- по поводу мозилы: данная проблема наблюдается только на данном сайте (на другом сайте все ок) и только в мозиле (пробовал в мозиле на разных компах). Получается, тут дело в связке сайт-мозила (могу в личку написать сайт и дать доступ) . Буду благодарен за помощь в определении причины...

 

Да, напишите мне, пожалуйста, в личку, я посмотрю, что не так.

 

- и еще подскажите, пожалуйста, можно ли как- то сделать, чтоб если пользователь в рамках сеанса достигает несколько раз одну и ту же цель, то фиксировать эту цель в аналитикс только 1 раз?

 

Тут ничего настраивать дополнительно не нужно. Если даже цель была достигнута несколько раз на протяжении сеанса, в аналитике будет зафиксировано одно достижение. 

Andrey K
января 2017

скрипт конечно интересный, но проще посмотреть тепловую карту в метрике

Kolbason Q
Март

Анастасия, добрый день.

Не могли бы вы написать как реализовать данную возможность, если код счетчика установлен напрямую на сайт, а не через GTM?

Вот такая ошибка появилась

Redirect from 'http://www.google-analytics.com/r/collect?v=1&_v=j56&a=1579367285&t=event&n…=UA-7925XXX-1&_gid=12031...' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xxxxx.ua' is therefore not allowed access.

Юрий М
‎06-02-2018 08:07 AM

 Кто нибудь пробовал настроить данное чудо в 2018 году ? Мне как начинающему настроить не удалось, извинился интерфейс и возможно уже есть какие то более продвинутые способы ? Я не нашел событие gtm.dom. так же как и условий.  И что делать не совсем понятно ....