Tracking HubSpot Forms With Google Tag Manager

Tracking HubSpot Forms With Google Tag Manager

How To Send HubSpot Form Details To Google Analytics & Facebook

HubSpot is amazing and if you aren’t drinking the Kool-Aid yet, you probably should be. In this article HammaJack’s co-founder, Jacob Moran, and Data Engineer, Jose Arevalo, outline how to effectively track HubSpot forms and send the information to Google Analytics & Facebook.

In this article we are going to be using some technical concepts. So if you aren’t familiar with the below we’d recommend you read up on them before continuing.

  1. DataLayers - we’ll be using the DataLayer to capture and send the information to  Google Tag Manager.

  2. Pushing events to the DataLayer - this will be similar to what we did to track the categories of blog posts in Google Analytics.

  3. Event tracking with Google Tag Manager for;

    1. Google Analytics

    2. Facebook Analytics

HammaJack has been using HubSpot for over a year now and we love it. Its out of the box functionality is amazing. It allows you to build websites, forms and workflows with little, to no, coding. It also lets you report on these activities to a decent level. But, here at HammaJack we like knowing things at an in depth level, and this is where specialised analytical tools like Google Analytics come into play. So when we were rebuilding some of our forms on the our site we decided to document how we send useful data about our multitude of HubSpot forms and their submissions to other tools that aren’t HubSpot.

The below guide is for people who are interested in configuring things from scratch. If you’re interested in a free GTM container template with the below already configured, you can get one from the link below.


Before we begin, we should mention that this solution works whether you are using HubSpot as your CMS or you are using another CMS - the process is exactly the same.

Configuring The DataLayer

The first step of tracking a HubSpot form on your website is to make a DataLayer event in Google Tag Manager that lets us know when the form has been successfully submitted.

HubSpot Form Listener

Using the Global Forms Submission events that HubSpot provides we can easily do this by creating a listener tag that then pushes the information to the DataLayer. You can do this with the below code.

HubSpot Form Listener.png
<script type="text/javascript">
  window.addEventListener("message", function(event) {
    if(event.data.type === 'hsFormCallback' 
        && event.data.eventName === 'onFormSubmitted') {
      window.dataLayer.push({
        'event': 'hubspot-form-success',
        'hs-form-guid': event.data.id
      });
    }
  });
</script>

This code, which we also found being used by the guys at 3 whitehats, listens for an event called “onFormSubmitted” and then pushes an event to the DataLayer called “hubspot-form-success” and also passes through the Form GUID. This information is super important for later.

The “onFormSubmitted” fires after the form has been submitted and persisted. If you want it to fire as soon as it’s submitted you can use “onFormSubmit” instead.

Like other event listeners that are fired through GTM its best if this tag is fired on every page, but you can pick and choose individual pages if you’d prefer (e.g. if you only had one form on your site).

Data Layer & Custom Events

Now that we’ve got the event listener firing we need to get the DataLayer to pick up any time a form fires. To do this we create a DataLayer variable and a Custom Event trigger in Google Tag Manager.

The Custom Event trigger looks for the event we just defined and will be used to fire whatever tags we want push this information to. Create the following event trigger with the form listener event name as the trigger event name (check for spelling).

Next, the DataLayer variable is used to define and then capture the Form GUID. Create the following variable.

Testing the information is coming through

Once the above has been created, go to the form and submit it. You should now see and event being fired to the DataLayer with the Form GUID.

HubSpot Form Success event debugging.png

Making the data useful with Google Tag Manager

Now that we can see the data we want to make it useful for later consumption. At the moment we have two pieces of information;

  • A generic event that tells us a HubSpot form was submitted

  • A Form GUID

While GUID’s are extremely useful for a whole host of reasons, they aren’t that useful to analysts when analysing campaign effectiveness as they don’t give us something easy to read. For example, let's say that you have 3 different forms with 3 different GUIDs on your site, how would you make sense of these in your reporting tools?

So in this step, we are going to transform the GUID into something unique and readable.

While this step is optional, we’d suggest it’s a pretty key step to getting useful information into your downstream systems.

What we need to do here is create a Regex Table variable in Google Tag Manager that translates the GUID into a name that is useful for you. As per the below image you can see there are two things to do;

  • List your Form GUIDs and give them a human-readable name

  • Set the Default Value to be GUID - this protects you if a form turns up on the site that you didn’t know about (the unique GUIDs will still be tracked).

HubSpot Form ID.png

Sending the Data

Now we’ve got all our ducks in a row we can send the values to our downstream systems. Below we’ve outlined how to do it for Facebook Analytics and Google Analytics, but you could extend this solution to any analytics system of your choice.

To Google Analytics

Using a standard Google Analytics event tag in Google Tag Manager you just need to;

  • Set your Event Category and Action with whatever you want to define it as (we went with ‘Form’ and ‘Submit’)

  • Set your Event Label by calling the Regex Table you just created and dynamically setting the label with the human-friendly form name

  • Use the Custom Event as the trigger

Google Analytics HubSpot Tag.png

After you’ve published all of this you’ll see it coming through in Google Analytics all nice and pretty.

To Facebook Analytics

Facebook can get more complicated because, unlike Google Analytics, it’s events are grouped into different types (e.g. leads, subscribers, purchases etc.) and these groups require slightly different information and therefore different tags/script syntax. While you could just use a combination of hardcoded triggers, values and groups - this would probably lead to incorrect data and make your developers cry.

What we’d suggest is that you use what we’ve outlined above and target it with a Custom HTML tag that looks at the Form ID names and iterates through a script until it finds the script it needs to fire. To do this you need to;

Create a Custom HTML tag and call it something useful

  • Write an IF statement that fires different Facebook event tags based on the results of the Form IDs Regex Table that we outlined above

  • Use the Custom Event as the trigger

You can see our code below.

Google Tag Manager HubSpot Facebook Tracker.png
<script>
if ({{HubSpot - Form IDs}} === "Newsletter") {
    fbq('track', 'ViewContent', { 
            value: 0,
            currency: 'AUD',
            content_name: {{HubSpot - Form IDs}}
        });
} else if ({{HubSpot - Form IDs}} === "Contact Us - Get In Touch") {
    fbq('track', 'Contact', { 
            value: 0,
            currency: 'AUD',
            content_name: {{HubSpot - Form IDs}}
        });
} else if ({{HubSpot - Form IDs}} === "Getting to know your business") {
    fbq('track', 'Lead', { 
       value: 0,
       currency: 'AUD',
       content_name: {{HubSpot - Form IDs}},
       content_category: 'Lead'
     });
} else {
    fbq('track', 'ViewContent', { 
            value: 0,
            currency: 'AUD',
            content_name: {{HubSpot - Form IDs}},
        });
}
</script>

Please note that we’ve used the ELSE statement to send the ID if we haven’t declared the form (similar to what we’re doing for Google Analytics).

There are probably better ways to do this, with a function for example, but the idea was to keep this simple so people who aren’t that skilled with JavaScript could update it.

After you’ve published all of this you’ll see it coming through in Facebook all nice and pretty.

HubSpot Facebook Event.png

Most Important Point

HubSpot is an amazing tool, and its forms are super useful in growing your business but, if you are using systems like Google Analytics, Google Ads or Facebook Ads you still need to report to these tools so that you can measure your ROI.

 Around The Web: Christmas Holiday Indigestion

Around The Web: Christmas Holiday Indigestion

Advertising Alcohol With Google Ads

Advertising Alcohol With Google Ads

0