Tracking Chef
  • Guides
    • Google Ads
    • Google Analytics
    • Google Tag Manager
    • Google Data Studio
    • Facebook
    • LinkedIn Ads
    • Hubspot
    • Segment
    • Quora Ads
    • Reddit Ads
  • Blog
  • GTM Playground
  • Swag
  • About
  • Guides
    • Google Ads
    • Google Analytics
    • Google Tag Manager
    • Google Data Studio
    • Facebook
    • LinkedIn Ads
    • Hubspot
    • Segment
    • Quora Ads
    • Reddit Ads
  • Blog
  • GTM Playground
  • Swag
  • About
Tracking Chef
  • Guides
    • Google Ads
    • Google Analytics
    • Google Tag Manager
    • Google Data Studio
    • Facebook
    • LinkedIn Ads
    • Hubspot
    • Segment
    • Quora Ads
    • Reddit Ads
  • Blog
  • GTM Playground
  • Swag
  • About
  • Guides
    • Google Ads
    • Google Analytics
    • Google Tag Manager
    • Google Data Studio
    • Facebook
    • LinkedIn Ads
    • Hubspot
    • Segment
    • Quora Ads
    • Reddit Ads
  • Blog
  • GTM Playground
  • Swag
  • About
Hubspot form tracking with (and w/o) Google Tag Manager
Home » Google Tag Manager
June 8, 2020 Elad Levy

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 efficiently track Hubspot form submissions.

As with other tools, the best course of action is using 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.

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

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') {
      window.dataLayer.push({
        'event': 'ga_event',
        'eventCategory': 'form submission',
        'eventAction': event.data.id,
        'eventLabel': ''
      });
    }
  });
</script>
Generic Hubspot form tracking tag

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': 'ga_event',
        'eventCategory': 'form submission',
        'eventAction': id_lookupTable[event.data.id],
        'eventLabel': ''
      });
    }
  });
</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', event.data.id, {'event_category' : 'form submission'});
    }
  });
</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 is 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. Is 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>

Just under the formID parameter we will add a 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': 'ga_event',
          'eventCategory': 'form submission',
          'eventAction': 'request demo',
          'eventLabel': ''
      });
    }
});
</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', 'request demo', {'event_category' : 'form submission'});
    }
      });
    }
});
</script>

Make sure you use your portalID and formID 🙂

About the Author

Elad Levy View all posts by Elad Levy

Experienced Web Analyst, working for almost a decade now with various web analytics tools.
Also a husband, father of three rascals, and the co-founder of Fixel.

« Previous
Next »
6 Responses
  1. Matt
    Reply
    June 11, 2020 at 5:01 am

    So I have a situation that someone like me who’s limited on coding knowledge has been trying to crack. My company has HubSpot as its marketing automation tool and I have an external form that runs on a SPA framework, tracked using GTM pushing semi-customized HubSpot tracking. We previously set up advanced e-commerce in GA to push a bunch of valuable non-PII data elements to the data layer which works correctly, but now I’m looking to automatically pull that data into the HubSpot contact record after the form submit. HubSpot natively recognizes some of the basic form elements and captures the form submission, but I haven’t been able to figure out how to pull in all of the other data elements already pushed to the data layer. Please help!

    • Elad Levy
      Reply
      June 11, 2020 at 11:09 am

      Hi Matt
      It sound’s like you’re using Hubspot’s automated form listener to capture form submissions, which won’t let you select the data sent or it’s mapping.
      Intuitively I would suggest populating the additional data as hidden fields in your form so they can be passed into HS.
      It’s less complicated than it seems, it requires adding the hidden fields to the form and populating them with the data with a simple Javascript function.
      On which CMS is your site built?

      • Matt
        Reply
        June 18, 2020 at 1:37 am

        We use HubSpot for our main CMS but the form I’m referencing isn’t hosted on a regular CMS, rather it’s pulled together using bit bucket or something.

        Also, through my research I saw that there are ways of pulling the data in on non-form submits using a measurement protocol? The idea of it sounds like a better option but understand it is probably more difficult.

        • Matt
          Reply
          June 18, 2020 at 1:40 am

          I should add that for the hidden form field to work with this particular form, I would need to somehow push the new form field through GTM to capture on submission rather than updating the form code directly. Because of the sensitivity of the form and lack of availability, going through one of our developers isn’t an option right now.

          • Elad Levy
            June 22, 2020 at 7:17 pm

            The Measurement Protocol is a solution to push data to Google Analytics (essentially, GA’s API).
            So to trigger this data to HS you would rather capture it on the client-side.
            While it is technically possible to achieve this with GTM, I would strongly advise against this.
            I’d take the long and safe route of properly adding these to the form as hidden fields.

  2. seoravindra
    Reply
    May 13, 2021 at 6:01 pm

    Hi Elad Levy,

    Nice Article it will help a lot to me for Implementing the tracking with HubSpot forms in GTM.
    Keep writing these types of helpful articles Elad.

    I having facing issues with tracking with HubSpot from in GTM. I Google it I found this site I implemented like this but I have tracked a few & a few are not tracked.

    Now I am able to track perfectly

    Thank you Very Much, Kudos to Elad Leavy, Great Support & help

    Regards,
    Ravindra

Leave a Reply

Click here to cancel reply.

Contents hide
Generic form tracking
Specific form tracking
Made with ❤️ by Elad Levy
Disclaimer: Some of the links shared on this site are affiliate links, so if you choose to make a purchase, I’ll earn a small commission. Please note, I only recommend tools I’ve used and have found useful, the commission is not a driving factor