Отслеживание отправки формы с помощью триггера Видимость элемента

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

В основе этого способа лежит использование триггера типа Видимость элемента. Поэтому с одной стороны эта статья про отслеживание форм, а с другой - о работе с триггером типа Видимость элемента.

1. Основы работы с триггером Видимость элемента
2. Настройка триггера на всплывание окна благодарности
3. Отправка данных в Google Analytics

Основы работы с триггером Видимость элемента

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

1. Selection Method (Метод выбора) - В этом параметре задается метод выбора элемента. Это может быть выбор по идентификатору элемента или по CSS селектору.

2. Element ID/Element Selector (ID/Селектор CSS) - В зависимости от значения параметра Selection Method (Метод выбора) в этом поле указываем идентификатор элемента или его селектор.

3. When to fire this trigger (Правила срабатывания триггера) - Позволяет задать условие, сколько раз на странице может срабатывать триггер:

• Once per page (Один раз на страницу) - В не зависимости от количества появлений элемента в видимой области экрана, триггер сработает один раз на странице. Если на странице несколько элементов, которые подходят под условие - триггер сработает только для первого с них.
• Once per element (Один раз на элемент) - Триггер будет срабатывать для каждого элемента на странице один раз. При этом, если элемент выбран с помощью селектора CSS, и на странице существует несколько элементов подходящих под условие, триггер будет срабатывать по одному разу для каждого из них. Если условие указано с помощью ID, то триггер сработает только для первого элемента на странице.
• Every time an element appears on screen (При каждом появлении элемента на экране) - Триггер будет срабатывать при каждом появлении  на экране нужного элемента.

4. Minimum Percent Visible (Минимальный процент видимости) - В этом параметре можно указать минимальный процент видимости элемента при котором будет срабатывать триггер. Возможные значения от 1 до 100. Можно использовать в тех случаях, когда мы хотим, чтобы пользователь увидел какой-то элемент, например баннер, полностью.

5. Set minimum on-screen duration (Укажите минимальное время видимости) - Указываем минимальное время, которое элемент должен находиться в видимой области экрана, чтобы триггер сработал. Значение указывается в миллисекундах. ВАЖНО! Общее время, которое элемент провел на экране суммируется. Если в условии указано 5000 миллисекунд (5 сек) и пользователь сначала видел элемент 3 секунды, а потом еще 2 - триггер сработает.

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

7. This trigger fires on (Условие активации триггера) - Выберите Некоторые элементы, чтобы указать дополнительные условия активации. Например, только на главной странице, как на скриншоте выше.

Настройка триггера на всплывание окна благодарности

Теория это конечно хорошо, но давайте перейдем к практике. В моем случае мы будем проводить настройку на основе селектора CSS, так как идентификатора нет. Чтобы получить его, нам понадобится заполнить форму и увидеть это самое окно. После чего перейдите в режим просмотра кода страницы. Для этого нажмите правой кнопкой на нужном элементе и выберите пункт Просмотреть код:

В коде найдите нужный элемент. Будьте внимательны, так как очень часто блок со всплывающей формой и окном благодарности имеет одинаковый селектор. В таком случае триггер может срабатывать при появлении формы, что в нашем случае приведет к неверным данным. Лучше использовать элемент, который точно появляется после успешного заполнения формы. Например, текст благодарности.

Перейдите в Google Tag Manager и создайте новый триггер типа Видимость элемента со следующими настройками:

• Selection Method (Метод выбора) - Выбираем CSS Selector.
• Element Selector (Селектор CSS) - Вставляем селектор элемента, который мы скопировали ранее.
• When to fire this trigger (Правила срабатывания триггера) - Once per page (Один раз на страницу). Ведь мы не хотим, чтобы при повторной отправке формы на странице, событие отправилось еще раз.
• Minimum Percent Visible (Минимальный процент видимости) - Нам не особо важно сколько процентов текста благодарности увидит пользователь, поэтому чем меньше, тем лучше. Например, 10.
• Set minimum on-screen duration (Укажите минимальное время видимости) - Параметр в данном случае не важен. Можно не включать.
• Observe DOM changes (Регистрация изменений DOM) - Обязательно включить, так как окно появляется как раз в ходе изменений DOM.
• This trigger fires on (Условие активации триггера) - Выбрав пункт Некоторые элементы укажите страницы, на которых находится форма (например, главная) или выберите все элементы, если хотите отслеживать событие на всех страницах.

Отправка данных в Google Analytics

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

Вместо заключения

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