Глубина прокрутки для Яндекс.Метрики

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

Если вам интересно, как настраивается отслеживание скроллинга для Google Analytics, рекомендую прочитать эти материалы:

• Отслеживание глубины прокрутки для Universal Analytics с помощью Google Tag Manager
• Отслеживание глубины прокрутки для Google Analytics 4 с помощью Google Tag Manager
• Отслеживание глубины прокрутки (без использования Google Tag Manager)

Настроить отслеживание глубины прокрутки для Яндекс.Метрики можно несколькими способами:

1. каждое событие - это отдельное пороговое значение;
2. одно событие, но внутри него несколько параметров события.

Предварительные настройки

Давайте рассмотрим каждый способ подробнее. Но перед тем, как вы это сделаете, произведите предварительные настройки в своем контейнере Google Tag Manager. Если вы никогда не настраивали глубину прокрутки, то порядок действий следующий:

1. активируйте встроенные переменные;
2. настройте триггера;
3. создайте тег для Яндекс.Метрики.

Активация встроенных переменных

Для активации встроенных переменных необходимо перейти в раздел Переменные и активировать встроенные переменные типа Прокрутка.

Переменные:

• Scroll Depth Threshold — возвращает значение порога прокрутки. В зависимости от настроек будет либо в процентах (%), либо в пикселях (px);
• Scroll Depth Units — переменная возвращает значение в пикселях (pixels) или процентах (percent), в зависимости от настроек триггера;
• Scroll Direction – переменная возвращает значение направления прокрутки (vertical или horizontal), в зависимости от настроек.

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

После активации переменных перейдите на вкладку Триггеры и создайте триггер типа Глубина прокрутки:

 

Доступны следующие виды настроек:

Можно выбрать тип прокрутки (вертикальная или горизонтальная), а также задать пороги активации (проценты или пиксели). Условия активации триггера можно задать как на все страницы, так и на некоторые, а начать отслеживание выбранных взаимодействий по событию gtm.js (после загрузки страницы), gtm.dom (когда модель DOM готова) или по gtm.load (когда загрузится весь первоначальный контент страницы). Если вы не знаете, какое именно событие выбрать, оставьте по умолчанию Window Load.

В качестве примера я выберу наиболее популярный вариант настройки для сайтов - отслеживание вертикальной прокрутки на всех страницах с порогами 10, 25, 50, 75, 100 (см. скриншот выше).

Теперь необходимо создать тег для Яндекс.Метрики. И сделать это можно как раз двумя способами:

1. настроить на каждое событие;
2. создать одно событие, но внутри него передавать несколько параметров события.

Тег Яндекс.Метрики для разных событий

Когда пользователь на странице будет достигать определенного порогового значения, которое вы указали в настройках триггера (10, 25, 50, 75, 100%), будет срабатывать триггер, а он, в свою очередь, активировать тег Яндекс.Метрики. В этом теге будет передаваться специальная конструкция события.

Чтобы создать цель на каждое событие (а точнее, на каждое пороговое значение из триггера - 10, 25, 50, 75, 100%), перейдите в интерфейс Яндекс.Метрики в раздел Цели и создайте цель:

Выберите цель типа JavaScript-событие. В поле Идентификатор цели добавьте значение, соответствующее одному пороговому значению триггера Глубина прокрутки. Например, 10:

Аналогичным образом создайте все оставшиеся цели на другие пороговые значения - 25, 50, 75 и 100 соответственно:

Из любой цели скопируйте код цели для сайта и перейдите в интерфейс диспетчера тегов Google. Создайте тег типа Пользовательский HTML. Вставьте скопированный код между тегами <script></script> и измените последнее значение на встроенную переменную Scroll Depth Threshold:

В Google Tag Manager это будет выглядеть так:

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

Проверить корректность передачи данных и срабатывания целей Яндекс.Метрики с помощью режима предварительного просмотра и специального расширения для Google Chrome, которое называется Яндекс.Метрика Инспектор.

Перейдите на любую страницу вашего сайта и выполните прокрутку до самого конца. Вы увидите, как на шкале событий GTM появятся события Scroll Depth и на них будет срабатывать ваш тег Яндекс.Метрики.

Параллельно режиму отладки откройте консоль вашего браузера с расширением Яндекс.Метрика Инспектор. Оно должно зафиксировать достижение целей. Раскрыв одну из них, вы увидите условие срабатывания:

Через некоторое время данные по достигнутым целям отобразятся в Яндекс.Метрике в отчете Конверсии:

Тег Яндекс.Метрики для одного события

Отслеживать глубину скроллинга в Яндекс.Метрике можно и по-другому. Для этого не нужно создавать на каждое пороговое значение свое собственное событие, а можно воспользоваться только одним. Например, scroll:

Скопируйте полученный код цели для сайта и перейдите в интерфейс диспетчера тегов Google. Создайте тег типа Пользовательский HTML. Вставьте скопированный код между тегами <script></script> и к последнему значению scroll добавьте параметр визита visitParams, объявив перед этим переменную с объектом:

В Google Tag Manager это будет выглядеть так:

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

Идея такого способа заключается в том, что вы можете с классическим JavaScript-событием методом reachGoal передавать дополнительные параметры точно так же, как это реализовано в новом Google Analytics 4. В моем блоге есть отдельный материал, посвященный отправке событий в Яндекс.Метрику с дополнительными параметрами. Именно последний аргумент visitParams в данном коде отвечает за передачу параметра визита, а именно глубину прокрутки, которую каждый раз преодолевает пользователь на странице вашего сайта. Событие будет одно, цель в Яндекс.Метрике то же одна, достигнутых целей в рамках одного визита может быть несколько, как и параметров визита.

Проверить корректность передачи данных и срабатывания события можно аналогичным образом - с помощью режима предварительного просмотра и расширения Яндекс.Метрика Инспектор. Перейдите на любую страницу вашего сайта и выполните прокрутку до самого конца. Вы увидите, как на шкале событий GTM появятся события Scroll Depth и на них будет срабатывать ваш тег Яндекс.Метрики.

Параллельно режиму отладки откройте консоль вашего браузера с расширением Яндекс.Метрика Инспектор. Оно должно зафиксировать достижение целей с параметром визита. Раскрыв одну из них, вы увидите условие срабатывания и сам параметр визита:

В Яндекс.Метрике все события будут относиться к одной цели, а вот пороговые значения глубины скроллинга будут отображаться в отчете Содержание - Параметры визитов:

Открыв отчет и первый уровень вложенности, вы увидите, как внутри scroll будут отображаться все пороговые значения глубины скроллинга, которые достигали пользователи на страницах вашего сайта:

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

Резюме

Отслеживание глубины прокрутки для Яндекс.Метрики с помощью Google Tag Manager ничем не отличается по своей сложности и времени настройки от Universal Analytics и Google Analytics 4. И там, и там используются встроенные переменные и стандартный триггер прокрутки. Разница заключается только в итоговом теге для систем аналитики - для GA3/GA4 используются готовые шаблоны, а для Яндекс.Метрики, как правило, Пользовательский HTML тег.

Поскольку процент скроллинга можно задать самостоятельно в настройках триггера, то вы сами решаете какие пороговые значения вы будете отслеживать и какие из них будете передавать в счетчик аналитики. Сделать это можно несколькими способами - для каждого значения создать свое собственное JavaScript-событие в Яндекс.Метрике, либо же использовать общую цель, но с каждым событием отправлять параметр визита со значением процента. Эти варианты и были подробно разобраны в данной статье.