Настройка целей Метрики Caldera Forms
WordPress

Установка цели Яндекс Метрики в 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;
    });
});
}); //если первая строка есть, не добавляем

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

Цели Яндекс Метрики в Caldera Forms

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

  • 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

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

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

2 комментария

  • Василий

    Приветствую!
    событие успешной отправки ‘cf.form.submit’ в Вашем исполнении для меня не сработало….
    Поковырял документацию плагина и сделал следующее:
    jQuery( document ).on( ‘cf.form.submit’, function (event, data ) {
    //data.$form is a jQuery object for the form that just submitted.
    var $form = data.$form;
    //get the form that is submiting’s ID attribute
    var formId = $form.attr(‘id’);
    if ( ‘CFxxxxxxxxxxxx_3’ === formId ) {
    ym(xxxxxxxx, ‘reachGoal’, ‘oformlen_target01’); return true;
    }
    if ( ‘CFxxxxxxxxxxx_5’ === formId ) {
    ym(xxxxxxxx, ‘reachGoal’, ‘oformlen_target02’); return true;
    }
    // и т.д. по каждой форме
    });
    Все цели срабатывают. Проверено!
    Может кому-то пригодится)

    • ren334

      Спасибо за вариант, вполне рабочий.
      Если не срабатывает, то вполне возможно:

      • Проблема в селекторе, у вас присвоен селектор $ и тогда лучше использовать его вместо jQuery. Не знаю почему так, но проблему встречал
      • Требуется использовать submit вместо cf.form.submit. Это тоже частенько решает проблему.

      По какой причине такое происходит, сказать не могу. Не лез настолько глубоко, но факт есть факт. Ваше решение тоже отличное, пожалуй, пусть будет, может кому-нибудь подойдет лучше, чем те, что предложил я.

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

Ваш e-mail не будет опубликован.