Legacy: Implement Identify Calls with HubSpot Forms and Google Tag Manager

Last Updated: March 6, 2024

🔍 Please note: This article is for customers on Standard Bundle, Enrichment, or Clearbit Platform plans. 

❗Please note: If you are using Clearbit's HubSpot Form Shortening solution, you do not need to follow these steps, instead make sure you've toggled on 'Track Web Activity' on the Forms Management page.

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.
   
   

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:

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.

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.

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!