Добавляем отслеживание целей Метрики в Ninja Forms

Формы обратной связи — важный элемент сайта. Именно их заполнение может быть самым важным в существовании сайта элементом. К сожалению, практически все формы обратной связи для WordPress заточены для отслеживания целей Google Analytics. Меня такой расклад не устроил, особенно потому, что очень уж нравится Вебвизор. В некоторых аспектах Метрика намного удобнее, чем программный комплекс аналитики от Гугл.

Единственное, где я сумел без проблем наладить отслеживание Метрики — плагин Contact Form 7. В плагине Caldera Forms я так и не сумел сделать отслеживание, провозился несколько дней и плюнул на это дело. Зато в Ninja Forms справился без проблем, хотя пришлось применить еще один костыль в виде отдельного плагина. Перейдем к делу. Сегодня расскажу вам, как настроить цели Метрики для Ninja Forms.

Metrika-targets

Итак, чтобы выполнить данную задачу, придется выполнить ряд более трудных действий, чем при аналогичной задаче в CF7. Ninja Forms изначально заточен под Google Analytics, что не удивительно. Потому, к решению подошел творчески, ведь хуки все в наличии есть. Впрочем, формах Кальдеры тоже присутствуют, но это не помогло.

В первую очередь я начал с банального варианта. Решил создать нужную функцию и подключить ее через functions.php.

Код выглядел так:

add_action( 'wp_head', 'metrika_target', 10, 2 );
function metrika_target() {
?>
<script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery( document ).on('click', '#nf-field-12', function() {
    ym(12345678, 'reachGoal', 'targetwn'); return true;
    });
});
</script>
<?php } 

Диркетива:

?>

Закрывает блок PHP, после чего следует скрипт. После завершения кода скрипта следует снова открыть блок PHP с помощью директивы:

<?php

А после выставить такую скобочку «}«, чтобы завершить действие.

С точки зрения кода все верно. #nf-field-12 — id кнопки, при клике на кнопку с данным айди срабатывает функция ReachGoal, которая отправляет совершенное событие в Метрику. К сожалению, возможность срабатывания события при отправке формы я еще не нашел, но когда додумаюсь, как это сделать, то напишу.

К сожалению, данный код не сработал, решил покопаться и поискать решения. К сожалению, подробных инструкций нигде не было, но некоторые тексты натолкнули на вариант.

Реализуем отслеживание целей Метрики в Ninja Forms

Итак, вариант оказался донельзя прост. Если через functions.php подключить не получилось, то можно обойтись без добавления функции, ведь можно использовать плагин, который способен подцепить javascript файл отдельно.

Итак, исходные данные. Версия WordPress 5.1, тема Flexia. Остальные плагины не считаем. NF установлен.

Итак, форма создана. Определяем ее ID таким образом:

1. Размещаем форму на нужной странице. Черновик тоже пойдет.

2. Открываем нужную страницу и переходим в режим разработчика. Для этого нажимаем F12. Либо (работает для браузера Chrome), правая кнопка мыши на кнопке отправки и смотрим код.

3. Находим айди в нужном месте. Показано на скриншоте ниже.

4. Готово.

Далее устанавливаем плагин Simple Custom CSS and JS. Он позволит подцепить внешний js код и выполнить встроенную в него функцию. Открываем настройки плагина и добавляем кастомный javascript код, на скрине указано, куда ткнуть.

Теперь пришло время добавить наш скрипт. Смотрим на скриншот.

В первую очередь вводим название. Далее выбираем тип и место размещения:

1. Linking type выбираем Internal. Это значит внутренний код.

2. Where on page указываем header. То есть, код будет размещен в шапке. Если сделать тоже самое в подвале, то есть вероятность, что при клике выполнение цели не будет засчитано.

3. Where in site выбираем «In Frontend». Соответственно, код будет выполняться в рамках внешних функций. То есть, на уровне темы.

Далее размещаем наш код. Давайте объясню, что он значит. После обновления Метрики код ReachGoal выглядит так:

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

Где ym — функция, определенная в коде счетчика, 12345678 ваш номер Метрики, «targetwn» — название цели, которую вы создаете.

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

Все, событие есть, добавляем нижеследующий js-код в документ:

jQuery(document).ready(function() {
jQuery( document ).on('click', '#nf-field-00', function() {
    ym(12345678, 'reachGoal', 'targetname'); return true;
    });
});

Замените id кнопки на свой, данные Метрики аналогично. Задача почти выполнена. Опубликуйте файл и нажмите на Activate. С этого момента можно отслеживать события Ninja Forms для Метрики. Я нажал на нужную кнопку на странице и цель была засчитана.

Ничего сложного

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

jQuery( document ).on('click', '#nf-field-00', function() {
    ym(12345678, 'reachGoal', 'targetname'); return true;
    });

Вставлять перед кодом предыдущей цели, но менять данные на нужные. Не так легко, как хотелось бы, но работать с этим уже можно. Успехов вам, надеюсь, настройка целей Яндекс Метрики в плагине Ninja Forms не вызовет проблем.