Настройка отслеживания форм Contact Form 7 в Яндекс.Метрике

Отслеживание конверсий на сайте — важнейший элемент успешной маркетинговой стратегии. Особенно ценно отслеживать отправку форм обратной связи, заявок и других способов взаимодействия посетителей с вашим сайтом. В этой статье мы рассмотрим, как корректно настроить отслеживание отправки форм Contact Form 7 в Яндекс.Метрике.

Распространенные проблемы при настройке целей

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

Определение правильного идентификатора формы

Одна из главных сложностей — правильно определить идентификатор формы. В WordPress с плагином Contact Form 7 идентификатор формы в административной панели может отличаться от того, что используется в HTML-разметке на странице.

Шаг 1: Определите ID формы в HTML

Чтобы корректно отслеживать отправку формы, необходимо проверить ее фактический HTML-код на странице. Для этого:

Откройте страницу с формой
Нажмите правой кнопкой мыши на форму и выберите «Просмотреть код элемента»
Найдите тег <form> и обратите внимание на его атрибуты, особенно action

Например, форма может выглядеть так:

<form action="/kontakty/#wpcf7-f158-o1" method="post" class="wpcf7-form sent" aria-label="Контактная форма" novalidate="novalidate" data-status="sent">

Здесь ключевой идентификатор — wpcf7-f158-o1 в атрибуте action.

Шаг 2: Напишите JavaScript-код для отслеживания

После определения идентификатора формы добавьте следующий код в раздел с JavaScript на вашем сайте (например, в файл темы или через плагин для пользовательских скриптов):

<script type="text/javascript">
document.addEventListener('wpcf7mailsent', function(event) {
    // Получаем элемент формы и его URL действия
    const formElement = event.target;
    const actionUrl = formElement.getAttribute('action');
    
    console.log('Форма отправлена, URL действия:', actionUrl);
    
    // Функция для отправки цели в Яндекс.Метрику
    function sendGoal(goalName) {
        console.log(`Отправка цели в Яндекс.Метрику: ${goalName}`);
        if (typeof ym === 'function') {
            ym(ID вашего счетчика, 'reachGoal', goalName);
            console.log(`Цель отправлена в Яндекс.Метрику: ${goalName}`);
        } else {
            console.error('Счетчик Яндекс.Метрики недоступен');
        }
    }
    
    // Проверяем разные формы по их идентификаторам
    if (actionUrl && actionUrl.includes('wpcf7-f158-o1')) {
        console.log('Обнаружена форма в футере');
        sendGoal('FORM_FOOTER');
    } else if (actionUrl && actionUrl.includes('wpcf7-f123-o1')) {
        console.log('Обнаружена контактная форма');
        sendGoal('FORM_CONTACT');
    }
    // Можно добавить другие формы при необходимости
    
}, false);
</script>

Важно! Не забудьте заменить указать ID вашего счетчика Яндекс.Метрики.

Создание целей в интерфейсе Яндекс.Метрики

После добавления кода на сайт необходимо создать соответствующие цели в интерфейсе Яндекс.Метрики:

Зайдите в настройки вашего счетчика Яндекс.Метрики
Перейдите в раздел «Цели»
Нажмите «Добавить цель»
Выберите тип цели «JavaScript-событие»
В поле «Идентификатор цели» введите название цели, которое вы использовали в коде (например, «FORM_FOOTER»)
Сохраните цель

Проверка работоспособности

Чтобы убедиться, что всё работает корректно:

Откройте инструменты разработчика в браузере (F12)
Перейдите на вкладку «Console» (Консоль)
Отправьте тестовую форму на сайте
В консоли должны появиться сообщения об отправке цели в Метрику

Отслеживание нескольких форм

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

// Для первой формы
if (actionUrl && actionUrl.includes('wpcf7-f158-o1')) {
    sendGoal('FORM_FOOTER');
} 
// Для второй формы
else if (actionUrl && actionUrl.includes('wpcf7-f123-o1')) {
    sendGoal('FORM_CONTACT');
} 
// Для третьей формы
else if (actionUrl && actionUrl.includes('wpcf7-f456-o1')) {
    sendGoal('FORM_CALLBACK');
}

Возможные проблемы и их решения

1. Цель не отслеживается

Проверьте, что код счетчика Яндекс.Метрики корректно установлен на сайте
Убедитесь, что идентификатор формы в коде соответствует фактическому на странице
Проверьте консоль браузера на наличие JavaScript-ошибок

2. Счетчик Яндекс.Метрики не инициализируется вовремя

