Отслеживание отправки форм – критически важный аспект веб-аналитики. Оно позволяет оценить эффективность маркетинговых кампаний, понять, какие каналы приносят больше лидов и оптимизировать процесс сбора информации о пользователях. Google Tag Manager (GTM) – мощный инструмент, который значительно упрощает процесс отслеживания различных событий на сайте, включая отправку форм HubSpot.
Зачем отслеживать формы HubSpot через GTM?
Использование GTM для отслеживания форм HubSpot дает следующие преимущества:
- Централизованное управление тегами: Все теги отслеживания (Google Analytics, Facebook Pixel и т.д.) управляются из единой платформы.
- Гибкость настройки: Можно настроить отслеживание различных параметров форм, таких как ID формы, значения отдельных полей, URL страницы и т.д.
- Упрощение процесса развертывания: Внесение изменений в отслеживание не требует изменения кода на сайте HubSpot, что снижает зависимость от разработчиков.
- Повышение точности данных: Использование Data Layer позволяет получать более точные данные об отправке форм, избегая проблем, связанных с различными типами отправки (AJAX, перенаправление и т.д.).
Необходимые условия: HubSpot и Google Tag Manager
Перед началом работы убедитесь, что у вас есть:
- Аккаунт HubSpot с правами на редактирование страниц.
- Аккаунт Google Tag Manager и контейнер, установленный на вашем сайте HubSpot. Проверьте, что код GTM установлен на всех страницах, где расположены формы.
Настройка Data Layer в HubSpot для отслеживания отправки форм
Data Layer – это JavaScript-объект, который используется для передачи данных с вашего сайта в GTM. В нашем случае мы будем использовать Data Layer для передачи информации об отправке формы HubSpot.
Добавление JavaScript-кода Data Layer на страницы HubSpot
В HubSpot необходимо добавить JavaScript-код, который будет отправлять данные в Data Layer при отправке формы. Лучший способ сделать это – использовать custom code секцию в настройках страницы или шаблона.
Пример JavaScript-кода:
<script>
hbspt.forms.setOnFormSubmitCallback(function(form) {
// Get the form ID.
const formId = form.id;
// Get the page URL.
const pageUrl = window.location.href;
// Push form submission event to Data Layer
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'hubspotFormSubmission',
'formId': formId,
'pageUrl': pageUrl
});
});
</script>
Этот код добавляет слушатель события hbspt.forms.setOnFormSubmitCallback, который срабатывает при отправке любой формы на странице. Внутри обработчика события мы формируем объект с данными (event, formId, pageUrl) и отправляем его в Data Layer с помощью window.dataLayer.push(). Важно, чтобы событие называлось единообразно, например, hubspotFormSubmission. formId полезен для идентификации конкретной формы в GTM, а pageUrl – для анализа, на каких страницах происходит отправка.
Настройка триггеров отправки форм в HubSpot (если необходимо)
В большинстве случаев достаточно настроить отслеживание на уровне отправки формы. Однако, если вам требуется отслеживать частичную отправку формы или другие специфические события, связанные с формой, можно использовать дополнительные триггеры в HubSpot. Это потребует более сложного JavaScript-кода и понимания API HubSpot Forms.
Настройка Google Tag Manager для отслеживания форм HubSpot
После добавления кода Data Layer в HubSpot необходимо настроить GTM для обработки этих данных.
Создание Data Layer Variable для получения данных формы
В GTM необходимо создать Data Layer Variable для получения значений formId и pageUrl, которые мы отправляем в Data Layer.
- Перейдите в раздел Variables.
- Нажмите New в разделе User-Defined Variables.
- Выберите тип переменной Data Layer Variable.
- В поле Data Layer Variable Name укажите
formId. Убедитесь, что имя точно совпадает с именем ключа в объекте Data Layer. - Повторите шаги 1-4 для переменной
pageUrl.
Создание триггера в GTM, срабатывающего при отправке формы HubSpot
Теперь необходимо создать триггер, который будет срабатывать при появлении события hubspotFormSubmission в Data Layer.
- Перейдите в раздел Triggers.
- Нажмите New.
- Выберите тип триггера Custom Event.
- В поле Event name укажите
hubspotFormSubmission. Убедитесь, что имя точно совпадает с именем события, которое вы отправляете в Data Layer. - Выберите This trigger fires on: All Custom Events или, если требуется более точная настройка, укажите условия срабатывания (например, по
formId).
Создание тега в GTM для передачи данных в Google Analytics (или другую систему)
Последний шаг – создание тега, который будет отправлять данные об отправке формы в Google Analytics или другую систему аналитики.
- Перейдите в раздел Tags.
- Нажмите New.
- Выберите тип тега Google Analytics: Universal Analytics или Google Analytics: GA4 Event.
- Настройте тег в соответствии с вашей конфигурацией Google Analytics.
- Track Type: Event.
- Category: HubSpot Form Submission (например).
- Action: Submit.
- Label:
{{formId}}— используйте созданную Data Layer Variable для передачи ID формы. - Non-Interaction Hit: False (если отправка формы должна влиять на показатель отказов).
- В разделе Triggering выберите триггер, созданный на предыдущем шаге (
hubspotFormSubmission).
Тестирование и отладка отслеживания форм HubSpot
После настройки необходимо протестировать отслеживание, чтобы убедиться, что все работает корректно.
Использование GTM Preview Mode для проверки срабатывания триггеров и тегов
Включите GTM Preview Mode и перейдите на страницу с формой HubSpot. Отправьте форму и проверьте, срабатывает ли триггер hubspotFormSubmission и отправляется ли тег в Google Analytics. В Preview Mode вы увидите все данные, которые передаются в Data Layer, и сможете убедиться, что переменные formId и pageUrl содержат правильные значения.
Проверка данных в Google Analytics (или другой системе)
Проверьте отчеты в Google Analytics, чтобы убедиться, что данные об отправке форм поступают корректно. Убедитесь, что события регистрируются с правильными категориями, действиями и ярлыками.
Устранение неполадок при отслеживании форм
Если отслеживание не работает, проверьте следующее:
- Правильность установки кода GTM на сайте HubSpot.
- Правильность настройки Data Layer Variable и триггера в GTM.
- Соответствие имен событий и переменных в Data Layer и GTM.
- Отсутствие ошибок JavaScript на странице с формой.
Расширенные возможности отслеживания форм HubSpot
После базовой настройки отслеживания можно расширить функциональность, добавив отслеживание отдельных полей формы, передачу дополнительных данных и использование server-side tagging.
Отслеживание отдельных полей формы
Для отслеживания отдельных полей формы необходимо модифицировать JavaScript-код в HubSpot, чтобы он отправлял значения этих полей в Data Layer. Это потребует знания DOM и умения получать значения полей формы.
Пример (требует адаптации под конкретную форму):
<script>
hbspt.forms.setOnFormSubmitCallback(function(form) {
const formId = form.id;
const pageUrl = window.location.href;
const email = document.querySelector('input[name="email"]')?.value; // Пример получения значения поля email
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'hubspotFormSubmission',
'formId': formId,
'pageUrl': pageUrl,
'email': email // Добавляем значение поля email
});
});
</script>
Затем в GTM необходимо создать Data Layer Variable для каждого отслеживаемого поля и добавить их в тег Google Analytics.
Передача дополнительных данных в Google Analytics (например, ID формы)
Передача ID формы позволяет более точно анализировать, какие формы приносят больше лидов. Мы уже передаем ID формы, но можно добавить его в качестве дополнительного параметра в Google Analytics.
В настройках тега Google Analytics (или GA4) добавьте пользовательские параметры (Custom Dimensions/Metrics) и свяжите их с Data Layer Variable formId.
Использование server-side tagging для повышения точности отслеживания
Server-side tagging позволяет перенести часть логики отслеживания на сервер, что повышает точность данных и снижает нагрузку на браузер пользователя. Это более сложный подход, требующий настройки сервера тегов в Google Cloud Platform или другом сервисе. Преимущество заключается в более надежном отслеживании (блокировщики рекламы менее эффективно блокируют запросы на сервер) и возможности обогащения данных информацией, недоступной на стороне клиента.