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

В середине декабря в Яндекс Тег Менеджере добавили новые триггеры для отслеживания сложных пользовательских сценариев. В их числе - триггер Видимость элемента. В этом руководстве я покажу вам универсальный способ отслеживания отправки формы с использованием нового триггера.

Читать еще:

• Отслеживание отправки формы с помощью стандартного триггера Яндекс Тег Менеджера
• Отслеживание отправки формы с помощью Яндекс Тег Менеджера и специального события
• Отслеживание отправки формы с помощью универсального кода для форм на AJAX
• 9 способов отслеживания отправки форм с помощью Google Tag Manager

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

Тот же самый метод может быть применен и к формам, когда после успешной отправки обращения появляется некоторое сообщение, например, «Спасибо! Данные успешно отправлены»:

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

В качестве примера давайте настроим отслеживание отправки формы для моего тестового проекта. Выглядит она так:

При ее отправке посетители сайта видят уведомление: Спасибо за Ваше сообщение. Оно успешно отправлено.

Как только вы убедились, что у вашей формы отображается уведомление подобного типа, вы можете приступать к настройке. Не закрывая окна, проинспектируйте элемент, чтобы узнать его CSS-селектор. Для этого наведите курсор мыши на текст сообщения и нажмите правой кнопкой – Просмотреть код:

После этого откроется консоль разработчика на вкладке Elements (браузер Google Chrome) с подсвеченным элементом. Из рисунка выше видно, что у данного элемента есть класс wpcf7-response-output, который мы можем применить при настройке триггера в Яндекс Тег Менеджере.

