Зачем нужно отслеживать отправку формы Contact Form 7 через Google Tag Manager
Отправка формы — это ключевое действие на любом сайте, особенно если речь идет о контактных формах. Отслеживание этого события позволяет понять, как пользователи взаимодействуют с сайтом, измерять конверсии и улучшать маркетинговые кампании. Google Tag Manager (GTM) предоставляет удобный способ внедрять и управлять такими событиями без постоянного вмешательства в код сайта.
Contact Form 7 (CF7) по умолчанию не отправляет данные в GTM, поэтому настроить передачу события отправки формы нужно вручную. В этой статье мы подробно рассмотрим, как реализовать эту интеграцию с примерами кода и настройками.
Как работает взаимодействие Contact Form 7 с Google Tag Manager
Contact Form 7 генерирует JavaScript-события при различных действиях с формой. Среди них событие wpcf7submit, которое вызывается после успешной отправки формы. Это событие можно использовать для отправки данных в GTM.
Google Tag Manager позволяет создавать пользовательские триггеры, реагирующие на события, передаваемые с сайта. В нашем случае мы создадим триггер, который будет срабатывать на событие wpcf7submit и запускать тег отправки события в Google Analytics или других системах.
Настройка Google Tag Manager для отслеживания отправки формы Contact Form 7
1. Создание пользовательского триггера для события wpcf7submit
Перейдите в интерфейс Google Tag Manager и выполните следующие шаги:
- В разделе "Триггеры" нажмите "Создать".
- Выберите тип триггера "Пользовательское событие" (Custom Event).
- В поле "Имя события" введите
wpcf7submit. - Выберите "Все пользовательские события" или при необходимости настройте фильтры по ID формы, если хотите отслеживать конкретную форму.
2. Создание тега для отправки данных в Google Analytics
Если у вас настроен Google Analytics через GTM, создайте новый тег:
- Тип тега — "Google Analytics: Universal Analytics" или "GA4 Event", в зависимости от используемой версии.
- Настройте тег как событие, например, с категорией "Contact Form", действием "Submit", ярлыком можно указать ID формы или название.
- В разделе триггеров добавьте созданный ранее триггер
wpcf7submit.
Добавление кода для передачи данных из Contact Form 7 в Google Tag Manager
Чтобы GTM получил событие wpcf7submit, достаточно, чтобы CF7 корректно генерировал это событие. Обычно плагин уже вызывает его, но для дополнительной уверенности и возможности расширения можно добавить следующий JavaScript:
document.addEventListener('wpcf7submit', function(event) {
// Отправка события в dataLayer для Google Tag Manager
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'wpcf7submit',
'formId': event.detail.contactFormId,
'response': event.detail.apiResponse
});
});Этот код можно добавить в файл темы (например, в functions.php через wp_enqueue_script с inline-скриптом) или через плагин для добавления пользовательских скриптов.
Пример добавления скрипта с помощью функции contactform7ru_add_gtm_script
Чтобы добавить скрипт корректно, используйте следующий PHP-код в вашей теме или плагине:
function contactform7ru_add_gtm_script() {
?>
<script>
document.addEventListener('wpcf7submit', function(event) {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'wpcf7submit',
'formId': event.detail.contactFormId,
'response': event.detail.apiResponse
});
});
</script>
<?php
}
add_action('wp_footer', 'contactform7ru_add_gtm_script');Настройка фильтрации по ID формы и дополнительная передача данных
Если на сайте несколько форм, полезно отслеживать конкретные отправки по ID формы. Для этого в триггере GTM можно настроить условие:
- Переменная: formId
- Условие: равно
- Значение: ID нужной формы (например, 123)
Чтобы получить дополнительные данные из формы, например, значения полей, можно дополнительно расширить скрипт:
document.addEventListener('wpcf7submit', function(event) {
var inputs = event.detail.inputs;
var formData = {};
inputs.forEach(function(input) {
formData[input.name] = input.value;
});
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'wpcf7submit',
'formId': event.detail.contactFormId,
'formData': formData
});
});Это позволит передавать в GTM значения полей формы, что расширит возможности аналитики и настройки ремаркетинга.
Проверка и отладка интеграции Contact Form 7 и Google Tag Manager
После настройки важно проверить работу отслеживания:
- Откройте сайт и вызовите форму.
- Откройте инструменты разработчика (F12) и вкладку Console для проверки ошибок.
- Отправьте форму и убедитесь, что в консоли или в режиме предварительного просмотра GTM появляется событие
wpcf7submit. - Проверьте в Google Analytics отчет по событиям, чтобы увидеть отправку данных.
Если событие не срабатывает, проверьте правильность вставки скриптов, отсутствие конфликтов с другими плагинами и корректность ID форм.
Альтернативные плагины для расширения возможностей интеграции
Если вы ищете более удобные решения без ручного кода, обратите внимание на плагины, которые расширяют функциональность Contact Form 7 и интегрируются с Google Tag Manager:
- Contact Form 7 Google Tag Manager Integration — плагин, который автоматически отправляет события в GTM без дополнительной настройки.
- Clearfy Pro — плагин для оптимизации и безопасности WordPress, который облегчает интеграцию аналитики и управление скриптами.
Итоговые рекомендации по интеграции Contact Form 7 с Google Tag Manager
Отслеживание отправки форм через GTM позволяет собирать полезные данные о действиях пользователей и улучшать маркетинг. Важно использовать событие wpcf7submit и передавать в dataLayer информативные данные. Настройка триггеров и тегов в GTM должна учитывать уникальные идентификаторы форм для точного анализа.
Используйте предложенный код и инструкции, чтобы быстро и надежно внедрить интеграцию. При необходимости используйте готовые плагины из WPShop.ru для упрощения задачи.