Implement Identify calls with Hubspot Forms and Google Tag Manager

Working with HubSpot forms? You can take advantage of the form embed code to make your identify call to Clearbit X without having to rely on a developer.

As a reminder, an identify call allows you to get a clear picture of the person behind the anonymous IP address visiting your website. Tracking Form submissions is essential to understand your customer’s journey and Conversion Rate Optimization (CRO). You can find a more detailed explanation of identify calls here. If you're using Google Tag Manager, you can find implementation instructions here. 

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

 

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!