Важность отслеживания отправок форм на сайте сложно переоценить, ведь это один из основных способов оставить заявку. Ранее я уже писал статьи о том, как отслеживать отправку формы в Google Tag Manager с помощью базового триггера и с помощью валидации внутри диспетчера тегов. Сегодня хочу показать еще один способ — он подходит для форм, в которых после успешной отправки всплывает окно благодарности. Например, такое:
В основе этого способа лежит использование триггера типа Видимость элемента. Поэтому с одной стороны эта статья про отслеживание форм, а с другой — о работе с триггером типа Видимость элемента.
- Основы работы с триггером Видимость элемента
- Настройка триггера на всплывание окна благодарности
- Отправка данных в Google Analytics
Основы работы с триггером Видимость элемента
Тип триггера Видимость элемента помогает вам отследить попадание элемента в видимую область экрана. Давайте рассмотрим его параметры более детально:
-
-
- Selection Method (Метод выбора) — В этом параметре задается метод выбора элемента. Это может быть выбор по идентификатору элемента или по CSS селектору.
- Element ID/Element Selector (ID/Селектор CSS) — В зависимости от значения параметра Selection Method (Метод выбора) в этом поле указываем идентификатор элемента или его селектор.
- When to fire this trigger (Правила срабатывания триггера) — Позволяет задать условие, сколько раз на странице может срабатывать триггер:
- Once per page (Один раз на страницу) — В не зависимости от количества появлений элемента в видимой области экрана, триггер сработает один раз на странице. Если на странице несколько элементов, которые подходят под условие — триггер сработает только для первого с них.
- Once per element (Один раз на элемент) — Триггер будет срабатывать для каждого элемента на странице один раз. При этом, если элемент выбран с помощью селектора CSS, и на странице существует несколько элементов подходящих под условие, триггер будет срабатывать по одному разу для каждого из них. Если условие указано с помощью ID, то триггер сработает только для первого элемента на странице.
- Every time an element appears on screen (При каждом появлении элемента на экране) — Триггер будет срабатывать при каждом появлении на экране нужного элемента.
- Minimum Percent Visible (Минимальный процент видимости) — В этом параметре можно указать минимальный процент видимости элемента при котором будет срабатывать триггер. Возможные значения от 1 до 100. Можно использовать в тех случаях, когда мы хотим, чтобы пользователь увидел какой-то элемент, например баннер, полностью.
- Set minimum on-screen duration (Укажите минимальное время видимости) — Указываем минимальное время, которое элемент должен находиться в видимой области экрана, чтобы триггер сработал. Значение указывается в миллисекундах. ВАЖНО! Общее время, которое элемент провел на экране суммируется. Если в условии указано 5000 миллисекунд (5 сек) и пользователь сначала видел элемент 3 секунды, а потом еще 2 — триггер сработает.
- Observe DOM changes (Регистрация изменений DOM) — Включите этот параметр, если элемент, появление которого необходимо отследить, появляется позже в результате изменений DOM. Например, всплывающее окно после отправки формы.
- 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 можно использовать стандартный тег типа событие со следующими настройками:
В поле Label (Ярлык) не забудьте указать название своей формы.
Вместо заключения
Триггер типа Видимость элемента можно использовать не только для отслеживания всплывающих окон, но и для других целей. Например, отслеживания эффективности промо баннеров. Пишите в комментариях свои идеи по поводу других способов использования этого триггера и задавайте вопросы, если они у вас остались.