Отслеживаем количество просмотров слайда на сайте через Google Tag Manager

На большинстве интернет-магазинов и корпоративных сайтов слайдер используется для информирования пользователей об акциях, событиях, новинках продукции и услуг. Но как отследить его эффективность? Я начинаю цикл статей о настройке отслеживания взаимодействия пользователей со слайдером на сайте через Google Tag Manager в Google Analytics.

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

Грамотно настроив отслеживание взаимодействия пользователей как со всем слайдером, так и с каждым слайдом в отдельности, можно получать сведения о том, насколько изменились продажи товара или услуги со слайда, какой дизайн слайда с одинаковым содержимым имеет лучший CTR, какое количество слайдов оптимально и комфортно воспринимается пользователями и т.д.

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

Для того, чтобы начать отслеживать взаимодействие пользователей с конкретным слайдом в карусели, необходимо добавить соответствующий тег в контейнер GTM. Для этого во вкладке "Рабочая область" переходим раздел "Теги" и нажимаем кнопку "Создать".

В открывшемся окне задаем имя тега (согласно контенту слайда) и переходим к редактированию конфигурации тега.

Тип тега - Universal Analytics, тип отслеживания - Событие. После этого заполняем поля "Категория" и "Действие". Вы можете заполнять их произвольно, но для упрощения ориентации в будущем по событиям в Google Analytics рекомендую вписывать понятные значения. В качестве категории я использую значение Slide 1, а для действия - View.

В качестве настроек Google Analytics я использую заранее созданную переменную {{Настройки Google Analytics}}, которую следует создать при добавлении тега с идентификатором UA вашего сайта.

Спускаемся ниже и переходим к настройке триггера для нашего тега.

Задаем понятное имя триггера выбираем тип "Доступность элемента".

В качестве метода выбора мы будем использовать селектор CSS - выбираем нужное значение.

В моем случае каждый слайд имеет селектор CSS вида promo-slide-1, promo-slide-2 и так далее. Посмотреть, какой селектор присвоен вашему слайду можно в исходном коде страницы. Вписываем селектор, соответствующий вашему слайду обязательно с точкой в начале.

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

Устанавливаем минимальный процент видимости в 80 и минимальное время видимости в 3000 мс.

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

После этого нажимаем вверху кнопку "Сохранить".

Возвращаемся на стартовую страницу и переходим в раздел "Переменные". В правом верхнем углу нажимаем на кнопку "Настроить" и спускаемся вниз до подраздела "Видимость".

Здесь нам нужно отметить пункт Percent Visible. Percent Visible возвращает числовое значение от 0 до 100, которое показывает, какой процент выбранного элемента был виден при срабатывании триггера. Содержится в ключе gtm.visibleRatio.

Теперь нам нужно опубликовать внесенные изменения в контейнере GTM.

Для того, чтобы отслеживать количество просмотров каждого слайда и работать с полученными данными (например, накладывать сегменты), нужно создать соответствующую цель в Google Analytics.

Переходим в нужное представление в Google Analytics и добавляем новую цель с подходящим названием.

Создаем собственную цель с типом "Событие". В качестве категории и действия используем значения, которые ранее вносили в аналогичные поля в Google Tag Manager.

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

Если у вас возникли вопросы по настройке веб-аналитики с помощью Google Tag Manager и Google Analytics на вашем сайте, то пишите мне в Telegram!