Подключаем цели Яндекс Метрики к Вордпресс плагину «Contact Form 7»

Опубликовано 9 лет назад

Пару лет назад я рассказывал, каким образом подключаются цели Google Analytics к популярному конструктору форм WordPress Contact Form 7 (WPCF7). Сегодня я расскажу каким образом можно подключить к формам цели Яндекс Метрики.

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

Цели Яндекс Метрики устанавливаются по тому же принципу, что и цели Google Analytics. А беря в расчёт более дружелюбный интерфейс Яндекс Метрики, можно сказать, что процедура производится намного проще.

Яндекс Метрика

Инструмент для оценки посещаемости сайтов, анализа поведения посетителей и эффективности рекламы

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

Создаём цель

Открываем Яндекс Метрику, выбираем необходимый сайт (если их несколько) и переходим в настройки счетчика. Далее идём в раздел «Цели» и нажимаем кнопку «Добавить цель» — «JavaScript событие».

Выглядит это примерно так:

Яндекс Метрика: Создаем цель

Давайте возьмем конкретный случай. Допустим, на сайте имеется некая форма заказа, созданная в конструкторе Contact Form 7. Так и назовем цель «Форма заказа», что без разницы в общем-то. Нам важен идентификатор, который уже должен состоять из латинских букв или цифр без использования символов: /, &, #, ?, =. Ещё нужно обратить внимание на то, что значение идентификатора не должно содержаться в URL страниц сайта. Иначе в статистике будут некоторые неточности.

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

Вешаем цель на событие в Contact Form 7

Открываем Contact Form 7 и сразу переходим в дополнительные настройки ранее созданной формы заказа. Кстати, как создать форму заказа в Contact Form 7 я уже рассказывал некоторое время назад.

Дополнительные настройки форм в Contact Form 7 выглядят примерно так.

Яндекс Метрика: Настройка Contact Form 7

В дополнительных настройках, используя хук on_sent_ok, который будет выполняться в случае успешной отправки формы, необходимо вызвать функцию reachGoal(). Оповестив тем самым Яндекс Метрику о том, что цель достигнута.

Для нашего случая это будет выглядеть примерно так:

on_sent_ok: "yaCounter100500.reachGoal('myForm');"

Где 100500 — номер счетчика, а myForm — идентификатор ранее созданной цели.

Т.е теперь все успешные отправки формы заказа будут фиксироваться в целях Яндекс Метрики.

Кстати, используя хук on_sent_ok вкупе с on_submit, можно вычислить соотношение количества успешных отправок формы ко всем попыткам её отправить. Эта цифра очень интересная и может дать много пищи для размышлений.

Вешаем цели на другие события сайта

Естественно, отслеживание событий с помощью целей Яндекс Метрики не ограничивается лишь плагином Contact Form 7.

Их можно использовать повсеместно, на любых элементах вашего сайта.

Например, на кнопках:

<input type="button" onclick="yaCounter100500.reachGoal('Order'); return true;" value="Заказать" />

Или на ссылках:

<a href="/archive.zip" onclick="yaCounter100500.reachGoal('Download'); return true;">Скачать</a>

А можно даже передавать пользовательские параметры, например ценность цели:

<script type="text/javascript">
var goalParams = {myParam: 12345};
function goalCallback () {
console.log('запрос в Метрику успешно отправлен');
}
</script>
<a href="/archive.zip" onclick="yaCounter100500.reachGoal('Download', goalParams, goalCallback); return true;">Скачать</a>

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

В заключение

Как видим, использование целей Яндекс Метрики может сильно помочь в получении объективной картины посещаемости сайта.

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

На сегодняшний день, я могу выделить лишь два сервиса статистики, предоставляющих наиболее полные отчёты посещаемости сайта — это Google Analytics и Яндекс Метрика.

Новый способ подключения

Новый способ подключения целей Метрики и Аналитики к формам Contact Form 7

Иван Данилин
Автор Иван Данилин

