Implement Identify calls with Hubspot Forms and Google Tag Manager

Last Updated: May 23, 2022

Working with HubSpot forms? You can take advantage of the form embed code to make your identify call to Clearbit 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

  1. Install the Clearbit Tag
  2. 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>

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

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

5. Configure the Clearbit Identify Call Tag.

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!

💡 Clearbit Tips:

  • The Hubspot Form Id (guid) is an optional trait that is not a required input in the Clearbit identify the 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!