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

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

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

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

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

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

1. 1. 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 и создайте новый триггер типа Видимость элемента со следующими настройками:

1. 1. • 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 (Ярлык) не забудьте указать название своей формы.

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

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