Фулстек веб‑разработчик, специализируюсь на платформе WordPress

Подробнее
Комментарии
  1. Добавляю onclick к ссылке, как указано в статье, но при переходе в визуальный режим вордпрес удаляет этот код( Как этого избежать.

    Спасибо за статью, с Contact Form всё работает
    • Onclick режется, да. Попробуйте плагин типа Raw HTML
      Главное — не отключайте фильтр onclick, как рекомендуют на некоторых ресурсах, т.к. это небезопасно

      Можно ловить клики с помощью JS, jQuery, можно ввести в WP свой шорткод с поддержкой онклика, например
  2. данные параметры (on_sent_ok и с on_submit,) устаревают и будут удалены до 2017 года. Сейчас нужно использовать параметры DOM. Как в том случает подскажите?
  3. Не актуальная статья! Так как contact form пишет ошибку если ставить метод on_sent_ok: «yaCounterXXXXXX.reachGoal(‘ORDER’);» → пишет устарел метод. Как быть тогда в такой ситуации?
  4. Добрый день
    На сайте Contact Form написано что
    on_sent_ok and on_submit are deprecated and scheduled to be abolished by the end of 2017
    Есть возможность узнать работают ли они еще? Я попытался подключить на этой странице цель
    http://rads-doi.org/pricing/
    on_sent_ok:»yaCounter44090094.reachGoal(‘ORDER’);»
    Но в коде на странице вообще не вижу этого события и при отправки формы в метрике, число достигнутых целей не меняется.
    Что то делаю не так?
    • Добрый день, могу подтвердить, в версии 4.7 on_sent_ok пока работает, разработчик рекомендует до конца года перейти на обработку DOM-событий, на офсайте есть примеры использования: https://contactform7.com/dom-events/

      В HTML-коде (если речь об этом) on_sent_ok не должно быть видно.

      Как появится время, перепишу статью в новом контексте.
  5. Спасибо, отличная статья!
    Иван, расскажи как можно настроить интеграцию к CF7 и WooCommerce с Битрикс 24 через rest
  6. Отличная статья! все работает! Цели появляются.

    Побочный эффект теперь после отправки формы нет надписи для пользователя, о том что сообщение отправлено. Как это решить?
    • Такая же проблема вылезла: оказалось, из-за того, что в скрипте идет попытка отправить метрику, «нет такой функции» и на этом скрипт останавливается. Письмо уходит раньше, но сообщение пользователю не выводится.
      Пока сделала try…catch на выполнение вот этих в админке заданных действий .
      Вот копаю, куда впихнуть собственно объявление счетчика…
  7. Подкажите как навесить одновременно цель метрики и аналитикса?
    Если ставлю в столбик две цели он сентон сабмит — пропадает сообщение об успешной отправки формы (отрабатывает ли цель далее — не смотрел, уже не так что-то :))
  8. Здравствуйте!
    Вы написали про то, что можно узнать соотношение нажавших на кнопку и отправивших форму.
    «Кстати, используя хук on_sent_ok вкупе с on_submit, можно вычислить соотношение количества успешных отправок формы ко всем попыткам её отправить.»
    Для этого в дополнительных настройках нужно будет вписать не одну а две строчки?
    Пример:
    on_sent_ok: «yaCounter100500.reachGoal(‘myForm’);»
    on_submit: «yaCounter100500.reachGoal(‘myForm’);»
    Нужно ли делать вторую цель для просто нажатия кнопки с другим индификатором?
      • Спасибо.
        Две цели сразу поставить тоже можно в дополнительные настройки? Нужно какие-то знаки препинания между ними ставить или просто с новой строки писать вот так?
        on_submit: «yaCounter100500.reachGoal(‘myForm1’);»
        on_sent_ok: «yaCounter100500.reachGoal(‘myForm2’);»
        • похоже, что так, в примерах на офсайте плагина нет никаких знаков: http://contactform7.com/additional-settings/
Добавить комментарий