Отслеживание отправки форм через Google Tag Manager

Универсального способа отследить форму нет: все зависит от того, что происходит на сайте после отправки. Если открывается страница благодарности, считайте ее просмотр. Если нет, пробуйте встроенный триггер «Отправка формы», затем триггер видимости сообщения об успехе. Самый надежный вариант для сложных форм это событие в dataLayer от разработчика. Дальше из Google Tag Manager отправляете в GA4 событие generate_lead.

Я больше 9 лет настраиваю Google Ads и аналитику, и формы остаются самым частым местом, где теряются заявки или считаются лишние. Ниже разберу, как определить тип формы, настроить каждый из четырех способов и проверить результат. Если Tag Manager еще не установлен, начните со статьи как установить Google Tag Manager. А если термины пока путаются, сначала прочитайте про теги, триггеры и переменные.

Сначала посмотрите, как работает ваша форма

Этот шаг занимает пару минут и экономит часы. Откройте сайт и отправьте тестовую заявку. Смотрите, что случилось:

• Открылась новая страница с другим адресом, например /spasibo/. Самый простой случай.
• Страница перезагрузилась, адрес тот же или с параметром. Обычная HTML-форма, обычно подходит встроенный триггер.
• Страница не перезагрузилась, просто появилось сообщение «Спасибо, мы свяжемся с вами». Это отправка без перезагрузки (AJAX), здесь встроенный триггер часто молчит.
• Форма открыта внутри чужого блока (виджет, Google Формы, форма сервиса бронирования). Скорее всего, это iframe с другого домена. Контейнер GTM вашего сайта не видит, что происходит внутри него.

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

Какой способ выбрать

Я иду по такому порядку:

1. Есть отдельная страница благодарности: триггер «Просмотр страницы».
2. Обычная форма без отдельной страницы: триггер «Отправка формы» с проверкой ошибок.
3. Встроенный триггер не срабатывает, но появляется сообщение об успехе: триггер «Видимость элементов».
4. Ничего из этого не подходит, важна точность, форма сложная: событие в dataLayer.

А как же автоматическое событие form_submit из улучшенной статистики GA4? Оно включено настройкой «Взаимодействия с формами», и для первого взгляда полезно. Но я не опираюсь на него как на заявки: оно срабатывает не на всех формах и ловит формы, которые заявками не являются, например поиск или подписку. Про разницу событий подробнее в статье события в GA4.

Способ 1. Страница благодарности

Настройка занимает пять минут.

1. В GTM откройте «Триггеры» и нажмите «Создать».
2. Выберите тип «Просмотр страницы».
3. Отметьте «Некоторые просмотры страниц».
4. Задайте условие: Page Path содержит /spasibo/.
5. Сохраните и привяжите триггер к тегу события (о нем ниже).

Подвох один: на страницу можно зайти повторно, обновить ее или найти в поиске. Закройте ее от индексации и уберите прямые ссылки на нее из меню. Адрес должен открываться только после отправки формы.

Способ 2. Триггер «Отправка формы»

Встроенный триггер GTM слушает стандартное событие отправки формы в браузере.

1. В разделе «Триггеры» нажмите «Создать».
2. В блоке «Настройка триггера» выберите «Отправка формы».
3. Включите «Проверка ошибок».
4. При необходимости включите «Ожидать теги».
5. Выберите «Некоторые формы» и задайте условие, чтобы триггер работал только на нужной странице или форме.
6. Сохраните.

Что значат эти флажки:

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

Чтобы отличить одну форму от другой, включите встроенные переменные форм: откройте «Переменные», нажмите «Настроить» и отметьте, например, «Идентификатор формы» и «Классы формы». Если на сайте несколько форм, условие удобно задавать по Form ID.

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

Способ 3. Триггер «Видимость элементов»

Подходит для форм без перезагрузки: заявка ушла, и на странице появился блок с благодарностью. Считаем появление этого блока.

1. Отправьте тестовую заявку, нажмите правой кнопкой по сообщению об успехе и выберите «Просмотреть код». Найдите ID или класс блока.
2. В GTM создайте триггер типа «Видимость элементов».
3. В поле «Метод выбора» укажите «ID» или «Селектор CSS» и введите значение, например .form-success.
4. В правилах срабатывания выберите один раз на страницу.
5. В дополнительных настройках включите «Регистрация изменений DOM». Без этого триггер не заметит блок, который появился после загрузки страницы.
6. Если блок используется и для других сообщений, добавьте условие на нужную страницу.

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

Способ 4. Событие в dataLayer

Самый точный вариант: код сайта сам сообщает GTM, что заявка принята сервером. Разработчику нужно добавить в место успешной отправки примерно такой код:

window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
  event: 'form_success',
  form_name: 'contact'
});

Дальше в GTM:

1. Создайте триггер типа «Специальное событие» с названием form_success. Регистр важен.
2. Создайте переменную типа «Переменная уровня данных» с именем form_name, если хотите различать формы.
3. Привяжите триггер к тегу события.