Если функция ym() недоступна на момент отправки формы, используйте отложенную отправку цели:

function sendGoalWithRetry(goalName, attempts = 5) {
    if (typeof ym === 'function') {
        ym(ID вашего счетчика, 'reachGoal', goalName);
        console.log(`Цель отправлена: ${goalName}`);
    } else if (attempts > 0) {
        console.log(`Метрика не готова, повторная попытка... (осталось ${attempts})`);
        setTimeout(function() {
            sendGoalWithRetry(goalName, attempts - 1);
        }, 500);
    } else {
        console.error('Не удалось отправить цель в Яндекс.Метрику');
    }
}

Улучшение отслеживания целей в Яндекс.Метрике с помощью JavaScript

В современном маркетинге отслеживание целей на веб-сайте является ключевым аспектом для оценки эффективности различных кампаний и взаимодействий с пользователями. Яндекс.Метрика предоставляет мощные инструменты для настройки и анализа целей, но иногда требуется более гибкий подход, особенно когда URL целей могут варьироваться. В этой статье мы рассмотрим, как использовать JavaScript и регулярные выражения для улучшения отслеживания целей.

Проблема

Представьте, что у вас есть несколько форм на сайте, и вы хотите отслеживать их отправку как цели в Яндекс.Метрике. Однако, URL-адреса этих форм могут содержать динамические части, например, идентификаторы сессий или другие изменяющиеся параметры. Как в таком случае настроить цель, чтобы она срабатывала для всех возможных вариантов URL?

Решение

Для решения этой проблемы можно использовать регулярные выражения в JavaScript. Регулярные выражения позволяют задавать шаблоны для поиска в строках, что делает их идеальным инструментом для работы с динамическими URL.

Пример кода

Рассмотрим пример кода, который отслеживает отправку формы и отправляет цель в Яндекс.Метрику, если URL формы соответствует определенному шаблону:

document.addEventListener('wpcf7mailsent', function(event) {
    const formElement = event.target;
    const actionUrl = formElement.getAttribute('action');

    console.log('Form submitted, action URL:', actionUrl);

    // Функция для отправки цели в Яндекс.Метрику
    function sendGoal(goalName) {
        console.log(`Sending goal to Yandex.Metrica: ${goalName}`);
        if (typeof ym === 'function') {
            ym(ваш код метрики, 'reachGoal', goalName);
            console.log(`Goal sent to Yandex.Metrica: ${goalName}`);
        } else {
            console.error('Yandex.Metrica counter not available');
        }
    }

    // Проверяем разные формы и отправляем соответствующие цели
    if (actionUrl && /wpcf7-f158-/.test(actionUrl)) {
        console.log('Footer form detected');
        sendGoal('FORM_FOOTER');
    } else if (actionUrl && /wpcf7-f1070-p1032-/.test(actionUrl)) {
        console.log('Стать донором');
        sendGoal('donormailsent');
    } else if (actionUrl && /wpcf7-f2744-/.test(actionUrl)) {
        console.log('Заказать звонок');
        sendGoal('callMe');
    } else if (actionUrl && /wpcf7-f1848-/.test(actionUrl)) {
        console.log('Отправить отзыв');
        sendGoal('ttshowcase_form');
    } else if (actionUrl && /wpcf7-f2739-/.test(actionUrl)) {
        console.log('Записаться на приём');
        sendGoal('zapisnapriem');
    }
}, false);

После отправления формы мы в консоли видим фиксирование цели:

Как правильно настроить отслеживание отправки форм в Яндекс.Метрике Веб-студия Шанти

Ждём около 10 минут и проверяем фиксирование цели в Яндекс Метрике в разделе «Конверсии»:

Объяснение кода

Слушатель события: Мы добавляем слушатель события wpcf7mailsent, который срабатывает при успешной отправке формы.
Получение URL действия: Из элемента формы извлекается URL действия (actionUrl), который используется для проверки.
Регулярные выражения: Используем метод test для проверки соответствия actionUrl шаблону. Например, /wpcf7-f2744-/.test(actionUrl) проверяет, содержит ли URL подстроку wpcf7-f2744-, независимо от того, что идет после нее.
Отправка цели: Если URL соответствует шаблону, вызывается функция sendGoal, которая отправляет цель в Яндекс.Метрику.

Заключение

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

Не забывайте регулярно проверять работоспособность отслеживания, особенно после обновления WordPress, плагина Contact Form 7 или темы сайта.

Настройка отслеживания форм Contact Form 7 в Яндекс.Метрике | Пошаговая инструкция