Track Hubspot Form Conversions With Google Tag Manager [2023 Guide]

If you’ve arrived at this article, you’ve probably already tried to fire a Google Tag Manager (GTM) trigger on Hubspot form submission, but with no luck.

Or perhaps you’re wondering: “How can I fire a tag with Hubspot forms”.

Here’s the problem: The “standard” method of adding a GTM “Form Submission” trigger won’t work, since Hubspot’s form builder doesn’t use the “traditional” <form> tags or events that GTM needs to listen for.

Not to worry, though – we have a few alternative methods of detecting Hubspot’s form submission and firing an event.

This will allow you to fire tags from services like Google Analytics, Google Ads or Facebook when a user fills out your Hubspot form.

Why Track Conversions with HubSpot and Google Tag Manager?

We’re probably preaching to the choir here, but tracking conversions is essential to understanding the effectiveness of your marketing strategy. When you track conversions, you can see which marketing channels are driving the most leads, and optimize your efforts accordingly.

Additionally, tracking conversions allows you to measure the return on investment (ROI) of your marketing campaigns, helping you make data-driven decisions about where to allocate your budget.

Integrating HubSpot and Google Tag Manager is a great way to organise your tags, and will result in the following benefits:

1. Ease of use: Google Tag Manager provides a user-friendly interface for managing tags, making it easy to implement tracking without having to rely on a developer.
2. Flexibility: Combining HubSpot and Google Tag Manager allows you to track conversions across multiple platforms, providing a more comprehensive view of your marketing performance.
3. Data accuracy: By using Google Tag Manager to track conversions, you can ensure that your data is accurate and up-to-date, as you can easily make changes to your tracking setup without requiring code updates.

[Method 1] – Redirect the Hubspot Form to a Custom Thank You Page

This method is beautiful in its simplicity: you’ll configure Hubspot to redirect to a particular thank-you page after they submit your form.

Then, you can use Google Tag Manager to watch for visitors to the “thank you” page and trigger conversions as a result.

The main advantage of this method is it requires absolutely no custom code. It’s a solid, reliable and maintainable way to fire your GTM tags when a form submission is received.

The main disadvantage of this method is that it requires to you send your users to a thank-you page. This may not be a problem, but if you want users to remain on the page and just see a thank you message instead, this may not be the best option for you.

To set up conversion tracking using this method, follow these steps:

1. Create a custom thank you page: Design a thank you page on your website that users will be redirected to after submitting a HubSpot form. Include a clear message thanking users for their submission and provide any additional information or next steps as needed. You can always use Hubspot’s landing page tool to create the thank you page in Hubspot, too.
2. Set up a redirect in HubSpot: In your HubSpot account, go to the form editor and select the “Options” tab. Under the “What should happen after a visitor submits this form?” section, choose “Redirect to another page” and enter the URL of your custom thank you page.
3. Create a new trigger in Google Tag Manager: In GTM, go to “Triggers” and hit “New”. Hit the trigger confirmation box and choose “Page view”. Then, choose “Some page views”. Use the rules provided to match your thank-you page – eg. “Page URL”… “Contains”… “/thankyou”.
4. Apply the trigger to your tag: Still in GTM, create a new tag if you have not already. In your tag’s settings, add a trigger and choose the tag we created in step 3.

Of course, these instructions assume you already have Google Tag Manager enabled with Hubspot landing pages.

Don’t forget to save and submit your changes to GTM.

Voila – you’re now firing tags when a user visits your thank-you page, and by extension – whenever somebody fills in your form.

[Method 2] – Using custom script to pick up Hubspot Form’s “hsFormCallback” event

Although Hubspot doesn’t use old-fashioned form handlers, which makes firing conversions a little fiddly, we can thank them for emitting an “event” when the form is filled out.

We’re going to add some custom code to our GTM installation that will listen out for this event and push it to the datalayer, where we can do something with it in GTM.

This method eliminates the need for a custom thank you page and provides a more direct way of capturing firing conversions.

To set up conversion tracking using this method, follow these steps:

1) In GTM: Create a data layer variable and capture the Hubspot form ID

First, we’ll create a data layer variable in GTM. These just means we’ll be able to use the form ID when we receive it from Hubspot:

• In your Google Tag Manager (GTM) account, navigate to “Variables” and click on “New” under “User defined variables”.
• Name your variable something descriptive, like “Hubspot Form ID.”
• Inside “Variable Configuration”, choose “Data Layer Variable” as the variable type.
• In the “Data Layer Variable Name” field, enter “hubspotFormId” (without quotes).
• Save your variable.

