Отслеживаем глубину скроллинга и время взаимодействия со страницей: полная инструкция

 

Отслеживаем глубину скроллинга и время взаимодействия со страницей: полная инструкция

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

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

Сегодня я хочу рассказать о том, как вы можете отследить все эти действия и на основании данных улучшить показатели. И так, приступим.

Есть несколько возможных подходов к решению этой задачи. Я расскажу о тех, которые знаю, ну и не стесняйтесь делиться своими идеями в комментариях.

  1. Отправка информации с помощью событий:
  2. Отправка данных с помощью пользовательских параметров и показателей.

1. Отправка информации с помощью событий

1.1. Отправка информации с помощью стандартных событий диспетчера тегов Google

Осенью ребята с Google добавили в GTM новый тип тригера Глубина прокрутки. Точнее, добавили они не только этот, еще Видео YouTube и Доступность элемента, но мы сегодня остановимся именно на первом.

типы тригеров в GTM

Настройка такого тригера выглядит, примерно, следующим образом:

Настройка тригера глубина скролинга в диспечере тега

  1. Выбираем Тип триггераГлубина прокрутки.
  2. Указываем как мы хотим измерять глубину вертикальной прокрутки (через запятую указываем пороговые значения в процентах или пикселях).
  3. Указываем, по необходимости, аналогичное для горизонтальной прокрутки.
  4. Дополнительное условие для активации триггера, если мы хотим отслеживать данные только на определенных страницах.
  5. И не забываем нажать на кнопку Сохранить.

Далее идем на вкладку Переменные и включаем Встроенные переменные с раздела Прокрутка:

  • Scroll Depth Threshold - в эту переменную передается пороговое значение, которое достиг посетитель, например 50;
  • Scroll Depth Units - здесь хранится информация о способе отслеживания порогового значения, например 'percent' если мы отслеживаем скроллинг в процентах;
  • Scroll Direction - тип скроллинга, который мы отслеживаем, например 'vertical' для вертикального отслеживания.

Встроенные переменные глубины скролинга

Все данные у нас есть, осталось передать их в Google Analytics. Передаем с помощью стандартного тега события:

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

  • Категория — Scrolling
  • Действие — {{Scroll Depth Threshold}}% - используем значение переменной Scroll Depth Threshold + добавляем символ “%”, чтобы удобнее воспринимать данные в интерфейсе Google Analytics. Для отслеживания в пикселях соответственно можно писать “px”.
  • Ярлык — {{Page Hostname}}{{Page Path}} или же просто {{Page URL}}, что идентично предыдущему. Если вы отслеживаете и горизонтальный и вертикальный скролл, то в ярлык можно передавать тип скролла.
  • Не взаимодействие — вы можете выбрать “True” - если не хотите, чтобы данные влияли на показатель отказов и “False” - чтобы влияли. В моем примере мы используем еще одну переменную — Scroll Interaction. Выглядит она следующим образом:Переменная типа взаимодействия при настройке глубины скролинга

Работает так: если пользователь проскролил 50% страницы и больше, то отправляется событие, которое влияет на показатель отказов, если меньше — событие на показатель отказов не влияет.

На выходе получаем примерно вот такой пользовательский отчет в Google Analytics:

Пользовательский отчет глубины скролинга Google Analytics

В котором есть данные о том, как люди просматривают страницу в формате “воронки” и возможность быстрого поиска нужных страниц (вот ссылка на сам шаблон отчета).

Все как бы хорошо, но есть одно но: с этого отчета мы не можем понять, сколько времени пользователи взаимодействовали со страницей. Конечно, вы можете сказать, что время проведенное на странице и так отображается в Google Analytics. Заходим например в отчет Поведение >> Анализ посещаемости страниц и смотрим нужные данные:

Средняя длительность просмотра страницы в стандартном отчете

Просто добавляем показатель “Средняя длительность просмотра страниц” в наш пользовательский отчет. Но есть два но:

  • во-первых, данные по показателю Средняя длительность просмотра страниц”  не будут отображаться в нашем отчете в связи с особенностями сбора данных и работы Google Analytics:
  • во-вторых, на самом деле этот показатель (Средняя длительность просмотра страниц) не показывает (извините за тавтологию) то, что нам интересно. В открытой справке я не нашел информации, поэтому для особо недоверчивых привожу ответ службы поддержки:

Официальное определение средней длительности просмотра страницы

Получается, чем больше показатель отказов на странице, тем менее верным будет значение показателя “Средняя длительность просмотра страниц”. Думаю не стоит останавливаться и рассказывать, почему такой показатель лучше не использовать при анализе )). Поэтому нужен другой способ, его мы и рассмотрим далее.

1.2. Отслеживаем глубину скроллинга и время проведенное на странице с помощью пользовательского скрипта и диспетчера тегов Google

