Hubspot form tracking with (and w/o) Google Tag Manager

Hubspot is one of my favorite tools. Working with Hubspot, you usually measure all interactions from inside the platform’s reporting tools, which are pretty decent.

However, my opinion, contrary to other Hubspot users, is that you should still measure yourself on a proper web analytics tool such as Google Analytics (GA). Even if you don’t use GA, you will want to implement conversion tracking for other advertising platforms, such as Quora, that aren’t supported out of the box in Hubspot.

This requires being able to track Hubspot form submissions efficiently.

Like other tools, the best course of action is to use a dedicated Thank You Page (TYP). Most ad platforms (e.g. Google Ads or LinkedIn) support URL-based tracking for TYPs, making this setup a breeze. But in many cases, the form submission will not route the user to a new page, so capturing the form submission is slightly more complex.

In this post, I’ll cover the different methods to track these forms. I’ll also show how to add these conversion events without Google Tag Manager.

Generic form tracking

The first option is to set up a generic event to indicate form submissions. This option is also the recommended way to track forms on Hubspot pages, e.g. Blog or Landing pages, that have the forms integrated directly.

In Google Tag Manager, create a new tag of the type Custom HTML. Paste into the tag the following script:

<script type="text/javascript">
  window.addEventListener("message", function(event) {
    if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
      var submissionValues = event.data.data.submissionValues || {};
      
      window.dataLayer.push({
        'event': 'form_submission',
        'form_id': event.data.id,
        'submission_data': submissionValues
      });
    }
  });
</script>

Trigger the tag on ‘All Pages’.

This tag will now trigger a Custom Event on each Hubspot form submission, with the Event Category ‘form submission’ and Event Action set to the form’s ID in Hubspot.

This Custom Event can now be used to trigger additional platforms such as LinkedIn Ads or Quora Ads.

Optional: Human-friendly form names

Since the form’s ID is usually some gibberish string, e.g. 988c94e6-d06b-4181-95d4-3ea925d01d47, you might want to translate it to a human-friendly form.

The simplest way is to slightly alter the code above:

<script type="text/javascript">
var id_lookupTable = {
'988c94e6-d06b-4181-95d4-3ea925d01d47': 'contact us',
'bc3f3208-e01e-4a9f-b1e9-161391c9279f': 'request demo'
};
  window.addEventListener("message", function(event) {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
      window.dataLayer.push({
        'event': 'form_submission',
        'form_id': event.data.id,
        'form_name': id_lookupTable[event.data.id]
      });
    }
  });
</script>

In the snippet, you can add new forms and replace the form ID with a readable name. For example, replace bc3f3208-e01e-4a9f-b1e9-161391c9279f with Request Demo.

Pro tip:
You can also send the form’s ID and convert it in GTM to a friendly name using a Lookup Table variable.

Tracking form submissions without GTM

In the unlikely case that you don’t use GTM, you can still use this method to track form conversions.

Simply add the following snippet to your site’s code:

<script type="text/javascript">
  window.addEventListener("message", function(event) {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
  // some code you want to trigger
    }
  });
</script>

For example, if you want to track Facebook Leads and Google Analytics events:

<script type="text/javascript">
  window.addEventListener("message", function(event) {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
   fbq('track', 'Lead');‎
   gtag('event', 'form_submission', {'form_id' : event.data.id});
    }
  });
</script>

Specific form tracking

Another alternative to track Hubspot forms is to add a tracking snippet directly to the form’s embed code. This option can be used only when embedding the Hubspot form on a different CMS (e.g. WordPress).

This method can integrates with the Generic Event Tracking method discussed on a separate post, please make sure you follow the instructions detailed there first.

First, grab the form’s embed code from Hubspot. It should probably look something like this:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
	portalId: "12345678",
	formId: "988c94e6-d06b-4181-95d4-3ea925d01d47"
});
</script>

Under the formID parameter, we will add an event listener that will trigger on this form’s submission. This is the code you will add to embed the form on your site.

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
	portalId: "12345678",
	formId: "988c94e6-d06b-4181-95d4-3ea925d01d47",
        onFormSubmit: function($form){
        window.dataLayer.push({
          'event': 'form_submission',
          'form_name': 'request demo'
      });
    }
});
</script>

This tag will now trigger a Custom Event on each Hubspot form submission, with the Event Category ‘form submission’ and Event Action set to the form’s name as you set it.

This Custom Event can now be used to trigger additional platforms such as LinkedIn Ads or Quora Ads.

Tracking form submissions without GTM

In the unlikely case that you don’t use GTM, you can still use this method to track form conversions.

Simply add the following snippet to your form’s embed code, just under the formID parameter:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
	portalId: "12345678",
	formId: "988c94e6-d06b-4181-95d4-3ea925d01d47",
        onFormSubmit: function($form){
          // some code you want to trigger
      });
    }
});
</script>

For example, if you want to track Facebook Leads and Google Analytics events:

<!--[if lte IE 8]>
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2-legacy.js"></script>
<![endif]-->
<script charset="utf-8" type="text/javascript" src="//js.hsforms.net/forms/v2.js"></script>
<script>
  hbspt.forms.create({
	portalId: "12345678",
	formId: "988c94e6-d06b-4181-95d4-3ea925d01d47",
        onFormSubmit: function($form){
         fbq('track', 'Lead');‎
         gtag('event', 'form_submission', {'form_name' : 'request demo'});
    }
      });
    }
});
</script>

Make sure you use your portalID and formID 🙂