Nice – GTM will now be able to access the Hubspot form ID from the data layer once it’s pushed there by our custom script.

2) In GTM: Create a custom script to listen for the Hubspot event

Next, you’ll need to create a custom script that will listen out for Hubspot’s form completion event. You’ll need to place this script on all pages that contain a Hubspot form.

Here’s how:

• Go to “Tags” in GTM and click on “New.”
• Name your tag something descriptive, like “Listen for Hubspot Form Submit”
• Choose “Custom HTML” as the tag type.
• Add the following code in the HTML field:

<script type="text/javascript">
  function handleMessage(event) {
    if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
      window.dataLayer.push({
        'event': 'hubspotFormSubmit',
        'hubspotFormId': event.data.id
      });
    }
  }

  window.addEventListener("message", handleMessage);
</script>

• Under “Triggering”, choose for this tag to fire on “All pages”, or the specific pages where your Hubspot form is present.
• Save your tag

It looks a little complicated, but this code simply listens out for an event called “hsFormCallback” and puts an event into the GTM datalayer so we can create a trigger from it.

3) In GTM: Create a custom event trigger to listen to the event

Now, need just need to create a trigger when GTM’s datalayer receives the event we created in step 2:

• Go to “Triggers” in GTM and click on “New.”
• Name your trigger something like “Hubspot Form Submit Trigger”
• Choose “Custom Event” as the trigger type (at time of writing, it has an orange icon, and is towards the bottom of the list).
• In the “Event Name” field, enter “hubspotFormSubmit” (without quotes).
• Leave “this trigger fires on” set to “All custom events”.
• Save your trigger.

This trigger will listen for the “hubspotFormSubmit” event in the data layer.

Advanced tip: If you have multiple forms, you can choose “Some events” instead of “All custom events” here and choose to only fire a trigger if the Hubspot form ID is the one you’re interested in. You can then have a different trigger for each form.

4) In GTM: Configure your tag to fire when your trigger is triggered

Now we have our trigger set up, all that’s left to do is fire our tag when it’s triggered:

• Create a new tag or edit an existing conversion tracking tag in GTM.
• Choose the appropriate tag type and configure the tag settings as required.
• In the “Triggering” section, click on the “+” button to add a trigger.
• Select the “Hubspot Form Submit Trigger” you created in step 3.
• Save your tag.

That’s it – you can also use the Hubspot form ID to as you would any other variable, which is particularly useful when sending back data to Analytics tools.

Testing and Verifying Conversion Tracking

Before you can trust the data from your conversion tracking setup, it’s essential to test and verify that everything is working correctly. To do this, follow these steps:

1. Preview your Google Tag Manager container: In your Google Tag Manager account, click the “Preview” button to enter preview mode. This will allow you to see which tags are firing on your website in real-time.
2. Submit a test form: Visit your website and submit a test form using the HubSpot form you set up for conversion tracking. If you’ve set up your tracking correctly, you should see your conversion tag fire in the Google Tag Manager preview window.
3. Verify conversions in your platform of choice: Check your Google Ads or Google Analytics account (depending on which platform you’re using for conversion tracking) to ensure that the test conversion is being recorded. This may take a few hours to appear, so be patient.

Troubleshooting Common Issues with HubSpot & Google Tag Manage

If you encounter issues while setting up conversion tracking with HubSpot and Google Tag Manager, consider the following troubleshooting tips:

1. Incorrect data layer variable name:
   • Ensure the variable name is “hubspotFormId” (without quotes).
2. Custom HTML tag not firing:
   • Check if the tag is added to the appropriate pages containing the Hubspot form.
3. Custom event trigger not detecting the event:
   • Verify the event name in the trigger is “hubspotFormSubmit” (without quotes).
4. Conversion tracking tag not firing:
   • Ensure the “Hubspot Form Submit Trigger” is properly associated with the conversion tracking tag.
5. GTM container not published or outdated:
   • Publish the latest version of your GTM container after making all the changes.

Introducing a better form builder

If you’ve ever wanted to improve your conversion rates and capture more leads, you may be interested to hear about Growform.

Growform is a form builder built from the ground up to deliver more leads from the same traffic, by focusing on conversion rate optimisation (CRO) principles:

It lets you build beautiful forms quickly that look great on any device, send leads to Hubspot (or 300+ destinations via Zapier) and fire tags with Google Tag Manager or other 1-click ad platforms.

If you’re ready to get more leads, try a 14 day free trial.