Track Elementor Form with Google Tag Manager and Google Analytics 4

Updated: December 8th, 2022

In this blog post, we’ll take a look at how to track forms that were built with the Elementor Pro WP plugin.

For those who don’t know, Elementor is a very popular website builder or WordPress. How popular? Here are the statistics from Builtwith:

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.

Table of contents

– Hide table of contents –

• AJAX listener is not working
• Element visibility trigger to the rescue!
• Google Analytics tag to track the Elementor Form
• Test
• Multiple Elementor forms on the same page?
  • #1. Custom HTML tag with Polyfill
  • #2. Utility variable
  • #3. Variable that returns the ID of the Elementor Form
  • #4. Let’s test
  • #5. Register a custom dimension in GA4
• Alternative tracking solution – redirect
• Track Elementor Form with Google Tag Manager: Final words

 

AJAX listener is not working

Whenever 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 of items above, a different form tracking method must 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 why 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.

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

We need to instruct Google Tag Manager which exact element we are 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 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 the 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 using CSS Selectors. This will help you a lot in GTM. (I also explain them in my Intermediate GTM course).

Copy those two classes and paste them into the Visibility Trigger 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 element’s appearance 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 this tutorial, I presume that you have already installed Google Analytics 4 (via Google Tag Manager) and have created the configuration tag.

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

I used the generate_lead event because that’s what Google recommends for form submissions. But “recommended” does not mean “required,” and you are free to choose a different event name.

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, and 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 GA4 Event tag fired

Now go to the Debugview of GA4 and check whether that event is visible there. You can find it by going to Admin > DebugView on the left side of the GA4 interface. Click it.

Then you will need to find your device:

Since you have enabled the GTM preview and debug mode, it will make all your GA4 events visible in the debug view. Check if generate_lead (or whatever name you chose) is displayed in the feed.

The reason why I see generate_lead marked with a green icon is that I configured the event as a conversion.

If debug view is not working for you, read this guide.

And that’s it! After you see the event in the debugview it means the form tracking works. Go to Google Tag Manager and publish the changes. You can do that by clicking the big blue SUBMIT button at the top right corner of the interface.

After 24-48 hours, you will start seeing the generate_lead event in the events report (Repors > Engagement > Events).

 

Multiple Elementor forms on the same page?

All the previous chapters of this blog post are useful if 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 the 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 the 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:

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

Remember: for this to work, you must 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 can support 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>

I saw this code first on Simo’s blog, 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;
  }
}

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

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 above changes, 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 a custom parameter called form_id (you can use a different name if you wish and insert {{cjs elementor form id}} variable as its value:

 

#5. Register a custom dimension in GA4

In the configuration above, we added a form_id parameter. Currently, this parameter is not supported by GA4 (by default), thus we need to register it as a custom dimension (if we want to see it in the reports).

In Google Analytics 4, go to Admin > Custom definitions.

Click Create custom dimensions. And then, enter the following conditions:

Make sure this custom dimension uses the Event scope and the Event parameter is form_id (it’s the exact same value we used in the Google Tag Manager event tag).

Within 24-48 hours after you save this dimension, it will start populating data.

One of the places where you can see the values of this dimension is in Reports > Engagement > Events, and then click generate_lead or some other event name that you used for the Elementor form.

 

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 to track them with GA and GTM.

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

If you have multiple forms on a single page, that is also not a problem. You’ll 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 the form’s ID after it is successfully submitted.

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