Установка цели Яндекс Метрики в Caldera Forms

Пришло время настроить цели Яндекс Метрики для довольно известного плагина Caldera Form. К сожалению, встроенных методов нет и пришлось искать обходной путь. Сходу это не получилось, но все же добился цели и сумел сделать отслеживание событий reachGoal для Caldera Forms. На самом деле задача не самая сложная.

Подготовка

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

Единственный вариант, привязать все отправки форм к одной цели, но подойдёт далеко не для всех. Так что извините, придётся для каждой формы делать отдельный код.

Выполнять задачу будем поэтапно. В первую очередь создаём пустой .js. Пусть будет называться myscriptass.js. Знаю, это не смешно. Желательно делать в рамках дочерней темы, в ней создаём папку assets, потом в созданной директории создаём ещё одну папку — js. Отлично. Туда и закидываем сей скрипт. Теперь подключаем его. Необходимо в functions.php дочерней темы внести такой код:

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

Сделали? Молодцы! Теперь файл должен подключиться через head. Если этого не произошло, то проблема может быть в плагинах минификации. Они могут объединять js с другими, причём с ошибками, что вполне способно привести к неработоспособности кода. Кстати, если уже есть какой-либо файл .js, то можете пользовательский код внести в него, но учтите, при обновлении или по другим причинам ваш кастомный код может быть стёрт. Так что сделать отдельный все же проще. Кстати, если решили делать в рамках основной темы третью строку замените на такую:

wp_enqueue_script('myscriptass', get_template_directory_uri() . '/assets/js/myscriptass.js', array( 'jquery' ), true);

Такой вариант предназначен для подключения скриптов в родительской теме. Вариант выше только для дочерней.

Подключаем цель метрики к Caldera Forms

Если подготовка проведена успешно, то пора вернуться к самому соку. Сейчас создадим событие reachGoal двумя способами. Одно будет реагировать на нажатие кнопки «Отправить», второе на событие отправки формы.

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

Ладно, пора к делу. Сначала подключим методом клика. В созданный файл скриптов внесём такой код:

jQuery(document).on('ready', function() { //если данная строка есть в файле, не добавляем
jQuery('#fld_7547452_1').on('click', function ( ) {
  ym(XXXXXXXX, 'reachGoal', 'target_name'); return true;
    });
});
}); //если первая строка есть, не добавляем

Работает? Удивительно! Замечательно! Сей код может реагировать на любое нажатие кнопки «Отправить». Теперь перейдём к разбору. Первая строка у нас отвечает за загрузку фреймворка. Ничего особенного. Вторая строка запускает функцию по клику на форму с указанным идентификатором. Где его найти, можете увидеть на скриншоте.

Далее следует функция Яндекс Метрики, где:

• XXXXXXXX — номер счетчика;
• reachGoal — тип события (не меняйте);
• target_name — заданное вами название цели, точнее ее ID.

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

jQuery('#fld_7547452_1').on('click', function ( ) {

Используйте:

jQuery('.btn').on('click', function ( ) {

К тому же, у кнопок есть и другие классы, например, .btn-default, если ничего не меняли, надёжнее использовать его, либо присваивать кнопкам свои классы.

Итак, теперь перейдём к настройке срабатывания события Метрики при отправке формы обратной связи. Код будет выглядеть так:

jQuery('#CF5c1ce66585385_1').on('cf.form.submit', function ( ) { /*если не будет работать, тогда вместо cf.form.submit вставляйте просто 'submit'*/
  ym(XXXXXXXX, 'reachGoal', 'target_name'); return true;
    });
});

Если есть желание подключить для всех форм одновременно, то следует заменить первую строку на:

jQuery('.caldera_forms_form').on('cf.form.submit', function ( ) { /* если не будет работать, тогда вместо cf.form.submit вставляйте просто 'submit'*/
/*.caldera_forms_form можно заменить на document*/

Все тоже самое, только отличается ID и метод запуска функции. Используется «cf.form.submit», специальный хук, который запускает функцию только при отправке формы обратной связи. Завязан на AJAX-событие. Ладно, не буду вдаваться в подробности, информация есть в официальной документации плагина. Правда, методы подключения Метрики к Caldera Forms описать там благополучно забыли. Впрочем, не удивительно, все ориентировано на зарубежную аудиторию.

Кстати, если срабатывание при отправке сообщения отсутствует, то cf.form.submit замените на просто submit. Точку чисто случайно не скопируйте.

Ладно. Сначала находим ID-формы. Смотрите скриншот.

Заменяем указанный ID на свой. Готово. Вы прекрасны. Теперь вы можете отслеживать события отправки. Опять-таки, если желаете одним выстрелом завалить всех зайцев, то используем класс формы .caldera_forms_form вместо идентификатора.

Как видите, все довольно просто. Следите за конверсиями!