Google Tag Manager

Overview

This document provides a step-by-step guide for web developers on how to track HubSpot form submissions using Google Tag Manager (GTM) and Google Analytics (GA). This integration allows for enhanced tracking capabilities, giving insights into user behavior and form submission sources.

Prerequisites

• Google Analytics account
• Google Tag Manager account
• HubSpot account

Instructions

Step 1: Set Up Custom HTML Tag in GTM

1. Create a Custom HTML Tag in GTM.
2. Name the tag appropriately (e.g., SCRIPT – HubSpot Form Listener).
3. Add the following script as the tag HTML and set the trigger to “All Pages”:

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

Step 2: Create a Variable for hs-form-guid

• Create a new variable in GTM to capture the ‘hs-form-guid‘ property from the data layer.

Step 3: Create a Trigger for the Data Layer Event

• Set up a new trigger in GTM for the data layer event that is pushed by the event listener script.

Step 4: Configure the Tag to Send Data to GA

• Create a new tag in GTM that uses the trigger from Step 3 and includes the HubSpot Form GUID to send data to Google Analytics as an event.

Step 5: Create a Goal in Google Analytics

1. Navigate to Admin > Goals in GA.
2. Set up a new goal with the following configuration:
   • Type: Custom
   • Name: Macro: Form Submission
   • Category: Form
   • Action: Submit
   • Label: (leave empty)
   • Value: Set according to the form’s purpose (static value or dynamic).

Optional: Assign Human-friendly Names to HubSpot Forms

1. In GA, go to Admin > Custom Definitions > Custom Dimensions.
2. Create two new hit-scoped dimensions: HubSpot Form GUID and HubSpot Form Name.
3. In GTM, override settings in the Event tag and add a new custom dimension with the index noted earlier.
4. Map the HubSpot Form GUID variable to the custom dimension.

Analytics Data Import

1. In GA, navigate to Admin > Data Import.
2. Create a new Data Set with the following details:
   • Type: Custom Data
   • Name: HubSpot Form Names
   • Schema: Key (HubSpot Form GUID), Imported Data (HubSpot Form Name)
   • Overwrite hit data: Yes
3. Download the schema template and populate it with the HubSpot Form GUIDs and corresponding friendly names.
4. Upload the completed file back into GA under the Data Import section.

Troubleshooting Data Import Issues

• Data may take up to 24 hours to propagate in GA.
• Ensure the data import is enabled for the correct view.
• Verify that there is data to report on.
• Note that changes will not affect legacy data.