Google Tag Manager: как настроить отслеживание заявок с формы сайта

Чтобы Google Tag Manager передавал в отчёты только заявки, тег цели запускают не по клику, а по сигналу, что сайт заявку принял: открылась страница «Спасибо», появилось сообщение об успехе или сайт сам передал событие.

Триггер «Отправка формы» с «Проверкой ошибок» отсеивает только попытки, которые остановила проверка полей на странице. Отказ сервера после отправки он не видит, поэтому его берут, когда другого сигнала у сайта нет.

Сигнал ловит триггер GTM, а по триггеру один тег отправляет цель в Яндекс Метрику, другой — событие generate_lead в Google Analytics 4. Затем настройку проверяют в режиме предварительного просмотра и публикуют контейнер.

Статья для маркетолога или владельца сайта, который сам настраивает учёт заявок или ставит задачу разработчику. Заявка здесь — форма, которую сайт принял; клик по кнопке, по номеру телефона или прокрутка заявкой не считаются.

Коротко.

• Клик по кнопке «Отправить» — ещё не заявка: человек мог пропустить поле, и данные не ушли. Считать нужно только форму, которую сайт принял.
• Триггер «Отправка формы» с «Проверкой ошибок» не запускает теги на попытки, которые остановила проверка полей на странице. Отказ сервера после отправки он не видит: приём подтверждает страница «Спасибо» или событие от сайта.
• Если заявка уходит без перезагрузки страницы, стандартный триггер может промолчать. Надёжнее всего, чтобы разработчик передавал событие в dataLayer, а в GTM его ловил триггер «Пользовательское событие».
• В Метрику заявку передаёт тег с вызовом reachGoal, а в самой Метрике нужна цель типа «Целевое событие» с тем же идентификатором.
• Изменения в GTM не работают на сайте, пока вы их не опубликуете. До публикации их проверяют в предварительном просмотре, а цель Метрики — с параметром _ym_debug=2 в адресе страницы.

Что такое Google Tag Manager и что он меняет в учёте заявок

Google Tag Manager (GTM, Google Менеджер тегов) — бесплатный инструмент для управления тегами: через него на сайт добавляют и обновляют код отслеживания Метрики, Google Analytics и других сервисов.

Его ещё называют «Гугл Тег Менеджер» и «диспетчер тегов Google», а в поиске нередко пишут вместе с аналитикой — «google analytics tag manager».

Но это два разных сервиса. Google Analytics строит отчёты, Tag Manager только передаёт ему данные; отчётов о посещениях и заявках в самом GTM нет.

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

Тег срабатывает, только если к нему привязан хотя бы один триггер — условие, при котором тег запускается. Тег без триггера просто лежит в контейнере.

Справка Google советует по возможности брать готовые шаблоны тегов, а не «Пользовательский HTML»: шаблоны помогают избежать проблем со скоростью и вредоносным кодом.

Тег Метрики в этой статье — как раз «Пользовательский HTML», и в нём одна строка из справки Метрики, ничего лишнего.

Другой минус — зависимость от вёрстки. Триггер, который ищет форму по идентификатору или классу, перестанет срабатывать, если после редизайна их поменяли. После каждого обновления сайта нужна тестовая заявка.

Из чего состоит Google Tag Manager

В GTM пять понятий: аккаунт, контейнер, тег, триггер и переменная. Для учёта заявок связь простая: триггер замечает заявку, тег передаёт её в Метрику, переменная помогает отличить одну форму от другой.

Когда срабатывает триггер «Отправка формы», в GTM становятся доступны встроенные переменные формы: «Идентификатор формы» (Form ID), «Классы формы» (Form Classes), «Элемент формы», «Цель формы», «URL формы» и «Текст формы».

Отдельно стоит уровень данных, или dataLayer. Это объект на странице, через который сайт сам сообщает тегам о событиях — например, что заявка принята.

Рекламные пиксели ставят теми же тегами, но к учёту заявок они не относятся, и здесь мы их не разбираем.

Как установить Google Tag Manager на сайт

Установка — это четыре шага: аккаунт, контейнер, два фрагмента кода на каждой странице и проверка. Если доступа к шаблонам сайта у вас нет, фрагменты вставляет разработчик или подрядчик.

1. Откройте tagmanager.google.com, войдите в аккаунт Google и нажмите «Создать аккаунт». Укажите название компании и страну.
2. В блоке контейнера введите основной адрес сайта, выберите тип «Веб», нажмите «Создать» и примите условия использования. Отдельный контейнер для каждой страницы не нужен.
3. Первый фрагмент кода вставьте в <head> как можно выше. Второй фрагмент, с <noscript>, — сразу после открывающего тега <body>. Оба нужны на каждой странице сайта.
4. В окне установки укажите адрес сайта и нажмите «Тестировать».

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

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

