Implement Identify calls with Hubspot Forms and Google Tag Manager

You'll first need to setup the Clearbit tag before continuing. If you haven't yet, here is where you can start!

Tracking Form submissions is essential to understand your customer’s journey and Conversion Rate Optimization (CRO). In this tutorial, you will learn how to leverage the HubSpot Forms API to report form submission events to Clearbit via Google Tag Manager.

 

Step 1: Create the Custom HTML Tag in Google Tag Manager

Screen_Shot_2021-08-12_at_5.39.33_PM.png

Tag Configuration:

  • Tag Type: Custom HTML
  • Tag Name: Forms - HS Submit Listener
  • Triggering: All Pages
  • Custom HTML tag content:
<script type="text/javascript">
window.addEventListener("message", function(event) {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmit') {
var emailField = event.data.data.find(function (field) {
return field.name === "email";
});
var submittedEmail = emailField.value;
window.dataLayer.push({
'event': 'hubspot-form-submit',
'hs-form-guid': event.data.id,
'hs-form-email': submittedEmail
});
}
});
</script>

 

Step 2: Add two dataLayer variables to read the HubSpot form’s GUID & Email:

Screen_Shot_2021-08-12_at_4.37.01_PM.png

Screen_Shot_2021-08-12_at_4.34.25_PM.png

Variable Configuration - GUID:

  • GTM Name: Forms - HS Form GUID
  • Variable Type: Data Layer Variable
  • Variable Name: hs-form-guid

Variable Configuration - Email:

  • GTM Name: Forms - HS Form Email
  • Variable Type: Data Layer Variable
  • Variable Name: hs-form-email

 

Step 3: Create the trigger

Screen_Shot_2021-08-12_at_4.03.15_PM.png

Trigger Configuration:

  • Trigger Type: Custom Event
  • Trigger Name: Event – HS Form Submit
  • Event Name: hubspot-form-submit
  • Trigger fires on: All custom events

 

Step 4 - Clearbit Identify Call Tag Configuration

Screen_Shot_2021-08-12_at_5.42.26_PM.png

Tag Configuration:

  • Tag Type: Custom HTML
  • Tag Name: Clearbit Identify Call
  • Triggering: Event - HS Form Submit
  • Custom HTML tag content:
<script>
var email = {{Forms - HS Form Email}}
var formid = {{Forms - HS Form GUID}}
clearbit.identify(email, {
"email": email,
"hubspot_form_id": formid
});
</script>

 

________________________________________________________________________________________

 

Now, you can preview your GTM Container and submit a form to ensure everything is set up correctly!

 

Optional things to consider:

  • The Hubspot Form Id (guid) is an optional trait that is not a required input in the Clearbit identify call. However, passing it in can provide useful insight on frequently submitted forms or web traffic. 
  • Additional traits - such as custom form fields - can also be passed into the Identify call for further customization. Just remember to setup and reference the correct variables!