Актуальная пошаговая инструкция как настроить цели для события отправки формы плагина Contact Form 7 на WordPress.
Привет, друзья. Попросил один из читателей разъяснить этот момент. Дело в том, что он настроил цель на нажатие кнопки, но это не эффективный способ, ведь будет много ложных срабатываний из-за того, что форма не всегда проходит валидацию. В результате достижение цели фиксируется, пользователь действительно кликнул на кнопку, но так как форма не отправлена, то этот отчет получается слишком грязным и не информативным. Поэтому предлагаю способ, как фиксировать цель только после отправки, а не при нажатии кнопки.
Доступные для отслеживания события Contact Form 7
- wpcf7mailsent - самое важное событие, ради которого и затевалась эта статья. Срабатывает, когда письмо успешно отправлено.
- wpcf7invalid - срабатывает, когда форма не прошла валидацию.
- wpcf7spam - срабатывает, когда письмо не отправлено по причини того, что вызвало подозрение в распространении спама.
- wpcf7mailfailed - срабатывает, если сервер не смог отправить письмо. Такое часто случается на хостингах в пробном периоде или с подключённым тестовым (техническим) доменом, так как отключена функция отправки писем для борьбы со спамом.
- wpcf7submit - срабатывает при нажатии кнопке "отправить". Результат не важен.
- wpcf7beforesubmit - срабатывает перед отправкой и дает возможность провести какие-то действия с отправляемыми данными.
Давайте на примере заветного wpcf7mailsent разберемся как работать с этими событиями, а заодно настроим цель.
Настройка и отправка цели в Яндекс.Метрику
Первым делом давайте настроим саму цель в метрике. Надеюсь, у вас уже подключен счетчик и объяснять как его подключить к сайту - не нужно. Если нужно, напишите в комментариях я сделаю отдельную статью. Итак, отталкиваемся от того, чту у вас есть доступ в метрику. Зайдите в свой аккаунт, перейдите в раздел "цели" и нажмите кнопку "Добавить цель".
Далее нужно придумать название цели, выбрать цель "JavaScript-событие", придумать идентификатор цели, скопировать кода и нажать кнопку "Добавить цель". Скопированный код сохраните в где-нибудь. Скоро он нам пригодится.
Итак, цель создана. Теперь давайте привяжем ее срабатывание на отправку формы нашего сайта.
Работать будем в файле js, который подключен к проекту. Если такого нет, то нужно либо создать и подключить, либо разместить код в файле footer.php.
Напоминаю, что если располагаете код в footer.php, то размещать его нужно между тегами <script></script> перед закрывающим тегом body. Я же буду размещать код в js-файле.
Для начала давайте рассмотрим ситуацию, когда у вас есть формы и вы просто хотите отслеживать их отправку. Например, если у вас всего одна форма или все одинаковые.
document.addEventListener( 'wpcf7mailsent', function( event ) {
ym(XXXXXX, 'reachGoal', 'YYYYYY');
}, false );
где:
- XXXXXX - это код счетчика Яндекс.Метрики.
- YYYYYY - идинтификатор цели созданный ранее.
В моем случае получается так:
document.addEventListener( 'wpcf7mailsent', function( event ) {
ym(27804351, 'reachGoal', 'ZAKAZ');
}, false );
ym(27804351, 'reachGoal', 'ZAKAZ'); - это как раз тот код, который мы копировали при создании цели на 3 шаге.
Теперь давайте разберем случай, когда у вас несколько форм. Например, у меня это форма обратного звонка и форма заказа тура. Для заказа тура мы уже создали цель, а для отслеживания обратного звонка, по аналогии, создадим новую.
Теперь нам необходимо вызывать нужную цель только при отправке конкретной формы. Добиться этого можно, узнав её id. Посмотреть его можно через инспектор кода или в админке WordPress. В меню перейдите в раздел "Contact form 7", там буду формы с шоткодами, в которых есть id конкретной формы:
Разработчики позаботились о том, чтобы ответ формы был максимально информативен и если вывести event в консоль, то можно "вытащить" много полезной информации (в том числе и id формы на котором сработало событие wpcf7mailsent или любое другое).
Получается у нас есть возможность отследить у какой конкретно формы сработало событие отправки формы и инициировать конкретную цель. Давайте сёдлам это.
document.addEventListener( 'wpcf7mailsent', function( event ) {
if(event.detail.contactFormId=="126"){
ym(27804351, 'reachGoal', 'ZVONOK');
}
if(event.detail.contactFormId=="135"){
ym(27804351, 'reachGoal', 'ZAKAZ');
}
}, false );
Если размещаете код в footer.php перед закрывающим тегом "</body>", выглядеть будет так:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
if(event.detail.contactFormId=="126"){
ym(27804351, 'reachGoal', 'ZVONOK');
}
if(event.detail.contactFormId=="135"){
ym(27804351, 'reachGoal', 'ZAKAZ');
}
}, false );
</script>
</body>
</html>
Примерно через 10 минут достигнутая цель должна появиться в Метрике.
Тестируйте в режиме инкогнито или под другим логином, если добавляли свой аккаунт в исключения.
Как видите, в отчете появились 2 разные цели. Найти его можно в разделе "конверсии".
Почему мы не использовали готовую цель "отправка формы"? Дело в том, что в справке написано, что достижение цели зафиксируется, когда посетитель нажмет на кнопку отправки формы. Я не тестировал, но если это действительно так, то в начале статьи я озвучил проблему, связанную с таким подходом отслеживания целей.
Настройка целей Google Analytics для события отправки Contact Form 7
Для создания цели в Google Analytics, вообще не нужно через интерфейс сервиса ничего создавать (при условии, что вы отказались от устаревшей Universal Analytics). Достаточно после срабатывания нужного DOM-события вызвать событие аналитики. Знаю, достаточно сложно звучит, но на деле все гораздо проще.
Шаблон события GA
gtag('event', '<event_name>', {
'<parameter_1_name>': <parameter_1_value>,
'<parameter_2_name>': <parameter_2_value>,
'<parameter_3_name>': <parameter_3_value>,
});
где:
- <event_name> - id события или имя события. В моем случае это ZVONOK;
- <parameter_1_name>, <parameter_1_value> — это дополнительные параметры, описывающие цель.
Теперь давайте на реальном примере посмотрим, как это выглядит, чтобы у вас не оставалось вопросов. Допустим я тестирую цвет кнопки и хочу, чтобы в параметре цели передавался еще и цвет.
Параметры вы придумываете сами, не важно, как вы их называете и что в них передаете. При этом, есть несколько ограничении.
document.addEventListener('wpcf7mailsent', function(event) {
if (event.detail.contactFormId == "126") {
ym(27804351, 'reachGoal', 'ZVONOK');
gtag('event', 'ZVONOK', {
'color': 'pink',
});
}
if (event.detail.contactFormId == "135") {
ym(27804351, 'reachGoal', 'ZAKAZ');
gtag('event', 'ZAKAZ', {
'color': 'pink',
});
}
}, false);
Вот так выглядит информация о достижении конкретной цели (события). Как видите, тут присутствует и ряд дополнительных полезных данных, которые мы явно не передавил, при это Аналитика сделала это автоматически за нас. Например, страница, на которой совершено событие хранится в параметре page_location.
На этом сегодня - все. Аналогичным образом добавляются цели и от Google Analytics. Если остались вопросы - пишите в комментариях. Будем разбираться.
11 комментариев
Дмитрий, спасибо. Давай больше статей по WordPress...
Привет, не знаю, может быть.
Добрый день. Спасибо большое за статью. А можно все - таки дополнить и для гугл аналитики. Буду очень признателен
Саша, здравствуйте. Обновил статью и добавил пример с GA.
Спасибо, тёска!
Дмитрий, привет! Заходи, еще)
Друзья подскажите, все сделал как написано, но НЕ отправляется цель(((
Кто может посмотреть, помочь?! Плиииииз
В консоли браузера ошибки есть?
Долго искала как сделать, спасибо!
не получается, не могу понять в чем дело, но метрика не фиксирует достижение цели
Спасибо вам огромное!