How to track HubSpot Forms in GTM? Supercharged!

Posted on by Jay Murphy

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 an HTML Tag in GTM

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

<script>
   window.addEventListener("message", function(event) {
     if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
       console.log(event.data);
       window.dataLayer.push({
         '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 });
     }
   });
</script>

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.

HubSpotFormTrackingGTM-FormListener

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:

data.data.submissionValues.company

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

HubSpotFormTrackingGTM-FormVariable

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.

References

Tracking HubSpot Forms with Google Tag Manager - Clarity (formerly 3WhiteHats) - Will Julian-Vicary Clarity Global (formerly 3WhiteHats) where I first learned this technique.

Hubspot Form Tracking Recipe for Google Tag Manager and GA4 - Analytics Mania - Julius Fedorovicius Analytics Mania's Julius Fedorovicius, who always does an excellent job, explaining how the code works and how to implement.  

0 Comments: