Работаем над увеличением конверсии лендинга. Коллега задаёт простой вопрос, насколько глубоко пользователи скролят страницу сайта? Вдруг посетители резко начинают уходить после просмотра одного из экранов?
В Яндекс.Метрике есть инструмент «Карта скроллинга» с данными за последние 2 недели – вроде бы то, что надо. Но что делать, если хочется строить отчёты за более продолжительный период? Или нужно собирать данные в Google Analytics? Настроим отслеживание просмотра каждого экрана с помощью Google Tag Manager (GTM).
Подготовительная работа на сайте
Добавляем в нужные места страницы (например, конец экрана) прозрачный элемент размером в 1px – Google Tag Manager будет следить, появился ли элемент на экране:
<div class="tracking-item" data-screen="1"></div>
В значении атрибута data-screen указываем номер экрана.
CSS для моего элемента
.tracking-item {
width: 1px;
height: 1px;
background-color: transparent;
}
Дисклеймер. Конкретно на нашем сайте такое расположение элемента для отслеживания не портило вёрстку – на вашем, возможно, будет лучше добавить класс tracking-item и атрибут data-screen последнему абзацу текста или картинке на экране.
Порядок действий в GTM
Создаём новую переменную уровня данных (версия 2). Ниже я расскажу, зачем мы её создаём.
Для нашего случая имя переменной будет gtm.element.dataset.screen. Будьте внимательны с именем переменной: оно зависит от того, как вы назвали атрибут data-. Если бы в нашем элементе имя атрибута было data-ekran = "1", то переменную назвали бы gtm.element.dataset.ekran.
Теперь создаём триггер. Назовём его, например, «Просмотрен экран».
Кажется, что самое простое – воспользоваться типом триггера «Глубина прокрутки» (делим 100% на количество экранов – вот вам высота одного). Но на нашем лендинге секции с информацией сильно отличались друг от друга по высоте – высчитывать нужный процент муторно, да и получилось бы неточно.
Мы выбрали тип триггера «Видимость элемента».
Метод выбора – «Селектор CSS». В поле ниже указываем наш класс .tracking-item (не забываем точку).
Меняем правило запуска на «Один раз на элемент».
Остальные настройки оставляем по умолчанию и сохраняем.
Теперь создаём теги для передачи событий в Google Analytics и Яндекс.Метрику.
Для Google Analytics выбираем тип тега «Событие GA 4», ниже – основной тег вашей учётки.
В поле с названием события userWatchedScreen{{gtm.element.dataset.screen}}, где в фигурных скобках переменная с номером экрана.
И в самом низу выбираем созданный ранее триггер.
В теге для Яндекс.Метрики вставляем пользовательский HTML и выбираем созданный триггер.
<script type="text/javascript">
ym(NNN,'reachGoal','userWatchedScreen{{gtm.element.dataset.screen}}');
</script>
В коде не забудьте заменить NNN на ваш номер счётчика Метрики.
Почему удобно использовать переменную
Если бы мы не использовали в тегах переменную, то нам пришлось бы создавать отдельный триггер и тег для отслеживания просмотра каждого экрана. Если экранов 4 – нудно, но ещё терпимо. А представьте, если их 8 и нужно отправлять данные и в Google Analytics, и в Яндекс.Метрику – свихнуться можно от такого дублирования!
Строим отчёты
В Google Analytics проще всего зайти в раздел Вовлечения → События и отфильтровать по общей части в имени наших событий (userWatchedScreen)
В Яндекс.Метрике создайте пустой отчёт, кликните по кнопке «Группировки», удалите всё лишнее и найдите вариант «Достигнутая цель».
Другой вариант. Через фильтр выбрать нужную страницу (если необходимо), кликнуть по кнопке «Метрики» и в разделе «Конверсия посетителей» отметить нужные цели.
