• 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

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.

Note: this blog post teaches how to track events with Universal Analytics. If you want to get familiar with event tracking in Google Analytics 4, you can also refer to this blog post.

 

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.

Google Tag Manager Ebook Bundle

 

Table of contents

  • AJAX listener not working
  • Element Visibility trigger to the rescue!
    • Google Analytics tag
  • Test
  • Multiple forms on the same page?
    • #1. Custom HTML tag – polyfill
    • #2. Utility variable
    • #3. A variable that returns the ID of the Elementor Form
    • Let’s test
  • 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:

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

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

Google Tag Manager Ebook Bundle
Julius Fedorovicius
In Google Analytics Tips Google Tag Manager Tips
25 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.

Nicolas
  • Oct 7 2020
  • Reply

Hi!
Very useful article!

I'm in the situation of your section "Multiple Elementor forms on the same page?".

When I do the testing, I get an event firing but the variable "{{cjs – elementor form id}}" value is not transmitted to Google Analytics. It is instead written "(not set)" in the GA event section.

Any idea of the source of the issue ?

In the Event Tag, what should be the trigger used ? (I used all pages)

Many thanks :)

tim
  • Dec 21 2020
  • Reply

Hi Julius, thank you very much for providing such a great thing.

Now if you have multiple forms and you want to track them differently. Is it not possible to select the element visibility trigger > some visibility events and then enter the elementor for ID in the variable cjs - elementor form id.

So that the trigger only fires when the elementor ID matches. Each elementor form then gets a different elementor ID and I can always adjust the elementor ID myself on the trigger.

samuel
  • Oct 5 2021
  • Reply

Hi Julius
Great article & thank you.
I have 2 forms on 1 page case

I used the "custom HTML tag with the polyfill" method - but unfortunately I didnt get the element Visibility to appear at all simply by creating the custom HTML tag + the 2 javascript variables. So what I did was use the Element visibility trigger from the very top and set it as the trigger to the GA event tag - not sure if that was inferred and I just didnt get it or what, my solution seems to track the form I am most interested infor now, but doesnt track the other form on the page..

Anyway not looking for a debug, will try this later myself rather just a comment that if indeed different parts of the article are connected (top /simple 1 form case + bottom multiform with HTML polyfill) -or are not connected - maybe you can clarify that in the article to make it 100% crystal clear.

thanks & take care
Samuel

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
  • RSS feed
Recent Posts
  • Two Link Click Events in Google Tag Manager Preview Mode
  • Where to Find Video Engagement Data in Google Analytics 4?
  • Where to Find File Download Data in Google Analytics 4?
Analytics Mania - Google Tag Manager and Google Analytics Blog | Privacy Policy
Manage Cookie Settings