Всем добра и здоровья, друзья!
Как и обещал, расскажу об основных методах отслеживания отправки формы через ЯТМ. Планировал рассказать о четырёх, но пока писал, решил дописать ещё два — итого шесть самых рабочих способов! 😉
Один из них, под номером 6, я буквально на днях подсмотрел у большого эксперта в аналитике Якова Осипенкова. Он оказался спасительным! Но давайте по порядку, от самого простого к самому надёжному.
Способы отслеживания отправки формы в ЯТМ
Метод 1: Базовый триггер "Отправка формы"
Это самый простой и стандартный способ. Срабатывает на стандартное событие submit в HTML.
НЕ сработает, если форма отправляется через AJAX, Fetch, React или если форма вообще НЕ имеет тега <form>. Он также может сработать, даже если поля заполнены некорректно.
Способ ненадёжный, но, тем не менее, если нет связи с разработчиком и вы с клиентом не имеете доступа к сайту — такой вариант может быть уместен.
Метод 2: Отслеживание "Страницы благодарности" (Редирект)
Если после заполнения формы пользователя перекидывает на отдельную страницу (например, /spasibo/), это наш метод.
Как работает:
Мы создаём триггер на событие "Просмотр страницы" (PageView) и уточняем нужный URL через переменную Page URL (/spasibo/).
Более корректная настройка, так как на эту страницу можно попасть, только после отправки формы, а не только по клику по кнопке. Но надёжность зависит от того, насколько корректно настроена валидация формы на сайте.
Метод 3: Отслеживание видимости элемента.
Этот способ прекрасно работает, когда форма отправлена, страница не перезагружается, но на экране появляется зелёная надпись: "Заявка успешно отправлена!"
Как работает:
На видимость элемента с текстом 'Спасибо' можно создать триггер и фиксировать его появление. Идеально подходит для большинства AJAX-форм. Нужно только с помощью консоли разработчика узнать CSS-селектор этого сообщения.
————
Важное замечание: В ЯТМ эта настройка до сих пор требует небольших "костылей" и часто реализуется через дополнительный Пользовательский HTML-тег. Но, имея готовый шаблон, это реализуется довольно быстро.
————
Метод 4: Событие из Data Layer (Уровень данных)
Это, друзья, самый надёжный и профессиональный метод для отслеживания любых конверсий.
Как работает:
Разработчик (да, тут он нужен!) добавляет в код команду, чтобы после успешной отправки формы на уровне данных появлялось специальное событие: event: 'order_finished'.
В ЯТМ мы ловим его через триггер "Специальное событие" с именем order_finished.
Плюсы: 100% точность, идеально для сложных форм.
Минусы: Требует, чтобы разработчик добавил одну строчку кода.
Метод: 5 Событие из Data Layer (Уровень данных) — Для Tilda
Если вы работаете с Tilda, вам повезло!
Как работает:
Tilda при отправке формы сама инициирует специальное событие в Data Layer: event: 'form_submit'. Вам не нужно просить разработчика — этот функционал уже встроен!
🔗 Подробная настройка этого метода была в моём посте ранее, найти можно здесь.
Метод 6: Универсальный код для форм на AJAX (Решение от Якова Осипенкова)
Подсмотрел это решение у Якова Осипенкова. Подробная настройка у него на сайте.
Преимущество: если формы на сайте отправляются без перезагрузки страницы по технологии AJAX — не нужно настраивать "костыли", чтобы отследить видимость элемента или просить разработчика установить специальное событие на уровень данных.
Как работает:
Вы просто добавляете универсальный JS-код через Пользовательский HTML-тег в ЯТМ, и он "слушает" сетевые запросы, фиксируя успешную отправку.
Это решение здорово меня выручило буквально позавчера! 🙏
Теперь вы знаете о шести способах отслеживания отправки формы через ЯТМ! На моём бесплатном вебинаре по ЯТМ,который я всё ещё готовлю, я хочу дать вам много материалов и продемонстрировать многие из этих способов на практике!
Скажите, а какими из этих шести способов чаще всего пользуетесь вы? Или, может быть, у вас есть свой, седьмой секретный метод? 🤔