На странице справки Метрики об установке счётчика описаны два способа: вставить код в HTML всех страниц, как можно ближе к началу, или поставить плагин CMS. Про GTM там ничего нет.

Если счётчик уже стоит в коде, проще оставить его там, а через GTM передавать только цели.

Что считать заявкой и каким триггером её ловить

Заявка — это то, что сайт принял, поэтому и сигнал для GTM нужен тот, что появляется только после приёма заявки. Таких сигналов три: страница «Спасибо», сообщение об успехе и событие, которое сайт передаёт сам.

Чего делать не стоит — ставить цель на клик по кнопке «Отправить». Такой триггер сработает и тогда, когда человек пропустил обязательное поле и ничего не ушло, и в отчёте окажется больше заявок, чем пришло менеджеру.

Для страницы «Спасибо» триггер настраивают так: тип «Просмотр страницы», «Некоторые просмотры страниц», условие — адрес страницы содержит, например, /spasibo/.

По умолчанию «Видимость элемента» срабатывает, когда на экране видно не меньше 50% элемента; порог можно изменить. Сообщение об успехе достаточно поймать один раз на страницу.

С «Регистрацией изменений DOM» сайт может работать медленнее, поэтому справка советует выбирать элемент по идентификатору.

Мы советуем опираться на событие, которое сайт отдаёт после того, как сервер принял заявку: в отчёт попадёт только то, что дошло. Страница «Спасибо» не хуже, если на неё нельзя попасть иначе.

Как настроить триггер «Отправка формы», чтобы считались только отправленные

Включите у триггера две галочки — «Ожидать теги» и «Проверка ошибок» — и ограничьте его нужной страницей. Тогда тег не сработает на попытки, которые остановила проверка полей, и на другие формы сайта.

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

Подробно триггер описан в справке Менеджера тегов о триггере «Отправка формы».

«Проверка ошибок» отсекает попытки, которые остановила проверка полей на самой странице. Ответа сервера триггер не видит: если сайт отклоняет заявку уже после отправки, ловите страницу «Спасибо» или событие от сайта.

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

Пустое поле с пометкой «обязательное» для такой проверки не годится: браузер обычно вообще не даёт отправить форму, и тег промолчит даже без «Проверки ошибок».

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

Если форма отправляется без перезагрузки страницы

Если заявка уходит без перезагрузки страницы, надёжнее всего триггер «Пользовательское событие». По справке Google, чаще всего его используют для форм, у которых переопределено стандартное событие отправки (submit).

Само событие должен передать сайт, и это задача разработчика. Если после отправки на странице появляется «Заявка принята», можно обойтись без события от сайта — триггером «Видимость элемента».

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

Разработчик добавляет одну строку в то место кода, где сервер уже ответил, что заявка принята:

dataLayer.push({'event': 'lead_form', 'form_name': 'zayavka_uslugi'});

Чтобы строка работала, на странице выше кода контейнера должен быть объявлен уровень данных: window.dataLayer = window.dataLayer || [];. Перезаписывать его конструкцией dataLayer = [...] нельзя — пропадут уже переданные значения.

Что написать разработчику в задаче:

1. После успешного ответа сервера вызвать dataLayer.push с событием lead_form; при ошибке не вызывать.
2. В form_name передавать, какая это форма, — латиницей, одинаково на всех страницах.
3. Имя dataLayer писать с этим регистром букв и не создавать на странице второй такой объект.

В GTM создайте триггер «Пользовательское событие» и в поле «Имя события» впишите ровно lead_form.

С регулярным выражением .* осторожнее: такой триггер сработает на все события, включая служебные события самого GTM. Справка советует задавать правила строже.

Значение form_name можно прочитать пользовательской переменной типа «Переменная уровня данных» с тем же именем, и добавить в условие триггера или передать в GA4 параметром. Синтаксис описан в документации Google об уровне данных.

Как передать заявку в цели Яндекс Метрики через GTM

Нужны две вещи: цель «Целевое событие» в Метрике и тег в GTM, который вызывает reachGoal с тем же идентификатором. Если идентификаторы хоть в одном символе расходятся, цель не засчитается.

