Как отслеживать отправку форм в Google Tag Manager, если у вас Contact Form 7
Ваш сайт сделан на Wordpress и вы используете плагин Contact Form 7?
В этой статье вы узнаете, как настроить отслеживание отправки форм через GTM.
Все происходит за четыре простых шага:
Добавление тега
Настройка триггера и переменных
Тег Google Universal Analytics
Настройка целей в Google Analytics
Все происходит за четыре простых шага:
Добавление тега
Настройка триггера и переменных
Тег Google Universal Analytics
Настройка целей в Google Analytics
О чем стоит помнить при отслеживании отправки форм Contact Form 7
Плагин Contact Form 7 работает на AJAX, т.е. сама страница, на которой находится эта форма, при ее заполнении и отправке, не перезагружается.
Использовать классический инструмент для отслеживания форм GTM здесь не получится.
Зачастую это касается сайтов одностраничников, но и сайты с большим кол-вом страниц тоже могут иметь такие формы.
Для таких случаев используется отслеживание событий, которые передает сама форма при ее отправлении.
Использовать классический инструмент для отслеживания форм GTM здесь не получится.
Зачастую это касается сайтов одностраничников, но и сайты с большим кол-вом страниц тоже могут иметь такие формы.
Для таких случаев используется отслеживание событий, которые передает сама форма при ее отправлении.
Добавление тега для при отслеживании отправки форм Contact Form 7
Вам нужно добавить тег в GTM: пользовательский HTML.
Добавляем туда вот этот код, он взят с официального сайта Contact Form7:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.dataLayer.push({
"event" : "cf7submission",
"formId" : event.detail.contactFormId,
"response" : event.detail.inputs
})
});
</script>
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.dataLayer.push({
"event" : "cf7submission",
"formId" : event.detail.contactFormId,
"response" : event.detail.inputs
})
});
</script>
Смотрим, как все работает. Жмем на «Предварительный просмотр» в правом верхнем углу. Если GTM установлен верно, то вы увидите оранжевую плашку со следующим сообщением
Дальше переходим на наш сайт. В нижней части экрана браузера должно появиться специальное окно. Делаем отправку формы еще раз и видим следующее в нем
Обратите внимание на название события, именно оно нам понадобится для дальнейшей настройки: cf7submission
Настройка триггера и переменных для отслеживания отправки форм Contact Form 7
Нужно создать несколько тригеров
Вам нужно перейти в раздел «Триггеры» в левом меню и нажать «Создать».
Указываем название, по которому вы будите его отличать. Выбираем тип триггера «Пользовательское событие»
Вставляем в имя события "cf7submission"
Вам нужно перейти в раздел «Триггеры» в левом меню и нажать «Создать».
Указываем название, по которому вы будите его отличать. Выбираем тип триггера «Пользовательское событие»
Вставляем в имя события "cf7submission"
Пришло время настроить переменные. Давайте внимательнее посмотрим, что именно отдает форма при отправке:
Ответом считается все, что идет после слова «response», а нумерация идет построчно.
Именно в этой форме мне особо интересен email, а вообще у вас может быть другое поле ключевое.
Получилась переменная со значением response.2.value (посчитайте, верно ли я определила строчку)
Идем во вкладку «Переменные» и в разделе «Пользовательские переменные» нажимаем «Создать»
Выбираем «Переменная уровня данных»
Именно в этой форме мне особо интересен email, а вообще у вас может быть другое поле ключевое.
Получилась переменная со значением response.2.value (посчитайте, верно ли я определила строчку)
Идем во вкладку «Переменные» и в разделе «Пользовательские переменные» нажимаем «Создать»
Выбираем «Переменная уровня данных»
В имя вставляем то, что у нас получилось: response.2.value
Если у вас несколько форм на сайте, то я рекомендую добавить переменную formId. Создается таким же образом
Нужно проверить, как все работает. Снова переходим в предварительный просмотр в ГТМ и переходим на страницу нашей формы. Если все настроено корректно, то у вас отобразится корректно, включая formId
Тег Google Universal Analytics для отслеживания отправки форм Contact Form 7
Мы прошли пол пути! Давайте настроим специальный тег Google Universal Analytics.
Идем в Теги и жмем «Создать». Выбираем в конфигурации тега Google Universal Analytics.
Конечно же на этом шаге у вас должен быть установлен Google Analytics.
Если нет, то вот здесь можно узнать как это сделать.
Идем в Теги и жмем «Создать». Выбираем в конфигурации тега Google Universal Analytics.
Конечно же на этом шаге у вас должен быть установлен Google Analytics.
Если нет, то вот здесь можно узнать как это сделать.
Тип отслеживния: Событие
Категория: Form Submission
Действие наша переменная FormID
Ярлык наша переменная email
Настройки Google Analytics: переменная Google Analytics
Триггер наш тег cf7 submit
Категория: Form Submission
Действие наша переменная FormID
Ярлык наша переменная email
Настройки Google Analytics: переменная Google Analytics
Триггер наш тег cf7 submit
Настройка целей в Google Analytics при отслеживании отправки форм Contact Form 7
Идем в Google Analytics.
Заходим в режим Администратора (левый нижний угол экрана), там переходим в раздел «Цели»
Заходим в режим Администратора (левый нижний угол экрана), там переходим в раздел «Цели»
Жмем «+Цель». Нам нужна «Собственная»
Даем название цели, к примеру : отправка формы. Тип: событие
Категория: Form Submission
Действие: Form ID: 3807
Действие: Form ID: 3807
Поздравляем! Вы настроили отслеживание отправки форм у себя на сайте
Остались вопросы? Напишите мне
Остались вопросы? Напишите мне
© 2010 Context.Guru
Обо мне