Element Visibility (Доступность элемента) в GTM: «полезняшка» для PPC-специалистов.

При настройке контекстной рекламы специалисты нашей команды сталкиваются с тем, что теги GTM, настроенные на отправку формы иногда не срабатывают (например, те, которые используют ajax), а отслеживать нажатие на кнопку уже не комильфо, поэтому появление в Google Tag Manager триггера типа Element Visibility (Доступность элемента) – просто вишенка на торте.

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

успешная отправка формы;
ошибка при заполнении формы;
появление всплывающего окна;
просмотр отзывов, комментариев;
просмотр баннеров с промоакциями;
просмотр блока контактов и т. п..

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

Выбираем тип триггера:

Настраиваем поля триггера:

Выбираем Метод выбора: с помощью атрибута ID или с помощью указания селектора CSS.

Идентификатор ID – триггер будет срабатывать при просмотре первого атрибута ID, который мы задали.

Селектор элементов – триггер будет срабатывать, при просмотре определенного CSS селектора.

Очевидное различие между ними состоит в том, что вы можете добавить несколько селекторов элементов в строку селектора CSS через запятую.

Триггер может срабатывать, когда каждый из них видим в окне браузера.

Совет. Селектор идентификаторов ID работает лучше, если у вас есть только один элемент для отслеживания.

Определяем Правила запуска триггера:

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

Один раз на элемент: Триггер сработает один раз для идентификатора, но несколько раз для селектора. Для группы триггер сработает один раз для каждого селектора.

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

Дополнительные настройки:

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

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

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

В качестве примера возьмем отправку заполненной формы для заказа подарочного сертификата. Для этого нам нужно создать триггер с типом “Доступность элемента” и тег, который будет передавать данные в GA, когда пользователь увидит сообщение об успешной отправке формы.

Форма на сайте

Просмотр кода в панели разработчика:

В нашем примере мы можем настроить триггер и на Идентификатор ID, и на селектор CSS (двумя способами).

По ID:

По селектору CSS – первый способ:

Обратите внимание, что атрибут записывается в GTM c точкой перед названием класса.
По селектору CSS – второй способ:< С помощью правой кнопки мыши выбираем опцию Копировать селектор и просто вставляем в нужное поле.

Далее настраиваем тег для передачи данных в GA.
Тип тега: Universal Analytics
Тип отслеживания: Событие Категорию и Действие называем на ваше усмотрение.
В нашем случае для тестирования добавлены обозначения Id и dot.

По этому же примеру созданы еще два тега на триггеры по селектору CSS. На каждый из способов.