Первое, что хотелось бы сделать в этом разделе, это поблагодарить Анастасию Тимошенко, именно она создала скрипт, который мы будем рассматривать в этом пункте. Забегая наперед скажу, что мы его (скрипт) немного улучшили, но об этом дальше. Подробную инструкцию по работе с оригинальным скриптом от самой Насти вы можете почитать по ссылке. Мы же рассмотрим это вкратце. Этапов всего четыре:

  1. Создаем тег типа Пользовательский тег HTML, с тригером события gtm.dom, в который мы и вставим наш скрипт
  2. Создаем тригер типа Пользовательское событие и значением Scroll to:
    Настройка тригера пользовательского отслеживания скроллинга
    В пункте  Условия активации тригера можно добавить дополнительные условия, как в моем случае, или же просто выбрать Все специальные события.
  3. Создаем пользовательские переменные типа Переменная уровня данных:
    Пользовательские переменные уровня данных для отслеживания глубины скроллинга

    • percent_of_scrolling
    • percent_of_scrolling_interval
    • time_on_page
    • time_on_page_interval
    • character

    Подробные Пользовательские переменные уровня данных для отслеживания глубины скроллинга

  4. Настраиваем тег отправки событий в Google Analytics:
    Отправка события пользовательского скроллинга в аналитику
    Помимо данных о глубине просмотра и времени взаимодействия мы также можем передавать в пользовательские параметры дополнительную информацию. Например, как в нашем случае: информацию об авторе, категорию статьи, а также client ID посетителя. О том, как передавать значения client ID можно почитать в блоге Андрея Осипова. Что касается передачи информации об авторе и категории блога, то я расскажу о нашем опыте в одной из ближайших статей.

После всех настроек в Google Analytics мы сможем построить следующие отчеты:

  • по времени на странице и глубине скролинга:

Пользовательский отчет пользовательского скроллинга

  • по типам читателей:

Пользовательский отчет по типам читателей на блоге

Данные собранные с помощью этого скрипта верные, в отличии от стандартных показателей Google Analytics, но был в них один момент, который хотелось бы улучшить: вы наверное замечали, что окно браузера среднестатистического пользователя интернета выглядит примерно так:

Типичное окно браузера среднестатестического пользователя

Мало того, что люди открывают множество вкладок и постоянно перемещаются между ними, они еще и в поисковой выдаче ведут себя примерно следующим образом:

Строка поиска Google

Открывается сразу несколько вкладок, дальше по очереди ищется ответ. Если ответ найден - все оставшиеся вкладки просто закрываются. Знакомо? 🙂

1.3. Отправка данных о просмотре активной вкладки с помощью пользовательского скрипта

В итоге вполне возможна ситуация, что пользователь открыл страницу в новой вкладке, ни секунды на ней не был и через три минуты закрыл. В этом случае скрипт, который мы рассматривали выше, передаст в Google Analytics информацию о том, что пользователь смотрел страницу 3 минуты. На самом же деле он её не видел. Чтобы исправить это мы внесли в работу скрипта определенные правки основанные на работе  Page Visibility API. За помощь с JS спасибо Евгений Гардыш.

Теперь скрипт анализирует информацию о том, активна вкладка или нет. Время неактивности записывается в переменную window_invisibility_time и в конечном итоге отнимается от времени проведенного на странице:

Пользовательская переменная активного времени на странице

Конечно же, чтобы не рушить работу старого скрипта все переменные уровня данных сохранены и добавлен ряд новых:

  • time_on_page_active — активное время на странице;
  • time_on_page_int_active — активное время на странице в разбивке по интервалам;
  • time_invisibility — время которое страница была неактивна

Более наглядно правки можно увидеть на скрине ниже:

Сравнение скриптов отслеживания скроллинга и времени взаимодействия

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

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

2. Отправка данных с помощью пользовательских параметров и показателей

2.1 Передаем информацию о глубине скроллинга и времени взаимодействия со страницей с помощью пользовательских параметров и показателей

Собирать данные мы будем с помощью скрипта, о котором я писал в предыдущем пункте. Единственное, скрипт, который мы рассматривали передает значения времени в формате 00:00:00, нам же, в пользовательский показатель нужно передавать значение в секундах, например: 42 (секунды). Чтобы это исправить мы внесем в скрипт некоторые правки:

Внедрение дополнительных переменных в пользовательский скрипт

Добавляем еще две переменных:

  • time_on_page_sec - передаем время, от загрузки страницы, до выхода с неё в секундах;
  • time_on_page_active_sec - передаем время, когда вкладка со страницей активна.

Ремарка: Возможно такое добавление не является полностью правильным и код можно оптимизировать. Я всё таки не программист, и если вы можете подсказать, как сделать правильнее - пишите в комментариях.

