Setting up Yandex Metrica Goal in Caldera Forms

It’s time to set up Yandex Metrica goals for the quite popular Caldera Forms plugin. Unfortunately, there are no built-in methods, so I had to find a workaround. It wasn’t straightforward initially, but I managed to achieve the goal and implement event tracking for reachGoal in Caldera Forms. In reality, the task is not that complicated.

Preparation

Firstly, create a custom .js file. It is not advisable to embed it through functions.php; it’s better to keep everything in a separate JavaScriptdocument and add new goals there. I want to warn you upfront that creating a dynamic solution that allows avoiding separate events for each form was challenging for me.

The only option is to link all form submissions to one goal, but it won’t work for everyone. So, sorry, but you’ll have to create separate code for each form.

Let’s tackle the task step by step. First, create an empty .js file. Let’s call it myscriptass.js. I know, not very funny. It’s preferable to do this within a child theme. Create a folder named assets in the child theme, then create another folder in the new directory – js. Great. Put the script there. Now, let’s connect it. Add the following code to the functions.php file of the child theme:

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);
}

Done? Great job! Now the file should be included via the head. If it didn’t happen, the problem might be in minification plugins. They may combine js with others, potentially leading to code malfunctions. By the way, if there’s already some .js file, you can add your custom code to it, but keep in mind that your custom code might get erased during updates or for other reasons. So, it’s easier to create a separate one. If you decide to do it within the main theme, replace the third line with this:

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

This option is for connecting scripts in the parent theme. The previous version is for the child theme.

Connecting Yandex Metrica goal to Caldera Forms

If the preparation has been successful, it’s time to get to the essence. Let’s create the reachGoal event in two ways. One will react to the “Submit” button click, and the other to the form submission event.

I prefer the second option. However, the first one will allow you to see how many times the button was clicked and compare it with the number of forms that reached. The goal will be achieved even if the content is not sent. Therefore, if the completed goals exceed the number of emails received, there is an additional reason to check the correctness of the mail server.

Alright, let’s get to work. First, let’s connect it through the click method. In the created scripts file, add the following code:

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

Is it working? Surprisingly! Wonderful! This code can respond to any click on the “Submit” button. Now let’s break it down. The first line is responsible for loading the framework, nothing special. The second line triggers the function on clicking the form with the specified identifier. You can find it in the screenshot.

Next is the Yandex Metrica function, where:

• “XXXXXXXX” is the counter number;
• “reachGoal” — is the event type (do not change);
• “target_name” is the name of the goal you specified, or rather its ID.

The parentheses simply close the function. Excellent, the goal is connected. If you want to connect one goal to multiple buttons at once, you can assign them a unique class and configure it to respond to that. If you want to connect one goal to all buttons at once, instead of:

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

Use:

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

Moreover, buttons have other classes, for example, .btn-default, if you haven’t changed anything, it’s safer to use that or assign your classes to the buttons.

Now, let’s move on to setting up the Metrica event when submitting the feedback form. The code will look like this:

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

If you want to connect it for all forms simultaneously, replace the first line with:

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

Everything is the same, only the ID and the function launch method are different. It uses “cf.form.submit“, a special hook that triggers the function only when submitting the feedback form. It’s tied to AJAX events. Well, I won’t go into details; the information is in the plugin’s official documentation. However, they seem to have forgotten to describe the methods of connecting Metrica to Caldera Forms there.

By the way, if the event doesn’t trigger when sending a message, replace cf.form.submit with just submit. Make sure not to accidentally copy the period.

Alright. First, find the form ID. Check the screenshot.

Replace the specified ID with your own. Done. You’re fantastic. Now you can track submission events. Again, if you want to hit all birds with one stone, use the form class .caldera_forms_form instead of the identifier.

As you can see, it’s all quite simple. Keep an eye on conversions!