GTM. Как отслеживать прокрутку на сайте

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

Триггер глубины прокрутки

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

Настройки триггера:

Создать триггер: Триггеры — Создать — Глубина прокрутки

Направление прокрутки — горизонтальная и вертикальная — считается в процентах или пикселях. Если не нужно отслеживать каждую страницу, выберите опцию«некоторые страницы»: достаточно указать когда и почему триггер должен срабатывать (события и условия).

Здесь поможет режим предварительного просмотра: настройте триггер на 25% порог, зайдите на страницу и немного пролистните.

Пример данных из отладчика

 

  • event: ‘gtm.scrollDepth’ – имя события, которое автоматически загружается в dataLayer. Это событие, в свою очередь, активирует триггер глубины просмотра.
  • gtm.scrollThreshold: 25 – значение порога прокрутки в пикселях или процентах.
  • gtm.scrollUnits: ‘percent’ – здесь значение может быть «вертикальный» или «горизонтальный», в зависимости от типа прокрутки, который пересек порог.
  • gtm.scrollDirection: ‘vertical’ – тип прокрутки. В зависимости от типа прокрутки, может быть горизонтальным или вертикальным.

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


Настроим тег, чтобы собирать информацию по пролистыванию. Такой тег сработает при перелистывании через 25%:

Чтобы триггер не срабатывал при минимальном пролистывании, выставьте true для поля «Не взаимодействие» до прохождения порога в 25%, и false для остальных случаев.

 

ДжаваСкрипт переменная для поля «Не взаимодействие» выглядит так:

Скрипт возвращает значение true, если посетитель пролистывает далее отметки 25%, и false для всего остального. Показатель прокрутки может испортить данные: если загрузить страницу с середины или с конца, то триггер gtm.scrollDepth автоматически сработает для всех порогов, которые были пересечены. Чтобы триггер не сработал на коротких страницах, сделайте первый порог не интерактивным.

Триггер глубины прокрутки не отслеживает прокрутку к HTML-элементам. Используйте триггер видимости элементов, чтобы отслеживать прокрутку к конкретным элементам.

Триггер доступности элементов

Отслеживать прокрутку без привязки к элементам сложно. Разные по размеру и назначению страницы не дадут данных для анализа: 50% для статьи и 50% для фотогалереи ни о чем не говорят. На помощь приходит триггер видимости элементов:

 

Создать триггер: Триггеры — Создать — Доступность элемента. В справке Гугла триггер называется «Видимость элементов», но внутри GTM — «Доступность элемента». Это одно и то же.

 

Триггер отслеживает где посетитель остановился и сколько времени потратил на просмотр элементов: заголовков, рекламных предложений, фотографий. Триггер отслеживает изменения в структуре веб-страницы (DOM) и сработает как только посетитель увидит элемент в браузере.

Вьюпорт — видимая часть браузера: если элемент виден вьюпорте, он виден и посетителю.

 

Рассмотрим настройки триггера. Настроек больше чем у «глубины просмотров», но они помогают лучше понимать поведение посетителей.

Метод выбора. Идентификатор (ID) и Селектор CSS.

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

Селектор CSS подойдет для группы элементов. Например, чтобы отследить момент, когда пользователь увидит заголовок, страницу и подвал сайта, можно использовать в качестве селектора #header, h2.title, div.content, div.footer. Триггер сработает тогда, когда каждый элемент отобразится у пользователя.

Идентификатор — для уникальных элементов, Селектор — для нескольких.


Правило запуска триггера.
Триггер запустится когда посетитель увидит элемент, но правило определяет поведение триггера на странице:

  • Один раз на страницу. Триггер сработает один раз вне зависимости от метода. Для группы селекторов (#header, h2.title, div.content, div.footer) триггер также сработает единожды — когда посетитель увидит элемент с любым из этих селекторов.
  • Один раз на элемент. Триггер сработает один раз для идентификатора, но несколько раз для селектора. Для группы селекторов (#header, h2.title, div.content, div.footer) триггер сработает один раз для каждого селектора, в нашем случае максимум 4 раза. Правило помогает понять где посетитель прервал чтение. Например, прочитал заголовок и статью, но не увидел баннер.
  • При каждом появлении элемента на экране. Триггер постоянно срабатывает на определенном элементе.

Минимальный процент видимости. В процентах указывается насколько элемент должен отобразиться, чтобы триггер сработал. Такие данные достовернее: если триггер сработал со значением в 50%, значит посетитель точно увидел половину контента.

Минимальное время видимости. В миллисекундах указывается как долго элемент должен быть в поле зрения посетителя. Настройка кумулятивная: если указать 5000 мс, элемент должен быть в вьюпорте суммарно 5 секунд, даже если посетитель прокрутил вниз, а затем вернулся к элементу.

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

GTM рассчитывает каждый элемент индивидуально. Чтобы снизить нагрузку на сайт, отслеживайте уникальные элементы по ID.

Триггер сработает когда посетитель увидит элемент с ID #privet-vse, даже если элемент сгенерирован на стороне сервера и изначально не был частью страницы. Как триггер сработает, событие gtm.elementVisibility загрузится в отладчик вместе с переменными. Переменные показывают видимость элемента или его части:

  • gtm.element — виден элемент и его можно захватить с помощью переменной Click/Form Element.
  • gtm.elementClasses — класс элемента. CLick/Form Classes.
  • gtm.elementId — идентификатор элемента. Click/Form ID.
  • gtm.elementTarget — атрибут элемента. CLick/Form Target.
  • gtm.elementUrl — ссылка элемента. Click/Form URL.
  • gtm.visibleRatio — видимость элемента в процентах. Percent Visible.
  • gtm.visibleTime — продолжительность просмотра элемента в миллисекундах. On-screen.
  • gtm.visibleFirstTime — когда посетитель первый раз увидел элемент (время между загрузкой страницы и активацией триггера).
  • gtm.visibleLastTime — когда элемент последний раз отобразился в вьюпорте.

Используйте пользовательские переменные чтобы улучшать теги, триггеры и переменные.

 

Вывод

Гугл выпустил триггер глубины просмотров и доступности элементов. Оба триггера проработаны и работают стабильно.

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

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

Как сделать элементы заметнее мы разобрали в предыдущей статье:
Основные принципы интерактивного дизайна

 

По материалам simoahava.com