Многие плагины форм уже сами сообщают об успешной отправке. Например, WordPress-плагин Contact Form 7 создает в браузере событие wpcf7mailsent. Его можно поймать тегом «Пользовательский HTML» и передать в dataLayer:

<script>
document.addEventListener('wpcf7mailsent', function (e) {
  window.dataLayer.push({
    event: 'form_success',
    form_name: 'cf7-' + e.detail.contactFormId
  });
});
</script>

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

Если форма стоит в чужом iframe, GTM вашего сайта ее не увидит. Смотрите, умеет ли сервис передавать событие на родительскую страницу или перенаправлять на вашу страницу благодарности.

Как отправить заявку в GA4

Триггер готов, теперь нужен тег.

1. В GTM откройте «Теги» и нажмите «Создать».
2. Выберите тип «Google Аналитика: Событие GA4».
3. Укажите идентификатор потока данных вида G-XXXXXXXXXX.
4. В поле «Название события» напишите generate_lead. Это рекомендуемое событие Google для заявки.
5. При необходимости добавьте параметр, например form_name. Чтобы видеть его в отчетах, позже создайте специальный параметр в GA4.
6. В блоке триггеров выберите триггер из одного из способов выше.
7. Сохраните.

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

Отдельно о личных данных. Не передавайте в GA4 имя, телефон или email клиента. Осторожнее с переменной «Текст формы» и с параметрами в адресе страницы: туда легко попадают поля, которые ввел человек.

Как проверить настройку

Не публикуйте контейнер, пока не проверите все сами.

1. В GTM нажмите «Предпросмотр», введите адрес сайта и нажмите Connect. Откроется Tag Assistant.
2. Отправьте тестовую заявку и посмотрите, что тег сработал один раз.
3. Отправьте форму с ошибкой: тег срабатывать не должен.
4. Обновите страницу благодарности, если она есть, и подумайте, как будет считаться повторный заход.
5. Откройте отчет «В реальном времени» или DebugView в GA4 и найдите generate_lead.
6. Нажмите «Отправить», затем «Опубликовать», укажите название версии.

После публикации отметьте generate_lead как ключевое событие и через сутки сверьте число событий с заявками в почте или CRM. Небольшое расхождение нормально, потому что блокировщики рекламы и отказ от cookie влияют на сбор данных. Большое расхождение означает, что что-то настроено не так.

Быстро проверить, стоит ли вообще на сайте GTM и GA4, можно нашим инструментом проверка установки аналитики.

Частые ошибки

• Считают клик по кнопке «Отправить». Такой клик случается и при пустой форме. В отчетах заявок больше, чем на почте.
• Выключена проверка ошибок. Тот же результат: считаются неудачные попытки.
• Триггер на всех страницах и всех формах. Подписка и поиск становятся заявками.
• Двойной учет. Срабатывают и тег по форме, и тег по странице благодарности, или есть два контейнера с одинаковыми тегами.
• Не сверяют с реальными заявками. Реклама обучается на неверных цифрах, а бюджет уходит не туда.
• Настроили и забыли. После обновления сайта или смены плагина меняются ID и классы, и учет тихо пропадает. Я проверяю формы после каждого редизайна.

Подобную логику я использую и для звонков: посмотрите, как отследить клик по номеру телефона.

Частые вопросы

Почему триггер «Отправка формы» не срабатывает?

Чаще всего форма отправляется скриптом без стандартного события браузера, поэтому GTM его не видит. Еще одна причина: включена проверка ошибок, а скрипт сайта отменяет стандартное событие. Попробуйте способ с видимостью элемента или dataLayer.

Как отследить форму в iframe?

С контейнера родительской страницы никак. Нужно либо поставить GTM внутрь iframe (если это ваш сайт), либо использовать возможности сервиса: редирект на страницу благодарности или передачу события на родительскую страницу.

Как отследить несколько форм на одном сайте?

Сделайте один тег generate_lead и передавайте параметр с названием формы. Либо создайте отдельные триггеры с условиями по Form ID, но общий тег проще поддерживать.

Можно ли сразу передавать заявки в Google Ads?

Да. Либо импортируйте ключевое событие из GA4, либо поставьте на тот же триггер тег конверсии Google Ads. Главное, чтобы одна заявка не считалась основной конверсией дважды.

Нужно ли согласие пользователя?

Это зависит от страны и аудитории. Для европейских посетителей нужен баннер согласия и корректная настройка режима согласия, а часть данных из-за отказов не будет собрана. Если не уверены, проконсультируйтесь с юристом.

Вывод

Сначала посмотрите, что делает форма после отправки, потом выбирайте самый простой способ, который работает именно у вас: страница благодарности, «Отправка формы», видимость элемента или dataLayer. Отправляйте generate_lead, проверяйте в «Предпросмотре» и сверяйте цифры с реальными заявками.

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