Google Tag Manager: как передать заявку из формы в GA4 и проверить её

Онлайн-школа продаёт курс по аналитике за 25 000 ₸ со страницы с формой записи, той же, что в уроке про GA4 (цифры в уроке условные). Прошлый подрядчик повесил событие заявки на клик по кнопке «Отправить». За неделю GA4 насчитал 40 заявок с рекламы, а в CRM их 34, и владелец школы спрашивает, каким цифрам верить.

Часть разницы - нажатия, после которых заявка не сохранилась: пустой email, телефон без одной цифры, пропавшая связь в лифте. Остальное могут дать двойные клики и тестовые заявки коллег, а по двум итоговым числам не скажешь, сколько чего. Нажатия без заявки и двойные клики тег на кнопке считает наравне с заявками, и чинится это одним способом: сайт сам сообщает о заявке, когда сервер её принял, а Google Tag Manager передаёт это сообщение в GA4. Разберём, как это собрать и как проверить, прежде чем показывать цифры клиенту.

Форма принята: сайт отправляет lead_submit_success, триггер ждёт это событие, тег отправляет в GA4 generate_lead, а переменная подставляет в него form_name.

Как устроен GTM

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

В контейнере три вида объектов (как они связаны):

Объект	Что делает	В примере со школой
Тег	Отправляет данные в другую систему	«Google Аналитика: событие GA4» с именем `generate_lead`
Триггер	Решает, когда запустить тег	«Пользовательское событие» `lead_submit_success`
Переменная	Подставляет значение в тег или в условие триггера	«Переменная уровня данных» `form_name`

Всё это вы правите в рабочей области (workspace), и на сайт правки не попадают, пока вы их не опубликуете. У контейнера есть рабочая область по умолчанию, а в обычном аккаунте можно завести ещё две, например чтобы вы чинили заявки, а коллега в это время собирал теги для новой акции. Каждая публикация сохраняет версию контейнера, и к любой из них можно вернуться.

Сайт сообщает о заявке сам

GTM видит клики, просмотры страниц и отправку форм, но не знает, что ответил сервер. Поэтому о заявке сообщает код сайта, через dataLayer - очередь сообщений, которую читает GTM (как работает dataLayer). Задача разработчику звучит так: «Когда сервер ответил, что заявка сохранена, выполни этот код. При ошибке ничего не отправляй».

window.dataLayer = window.dataLayer || [];

window.dataLayer.push({

event: "lead_submit_success",

form_name: "course_signup",

value: 5000

});

Что здесь что:

event - имя события, которого будет ждать триггер. Его придумываете вы с разработчиком, и оно может отличаться от имени в GA4: сайт говорит lead_submit_success, а в GA4 уходит generate_lead.
form_name - какая это форма. На сайте школы их две, запись на курс и бесплатная консультация, и в отчётах их различают по этому полю.
value - оценка заявки из урока про GA4: курс за 25 000 ₸, оплачивает каждая пятая заявка, значит заявка стоит 5 000 ₸. Число пишется без кавычек. Для JavaScript 5000 и "5000" - разные значения, а в справочнике событий GA4 value указан как число.
Первая строка берёт существующий dataLayer, а если его нет, создаёт пустой. Google прямо пишет, что window.dataLayer нельзя перезаписывать: запись dataLayer = [...] стирает всё, что туда уже положили другие скрипты.

Имени, телефона и email в push быть не должно. Правила Google Analytics запрещают передавать в Google данные, по которым можно узнать человека, а GTM отправит всё, что вы подставите в тег. Телефон остаётся в CRM, а связь заявки с рекламой строят отдельно, об этом урок про server-side трекинг.

И последнее правило: всё, что описывает заявку, кладут в тот же push, что и event. Значение в dataLayer живёт, пока человек на странице, и следующий push с тем же ключом его затирает. Если form_name придёт отдельным сообщением после события, тег уйдёт без него или с названием прошлой формы.

Соберите переменные, триггер и тег

Если прошлый подрядчик оставил в контейнере тег generate_lead на клик по кнопке, начните с него: удалите или приостановите. Иначе на каждую заявку уйдут два события, старое и новое.

Переменные. Откройте «Переменные», в разделе «Пользовательские переменные» нажмите «Создать» и выберите тип «Переменная уровня данных» (типы переменных). Назовите её DLV - form_name, а в поле имени переменной уровня данных впишите form_name. Так же соберите DLV - value для value. Валюта у школы всегда тенге, поэтому с сайта её передавать незачем: создайте переменную типа «Константа» со значением KZT.
Триггер. «Триггеры» → «Создать» → «Пользовательское событие» (как настроить). В «Название события» вставьте lead_submit_success, скопировав из кода, а не набирая заново: триггер сработает, только если имя совпадёт с тем, что прислал сайт. Если тег нужен только для формы курса, вместо «Все специальные события» выберите вариант с условием и задайте: DLV - form_name равно course_signup.
Тег. «Теги» → «Создать» → «Google Аналитика: событие GA4» (события GA4 через GTM). Укажите идентификатор потока данных G-..., в «Название события» впишите generate_lead и добавьте три параметра: form_name из DLV - form_name, value из DLV - value, currency из константы. В триггерах выберите тот, что собрали на шаге 2.

Тег Google с тем же идентификатором G- при этом должен стоять на всех страницах, как в уроке про GA4.

