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

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:

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

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

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.