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') {
window.dataLayer.push({
'event': 'form_submission',
'form_id': event.data.id
});
}
});
</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 🙂
About the Author
6 Responses
Leave a Reply
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!
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?
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.
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.
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.
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