Настройка и примеры работы триггера Доступность элемента в Google Tag Manager

Константин Булгаков Подружиться

24 Янв.2019

Триггер Доступность элемента активирует теги, когда определенный элемент становится видимым в области просмотра или для него устанавливается соответствующий стиль.

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

В этой статье мы разберем настройку триггера Доступность элемента и передачу данных в Google Analytics.

Настройка триггера

1. Входим в аккаунт в Google Tag Manager и открываем нужный нам контейнер;
2. Переходим в меню Триггеры и создаем новый триггер;
3. Выбираем  в блоке Взаимодействия пользователей триггер типа Доступность элемента;
4. Указываем для триггера понятное название.

Далее предлагаю рассмотреть настройки триггера.

Триггер может срабатывать в случае видимости как одного, так и нескольких элементов. Используйте меню Метод выбора, чтобы настроить выбор элементов с помощью атрибута ID или селектора CSS:

• Выбирается один элемент в зависимости от значения атрибута ID.
• Выбирается один или несколько элементов в соответствии с выбранным шаблоном селектора CSS.

Затем определите принцип работы для триггера.

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

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

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

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

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

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

Пример: условием триггера является появление элемента с идентификатором doc. Когда пользователь прокручивает страницу, и элемент doc становится видимым, триггер активируется. Если пользователь прокрутит страницу обратно вверх и скроет элемент doc, а затем снова прокрутит ее вниз, то триггер сработает ещё раз.

Спускаемся ниже к дополнительным настройкам.

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

Укажите минимальное время видимости. Показатель указывает, как долго выбранный элемент должен быть виден на экране для срабатывания триггера. Время видимости указывается в миллисекундах, следовательно, если вам требуется указать 3 секунды, то в поле потребуется вписать 3000 мс.

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

Более подробно почитать про настройку триггера Доступность элемента можно в официальной справке Google Tag Manager.

Пример использования

Предположим у нас есть страница с комментариями к товару и мы хотим узнать как часто и кто просматривает отзывы к товару.

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

Но сам факт скролла страницы до первого комментария еще не означает, что посетителей интересовался отзывами в карточке товара.

Чтобы это исправить, в качестве правила активации выбираем показ «один раз на страницу» и устанавливаем минимальное время видимости — 3 секунды (3000 мс).

Таким образом, мы устанавливаем условия при котором триггер будет выполняться:

1. Пользователь докрутил до последнего комментария на странице.
2. Пользователь три и более секунды потратил на просмотр комментария на странице с товаром.

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

Передача события в Google Analytics

С настройкой триггера разобрались. Теперь переходим к созданию тегов и передачи события в Google Analytics.

1. Переходим в раздел меню Теги и нажимаем Создать;
2. Выбираем тип триггера Google Аналитика — Universal Analytics;
3. В поле Тип отслеживания выбираем Событие;
4. Указываем в свободной форме поля Категория и Действие;
5. В поле Настройки Google Analytics добавляем переменную с идентификатором отслеживания Google Analytics;
6. В нижнем блоке триггеры добавляем ранее созданные нами триггер Доступности элемента;
7. Нажимаем Сохранить и проверяем корректность настроек, используя режим Предварительного просмотра.

Как создать переменную c идентификатором отслеживания Google Analytics в Google Tag Manager можно почитать здесь.

Получиться должно следующее:

Чтобы просмотреть отчеты по событиям в Google Analytics, выполните следующие действия:

1. Войдите в аккаунт Google Analytics;
2. Выберите нужное представление;
3. Откройте Отчеты
4. Выберите Поведение > События.

Вы увидите примерно такой отчет:

Кроме этого отследить события можно в отчете В режиме реального времени — События. Отчет зафиксирует в реальном времени взаимодействие с контентом на вашем сайте.

Важно! Прежде чем внедрить отслеживание событий, учтите, что оно влияет на показатель отказов, так как каждое переданное событие в GA, как и отслеживание страниц, классифицируется как запрос взаимодействия.

Остались вопросы?

На этом пока все, друзья! Оставайтесь на связи — пишите комментарии к статье, задавайте вопросы. В общем, принимайте живое участие в жизни проекта. И не забывайте дальше читать полезные материалы 😉