Отслеживание видимости элементов на сайте с помощью Google Tag Manager
Не так давно в Google Tag Manager появилась возможность активировать теги в момент, когда определенный элемент на странице сайта оказывается в видимой области окна браузера. Это просто потрясающе полезная функция, так как нахождение объекта в видимой области окна браузера с большой вероятностью свидетельствует о том, что этот объект находится в поле зрения пользователя. Благодаря настройке триггеров на появление в зоне видимости нужных нам элементов, мы сможем точнее составить представление о том, как посетители взаимодействуют со страницами нашего сайта и какие важные элементы остаются без внимания.
Этот функционал в GTM реализован в виде триггера “Доступность элемента”.
Настройка триггера для отслеживания видимости элементов на сайте
Рассмотрим настройки триггера.
1. При создании нового триггера в предлагаемом GTM списке выбираем тип “Доступность элемента”.
Первая опция, которую мы видим в конфигурации триггера, — это “Метод выбора”.
В меню выбора нужно указать, каким способом мы будем идентифицировать элемент, видимость которого мы хотим отслеживать. Есть два способа:
- с помощью атрибута ID;
- с помощью указания селектора CSS.
При использовании ID выбирается один элемент (первый на странице) в зависимости от значения атрибута ID.
При использовании селектора CSS выбирается один или несколько элементов в соответствии с указанным шаблоном селектора. Можно указать несколько селекторов, отделив их запятыми.
Если вам интересно разобраться с тем, как использовать селекторы CSS в GTM, вам поможет моя предыдущая статья.
Далее мы выбираем правило запуска триггера. Мы можем выбрать один из следующих трех вариантов:
Если на странице несколько элементов соответствуют указанному ID или селектору CSS, то триггер сработает на странице только один раз (тогда, когда один из них впервые появится в видимой области). Если обновить страницу, триггер сработает повторно, если выбранный элемент снова станет видимым.
Если на странице несколько элементов соответствуют селектору CSS, то триггер будет срабатывать, когда каждый из них впервые отображается на странице. Если обновить страницу, триггер сработает повторно, если выбранный элемент снова станет видимым.
- При каждом появлении элемента на экране.
Триггер будет срабатывать при каждом отображении выбранного элемента.
Переходим к дополнительным настройкам.
- Минимальный процент видимости.
Этот показатель указывает на то, какой процент выбранного элемента должен быть виден на экране для того, чтобы запустился триггер.
- Минимальное время видимости.
Этот показатель указывает на то, сколько времени выбранный элемент должен быть виден на экране для того, чтобы запустился триггер. Оптимальное значение нужно указывать в миллисекундах. Если в рамках одной страницы элемент был виден какое-то количество времени, затем не был виден, а затем снова был виден, время периодов видимости суммируется.
- Регистрация изменений DOM.
Эта настройка позволяет регистрировать динамические изменения элементов на странице сайта. Она полезна в случае, когда нужно отследить появление элементов, которые не присутствовали в DOM-структуре при загрузке страницы.
При включении чекбокса “Минимальное время видимости” или “Регистрация изменений DOM” нужно иметь ввиду следующее предупреждение.
Примеры использования триггера доступности элемента
Рассмотрим примеры.
Например, для сайта odesseo.com.ua мне нужно настроить тег, который будет отправлять событие в Google Analytics, в случае, когда контактные данные (номер телефона, адрес, email) появятся в видимой части экрана.
Создаем триггер типа “Доступность элемента”. Для того, чтобы идентифицировать блок контактных данных, я воспользуюсь селектором CSS. В данном случае мне удобно это сделать по классу.
Таким образом с помощью селектора .contacts я однозначно идентифицирую нужный блок.
В качестве правила активации я выбираю “один раз на страницу”. Минимальный процент видимости — 80%. Минимальное время — 5 секунд (5000 миллисекунд).
Эти параметры вы выбираете самостоятельно, в зависимости от ваших задач.
Далее нам нужно создать тег, который будет отправлять данные в Google Analytics в момент, когда блок контактов будет видимым на экране не менее 5 секунд.
Добавляем новый тег типа “Universal Analytics” и в меню выбора типа отслеживания указываем “Событие”. Процесс создания этого тега аналогичен созданию обычного тега отправки событий, условием активации этого тега будет созданный выше триггер.
Если ранее вы не сталкивались с отслеживанием событий в Google Tag Manager, вам будет полезна эта статья. Тут подробно рассмотрено, как создавать различные типы тегов, в том числе для событий.
При активации триггера видимости в встроенных переменных “Процент видимости” и “Время видимости” сохраняются фактические значения. Для переменной “Процент видимости” — число от 0 до 100, которое показывает, какой процент нужного элемента был в видимой области. Для переменной “Время видимости” — число, которое показывает, сколько времени выбранный элемент был в видимой области (указывается в миллисекундах).
Чтобы воспользоваться этими переменными, нужно их предварительно активировать — перейти на вкладку “Переменные” в интерфейсе GTM и в конфигурации встроенных переменных установить нужные чекбоксы.
Рассмотрим еще один пример.
Часто на сайтах присутствует элемент “карусель”, благодаря которому пользователю можно поочередно показывать различные баннеры со спец. предложениями, акциями и пр. Рассмотрим задачу отслеживания факта появления одного конкретного баннера (например, пусть это будет баннер, информирующий о новых поступлениях товара) в случае, когда он не загружается первым при загрузке страницы.
Аналогично тому, как мы делали это ранее, создаем новый триггер типа “Доступность элемента”. В качестве метода выбора я воспользуюсь селектором CSS. Для определения баннера с новыми поступлениями мне подойдет селектор вида:
.slideshow a[href*="/novye-postupleniya/"]
С помощью конструкции .slideshow я выделяю блок, в котором происходит смена разных баннеров, а добавляя выражение a[href*=»/novye-postupleniya/»] указываю, что меня интересует только баннер с новыми поступлениями.
Как я уже писала выше, для фиксации изменений DOM-структуры нам нужно установить чекбокс “Регистрация изменений DOM” (в блоке дополнительных настроек триггера).
Осталось добавить тег отправки данных в аналитику, и настройка закончена.
GTM продолжает развиваться и на этот раз порадовал нас замечательной новой функцией, которая открывает ряд интересных возможностей по отслеживанию и позволяет реализовать их без больших усилий. Уверена, подобные нововведения от GTM радуют не только меня, но и других любителей детально анализировать свои проекты.
Спасибо за прочтение!
