How to use Google Tag Manager to track Gravity Forms on Strattic

Learn how to send a submit event using GTM into Google Analytics

This article will show you how to track Gravity Form submissions using Google Tag Manager (GTM) to send form submission events and goals to Google Analytics (GA).

Before you start, you will need;

⚠️ This tutorial will not work using the latest Google Analytics 4 (GA4)

Step 1: Create GTM Tag #1

The first tag is a few lines of Javascript that listen for the gform_confirmation_loaded event, which occurs when the confirmation message is loaded after the form has been submitted.

This is important because it distinguishes between legitimate and false form submissions, such as when a required form field is left blank.

  1. From your Google Tag Manager workspace, go Tags > New

  2. Name your Tag – ‘gravityFormsSubmission’

  3. Tag Configuration

    • Tag Type: Custom HTML

    • Copy the below code and Paste it into the HTML section of the tag configuration.

      jQuery(document).ready( function() {
      jQuery(document).bind('strattic-form-success', function(e){
      var formId = e.detail.form.id
      var formDetails = e.detail.formattedData
      'event' : 'gravityFormSubmission',
      'gfformID' : formId,
      'gfformSubmission' : formDetails

4. Triggering: Choose all pages

This listens for the strattic-form-success event and fires an event into the Data Layer called “gravityFormSubmission.”

It also gets the form ID in the Gravity Forms shortcode and pushes it into the Data Layer, too; you can see the different form IDs in the screenshot below.

Step 2: Create GTM Trigger

Next, create a Trigger for the Tag you’ve just created. Mine is named Gravity Forms Trigger.

  1. Trigger Type: Pick Other – Custom Event from the default list. We’ll use the event we created in Tag #1 as the trigger event.

  2. Enter Event Name: gravityFormSubmission

  3. This Trigger Fires On All Custom Events

  4. Save

This uses the custom Data Layer event from Step 1 to trigger a Google Analytics event tag that we will set up in Step 3.

Step 3: Create GTM Tag #2

Next, we will create our second GTM tag;

  1. From your Google Tag Manager workspace, go Tags > New

  2. Name your Tag – ‘Gravity Form Submission

  3. Tag Type: Universal Analytics

  4. Track Type: Event

  5. Category: contact-form

  6. Action: gfsuccessful-form-submission.

  7. Label: If you want to track different forms separately, you need to set this as form-id-#{{GFformID}} and follow the rest of these instructions closely.

  8. Value: I did not add a value, but you could add a $ amount if you wish.

  9. Non-Interaction Hit: False – this will prevent the session from being counted as a bounce if the visitor only looks at one page but completes a form submission before leaving.

  10. Google Analytics setting: leave “Select Settings Variable…” and Tick “Enable overriding settings in this tag.”

  11. Tracking ID: Your Google Analytics UA-XXXXXXXX tracking ID.

  12. More Settings & Advanced Settings: If you’re an analytics wiz, there are advanced settings in here that you may want to configure. However, I did not change any of them.

  13. Firing Triggers: Gravity Form Submission: Custom Event (which we created in step 2)

  14. Save

When you’re done, you’ll end up with this:

Step 4: Create a Form ID Data Layer Variable

In Step 1, we pushed the form ID into the Data Layer when the form is submitted. Now we need to capture the form ID and get it into GTM and our Google Analytics Events.

  1. From your Google Tag Manager workspace, go to Variables, then add a New User-Defined Variable.

  2. Name your variable GFformID

  3. Variable Type: Data Layer Variable

  4. Data Layer Variable Name: gfformID (case sensitive).

  5. Data Layer Version: Version 2. Leave set default value unticked.

  6. Save

  7. Press the blue Submit button to publish your GTM workspace then we’ll move on to setting up Google Analytics goals!

Step 5: Setting up the Goal Conversion(s)

In Google Analytics and navigate to Admin > View > Goals. Click the +New Goal button and set it up as such:

  1. Goal setup:
    Select Custom

  2. Goal Description:
    Name: Call it whatever you want. This is what it will show in your analytics. I’ve called mine Gravity Form Submission.

    Type: Select Event.

  3. Goal Details:
    Category: Equals to > contact-form

    Action: Equals to > gfsuccessful-form-submission

    Label: Select the form ID of the form you want to track. I have entered form-id-gform_1 for the Gravity Form with ID 1
    If you don’t want to track different forms separately, you can leave this blank.

    Value: You can add a monetary value here if you’d like. I have left this blank.

    Use the Event Value as the Goal Value: If you set up a Value in ad a value attached to each event, you could set that up here. Since I did not, I will not.

  4. Save the Goal Conversion, and you’re done.

If you want to set up other goals for different form IDs, repeat Step 5 but change the Label in the Goal Details to reflect the correct Gravity Form ID number.

Finally, verify the implementation by submitting a few test submissions to the website. You will be able to use Google Analytics real-time reporting to look for events firing and see the goal being tracked under conversations.

If you don’t see them, make sure your browser’s plugins or opt-out extensions aren’t blocking traffic. For ideal testing conditions, use a totally unfiltered GA view and submit the form on a mobile device using a 3g/4g/5g (no wifi).

That’s it! You are now tracking form submissions from Gravity Forms in Google Analytics. 🎉

What’s Next?

Find out how to track individual gravity form fields in Google Analytics by following our step-by-step guide.

Credit to Chris Berkley for his helpful article on this subject.

Strattic is an end-to-end managed WordPress static publishing and hosting platform.
Try it free for 14 days, no credit card required.

Did this answer your question?