The Easiest Way To Setup Hubspot Form Tracking In Google Analytics / GTM

Updated June 2023 to include steps for GA4.

Ensuring Hubspot and Google Analytics are speaking to each other makes a world of difference in quantifying marketing efforts.

There are a ton of articles and different methods on how to setup Hubspot contact form tracking in Google Analytics. Many are long, technical and difficult for the everyday business owner or marketing manager to implement.

This article is intended to help non-technical people perform a somewhat technical (but crucial) task.

If you are reading this, I don’t think I need to dive into the details on why form tracking in Google Analytics is a MUST for helping make marketing decisions. So lets jump right into why you are here…

What You Will Need:

You will need edit access in Google analytics and publish access in Google Tag Manager to allow you to publish your changes. You will also need Hubspot forms on the website.

1. Google Analytics
2. Google Tag Manager
3. Hubspot Forms on your website

Overview Of The Steps Involved:

If you have never heard of a datalayer, GUID or GTM trigger.. DO NOT FRET, this article walks you through every single step in a copy/paste format to make it super simple.

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.

Don’t have time for this? Get me to do it for you here>

Before you start, make sure Clicks and Forms ‘variables’ in GTM are on:

1. Go to variables
2. Under ‘Built-in Variables’ > click ‘Configure’
3. Check all the boxes under ‘Clicks’ (ie: click element, click classes, click text, etc)
4. Check all the boxes under ‘Forms’ (ie: Form element, form URL, etc)

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

Here is a video that breaks down the below steps:

Add custom html tag in Google Tag Manager

1. Create a new tag and name it Forms — HS Success Listener

2. Under Tag Configuration, select Custom HTML

3. Paste this code

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

4. Set the trigger to fire on all pages

5. Save

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

Create a data layer variable in Google Tag Manager

1. Go to Variables
2. Under User-Defined Variables click Add new
3. Select Data Layer Variable and name it Forms — hs-form-guid
4. Variable Type: Data Layer Variable
5. Variable Name:
   hs-form-guid
6. Save

Step 3: Create the trigger

Create your form trigger Inside of Google Tag Manager

1. Trigger Type: Custom Event
2. Trigger Name: Event — hubspot-form-success
3. Event Name: hubspot-form-success
4. Trigger fires on: All custom events

Step 4 — Create a Google Analytics: GA4 Event Tag

Create Your GA4 Tag in Google Tag Manager

For GA4:

1. Create a new Tag then select ‘Google Analytics: GA4 Event’
2. Name the tag: GA4- Event — Form — HS Success
3. Add your GA4 measurement ID in the configuration tag field
4. Create a name for the event ie: Form_submit
5. Add event parameters (optional) — In this example, we are pushing the Hubspot form GUID into the hs_form_guid parameter — But your form submissions will track without this
6. Under Triggering > Select the trigger we created in step #3: Event — hubspot-form-success
7. Save
8. Submit all of your Google Tag Manager Updates (blue button at top right)

• If you haven’t linked Google analytics 4 to Google Tag Manager, here are the simple instructions. (skip to ‘Set up the Google Analytics 4 Configuration tag’)

Create a Universal Analytics event (skip ahead to Step #5 if you are only setting up the GA4 conversions):

Create Your Google Analytics Tag in Google Tag Manager

For UA:

1. Tag Type: Universal Analytics

2. Tag Name:
GA — Event — Form — HS Success

3. Track Type: Event

4. Category: Hubspot

5. Action: Form Submit

6. Label: Click the + icon then select your data layer variable you created
Forms — hs-form-guid

7. Trigger: Event — hubspot-form-success

8. Save

9. Submit all of your Google Tag Manager Updates (blue button at top right)

• If you haven’t linked Universal analytics to Google Tag Manager, here are the simple instructions.

Step 5 — Setup the new event as a goal in Google Analytics 4

Now that we have configured the tag and trigger to push your Hubspot Form Submission event into GA4, we need to simply setup the conversion.

1. Head over to your GA4 property > Under ‘admin’ > Click ‘Conversions’
2. Click ‘New conversion event’
3. Paste in your ‘Event Name’ (from Step #4) ie: Form_submit
4. Save

Create a Goal from your form submit event in Universal Analytics (skip if you are only setting up GA4)

Setup your Goal in Google Analytics

1. Go to Google analytics > Admin > Goals > New Goal
2. Create custom > Event
3. Event Conditions
4. Action Equals to: Form Submit
5. Save

At this stage you have done all the technical parts, now lets test to make sure its working!

Test That Your Hubspot Form Is Now Tracking As A Conversion In Google Analytics 4

1. In GA4 > Click Reports > Real Time
2. Fill out the Hubspot Form on your website (make sure you published your GTM container!)
3. See if your form submit is being recorded under the Conversions by event name report

NICE WORK👏👏👏

If this helped you, be sure to leave a clap!