How To Track Elementor Form Submissions in Google Analytics Events using JQuery

How To Track Elementor Form Submissions in Google Analytics Events

I’ve been working on a client WordPress site for the last few weeks that has quite a few complexities. They are using WordPress with an integration to ActiveCampaign for nurturing leads and a Zapier integration to Zendesk Sell via Elementor Forms. It’s a great system… kicking off drip campaigns to people who request information and pushing a lead to the appropriate sales representative when requested. I’m really impressed with Elementor’s form flexibility and look and feel.

The last step was providing an analytics dashboard for the client via Google Analytics that provided them with month-over-month performance on form submissions. They have Google Tag Manager installed, so we’re already capturing e-commerce transactions and YouTube view activity on the site.

I made several attempts to utilizing DOM, triggers, and events within Google Tag Manager to capture the successful form submission for Elementor but didn’t have any luck at all. I tested a ton of different ways to monitor the page, watching for the success message that would popup via AJAX and it just wasn’t working. So… I did some searching and found a great solution from Tracking Chef, called Bulletproof Elementor form tracking with GTM.

The script utilizes jQuery and Google Tag Manager to push the Google Analytics Event when the form is successfully submitted. With some minor edits and one syntax improvement, I had everything I needed. Here’s the code:

<script>
jQuery(document).ready(function($) {
    $(document).on('submit_success', function(evt) {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
            'event': 'ga_event',
            'eventCategory': 'Form ',
            'eventAction': evt.target.name,
            'eventLabel': 'Submission'
        });
    });
});
</script>

It’s pretty ingenious, watching for the successful submission, then passing Form as the category, the destination name as the Action, and Submission as the label. By making the target programmatic, you can simply have this code in the footer of every page to observe a form submission. So… as you add or modify forms, you never have to worry about updating the script nor adding it to another page.

Install The Script Via Elementor Custom Code

If you’re an agency, I’d highly recommend the unlimited upgrade and utilizing Elementor for all of your clients. It’s a solid platform and the number of partner integrations continues to skyrocket. Couple it with a Plugin like Contact Form DB and you can also collect all of your form submissions.

Elementor Pro has a great script management option built right in. Here’s how you can enter your code:

Elementor Custom Code

  • Navigate to Elementor > Custom Code
  • Name your code
  • Set the location, in this case the end body tag.
  • Set a priority if you have more than one script you want to insert and set the order of them.

Elementor Form Submission to GA Event via GTM

  • Click update
  • You’ll be asked to set the condition and just set it to the default of all pages.
  • Refresh your cache and your script is live!

Preview Your Google Tag Manager Integration

Google Tag Manager has a fantastic mechanism for connecting to a browser instance and actually testing your code to observe whether or not the variables are being properly sent. This is essential because Google Analytics is not real-time. You can test and test and test and really get frustrated that the data isn’t showing up in Google Analytics if you didn’t realize this.

I’m not going to provide a tutorial here on how to preview and debug Google Tag Manager… I’m going to assume you know. I can submit my form on my connected test page and see the data pushed to the GTM data as it needs to be:

google tag manager data layer

In this case, the category was hard-coded as Form, the target was the Contact Us form, and the label is Submission.

In Google Tag Manager Set Up Data Variables, Event, Trigger, and Tag

The last step on this is to set up Google Tag Manager to capture those variables and send them to a Google Analytics Tag set up for an event. Elad Levy details these steps in his other post – Generic Event Tracking In Google Tag Manager.

Once those are set up, you’ll be able to see the Events in Google Analytics!

Get Elementor Pro

Disclosure: I’m using my affiliate links throughout this article.

11 Comments

  1. 1
  2. 3
  3. 5
  4. 7

    Thanks Douglas for the great article!

    It convinced me to switch to using Google Tag Manager to test and preview my code 🙂

    I definitely learned a lot from Elad Levy’s posts as well in implementing this on my own site.

    I’ll be posting a blog article on my site about the steps I took in a week or two.

    Thanks again for helping me to solve the mystery of tracking form events in Google Analytics! 🙂

    Cheers,
    David

    • 8

      It’s not the easiest tool to learn, but once you get used to it…it’s one that you don’t want to go without! If you can think of any tutorial I could write – let me know.

      • 9

        Thanks Douglas. One tutorial I’d be interested in reading is how to set up conversions on ad campaigns through Google Ads. In my experience, there’s a bit of black magic involved in “tagging” certain elements of a site (i.e: the “Call Now” button). If you could clarify that, that would be cool.

        Btw, I just published my article about tracking form submissions with Elementor and GTM. I linked to this article in it so if you see anything that looks wrong or you have any suggestions, I’d love to hear em! https://peakwebsites.ca/blog/tracking-form-submissions-with-elementor-and-google-tag-manager/

        p.s. If you’re not cool with me posting a link here let me know. Thanks.

        • 10

          Hi Dave, appreciate the link – will be great for our audience to see. I’ve got a company that helps our clients with Google Ads so I’m going to reach out to them to submit that article.

          Cheers! And Go Canada! I lived there for several years in Port Coquitlam, BC.

          • 11

            Hah oh no way! Ya it’s a lovely part of the country up here. Much appreciate sharing the link, Douglas. Thanks and keep up the great work! Cheers!

What do you think?

This site uses Akismet to reduce spam. Learn how your comment data is processed.