Цели Метрики Contact Form 7
WordPress

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

Rate this post

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

CF7 Logotype

Подготовка

Для начала создаем цель. Заходим: Настройка → Цели → Добавить цель. Здесь выбираем JavaScript-событие. Вводим идентификатор цели, потом нажимаем кнопку «Добавить цель». Готово. Цель Яндекс Метрики создана. Осталось привязать выполнение к нажатию кнопки отправить.

Учтите, код Метрики обновился, потому, многие гайды уже неактуальны. Я расскажу, каким образом добавить именно цель Метрики в 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’);

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

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

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

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

Идентификатор формы Contact Form 7

ID CF7 при подключении целей Метрики в 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;
}

Ставьте под предыдущие, добавляйте сюда данные других форм и сохраняйте. Наверное, созрел вопрос «Куда?».

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

Итак, чтобы добавить отслеживание событий Метрики в 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. Метод прикольный, даже во многом удобнее, но мне проще вносить функции в плагин.

Прекрасно!

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *