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.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
This requires being able to track Hubspot form submissions efficiently.<\/p>\n\n\n\n
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.<\/p>\n\n\n\n
In this post, I’ll cover the different methods to track these forms. I’ll also show how to add these conversion events without<\/strong> Google Tag Manager.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n In Google Tag Manager, create a new tag of the type Custom HTML. Paste into the tag the following script:<\/p>\n\n\n\n Trigger the tag on ‘All Pages’.<\/p>\n\n\n\n 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.<\/p>\n\n\n\n This Custom Event can now be used to trigger additional platforms such as LinkedIn Ads or Quora Ads.<\/p>\n\n\n\n Since the form’s ID is usually some gibberish string, e.g. 988c94e6-d06b-4181-95d4-3ea925d01d47<\/em>, you might want to translate it to a human-friendly form.<\/p>\n\n\n\n The simplest way is to slightly alter the code above:<\/p>\n\n\n\n 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 <\/em>with Request Demo<\/em>.<\/p>\n\n\n\n Pro tip:<\/strong> In the unlikely case that you don’t use GTM, you can still use this method to track form conversions.<\/p>\n\n\n\n Simply add the following snippet to your site’s code:<\/p>\n\n\n\n For example, if you want to track Facebook Leads and Google Analytics events:<\/p>\n\n\n\n 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).<\/p>\n\n\n\nGeneric form tracking<\/h2>\n\n\n\n
<script type=\"text\/javascript\">\n window.addEventListener(\"message\", function(event) {\n if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {\n var submissionValues = event.data.data.submissionValues || {};\n \n window.dataLayer.push({\n 'event': 'form_submission',\n 'form_id': event.data.id,\n 'submission_data': submissionValues\n });\n }\n });\n<\/script><\/code><\/pre>\n\n\n\nOptional: Human-friendly form names<\/h3>\n\n\n\n
<script type=\"text\/javascript\">\nvar id_lookupTable = {\n'988c94e6-d06b-4181-95d4-3ea925d01d47': 'contact us',\n'bc3f3208-e01e-4a9f-b1e9-161391c9279f': 'request demo'\n};\n window.addEventListener(\"message\", function(event) {\n if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {\n window.dataLayer.push({\n 'event': 'form_submission',\n 'form_id': event.data.id,\n 'form_name': id_lookupTable[event.data.id]\n });\n }\n });\n<\/script><\/code><\/pre>\n\n\n\n\n
You can also send the form’s ID and convert it in GTM to a friendly name using a Lookup Table variable.<\/p>\n<\/blockquote>\n\n\n\nTracking form submissions without GTM<\/h3>\n\n\n\n
<script type=\"text\/javascript\">\n window.addEventListener(\"message\", function(event) {\n if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {\n \/\/ some code you want to trigger\n }\n });\n<\/script><\/code><\/pre>\n\n\n\n<script type=\"text\/javascript\">\n window.addEventListener(\"message\", function(event) {\n if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {\n fbq('track', 'Lead');\u200e\n gtag('event', 'form_submission', {'form_id' : event.data.id});\n }\n });\n<\/script><\/code><\/pre>\n\n\n\nSpecific form tracking<\/h2>\n\n\n\n
\n