Displaying items by tag: hubspot

Sunday, 21 January 2024 19:57

How to track HubSpot Forms in GTM? Supercharged!

HubSpot stands out as a powerful CRM widely embraced in the marketing sphere. One common query that surfaces is how to effectively track HubSpot Forms using Google Tag Manager (GTM). The process is straightforward and adds a valuable tool to your GTM toolkit. We've drawn insights from Clarity Global (formerly 3WhiteHats) and Analytics Mania's Julius Fedorovicius for this technique, ensuring a robust foundation.

In our example, we go beyond the basics by extending the code to access form data, providing richer information for our marketing tags. While we specifically use GA4 Event tags in our illustration, this approach can be extended to various marketing tags like Facebook, TikTok, LinkedIn, and more. However, it's crucial to ensure compliance with organizational privacy policies and legal regulations such as GDPR or CCPA.

Implementation Steps

Step 1: Create and HTML Tag in GTM

Begin by creating an HTML tag in GTM that listens for the HubSpot FormSubmitted Event. Detailed information can be found here. The raw code below should be copied and pasted into GTM.

  window.addEventListener("message", function(event) {
    if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
        'event': 'hubspot-form-success',
        'hs-form-guid': event.data.id,
        'data': event.data,
    } else if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
      window.dataLayer.push({ 'event': 'hubspot-form-ready', 'hs-form-guid': event.data.id });

This code has been extended to include the submitted form data in the dataLayer, that is done by this line:

'data' : event.data

What this line does put the form data in the dataLayer.  What you will see in the dataLayer will depend on how your form has been created, in the video we will show how to review the dataLayer so that you can create your own customized Data Layer type variables.

HubSpot Form Tracking GTM Form Listener

Employ a DOM Ready Pageview trigger for the tag to ensure the complete rendering of the HubSpot form. (For extra credit you could detect a HubSpot form and only fire when one is present, but for now we will use all pages.)

Step 2: Create a Variable for the Form Data

Generate variables for the form data; for instance, 'company' in our example. The full variable name in the dataLayer is:


Adjust the final part based on your HubSpot form's variable names.  You can find them in the dataLayer formSubmission object.

HubSpot Form Tracking GTM Form Variable

Step 3: Set up a Trigger

Create a trigger to detect the 'hubspot-form-success' event defined in the listener.

HubSpotFormTrackingGTM Trigger

Step 4: Create a GA4 Event Tag

Finally, craft a GA4 Event tag using the HubSpot Form Submit trigger to send back the form variable.

HubSpotFormTrackingGTM GA4Event

With these steps, you now have a fully operational HubSpot Form tracker in GTM. Feel free to include additional form variables and channel this data to other tags. Embrace the advantages of a consistent Form Submit trigger for more accurate conversion tracking compared to traditional "thank-you" pages.

Happy Tracking! If you have any questions, whether about this or other GA4/GTM topics, let us know — we're here to help.




Published in Blog

How can we help?

To schedule a free Digital Marketing Consultation - Book Now 

Please type your full name.
Invalid email address.
Invalid Input
Invalid Input


Invalid Input