Тренажёр: упражнения 1 и 2

Прежде чем трогать живой контейнер, пройдите упражнения 1 и 2 в тренажёре: в первом вы отправляете событие формы в dataLayer, во втором собираете тег заявки. Шаг трека «Старт» засчитан, когда оба упражнения проходят проверку тренажёра. Имена там другие, чем у школы: сайт сразу называет событие generate_lead, форму передаёт в form_id, валюта USD. Связка та же.

Упражнение 1, «Создайте событие формы». Функция trackLead(form) должна отправлять generate_lead только для валидной формы, брать ID из той формы, которую отправили, и передавать value числом. Имя и email из формы в событие не копируйте, проверка следит и за этим.
Упражнение 2, «Настройте тег заявки». Переменные, триггер и тег уже собраны, но тег не срабатывает. Сравните имя события в триггере с тем, что приходит в dataLayer, сохраните условие по form_id и посмотрите, что value в теге меняется вместе с исходным событием, а валюта берётся из константы.

Скриншот зелёной проверки сохраните, это результат шага.

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

На вкладке «Рабочая область» нажмите «Предварительный просмотр» (как работает режим). В новой вкладке откроется Tag Assistant. Введите адрес сайта и нажмите «Подключить», сайт откроется в новом окне. Вернитесь в Tag Assistant и нажмите «Продолжить».
Отправьте форму с правильными данными. Слева в Tag Assistant появится lead_submit_success. Нажмите на него: тег GA4 должен сработать именно на этом событии, а переменные показывать course_signup и 5000.

Здесь легко решить, что всё готово. Но «тег сработал» значит только, что GTM запустил код. Запрос мог уйти с пустым параметром, в чужой ресурс или дважды, поэтому дальше ещё три проверки.

Запрос. Откройте инструменты разработчика в браузере, вкладку «Сеть» (Network), и отфильтруйте по collect. Найдите запрос к google-analytics.com/g/collect или analytics.google.com/g/collect (где его искать). Код ответа 200 или 204 значит, что данные ушли. Откройте запрос: в адресе должны быть generate_lead, course_signup и ваш G-.
Получатель. В GA4 откройте DebugView, как в уроке про GA4. generate_lead должен прийти один раз, с form_name, value и currency.
Ошибка и повтор. Отправьте форму с пустым email: ни lead_submit_success, ни generate_lead появиться не должны. Потом отправьте правильную форму и обновите страницу. Если после обновления пришёл второй generate_lead, ищите, что его отправляет: код страницы «Спасибо», который срабатывает при каждом открытии, или повторная отправка формы браузером. Два события на одну отправку - повод искать второй тег, например старый тег на клик, который забыли выключить.

Опубликуйте версию с описанием

Нажмите «Отправить» справа вверху и выберите «Публикация и создание версии».
В «Название версии» напишите, что сделано: «generate_lead по принятой заявке». В «Описание версии» - что проверено: «Тег на lead_submit_success, form_name и value из dataLayer, валюта KZT. Проверены успешная отправка, ошибка, обновление страницы, запрос и DebugView. Старый тег на клик удалён».
Нажмите «Опубликовать» (публикация и версии).

Через месяц это описание ответит, кто и зачем поменял число заявок в отчёте. Если после публикации что-то сломалось, откройте «Версии» и опубликуйте предыдущую, Google так и советует. Но всё, что успело уйти в GA4, там и останется, поэтому дни до и после публикации сравнивают с этой поправкой.

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

Задание: тренажёр и своя форма

Упражнение 1 в тренажёре прошло проверку.
Упражнение 2 прошло проверку, скриншот сохранён.
На тестовом сайте lead_submit_success уходит только после ответа сервера, вместе с form_name и value.
В контейнере есть две переменные уровня данных, константа KZT, триггер «Пользовательское событие» и тег generate_lead.
В предварительном просмотре тег сработал на lead_submit_success, запрос к g/collect ушёл с кодом 200 или 204, в DebugView пришёл один generate_lead.
Форма с ошибкой не дала ни одного события.
Версия опубликована, в описании сказано, что проверено.

Если тестового сайта ещё нет, пройдите тренажёр сейчас, а пункты про сайт закройте, когда подключите GA4.

Если в DebugView generate_lead есть, а form_name пустой, откройте в Tag Assistant событие lead_submit_success и посмотрите, что лежало в dataLayer в этот момент. Если form_name приходит следующим сообщением, тег к тому времени уже ушёл: GTM берёт значение в момент события, и позднее сообщение отправленный запрос не исправит. Попросите разработчика положить form_name в тот же push. Если поле в том же push, а переменная всё равно пустая, сравните ключ в переменной с кодом по буквам: form_name и formName для GTM разные ключи.

А владельцу школы после публикации можно ответить так: раньше GA4 считал нажатия на кнопку, теперь считает принятые заявки. До штуки с CRM цифры всё равно не сойдутся: GA4 не видит тех, кто отказался от аналитики в баннере cookies или сидит с блокировщиком рекламы. Зато разница перестанет зависеть от того, сколько раз люди ошибаются в форме.

Видео: настройка GA4 через GTM

How to set up Google Analytics 4 with Google Tag Manager - Google Analytics

Видео канала Google Analytics на английском: тег Google и первое событие GA4 через GTM. Проверки из этого урока делайте поверх него.