Отслеживание видимости элементов на сайте с помощью Google Tag Manager

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

Этот функционал в GTM реализован в виде триггера “Доступность элемента”.

Настройка триггера для отслеживания видимости элементов на сайте

Рассмотрим настройки триггера.

1. При создании нового триггера в предлагаемом GTM списке выбираем тип “Доступность элемента”.

тип триггера в Google Tag Manager - Доступность элемента

Первая опция, которую мы видим в конфигурации триггера, – это “Метод выбора”.

конфигурации триггера в Google Tag Manager - Метод выбора

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

  • с помощью атрибута ID;
  • с помощью указания селектора CSS.

При использовании ID выбирается один элемент (первый на странице) в зависимости от значения атрибута ID.

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

Если вам интересно разобраться с тем, как использовать селекторы CSS в GTM, вам поможет моя предыдущая статья.

Далее мы выбираем правило запуска триггера. Мы можем выбрать один из следующих трех вариантов:

выбор правила запуска триггера в Google Tag Manager - три варианта

  • Один раз на страницу.

Если на странице несколько элементов соответствуют указанному ID или селектору CSS, то триггер сработает на странице только один раз (тогда, когда один из них впервые появится в видимой области). Если обновить страницу, триггер сработает повторно, если выбранный элемент снова станет видимым.

  • Один раз на элемент.

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

  • При каждом появлении элемента на экране.

Триггер будет срабатывать при каждом отображении выбранного элемента.

Переходим к дополнительным настройкам.

дополнительные настройки триггера видимости в Google Tag Manager

  • Минимальный процент видимости.

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

  • Минимальное время видимости.

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

  • Регистрация изменений DOM.

Эта настройка позволяет регистрировать динамические изменения элементов на странице сайта. Она полезна в случае, когда нужно отследить появление элементов, которые не присутствовали в DOM-структуре при загрузке страницы.

При включении чекбокса “Минимальное время видимости” или “Регистрация изменений DOM” нужно иметь ввиду следующее предупреждение.

предупреждение в Google Tag Manager при включении чекбокса - минимальное время видимости

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

Рассмотрим примеры.

Например, для сайта odesseo.com.ua мне нужно настроить тег, который будет отправлять событие в Google Analytics, в случае, когда контактные данные (номер телефона, адрес, email) появятся в видимой части экрана.

Создаем триггер типа “Доступность элемента”. Для того, чтобы идентифицировать блок контактных данных, я воспользуюсь селектором CSS. В данном случае мне удобно это сделать по классу.

настройка тега видимости в GTM при появлении в видимой части экрана контактных данных OdesSeo

Таким образом с помощью селектора .contacts я однозначно идентифицирую нужный блок.

идентификация нужного блока в GTM с помощью селектора contacts

В качестве правила активации я выбираю “один раз на страницу”. Минимальный процент видимости – 80%. Минимальное время – 5 секунд (5000 миллисекунд).

Эти параметры вы выбираете самостоятельно, в зависимости от ваших задач.

Далее нам нужно создать тег, который будет отправлять данные в Google Analytics в момент, когда блок контактов будет видимым на экране не менее 5 секунд.

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

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

конфигурация тега в Google Tag Manager

При активации триггера видимости в встроенных переменных  “Процент видимости” и “Время видимости” сохраняются фактические значения. Для переменной “Процент видимости” – число от 0 до 100, которое показывает, какой процент нужного элемента был в видимой области. Для переменной “Время видимости” – число, которое показывает, сколько времени выбранный элемент был в видимой области (указывается в миллисекундах).

время видимости - настройка в Google Tag Manager

Чтобы воспользоваться этими переменными, нужно их предварительно активировать – перейти на вкладку “Переменные” в интерфейсе GTM и в конфигурации встроенных переменных установить нужные чекбоксы.

активация переменных в интерфейсе GTM

Рассмотрим еще один пример.

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

настройка тега видимости в GTM при появлении баннера

Аналогично тому, как мы делали это ранее, создаем новый триггер типа “Доступность элемента”. В качестве метода выбора я воспользуюсь селектором CSS. Для определения баннера с новыми поступлениями мне подойдет селектор вида:

С помощью конструкции .slideshow я выделяю блок, в котором происходит смена разных баннеров, а добавляя выражение a[href*=”/novye-postupleniya/”] указываю, что меня интересует только баннер с новыми поступлениями.

настройка конфигурации видимости для определения баннера с новыми поступлениями в GTM

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

настройка минимального времени видимости в Google Tag Manager

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

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

Спасибо за прочтение!