1. В Метрике откройте «Цели», нажмите «Добавить цель», выберите тип «Целевое событие». Задайте название и идентификатор, например lead_form, и условие «совпадает».
2. В идентификаторе не используйте символы / \ & # ? = " — для условий «совпадает» и «содержит» они запрещены.
3. В GTM создайте тег «Пользовательский HTML» и вставьте код: <script>ym(XXXXXXXX, 'reachGoal', 'lead_form');</script>, где XXXXXXXX — номер вашего счётчика.
4. В блоке «Триггеры» выберите триггер из предыдущих разделов — тот, что подходит вашему сайту.

Синтаксис reachGoal и ограничения на идентификатор — в справке Метрики о целевом событии. Там же сказано: одна и та же цель от одного посетителя фиксируется на счётчике не чаще раза в секунду, а целей на счётчик — до 200.

Если счётчик Метрики вы тоже ставите через GTM, тег счётчика должен сработать раньше тега цели. В теге цели откройте «Расширенные настройки» → «Последовательность активации тегов» и выберите тег счётчика как тег setup.

Там же можно запретить тегу цели срабатывать, если тег счётчика не сработал. Если порядок не задать, вызов цели может уйти раньше, чем на странице появится счётчик, и не засчитаться.

Цель лучше не удалять и не пересоздавать: после удаления собранные по ней данные пропадут из отчётов, а правка прошлые данные не меняет.

Как выбрать цели и отделить заявки от кликов, мы разбирали в статье о целях Яндекс Метрики.

Как передать заявку в Google Analytics 4

В GA4 заявку передают тегом «Google Аналитика: Событие GA4» с названием generate_lead и потом отмечают это событие ключевым. Триггер берут тот же, что для цели Метрики.

1. Проверьте подготовку: в GA4 есть ресурс и поток данных для сайта. По справке, саму Google Аналитику нужно подключить в GTM до настройки тега события.
2. Если она ещё не подключена, создайте тег типа «Тег Google», укажите идентификатор тега из потока данных GA4 и выберите триггер «Инициализация» — «Все события инициализации». Сохраните.
3. В GTM создайте тег «Google Аналитика: Событие GA4». В поле «Идентификатор потока данных» укажите идентификатор вашего потока GA4.
4. В «Название события» впишите generate_lead. Это рекомендуемое событие GA4, его описание в справке: «Пользователь отправляет форму или запрашивает информацию».
5. Если нужно знать, какая форма сработала, добавьте параметр form_name со значением из переменной уровня данных.
6. Привяжите тот же триггер, что и у тега Метрики, и сохраните тег.
7. В GA4 откройте «Администратор» → «Просмотр данных» → «События». Если generate_lead уже приходил, нажмите звёздочку рядом с ним.
8. Если заявок ещё не было, нажмите «+ Создать событие», введите generate_lead и включите «Отметить как ключевое событие». Для этого нужна роль не ниже «Маркетолога».

В отчёте «В реальном времени» заявка появится через несколько минут, в стандартных отчётах ключевое событие — в течение 24 часов. У стандартного ресурса может быть до 30 ключевых событий.

Порядок описан в справке Google Analytics о ключевых событиях.

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

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

1. В рабочей области контейнера нажмите «Предварительный просмотр», укажите адрес сайта и нажмите «Подключить».
2. Когда появится «Подключено», вернитесь во вкладку Tag Assistant и нажмите «Продолжить».
3. Отправьте форму с ошибкой, которую не пропустит проверка полей на странице (например, телефон не в том формате), затем правильную. Tag Assistant покажет, какие теги сработали, в каком порядке и с какими данными.
4. Проверьте Метрику: добавьте к адресу страницы ?_ym_debug=2, отправьте форму и откройте панель отладки по значку внизу страницы. Цель должна быть в списке событий.
5. Проверьте GA4 в отчёте «В реальном времени» или в DebugView.
6. Нажмите «Отправить», выберите «Публикация и создание версии», напишите понятное название («Цель заявки, форма услуг») и нажмите «Опубликовать».

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

Предварительный просмотр видите вы и те, с кем вы им поделились; посетители его не видят. Если в Метрике включён фильтр «Не учитывать мои визиты», проверяйте в режиме инкогнито.

Параметр _ym_debug=2 работает с новым кодом счётчика. Со старым кодом добавьте _ym_debug=1, откройте консоль (Ctrl+Shift+J, в macOS ⌥⌘J) и ищите строку Reach goal.

Тестовую заявку подпишите словом «тест» и убедитесь, что она дошла до почты или CRM. Цель, которая срабатывает, пока сами заявки теряются, показывает в отчёте заявки, которых менеджер не получил.

Как откатить неудачную публикацию

Если после публикации что-то сломалось, откройте «Версии», выберите прошлую рабочую версию и в меню «Действие» нажмите «Опубликовать». Сайт вернётся к прежнему набору тегов.

