October 6, 2019

Track Elementor Form with Google Tag Manager and Google Analytics

In today’s blog post, we’ll take a look at how to track forms that were built with the Elementor Pro WP plugin. I got a bit familiar with it just very recently, so I cannot tell whether it is VERY popular or not. Although, scratch that. I just took a look at Builtwith and it looks like the plugin is quite popular and that trend continues to grow.

Here are the stats at the end of 2019.

So apparently, this page builder is quite a big thing in the WordPress world.

Anyway, let’s focus more on a single functionality of this plugin, form. And more specifically — how to track Elementor form submissions with Google Tag Manager and Google Analytics.

Before we continue

If you landed on this page because you could not find the solution on your own, I have a tip. If you had taken my Google Tag Manager courses, you would have known how to solve this issue (and many other challenges) on your own.

So if you want to become more confident in your GTM skills and crack such cases with ease, consider joining those courses. Most likely, they are currently closed but join the waiting list and be the first one to find out when the doors are open again.

AJAX listener not working
Element Visibility trigger to the rescue!
- Google Analytics tag
Test
Multiple forms on the same page?
Alternative tracking solution – redirect
Final words

AJAX listener is not working

Every time when I have to track a certain form, I check how it works for the end-user. I submit the form and check whether it:

Redirects to a “Thank you” page
Or maybe it just shows a “Thank you” message without doing anything else
Or maybe that form is in the iFrame, etc.

Depending on the list items above, different form tracking method needs to be chosen.

In the case of Elementor, I noticed that the form does not reload the page or redirect a visitor anywhere else. It just displays a “Thank you” message. Note: if your form redirects to another page, jump to one of the last chapters in this article where I provide a solution.

Usually, when just a success message is displayed, this implies that the form is using AJAX and it can be tracked by following this method. Unfortunately this time, the technique did not work.

That’s where I moved to another option.

Element visibility trigger to the rescue!

This trigger allows tracking the moment when a certain element appears on the screen. In my case, the Elementor form displays the following message every time a form is successfully submitted.

In order to check whether the trigger will work, we actually need to create one. In GTM interface, go to Triggers > New > Choose “Element Visibility” trigger that looks like this:

We need to instruct Google Tag Manager which exact element are we interested in. There are two selection methods of how we can actually pick that success message. It’s either ID or CSS Selector. At this point, we are still not sure which one is the best option, so we’ll inspect the actual message element.

Go back to the website where the Elementor Form is present, do the right-click on it and hit Inspect. Unfortunately, in my case, the success message does not have any ID. This means that the ID (as a selection method will not work) and our only hope is CSS selector.

So we’ll have to use these two CSS classes instead. If you see other classes, try using them instead.

