Подключение цели Метрики к Contact Form 7

Сегодня пришло время рассказать, как отслеживать конверсии плагина Contact Form 7. Известно, что можно настроить цели Метрики так, чтобы при отправке формы срабатывало событие, которое впоследствии отразится в отчетах и позволит лучше анализировать пользовательские факторы. На самом деле, отслеживание событий Метрики для CF7 сделать нетрудно, сейчас расскажу, как сию возможность реализовать.

Нужна помощь? Не проблема, напишите мне на почту: admin@workinnet.ru

Подготовка

Сначала обновите код метрики. Появился «Вебвизор 2.0» и много других функций, потому, для адекватной работы нужно сначала заменить устаревший код Яндекс.Метрики, только потом приступать к дальнейшим действиям.

Для начала создаем цель. Заходим: Настройка → Цели → Добавить цель. Здесь выбираем JavaScript-событие.

Вводим идентификатор цели, например «target_name» (без кавычек), потом нажимаем кнопку «Добавить цель». Готово. Цель Яндекс Метрики создана. Осталось привязать выполнение к нажатию кнопки отправить.

Учтите, код Метрики обновился, потому, многие гайды уже неактуальны, и обновление Contact Form 7 также урезало возможности добавления целей. Я расскажу, каким образом добавить «обновленную» цель Метрики в Contact Form 7.

Начнем с кода

Собственно, выполнять задачу будет такой скрипт:

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( 'id' == event.detail.contactFormId ) {
        ym(XXXXXXXX, 'reachGoal', 'target_name'); return true;
    }
});
</script>

Кстати, если нужно заодно отслеживать события для Google Analytics, то под ym(XXXXXX, ‘reachGoal’, ‘feedback’); нужно внести код с целью GA:

ga(‘send’, ‘event’, ‘Feedback’, ‘Submit’);

<script type="text/javascript">
document.addEventListener('wpcf7submit', function ( event ) {
gtag('event', 'ok_send', {'event_category' : 'obr_svyaz', 'event_action' : 'submit'});
});
</script>

Примерно так будет выглядеть код для отслеживания Аналитики Гугл, впрочем, стоит посвятить этому отдельную статью. Их, кстати, можно комбинировать, просто добавьте код метрики вместе со вставкой для GA.

Как видите, код получается многофункциональным. К сожалению, способа сделать динамическое отслеживание не смог найти. Либо привязать сразу ко всем кнопкам «Отправить» одну цель, либо для каждого id делать уникальную цель.

Сначала находим ID формы:

1. Вариант простой, открываем страницу формы, переходим в режим разработчика, в ней находим код формы. Число, отмеченное на скриношоте ниже и будет нужным ID. В данном случае число «2250».

2. Переходим в консоль, открываем Contact Form 7 → Контактные формы. Идентификатор будет отмечен также на скриншоте.

Теперь код счетчика будет выглядеть так:

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '2250' == event.detail.contactFormId ) {
        ym(12345678, 'reachGoal', 'target_name'); return true;
    }
});
</script>

Цифры — номер счетчика. Кстати, target_name замените на свой идентификатор события, который создали в метрике. Если требуется несколько форм, то копируйте строки:

if ( '2250' == event.detail.contactFormId ) {
        ym(12818152, 'reachGoal', 'target_name'); return true;
}

Кстати, если убрать строки:

if ( '2250' == event.detail.contactFormId ) {
}

То событие будет срабатывать при отправке любой формы с сайта.

Как удобнее, решайте сами, а сейчас расскажу, где разместить пользовательский код, чтобы отслеживание работало.

Как добавить код

Чтобы добавить отслеживание событий Метрики в Contact Form 7, придется сделать так, чтобы данный код выполнялся. Сделать этом можно несколькими способами, о которых сейчас расскажу. Кстати, по умолчанию делаем все в дочерней теме. Можно и в собственном плагине, но это если знаете, как его создать.

Первый способ

И не самый правильный, но работать будет. Добавляем код в файл темы functions.php. Находится файл по адресу: папка-сайта/wp-content/themes/название-дочерней-темы/ Там открываете указанный файл и создаете действие:

add_action( 'wp_head', 'custom_code_head' );
function custom_code_head() {
?>
<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '2250' == event.detail.contactFormId ) {
        ym(12818152, 'reachGoal', 'ZAKAZAT'); return true;
    }
});
</script>
<?php
}

Итак, wp_head – хук (крючок), который заставляет наш код загружаться вместе с шапкой сайта. то бишь, более высокий приоритет автоматом. Можно отправить в подвал, достаточно изменить хук на wp_footer, но скажу честно, у меня не всегда срабатывало, счетчик в подвале может не засчитать часть посещений, а вот с wp_head проблем не было. ?> — необходимо для завершения блока php. Перед тем, как вставить скрипт, рекомендуется указать данный код. <?php открываем блок php снова и завершаем пользовательскую функцию, установив «}». Готово.

Второй способ

Вынос кода в пользовательский плагин. Сначала создаем собственный плагин. Инструкций много. полезные есть на wp-kama и в кодексе WordPress. После формирования собственного плагина код вносим в него.

Этот метод более правильный, так как позволяет абстрагироваться от темы, что позволит не вытаскивать все вручную. К тому же, становится проще управлять и тестировать. Перенос на другие сайты тоже заметно проще.

Третий способ

Самый извращенский. Создает файл в папке дочерней темы. Например myscriptass.js. Вносите в него код в таком виде:

jQuery(document).ready(function($) {
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '2250' == event.detail.contactFormId ) {
        ym(12818152, 'reachGoal', 'ZAKAZAT'); return true;
    }
});
});

Отлично, теперь подключаем пользовательский скрипт через functions.php или кастомный плагин. Вносим такой код:

add_action('wp_enqueue_scripts', 'my_theme_scripts');
function my_theme_scripts() {
    wp_enqueue_script('myscriptass', get_stylesheet_directory_uri() . '/assets/js/myscriptass.js', array( 'jquery' ), true);
}

Все, готово. Подключенные скрипты автоматически отправляются в head. Метод прикольный, даже во многом удобнее, но мне проще вносить функции в плагин.

Если нужно добавить несколько целей

Например, если вам нужно сделать цели на несколько строк сразу, просто скопируйте строку и смените ID.

if ( '2251' == event.detail.contactFormId ) {
        ym(12345678, 'reachGoal', 'target_name'); return true;
    }

Итоговый вариант будет выглядеть так:

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '2250' == event.detail.contactFormId ) {
        ym(12345678, 'reachGoal', 'target_name'); return true;
    }
    if ( '2251' == event.detail.contactFormId ) {
        ym(12345678, 'reachGoal', 'target_name'); return true;
    }
});
</script>

Если форма остаётся та же, но есть новая цель для неё, то добавляем только строку:

ym(12345678, 'reachGoal', 'target_name'); return true;

Меняем только название цели. Итоговый вариант будет выглядеть так:

<script type="text/javascript">
document.addEventListener( 'wpcf7mailsent', function( event ) {
    if ( '2250' == event.detail.contactFormId ) {
        ym(12345678, 'reachGoal', 'target_name'); return true;
        ym(12345678, 'reachGoal', 'target_name_1'); return true;
    }
});

Собственно, на этом всё!

Прекрасно!

Теперь вы знаете, как добавить цель Метрики для Contact Form 7. Все довольно просто. Анализируйте, увеличивайте конверсии. Если остались какие-либо вопросы, можете задать в комментариях, постараюсь ответить. Успехов!