• Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login
  • Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login

December 8, 2022

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.

Google Tag Manager Ebook Bundle

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).

Google Tag Manager Ebook Bundle
Julius Fedorovicius
In Google Analytics Tips Google Tag Manager Tips
22 COMMENTS
i-visio
  • Nov 5 2019
  • Reply

Hi Julius, once again, a useful tuto.
Works fine with multiple forms on a page.
Thanks

Jeremy Gruver
  • Mar 20 2020
  • Reply

Unknown variable “Click Element” found in another variable. Edit the variable and remove the reference to the unknown variable.

Unknown variable name '

cjs - elementor form id

    Jeremy Gruver
    • Mar 20 2020
    • Reply

    Ah I see you have to enable the click element inside Configure

Joseph
  • Mar 27 2020
  • Reply

Great guide, thanks for putting it together!

I'm having the same problem as Jeremy, except after I realized I had to enable the click element, I"m still getting the error:

Unknown variable name
cjs – elementor form id
Unknown variable “cjs - find closest” found in another variable. Edit the variable and remove the reference to the unknown variable.

All the valued have been copy and pasted exactly from the guide. Just double checking, step 3 and step 4 both should be Type - Custom JavaScript?

    Julius
    • Mar 27 2020
    • Reply

    The error message is pretty self-explainatory. You didn't. Name your custom js variable as "cjs - find closest" (case sensitive.

      Steven
      • Apr 22 2020
      • Reply

      Joseph is right, there is an error even though the custom js variable is perfectly written.

        Julius
        • Apr 22 2020
        • Reply

        If you are talking about the click element error, you need to enable Click Element variable in GTM. Go to Variables / Configure / enable Click Element.

          Steven
          • Apr 22 2020

          Yes, I didn’t mention it but this is the case. Even after following all the guidelines, the error is here.

          Julius
          • Apr 22 2020

          What does the error exactly state?

          Steven
          • Apr 23 2020

          Exactly what Joseph transcribed.

          Julius Fedorovicius
          • Apr 23 2020

          And have you named your Custom JS variables EXACTLY "cjs - find closest" (without quotation marks)? Because the error states that you are trying to use the unknown variable called "cjs - find closest".

          To sum up:
          - You have two Custom JS variables: "cjs - find closest" and "
          If you have named that variable differently, you need to enter that new name in the "cjs – elementor form id".
          - "cjs – elementor form id" is using the {{cjs - find closest} variable. This means that "cjs - find closest" must be named exactly like that. Without any exceptions. Case sensitive. Any typo is crucial.

        Steven
        • Apr 23 2020
        • Reply

        Yeah, exactly. I've double checked everything, it strictly follows your guidelines.
        Perhaps there's been a GTM update since then that's messing with it ?

          Julius
          • Apr 23 2020

          I suspect that maybe a dash (-) is causing this. Try to manually change it both in code and in the variable name.

          Steven
          • Apr 23 2020

          Nice find! I didn't realise it. The dash you provide in the article is a long one and is not accepted by Google. It works fine when changing it, thank you.

martin
  • Apr 5 2020
  • Reply

Thanks for the post. I believe i have followed the guide to track multiple forms (i have a universal footer form and then 2 other forms on most pages that are popups from click buttons) when i test i am not getting the Element Visibility in the GTM debug console? Any thoughts?

    Julius
    • Apr 5 2020
    • Reply

    Trigger conditions are incorrect. Most likely issues with CSS selector.

Connie
  • Apr 28 2020
  • Reply

Hi Julius,

Thank you for your information. It's really helpful.

But my case here is I set a CSS id in the elementor button, but I could not track it in GTM.
* Its a span tag under a tag, therefore I use "just link" to track in GTM", but still now showing the CSS ID in the variables.

    Julius Fedorovicius
    • Apr 28 2020
    • Reply

    Hi, I really recommend for you to get familiar with CSS Selectors in general. Right now, the terminology in your comment is too confusing.

john
  • Aug 20 2020
  • Reply

Hi, yesterday i put in a comment but for some reason i can't see it live on your site. I am following this tutorial about tracking a thank you page with google analytics, but for some reason when i add the goal the form is not tracked when filled. I am using elementor forms and a thank you page. Any help appreciated.

    Julius Fedorovicius
    • Aug 21 2020
    • Reply

    Hi, read this guide https://www.analyticsmania.com/post/google-tag-manager-form-tracking/

    Several areas to keep an eye on:
    - If you can't see your GA event tag firing when the form is submitted, your trigger is incorrect. Keep tweaking and working on that.
    - If you can see your tag firing but you can't see it in the GA realtime reports, read this https://www.analyticsmania.com/post/google-analytics-real-time-reports-not-working/
    - If you can see the event in the real-time reports but you can't see the goal completion, read this https://www.analyticsmania.com/post/google-analytics-goals-not-working/

Matt C
  • Sep 4 2020
  • Reply

Hi there! First and foremost, I want to thank you for this article - our site does not use typical conversions, so I've been using form tracking. Unfortunately, after a recent elementor form update, I noticed that it stopped working entirely, despite running flawlessly for months.

Im sorry to be posting on an old topic, but I was hoping you've encountered this and developed a solution for it.

    Julius Fedorovicius
    • Sep 4 2020
    • Reply

    Hi, I haven't touched elementor for a while. If more people start complaining here in the comments, I'll take a new look at it.

Leave a comment Cancel reply

Your email address will not be published. Required fields are marked *

 

Hi, I'm Julius Fedorovicius and I'm here to help you learn Google Tag Manager and Google Analytics. Join thousands of other digital marketers and digital analysts in this exciting journey. Read more
Analytics Mania
  • Google Tag Manager Courses
  • Google Tag Manager Recipes
  • Google Tag Manager Resources
  • Google Tag Manager Community
  • Login to courses
Follow Analytics Mania
  • Subscribe to newsletter
Recent Posts
  • Introduction to Google Tag Manager Server-side Tagging
  • 3 Ways to Pull Data from Data Layer with Google Tag Manager
  • Cannot See the Google Tag Manager Option in Google Ads Conversion?
Analytics Mania - Google Tag Manager and Google Analytics Blog | Privacy Policy
Manage Cookie Settings