Track Hubspot Form Submissions with Google Tag Manager and Analytics

Tracking HubSpot Form submissions in Google Analytics is essential to understand your customer’s journey and Conversion Rate Optimization (CRO). In this tutorial, you will learn how to leverage the HubSpot Forms API to report form success events to Google Analytics with Google Tag Manager.

The setup is very easy to do and at the end of this article you will have everything you need to start tracking Hubspot Forms with Google Tag Manager today.

Overview of the steps involved:

1. Create a Custom HTML tag in Google Tag Manager.
2. Add a dataLayer variable to read the form’s GUID.
3. Create a trigger to that fires on the form success event.
4. Add a Google Analytics Event Tag that reports the data to GA.

Step 1: Create the Custom HTML Tag in Google Tag Manager

Step 1 Tag Configuration:

• Tag Type: Custom HTML
• Tag Name:

  Forms - HS Success Listener

• Triggering: All Pages
• Custom HTML tag content:

<script type="text/javascript">
  window.addEventListener("message", function(event) {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
      window.dataLayer.push({
        'event': 'hubspot-form-success',
        'hs-form-guid': event.data.id
      });
    }
  });
</script>

Step 2: Add a dataLayer variable to read the HubSpot form’s GUID.

Step 2 Variable Configuration:

• GTM Name:

  Forms - hs-form-guid

• Variable Type: Data Layer Variable
• Variable Name:

  hs-form-guid

Step 3: Create the trigger

Step 3 Trigger Configuration:

• Trigger Type: Custom Event
• Trigger Name: Event – hubspot-form-success
• Event Name: hubspot-form-success
• Trigger fires on: All custom events

Step 4 – Create a Google Analytics Event Tag

Step 4 Google Analytics Tag Configuration:

• Tag Type: Universal Analytics
• Tag Name:

  GA - Event - Form - HS Success

• Track Type: Event
• Category: Hubspot
• Action: Form Submit
• Label:

  {{Forms - hs-form-guid}}

• Trigger: Event – hubspot-form-success

Now, you can preview your GTM Container and submit a form to ensure everything is set up correctly.

Optional things to consider:

Track Form Submissions as Goal Conversions:

Report a different Event Label:

• If the GUID of the form is not descriptive enough for your use case, you could also use the page path, page title, or any other global dataLayer variables as the Event Label.

Add Revenue to the Form Event and/or Goal Conversion:

• Event Tag: If you would like to associate revenue with your form submissions, you could calculate the average revenue per form submission and add it to the Event Tag.
• Goal: You can read the value reported in the event tag by setting the last option in the goal settings to “Yes”

Once you are up and running, take a moment to leave a comment below to share with others how it worked for you.