Примечание: элемент может иметь/не иметь идентификатор (#id) или класс (.class). В этом случае вы можете привязаться к его CSS-селектору. Подробно о селекторах читайте в других материалах моего блога:

• CSS-селекторы в Google Tag Manager. Часть I
• Селекторы в jQuery. Часть II
• Регулярные выражения в CSS-селекторах и GTM
• CSS Selector Tester и его аналоги
• Google Tag Manager и jQuery
• Редактирование элементов на странице с помощью Google Tag Manager
• Подмена текста динамически на странице с помощью Google Tag Manager
• Подмена контента на сайте с помощью Google Tag Manager
• Динамическая подмена контента на сайте с помощью Google Tag Manager

Хоть они и написаны с использованием примеров для диспетчера тегов Google, тема CSS-селекторов является фундаментальной, поэтому читая все вышеприведенное, вы можете ставить знак равенства Google Tag Manager = Яндекс Тег Менеджер.

И обязательно посмотрите подробную лекцию на эту тему. Rutube:

И YouTube:

Перейдите в свой Яндекс Тег Менеджер и создайте триггер типа Видимость элемента:

В качестве метода выбора будем использовать Селектор CSS, поскольку у данного элемента нет идентификатора. Как вы уже знаете, в CSS перед каждым классом ставится точка (.), а пробелы между несколькими классами также заменяются на точки.

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

Правило запуска этого триггера зададим Один раз на страницу, поскольку мы хотим отслеживать факт отправки формы только один раз.

Все варианты запуска:

• Один раз на страницу - триггер выполняется только один раз за все время просмотра страницы;
• Один раз на элемент на странице - триггер выполняется один раз для каждого элемента, который соответствует селектору;
• При каждом появлении элемента на экране - триггер выполняется каждый раз, когда элемент снова становится видимым.

Поставьте галочку Дополнительные настройки. После этого вы сможете задать:

• Минимальный процент видимости - указывает, какая часть элемента должна быть видна на экране (например, 50 - половина элемента должна находиться в зоне видимости);
• Минимальное время видимости - указывает, как долго элемент должен быть виден (например, 5 секунд - используется для защиты от мгновенных пролистываний);
• Регистрация изменений DOM - позволяет отслеживать появление элемента при динамической подгрузке (например, в SPA или при lazy-load).

Предположим, что мы хотим, чтобы сообщение Спасибо за Ваше сообщение. Оно успешно отправлено отображалось на странице в течение 3 секунд и было хотя бы на 50% видимо на экране пользователя.

Задаем эти значения в настройках триггера (вы можете указать свои собственные или вовсе не добавлять их). Главное – это не забыть поставить галочку напротив Регистрация изменений DOM, поскольку изначально данного элемента нет в структуре DOM-дерева, и сообщение об успешной отправки формы появляется на экране только после ее отправки.

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

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

В качестве дополнительного условия активации вы можете задать конкретную URL-страницу, где размещена форма. Делается это с помощью встроенной переменной Page URL.

Либо же оставьте условие Все события по умолчанию. Задайте название триггеру (например - Отправка формы) и сохраните его.

Чтобы проверить срабатывание события после отправки формы, воспользуйтесь режимом отладки Яндекс Тег Менеджера и повторно отправьте тестовое обращение.

Если вы все сделали правильно и все условия триггера выполнены (в моем примере - 3 секунды на странице и не менее 50% видимости элемента), то на шкале событий будет отображаться Видимость элемента:

При срабатывании триггера становятся доступны встроенные переменные:

• Percent Visible / Visible Ratio Percent - процент видимости элемента;
• Visible Duration / On Screen Duration - длительность видимости.

В дальнейшем вы можете ориентироваться на них при настройке и отладке триггера.

Теперь вы можете использовать этот триггер в различных тегах для передачи информации в инструменты веб-аналитики (Яндекс Метрику, Google Analytics 4, пиксель VK Рекламы и др.).

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

И тогда при настройке триггера одного указания селектора элемента будет недостаточно:

Если пользователь не заполнит форму полностью или заполнит ее с ошибками, сообщение все равно появится, а триггер сработает ложно и активирует тег с пустой отправкой формы. В результате цель в Яндекс Метрике будет достигнута, но на самом деле форма не была отправлена.

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

Вновь отправьте тестовую заявку, и, не закрывая окна, проинспектируйте элемент, чтобы узнать его CSS-селектор. Для этого наведите курсор мыши на текст сообщения и нажмите правой кнопкой Copy - Copy selector:

Вернитесь в Яндекс Тег Менеджер и создайте переменную типа Элемент DOM. Укажите Метод выбора - Селектор CSS, а в поле Селектор элемента вставьте скопированное значение:

Назовите переменную (например - Сообщение формы) и сохраните ее.

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

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

Перед тем, как добавить триггер к тегу события Яндекс Метрики, перейдите в раздел Цели и создайте цель с условием JavaScript-событие. Укажите произвольный идентификатор цели (например - otpravka_formi) и название цели:

Примечательно: я рекомендую использовать условие Идентификатор цели совпадает.

Обязательно запомните идентификатор, он вам понадобится в окончательной настройке тега Яндекс Метрики. В завершение сохраните цель.

Вернитесь в Яндекс Тег Менеджер, перейдите на вкладку Теги и создайте тег типа Яндекс Метрика:

В открывшемся окне задайте следующую конфигурацию тега:

• ID счетчика - вставьте идентификатор вашего счетчика Яндекс Метрики. Он отображается вверху страницы;
• Идентификатор цели - задается на странице редактирования счетчика при создании или изменении цели типа JavaScript-событие. В моем примере - otpravka_formi);

В качестве триггера активации выберите триггер, созданный на предыдущем шаге. Итоговый тег Яндекс Метрики будет выглядеть так:

Сохраните тег.

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

В детальных сведениях о теге будет написана причина, по которой тег не активировался:

Все верно. А в другом варианте, когда форма заполнена корректно, в триггере выполнятся все условия, и тег отправит данные в аналитику:

Так выглядят детальные сведения о теге со всеми условиями активации триггера (успешная отправка):

Это именно то поведение, которое предполагалось отслеживать.

Если на вашем сайте несколько форм, то для их отслеживания по отдельности вы можете задать в триггере дополнительное условие активации, добавив URL-адрес страницы, на которой расположена форма. Если форма - сквозная (доступна на всех страницах, например, в шапке или подвале сайта), тогда используйте селектор конкретной формы, проинспектировав ее через консоль разработчика и меню Copy - Copy selector. Далее на каждую форму создайте отдельный триггер Видимость элемента.

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