Sunday, 21 January 2024 19:57

How to track HubSpot Forms in GTM? Supercharged!

Written by
Rate this item
(0 votes)

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.

 <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.

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:

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.

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.

Referrences

 

 

Read 156 times Last modified on Friday, 02 February 2024 21:32
Jay Murphy

Jay Murphy is a digital analytics expert and founder of Trionia, where he specializes in transforming data into actionable insights for large and mid-sized businesses. With over thirty years of experience and a passion for Google Analytics since its inception, Jay has honed his skills to bridge the gap between technical data analysis and strategic business planning. An educator at heart, he has developed and taught comprehensive digital marketing courses at both the undergraduate level and within organizations, enriching minds with his deep understanding of the digital analytics landscape.

His career, which began in systems analysis for spacecraft guidance, has evolved through roles that blend technical acumen with strategic vision across various sectors, including Fortune 500, Higher Education and Non-Profits. Certified in Google Analytics since 2011, Jay's leadership at Trionia has spearheaded successful online campaigns and innovative marketing strategies, underlining his commitment to leveraging data for growth. Jay's approach goes beyond the numbers; he's a storyteller who uses data to drive business success, making him a pivotal figure in the digital marketing world.

Media

More in this category: « GA4 IP Filters

Leave a comment

Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.