Настройка отслеживания отправки форм
Введение
Здравствуйте! Меня зовут Артём, и мы продолжаем заниматься настройкой аналитики в GTM и YTM.
В предыдущих статьях:
Если не читали – рекомендую ознакомиться. А в этой статье мы разберём, как настроить отслеживание отправки форм.
Отслеживать формы на сайте можно множеством разных способов. Самое главное, чтобы эта цель срабатывала максимально корректно после отправки контактов, а не просто по клику по кнопке.
В проекте моего клиента, например, заявки отслеживаются посредством редиректа на «Страницу благодарности». Это позволяет настроить цель прямо в интерфейсе Яндекс Метрики и, казалось бы, использование Менеджера тегов здесь не обязательно, но благодаря менеджеру тегов мы можем получить гораздо больше гибкости, а именно:
- Можем сделать более корректную настройку срабатывания цели с переходом на «Страницу благодарности»;
- Можем настроить цель, которая будет срабатывать именно в момент отправки формы – ДО перехода на «Страницу благодарности».
В рамках переноса и этой статьи мы с вами рассмотрим оба варианта. И сначала я напишу, как можно усовершенствовать отслеживание «Страницы благодарности». Вместе мы создадим более корректную цель, которая будет фиксироваться и передавать информацию в счётчик аналитики только в момент отправки формы.
Усовершенствуем страницу благодарности
Начать предлагаю с озвучивания известной проблемы: цель страница благодарности может срабатывать не только при отправке формы. Это может происходить и если:
- пользователь обновил страницу;
- открыл её из закладок;
- перешёл по прямой ссылке;
- её открыл бот или конкурент, который пытается отправлять фейковые заявки.
Мало того, что таким образом все наши данные в Яндекс Метрике становятся менее информативными и точными при проведении аналитики, так ещё мы можем и повторно оплачивать достижение цели, если работаем в Яндекс Директ по стратегии оплаты за конверсии.
Решение: защитить цель от повторных срабатываний!
Чтобы избежать этого, специалисты по аналитике давно используют следующую методику:
- При отправке формы в браузере пользователя создаётся метка: или в localStorage/sessionStorage (локальном/сессионном хранилище) или в файле cookie;
- Когда пользователь переходит на страницу благодарности, скрипт проверяет наличие этой метки;
- И только если метка найдена — срабатывает цель. В противном случае — ничего не фиксируется.
Этот приём позволяет отсечь «ложные» заходы на страницу и передавать в счётчик только реальные заявки.
В этом руководстве мы с вами реализуем такой механизм через cookie. Это будет максимально просто в реализации плюс совместимо с любыми CMS-платформами и сайтами на коде.
Шаг 1. Создаём пользовательский HTML-тег
Для начала создадим файл cookie, который будет записываться в момент отправки формы. Это позволит нам в дальнейшем отфильтровывать повторные заходы на Страницу благодарности и исключить повторные фиксации целей.
<script> document.cookie = "lead_submitted=true; path=/; max-age=3600"; </script>
Что делает этот код:
- lead_submitted=true — имя и значение cookie (можете задать какое угодно).
- path=/ — делает cookie доступной на всех страницах сайта.
- max-age=3600 — срок жизни cookie 1 час.
Хотите дольше? Вот примеры других сроков жизни:
- Дни – Время
- 7 max-age=604800
- 30 max-age=2592000
- 180 max–age=15552000
- 365 max-age=31536000
Если у сайта есть поддомены, добавляем:
<script> document.cookie = "lead_submitted=true; path=/; max-age=3600; domain=.example.ru"; </script>
Но если поддоменов нет — этот параметр не нужен. Например, на сайте моего клиента поддоменов нет. Срок жизни cookie у меня 7 дней. В качестве триггера — переход на страницу благодарности.
Создаём тег Пользовательский HTML с триггером «Страница благодарности»
Шаг 2. Настраиваем триггер в YTM
Создаём триггер, который будет срабатывать при переходе на страницу благодарности, но только если cookie ещё не установлена.
- Триггер: Достижение страницы благодарности
- Тип триггера: Модель DOM готова
Почему не просмотр страницы? Можно использовать и этот триггер, но Модель DOM готова срабатывает уже после загрузки основного кода сайта, а значит дополнительно не тормозит загрузку сайта. Вы для своих проектов тоже можете использовать этот тип триггера.
- Условие активации триггера – Некоторые события;
- Условие активации – Page URL – содержит – /thank-you.
Создаём триггер с условием активации: – Page URL – содержит – /thank-you
Шаг 3. Создаём переменную собственный файл cookie
Теперь нужно создать переменную в YTM, чтобы извлекать наше значение cookie.
- YTM → Переменные → Новая;
- Тип: Собственный файл cookie;
- Название переменной: lead_submitted_cookie (или какое захотите);
- Название cookie: lead_submitted.
Создаём переменную «Собственный файл cookie»
Теперь мы можем добавить в триггер достижение «Страницы благодарности» дополнительное условие активации:
lead_submitted_cookie – не равно – true
Дополняем триггер новым условием активации
Таким образом триггер будет срабатывать только при первом переходе на страницу благодарности из текущего браузера в течение 7 дней. Все повторные заходы игнорируются.
И теперь нам остаётся только создать новую цель в Яндекс Метрике.
Создаём цель в Яндекс Метрике
Шаг 4. Создаём тег Яндекс Метрики
Создаём тег с типом Яндекс Метрика (шаблон у нас уже есть), выбираем нужный ID счётчика, добавляем цель, например lead–true, и подключаем к нему обновлённый триггер с проверкой cookie.
Создаём тег Яндекс Метрика
Шаг 5. Проверка в режиме отладки
Переходим в режим отладки YTM. Отправляем тестовую заявку.
Событие в консоли разработчика сработало
Всё отслеживается корректно.
Переходим во вкладку Application (Приложения), «проваливаемся» в Cookies и ищем lead_submitted_cookie = true.
Отлично: всё там, где и должно быть
Срок жизни:
Срок жизни cookie в этом браузере до 11 августа
А теперь давайте попробуем оставить ещё 1 заявку. И… Как видите: страницы спасибо мы достигли, но цель при этом больше не сработала!
Цель повторно не сработала
Можете попробовать настроить такое дополнительное условие и для ваших проектов, чтобы исключить ложные срабатывания конверсий.
Отслеживаем отправку формы через «Специальное событие»
Давайте рассмотрим ещё более точный способ отслеживания отправки формы — с использованием специального события. Сайт моего клиента, а возможно и вашего, создан на платформе Тильда. И на Тильде при отправке заявки происходят 2 события:
- submit_form + уникальный цифровой идентификатор (например: submit_form123456789);
- pageview.
Эти события можно увидеть при включённом режиме отладки в GTM. Далее нам остаётся только создать триггер с типом «Специальное событие» и добавить один из двух вариантов.
События при включённом режиме отладки в GTM
В GTM настройка триггера выглядит так.
Настройка триггера «Специальное событие» в GTM
При помощи «галочки» – Использовать регулярные выражения, я учитывал и все цифры, которые шли после события submit_form. Затем создавался тег Яндекс Метрики с этим триггером — и задача была решена.
Но на момент написания статьи в YTM ещё нет поддержки регулярных выражений для триггеров типа «Специальное событие». Поэтому перенести такое условие напрямую нельзя.
Триггер “Специальное событие” в YTM
Что же делать?
У нас есть несколько вариантов.
Вариант 1 — Программный
Если вы работаете с сайтом, где доступны изменения в коде, вы можете:
- написать небольшой JavaScript-код (например, с помощью нейросети или вручную);
- этот код будет отправлять кастомное событие в dataLayer при отправке формы;
- и на это событие можно повесить триггер в YTM.
Пример такого события:
dataLayer.push({ event: "formSentYTM" });
Вариант 2 — Универсальный (Тильда)
Если вы работаете с Тильдой, всё можно упростить.
При взаимодействии пользователя с сайтом Тильда генерирует так называемые виртуальные страницы, и каждое из таких взаимодействий отправляет событие pageView в dataLayer.
Событие pageView в режиме отладки в GTM
Событие pageView срабатывает безо всяких доп. символов. Так что регулярное выражение нам не понадобится. А значит мы можем настроить отслеживание этого события и в YTM!
Однако не всё так просто! Есть очень важный нюанс! К сожалению, событие pageView срабатывает не только при отправке формы, но и:
- при открытии pop-up окна;
- при нажатии на кнопки;
- при других действиях внутри сайта.
Например, в GTM в режиме отладки я вижу, что в карточке товара событие pageView срабатывает и при нажатии на кнопку «Подробнее».
Подробнее
Событие pageView срабатывает и при нажатии на кнопку «Подробнее»
Событие pageView срабатывает и при нажатии на кнопку «Подробнее»
Но проблема решаема!
Нам просто нужно задействовать дополнительную переменную eventAction и настроить триггер так, чтобы он срабатывал только при отправке формы!
Давайте разбираться по порядку.
Тильда формирует следующие значения eventAction:
- tilda/popup/rec12345/opened– при открытии pop-up;
- tilda/click/rec12345/button– при клике по кнопке;
- tilda/form12345/submitted– при отправке формы.
Нас же интересует только последнее: …/submitted.
Как найти нужное значение eventAction?
Способ 1: через режим отладки GTM
- Перейдите на сайт в режиме предварительного просмотра в GTM;
- Выполните нужное действие (например, клик по кнопке);
- В панели отладки найдите событие pageview;
- Откройте вкладку Data Layer/Вызов API и найдите переменную: eventAction: “/tilda/popup/rec12345/opened”.
Находим значение eventAction через режим отладки GTM
Если вы отправите форму, вместо этого значения будет:
eventAction: "/tilda/form12345/submitted"
Способ 2: через консоль разработчика
То же самое мы можем посмотреть и без GTM, написав в консоли разработчика dataLayer.
Пишем в консоли разработчика dataLayer и жмём Enter
Далее жмём Enter и смотрим всё, что у нас находится в слое данных. Находим event: “pageView”. А под ним видим то же самое, что до этого наблюдали в GTM.
Находим значение eventAction через консоль разработчика
Дальше всё просто.
Нам нужно, чтобы при event: “pageView” eventAction всегда содержал: /submitted и не содержал /opened или /button.
Для этого идём в YTM и создаём Пользовательскую переменную уровня данных. Имя переменной, которую нам необходимо извлекать: eventAction.
Создаём переменную уровня данных eventAction
Теперь в тот же триггер со специальным событием pageView, который мы создавали ранее, добавляем дополнительное условие. Выбираем нашу пользовательскую переменную eventAction – содержит submitted.
Добавляем дополнительное условие в настройках триггера
Теперь мы отслеживаем только реальную отправку формы, без ложных срабатываний от попапов и кнопок. Всё благодаря дополнительной фильтрации по eventAction.
Таким образом в рамках переноса целей из GTM в YTM мы:
I. Настроили отслеживание заявки через страницу «Спасибо»
- создали триггер по URL страницы /thank-you;
- усовершенствовали его, добавив фильтр по cookie, чтобы избежать повторных или фейковых срабатываний.
II. Настроили отслеживание отправки формы через специальное событие pageView
- учли особенности платформы Тильда, где при отправке формы срабатывает событие pageView с виртуальной страницей /tilda/form12345/submitted;
- создали пользовательскую переменную eventAction, чтобы извлекать путь виртуальной страницы;
- добавили фильтрацию: eventAction должен содержать submitted.
Такая логика обеспечивает срабатывание цели только в момент реальной отправки формы, а не при вспомогательных действиях на сайте. Надеюсь, информация, которой я поделился с вами, окажется для вас полезной. А в следующей статье мы научимся настраивать отслеживание копирования текста на сайте.
