Сейчас в сети: 358
Сейчас в сети: 358
Учитесь работать в Google Analytics вместе с нами!
star_border

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

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

 

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

 

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

 

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

 

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

 

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

 

1.jpg

 

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

 

2.jpg

 

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

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

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

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

 

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

 

 3.jpg

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

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

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

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

 

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

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

 

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

4.jpg

 

 

 

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

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

 

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

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

 

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

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

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

 

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

 

5.jpg

 

 

 

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

 

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

 

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

 

7.jpg

 

 

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

 

6.jpg

 

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

 

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

 

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

 

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

 

 8.jpg

 

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

 

9.jpg

 

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

 

10.jpg

 

 

 

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

 

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

 

11.jpg

 

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

 

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

 

12.jpg

 

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

 13.jpg

 

 

 

 

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

 

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

 

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

Анастасия Тимошенко

Меня зовут Анастасия. Занимаюсь интернет-рекламой и веб-аналитикой в компании OdesSeo. Сертифицированный специалист по Google AdWords и Google Analytics. Всегда рада поделиться опытом и узнать что-то новое=)

Комментарии
Сергей Ларин
Декабрь

Анастасия, в очередной раз спасибо большое за отличную и полезную статьюВеселый

a_timo_ Ведущий участник
Декабрь

@Сергей Ларин, я рада, что полезно! Спасибо=)

Дмитрий К
‎25-04-2018 02:31 PM

Очень полезная статья, спасибо!

a_timo_ Ведущий участник
‎25-04-2018 03:43 PM

@Дмитрий К, спасибо!