Также мы убрали часть информации, которую передавали в DataLayer, а взамен добавили новые переменные. Готовый скрипт можно найти по ссылке.

Теперь новые данные нужно отправить в Google Analytics. Алгоритм следующий:

  • Создаем в Google Tag Manager пользовательский HTML c новым скриптом;
  • Создаем тригер Пользовательского события gtm.dom:

Пользовательские события GTM.dom

  • Создаем необходимые нам переменные уровня данных:
  • time_on_page_sec - время на странице (в секундах);
  • time_on_page_active_sec - время на странице, когда вкладка активна (в секундах);
  • time_invisibility - время, когда вкладка со страницей не активна (в секундах);
  • percent_of_scrolling - глубина скроллинга в процентах;
  • character - тип читателя.
  • Добавляем необходимые нам пользовательские параметры и показатели в интерфейсе Google Analytics. Для этого переходим в раздел Администратор >> Пользовательские определения и выбираем, что мы хотим создать первым:

Пользовательское определения в гугл аналитикс

Итак, нам понадобятся следующие пользовательские параметры:

  • Категория читателей
  • Интервал скроллинга

Важно выбрать нужную область действия. Поскольку мы будем отправлять значения с помощью отправки событий по каждой отдельной статье, как область действия для пользовательских параметров и показателей выбираем “Hit”.

Пользовательские параметры в гугл аналитикс

Необходимо также создать пользовательские показатели:

  • Длительность просмотра страницы
  • Длительность активного просмотра страницы
  • Длительность неактивности страницы (его также можно рассчитать с помощью вычисляемых показателей Длительность неактивности страницы = Длительность просмотра страницы - Длительность активного просмотра страницы)

Пользовательские показатели в гугл аналитикс

При создании обратите внимание на Область действия (должно быть Hit) и Тип форматирования (Время):

Изменение пользовательского показателя Google Analytics

 

  • Последний этап - это создание тега, который будет отправлять необходимые данные в Google Analytics. Передавать будем с помощью стандартного тега события Google Analytics, но с некоторыми расширенными настройками:

Отправка событий с пользовательскими параметрами и показателями в Google Analytics

  • Поля которые необходимо задать — указываем название поля transport, со значением beacon. Этот параметр превращает вызов в запрос POST (вместо обычного GET) и передает его асинхронно на конечную точку GA, используя navigator.sendBeacon().Более подробно можно почитать здесь.
  • Специальные параметры — в поле Индекс указываем значения Индексов с Google Analytics, в значение передаем созданные переменные.

Специальные параметры Google Analytics

  • Специальные показатели — здесь все аналогично предыдущему пункту.

Пользовательский отчет с пользовательскими показателями

После всех настроек и создания пользовательского отчета у нас получится такой отчет:

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

Пользовательский отчет с пользовательскими показателями гугл аналитики

2.2 Рассчитываем нужные значения с помощью Вычисляемых показателей

На помощь приходят вычисляемые показатели.

Вычисляемые показатели Google Analytics

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

Создаются вычисляемые показатели очень просто. Разберём на примере Средней длительности активного просмотра страницы:

  • Указываем название, например: Средняя длительность активного просмотра страницы;
  • Задаем внешнее имя для идентификации вычисляемого показателя при запросе с помощью API — calcMetric_avgTimeActivePage;
  • Выбираем Тип форматирования — есть несколько вариантов, в нашем случае используем Время:

Типы форматирования вычисляемых показателей

  • Формула — указываем формулу для расчета, например: {{Длительность активного просмотра страницы}} / {{Просмотры страниц}}.

Настройка вычисляемых показателей в гугл аналитикс

Аналогично создаем и другие вычисляемые показатели:

  • Средняя длительность просмотра страницы;
  • Средняя длительность неактивности страницы.

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

Пользовательский отчет с вычисляемыми показателями

С этими данными уже удобно работать. Их также можно использовать совместно с другими показателями для формирования различных отчетов.

2.3 Передаем информацию о времени взаимодействия со страницей с помощью Chartbeat

Если всего вышеперечисленного вам мало и вы хотите отслеживать время взаимодействия с вашей страницей еще более точно, тогда вам в помощь  исследования Chartbeat. Не буду здесь подробно останавливаться, так как статья и так получилась очень большой. Если кратко, то ребята выявили, что при активном взаимодействии со страницей пользователь раз в 5 секунд совершает дно из следующих действий:

  • mousedown — нажатие кнопки мыши;
  • keydown — нажатие клавиши на клавиатуре;
  • scroll — прокрутка страницы;
  • mousemove — движение мышкой.

Ознакомившись с этим исследованием мы решили внести еще несколько правок в скрипт отслеживания скроллинга и времени взаимодействия со страницей. Последнюю версию этого скрипта вы можете взять по этой ссылке.

