Для владельцев сайтов на WordPress, использующих Contact Form 7, важно не только получать данные с форм, но и анализировать эффективность взаимодействия пользователей с формами. Отслеживание событий отправки формы в Google Analytics позволяет оценивать конверсии и оптимизировать маркетинговые кампании. В этой статье разберём, как настроить автоматическую отправку данных из Contact Form 7 в Google Analytics с помощью событий.
Зачем отправлять события из Contact Form 7 в Google Analytics
Google Analytics — мощный инструмент анализа поведения посетителей сайта. С его помощью можно отслеживать целевые действия, например, отправку контактной формы. Это помогает понять, сколько пользователей взаимодействуют с формой, какие страницы вызывают больше откликов и как изменяется конверсия после изменений на сайте.
По умолчанию Contact Form 7 не интегрируется с Google Analytics. Чтобы получать данные об отправках формы, нужно вручную настроить отправку событий в GA.
Способы интеграции Contact Form 7 с Google Analytics
1. Использование настроек Contact Form 7 для добавления JavaScript
Contact Form 7 позволяет добавлять JavaScript код в событие успешной отправки формы. Это можно сделать через настройки плагина или добавить кастомный скрипт в тему.
2. Плагины для интеграции
Существуют плагины, которые облегчают интеграцию, например, CF7 Google Analytics Events. Однако такой подход менее гибкий и может не подходить для кастомных задач.
Практическое руководство: отправка события через gtag.js
Рассмотрим пример, когда на сайте уже подключён Google Analytics 4 с помощью gtag.js. Чтобы отправлять событие при успешной отправке формы Contact Form 7, добавим следующий JavaScript код.
document.addEventListener('wpcf7mailsent', function(event) {
if (!event) return;
// Уникальный идентификатор формы, можно проверить event.detail.contactFormId
gtag('event', 'submit', {
'event_category': 'Contact Form 7',
'event_label': 'Form ID ' + event.detail.contactFormId,
'value': 1
});
}, false);
Этот код слушает событие wpcf7mailsent, которое вызывается после успешной отправки формы. Затем отправляет событие в Google Analytics с категорией и меткой, полезной для сегментации.
Где разместить код?
Лучше всего добавить этот скрипт в файл functions.php вашей темы или через кастомный плагин, чтобы он не удалялся при обновлении. Также можно вставить код через плагины для добавления пользовательских скриптов, например, Insert Headers and Footers.
Отправка дополнительных данных формы в Google Analytics
Иногда полезно передавать в событие конкретные значения из полей формы, например, тип запроса или выбранный товар. Для этого можно использовать JavaScript и получить значения из DOM.
document.addEventListener('wpcf7mailsent', function(event) {
var form = event.target;
var inquiryType = form.querySelector('select[name="inquiry-type"]').value || 'unknown';
gtag('event', 'submit', {
'event_category': 'Contact Form 7',
'event_label': 'Inquiry Type: ' + inquiryType,
'value': 1
});
}, false);
Важно, чтобы в вашей форме был элемент с атрибутом name="inquiry-type". В противном случае код надо скорректировать под вашу разметку.
Отладка и проверка корректности отправки событий
Для проверки работы интеграции используйте режим отладки Google Analytics или расширение Google Tag Assistant. После отправки формы в консоли браузера можно увидеть отправленные события. В Google Analytics события появятся с задержкой до 24 часов, но в режиме реального времени вы можете увидеть их в разделе «Отчёты» -> «В режиме реального времени» -> «События».
Дополнительные советы по улучшению форм и аналитики
- Используйте уникальные ID форм для точного анализа.
- Добавляйте в события дополнительную информацию, например, источник трафика.
- Рассмотрите внедрение Google Tag Manager для более гибкой настройки аналитики.
- Для сложных форм с несколькими шагами отправляйте события на каждом шаге.
Полезные плагины для работы с Contact Form 7 и аналитикой
Если хотите упростить настройку, обратите внимание на плагины:
- CF7 Google Analytics Events — автоматически отправляет события при отправке формы;
- Clearfy Pro — помогает оптимизировать работу сайта и интегрировать сторонние сервисы;
- WPRemark — расширяет аналитику и поведенческие триггеры.