Pro tip: you should read this guide before trying to use CSS Selectors. This will help you a lot in GTM. (I also give an introduction to them in my Intermediate GTM course.

Copy those two classes and paste it in the Visibility Trigger’s settings. Before doing that, change the selection method to CSS selector. In front of every class add a dot and make sure that there are no additional spaces in-between your two classes.

In CSS, a dot means a class.

So the final result (in my case) is .elementor-message.elementor-message-success .

Then scroll down a bit and enable Observe DOM Changes. This will track the appearance of the element if it appears on a screen dynamically (not due to scrolling).

If there is only one form on a page, keep the trigger firing only Once per page. Now, let’s test whether this trigger actually works. Save it, refresh the Preview and Debug mode, then refresh the page that has the Elementor Form on it.

Submit the form. Did the Element Visibility event appear in the GTM debug console?

If yes, then that’s exactly what you should be looking for. If not, please check whether your CSS selector was entered correctly or if you properly refreshed the page and the Preview & Debug mode.

Always refresh the Preview and Debug mode first, only then the actual web page you’re working on.

Google Analytics tag to track the Elementor Form

The next step is to send an event to Google Analytics whenever that “thank you” message appears on the screen.

In Google Tag Manager interface, go to Tags > New > choose Universal Analytics. Then enter the following settings:

Feel free to rename Category, Action, and Label values to match your event tracking naming convention. Then click the Triggering section and choose the trigger we have created in the previous chapter (Element Visibility).

Test

Save all the changes in your Google Tag Manager container, refresh the Preview and Debug mode, refresh the page where the Elementor Form is present. Fill in all the fields and submit it.

Here are the things that were supposed to happen:

Element Visibility event should have appeared in the Preview and Debug mode
Click that event in the debug console and you should see the GA Event tag fired

Now go to your GA real-time event reports and check whether that event is visible there.

That’s it! You’re good to go. The next chapters of this blog post will cover edge cases that some of my readers might find useful.

Multiple Elementor forms on the same page?

All the previous chapters of this blog post are useful is you have only one form on a page. But what if you have multiple forms (and their purposes are unique)? You would like to distinguish them somehow, right? Well, that is indeed possible.

But to implement the most robust solution, you will need access to those forms’ settings in WP admin dashboard.

Go to WordPress admin > choose the page where those multiple forms are and open the Elementor Editor. You can do that by clicking this button.

Now click the first form and you will see its settings on the left side of the editor. Then click Additional Options. You will see the Form ID field. We will use this field to identify each form. Enter some meaningful information in that field. If it is the main contact form, then main-contact-form might be a good option to enter. If it is some lead generation form, you could enter id lead-gen-ebook, etc.

Save the page, then go to the website’s front-end and refresh the page. Right-click anywhere on an Elementor form and choose Inspect. If you start climbing the DOM tree in the Elements tab of your browser’s dev tools, you will eventually see an element similar to this (just maybe with a different class).

This is where form ID is visible in the front end. But that’s just a beginning. Now we need to get the form ID when the “Thank you” message appears after successful form submission. To do this, we’ll use Simo Ahava’s technique of capturing the correct element.

To implement this, we’ll need to follow these steps:

Create a Custom HTML tag with the polyfill (that will help older browsers support this solution)
Create a Custom JS variable that will be used to pick the correct element (it will be used as a Utility variable)
Create a Custom JS variable that will return the value of Elementor form’s ID

Remember: for this to work, you have to enter form IDs individually in each form’s settings (in your Elementor page builder) just like I displayed it several paragraphs ago.

#1. Custom HTML tag with Polyfill

A polyfill works like a workaround. There are some things/features that older browsers do not support (meaning that newer Custom JS will not work). Thanks to polyfills (certain custom codes loaded on a page), older browsers start supporting more things.

In this case, we’ll be using an Element.matches() method that is not supported by older browsers. This can be solved by firing a Custom HTML tag with the following code:

<script>
  if (!Element.prototype.matches) {
    Element.prototype.matches = 
        Element.prototype.matchesSelector || 
        Element.prototype.mozMatchesSelector ||
        Element.prototype.msMatchesSelector || 
        Element.prototype.oMatchesSelector || 
        Element.prototype.webkitMatchesSelector ||
        function(s) {
            var matches = (this.document || this.ownerDocument).querySelectorAll(s),
                i = matches.length;
            while (--i >= 0 && matches.item(i) !== this) {}
            return i > -1;            
        };
  }
</script>

if (!Element.prototype.matches) {

Element.prototype.matches =

Element.prototype.matchesSelector ||

Element.prototype.mozMatchesSelector ||

Element.prototype.msMatchesSelector ||

Element.prototype.oMatchesSelector ||

Element.prototype.webkitMatchesSelector ||

function(s) {

var matches = (this.document || this.ownerDocument).querySelectorAll(s),

i = matches.length;

while (--i >= 0 && matches.item(i) !== this) {}

return i > -1;

};

}

</script>

I saw this code first on Simo’s blog (Link) and he borrowed that from MDN.

So create a Custom HTML tag, paste the code, and set it to fire on All pages.

#2. Utility variable

The next step is to create a Custom JS variable with the following code:

function() {
  return function(target, selector) {
    while (!target.matches(selector) && !target.matches('body')) {
      target = target.parentElement;
    }
    return target.matches(selector) ? target : undefined;
  }
}

function() {

return function(target, selector) {

while (!target.matches(selector) && !target.matches('body')) {

target = target.parentElement;

}

return target.matches(selector) ? target : undefined;

}

Name it cjs – find closest. It’s really important to name the variable exactly in that way because we’ll use it in Step #3 (case-sensitive).

#3. Variable that returns the ID of the Elementor Form

And the final step is to create a variable that returns the Elementor form ID after the “Thank you” message was displayed on a screen.

function() {
  var el = {{cjs - find closest}}({{Click Element}}, 'form.elementor-form');
  return typeof el !== 'undefined' ? el.id : undefined;
}

function() {

var el = {{cjs - find closest}}({{Click Element}}, 'form.elementor-form');

return typeof el !== 'undefined' ? el.id : undefined;

}

Name the variable cjs – elementor form id.

For this code to work your setup must meet 3 requirements:

Utility variable (from the previous chapter) must be named cjs – find closest (case-sensitive) because that exact name is used in the JS code above
Built-in Click Element variable must be enabled in your container
CSS Selector must pick the correct node, the actual <form> element. In most cases, form.element-form should work (because we’re targeting a form element with a CSS class elementor-form. If it does not work in your case, get familiar with CSS Selectors in the first place.

#4. Let’s test

Here’s a quick summary of what you should have done so far (if you’re trying to track multiple Elementor forms on the same page):

You must edit all Elementor forms on your website and add IDs to them
Create a Custom HTML tag with polyfill (which will help older browsers to support an Element.matches() method)
Create a utility variable (Custom JS) that will climb the Document Object Model (DOM) and will pick the element
Create a Custom JS variable that will use the utility variable and return the ID of the form element (CSS Selector is form.elementor-form)

Now, the actual test. After you have made all the changes listed above, publish changes in the Elementor builder, then refresh the Preview & Debug mode. Finally, go to the front-end of your website (where the Elementor Form is located) and refresh that page.

Submit the form. In the GTM debug console, an Element Visibility event should appear. Click it and go to the Variables tab of the Debug console. Find the Custom JS variable cjs – elementor form id and check its value. It should contain the actual ID of the form (that’s the ID you were supposed to enter in Elementor’s builder when you edited the form).

If that is exactly what you see, you can edit the GA Event Tag and include the {{cjs – elementor form id}} variable, for example, in the Event Action. Here’s a possible example (but, once again, do what fits your event naming convention the best):

Alternative tracking solution – redirect

Elementor forms also allow website owners to redirect visitors if they successfully submit the form. You can do that by clicking the form and choosing Actions after submit option in the left sidebar.

In the field, enter Redirect. This will add a new option to the sidebar. Click it and then enter the URL where you want to redirect.

If you have only one “Thank you” page for all forms, a good practice would be to add a query parameter depending on every form.

For example, if you have two forms (lead generation 1 and lead generation 2) that redirect to the same example.com/thank-you/ page, you could enter the following redirect URLs in those forms’ settings:

Lead generation form 1’s redirect URL could be https://www.example.com/thank-you/?form-name=lead-gen1
Lead generation form 2’s redirect URL could be https://www.example.com/thank-you/?form-name=lead-gen2

Even though technically visitors are redirected to the same page, you would be able to distinguish form submissions based on the form-name query parameter.

Also, if you want to send the value of the form-name query parameter to other tools, such as Google Analytics, use the URL variable.

Track Elementor Form with Google Tag Manager: Final words

And that’s the end of yet another form-tracking-related article on my blog post. The trickiest thing if you want to track Elementor Form is that AJAX listener does not support them, therefore, you need to find another method of how to track them with GA and GTM.

And in this case, your other option is the Element Visibility trigger + a little help of CSS Selectors.

If you have multiple forms on a single page, that is also not a problem. You’ll just need to update forms’ settings in the Elementor builder (in WP admin) and add form IDs. After this is done, use Simo Ahava’s method to pick the correct element and read form’s ID after it was successfully submitted.

Actually, this is not some rocket science when you know where to look. In fact, you would have known how to solve this issue yourself if you would have taken my Intermediate GTM course (where I show the combination of the Element Visibility Trigger + CSS Selectors).

As always, the comments section below is at your service. So if you want to track Elementor form with Google Tag Manager but are facing issues, drop a question below.

Julius Fedorovicius