Для использования этой версии нужно добавить две новых переменных уровня данных:

  • user_activity_time - время, которое пользователь взаимодействовал со страницей в секундах;
  • user_engagement_time_int - время, которое пользователь взаимодействовал со страницей в интервальном значении.

Нужно также создать пользовательский показатель, в который мы будем передавать данные:

Изменение пользовательского показателя гугл аналитикс

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

Отправка события с пользовательскими параметрами и показателями скриншот 2

ну и не забываем создать расчетную меру — Средняя длительность взаимодействия со страницей.

Изменение вычисляемых показателей в аналитикс

Важно! Так как эта версия скрипта не отслеживает такие способы взаимодействия, как touchstart и touchend, в данный показатель будут передаваться верные данные только о взаимодействии с компьютеров и ноутбуков. Если вы знаете подобные исследования связанные с мобильными устройствами сообщите о них пожалуйста в комментариях.

В конце у вас получится вот такой интересный отчет:

Финальный пользовательский отчет длительности взаимодействия с страницей

Как видите, значения полученные в результате наших настроек очень отличаются от стандартных в Google Analytics.

Вместо завершения

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

Понравился пост? Не поленись поставить лайк 😉

  • Юрий Мещеряков

    Дошел до создания пользовательских параметров и не понял что делать дальше …
    http://prntscr.com/iltzyh
    Что куда вписывать в этот деменшен, не понятно, и у вас об этом не слова … Я к сожалению не профи, но настроить пытаюсь ….

    • Maks Hapchuk

      Юрий, цифру, которую вы получили при создании https://clip2net.com/s/3SmdOn6 нужно использовать при настройке тега события. По аналогии с этим https://clip2net.com/s/3SmdRry . Где использовать указал стрелкой https://clip2net.com/s/3SmdSoW
      Если не совсем понятно, пишите, распишу более подробно 😉

      • Юрий Мещеряков

        Если можно поподробней, и я уже порядком запутался, какой же по итогу Тег используем:
        http://prntscr.com/imu785
        Еще на вашем примере значения начинаются с DL — по инструкции таких не было, так же там author,blog_post_category которых не было… В общем я запутался )

        • Maks Hapchuk

          Юрий, давайте попробуем разобраться 😉
          Подскажите, какой вариант настройки вы выбрали, чтобы более точно вас понимать?
          «Еще на вашем примере значения начинаются с DL — по инструкции таких не было» — DL я дописываю к переменным для личного удобства работы с ними, вы можете так не делать и называть переменные как вам удобно.
          «так же там author,blog_post_category которых не было» — в статье указано, что об этом более подробно я расскажу в одной из следующих статей, пока материал готовится)
          Вам нужно настроить следующее:
          — тег типа пользовательский HTML со скриптом и тригером gtm.dom
          — тег передачи события в Google Analytics с тригером scroll to
          в теге этого события необходимо передавать значения нужных переменных в соответствующие поля пользовательских параметров/показателей.

          • Юрий Мещеряков

            теге этого события необходимо передавать значения нужных переменных в соответствующие поля пользовательских параметров/показателей. — и вот тут я у меня заминка, постучался к вам в скайп, надеюсь подскажите )

          • Maks Hapchuk

            ответил в скайпе)

  • Pavel Mashchanka

    Спасибо за подробный материал. Но в переменной Scroll Interaction значение True и False, скорее true и false 🙂

    • Maks Hapchuk

      Павел, спасибо за внимательность, вы полностью правы 😉 Скрин мы поменяем, чтобы не запутывать остальных читателей. Надеюсь материал был для вас полезен?)

  • Максим Зиборов

    Доступ к доку с последней версией скрипта ограничен, запросил разрешение.
    Вопрос: триггер для начальной версии скрипта (часть 1.2) отличается от триггера в части 2.1
    Скрипт же дублировать не нужно? Какой тогда триггер использовать? Или оба?

    • Maks Hapchuk

      Максим, доступ открыли. По поводу тригера: любой из указанных скриптов работает по тригеру gtm.dom (Модель DOM готова). Скрипт дублировать не нужно, используйте только тот, который необходим

  • Василий Курий

    День добрый. Очень интересная информация. Запросил доступ к последней версии скрипта. Буду благодарен за возможность ознакомления.

    • Василий Курий

      Благодарю за доступ))

  • Дмитрий Смоляков

    Пытался настроить по пункту 1.2. Метод описан с пробелами. Не понятно откуда беруться специальные параметры в теге ГА и как их настроить

  • Валерия

    Мне вот нужно чтобы как-то регистрировался просмотр страницы, даже если его нет) Вот как можно накрутить глубину просмотра в метрике через GTM? Помогите плиз)