Когда прежнюю версию нужно сначала поправить, выберите «Выбрать в качестве последней версии»: рабочая область заменится этой версией, дальше её правят и публикуют. Кто и когда публиковал, видно в истории публикаций.

Оба способа описаны в справке Менеджера тегов о публикации и версиях.

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

Почему целей больше или меньше, чем заявок в CRM

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

Автоматические цели Метрика по умолчанию включает новым счётчикам, счётчикам без настроенных целей и тем, где цели используются редко.

Для автоцели «Отправка формы» справка отдельно оговаривает, что для корректной работы нужна валидация — проверка полей формы.

И ещё одно: если на сайте стоит Google Analytics, Метрика может распознать разметку его рекомендуемых событий и сама создать по ним цели. Тогда на одну заявку в Метрике может оказаться ещё одна цель.

Если цель срабатывает по кнопке, а не после того, как сервер принял заявку, спам от ботов достигает её так же, как живые заявки. Как отсечь их, не потеряв клиентов, — в статье о защите формы от спама.

Звонки и письма на почту в эту цель не попадают, поэтому сравнивайте её только с заявками с сайта. Если и они расходятся заметно, ищите причину по таблице выше.

Яндекс Тег Менеджер, если нужен менеджер тегов без Google

Если у компании нет доступа к аккаунту Google или она не хочет подключать зарубежный сервис, теги для учёта заявок можно настроить в Яндекс Тег Менеджере. Он включается в настройках счётчика Метрики.

1. Создайте и установите счётчик Метрики, если его ещё нет.
2. В Метрике откройте «Настройки» → «Счетчик» и включите «Яндекс Тег Менеджер».
3. Если нужны свои теги, подключите там же функцию «Пользовательский HTML» и сохраните изменения.

Включить Яндекс Тег Менеджер может только владелец счётчика — его логин указан в поле «Владелец» в списке счётчиков. Если владелец — подрядчик и связаться с ним не получается, справка советует перенести счётчик на свой аккаунт.

FAQ: Google Tag Manager и заявки

Нужен ли программист, чтобы настроить Google Tag Manager?

Для установки контейнера нужен доступ к коду сайта или к настройкам CMS. Теги целей и триггеры настраивают в интерфейсе GTM.

Для форм без перезагрузки надёжнее событие от разработчика. Если после отправки появляется сообщение об успехе, можно обойтись триггером «Видимость элемента».

Почему тег срабатывает в предпросмотре, а в Метрике целей нет?

Сначала проверьте, опубликован ли контейнер: до публикации изменения работают только в предпросмотре. Затем сверьте идентификатор в теге с идентификатором цели в Метрике и проверьте фильтр «Не учитывать мои визиты».

Можно ли считать заявкой клик по кнопке «Отправить»?

Нет. Клик фиксирует нажатие, а не отправку, и засчитывается даже тогда, когда заявка не ушла из-за ошибки в поле.

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

Что делать с автоцелями Метрики, если цель уже настроена через GTM?

Решить, на какую цель вы опираетесь в отчётах, и не складывать их. Автоцель «Отправка формы» работает корректно, только если настроена проверка полей формы.

Как быстро заявки появятся в отчётах?

В Метрике данные по новой цели появляются в отчёте «Конверсии» через несколько минут после её создания. В GA4 событие видно в отчёте «В реальном времени» через несколько минут, а в стандартных отчётах — в течение 24 часов.

Как вернуть прошлую версию, если после публикации всё сломалось?

Откройте «Версии» в GTM, выберите последнюю рабочую версию и в меню «Действие» нажмите «Опубликовать». Заявки, пропущенные за время поломки, в отчёт не вернутся.

Что проверить в своём учёте заявок

1. Включите предварительный просмотр и отправьте заявку дважды: с ошибкой, которую не пропустит проверка полей, и правильную. Тег цели должен сработать только во второй раз. Отказ сервера проверьте с разработчиком.
2. Сравните число целей за прошлую неделю с числом заявок в почте или CRM. Если разница заметная, пройдитесь по таблице причин выше.
3. Откройте настройки счётчика и посмотрите, включены ли автоцели. Затем проверьте, не стоит ли счётчик дважды — и в шаблоне сайта, и тегом в GTM.
4. Тег может подключать сторонний сервис или передавать ему данные. Бесплатная проверка юридических рисков сайта покажет, обращается ли страница к GTM и счётчикам до выбора в баннере cookie. Выводы делает юрист.
5. Посмотрите, у кого есть доступ к контейнеру. Если только у одного подрядчика или сотрудника, добавьте второго человека из компании.