Set Up the Clearbit Identify Call Through GTM Using a Custom Event Listener
Last Updated: June 2, 2022
Google Tag Manager’s built-in “Form Submission” trigger doesn’t always work as expected as other JavaScript on the website might interfere with its functionality. For those scenarios, we can create a custom event listener that correctly picks up any form submission and fires the Clearbit identify call.
How To Set Up Clearbit Identify Call through GTM Using a Custom Event Listener
- Create a Custom HTML tag that adds the Clearbit tag and listens for form submissions.
The first script block creates a “submit” event listener, and sends a data layer eventform-submitted
after a form is submitted and includes the email in the data layer variablesubmitted-email
; The second script block adds the Clearbit tag:
<script> (function() { // Fetch the form element on the page var form = document.querySelector("form");
// Set useCapture to true var useCapture = true;
// Add 'submit' event listener to form with 'useCapture' as 'true'
form.addEventListener('submit', function(event) {
var form = event.target;
var email = ''; // Grab the email field's value entered in the form
for (var i = 0; i < form.elements.length; i++) {
var element = form.elements[i];
if (element.value.includes("@")) {
email = element.value;
}
}
window.dataLayer.push({
"event": "form-submitted",
"submitted-email": email
}); }, useCapture);
})(); </script>
<script src="https://tag.clearbitscripts.com/v1/pk_<your-publishable-key>/tags.js"></script>📝 Please note: If you have an existing Custom HTML tag using the Clearbit tag, just modify it to include the first script block.The tag should fire on All Pages. - Create a trigger that uses the Custom Event trigger type and has the value
form-submitted
that matches the data layer event being created after a form submission. This trigger should fire on All Custom Events. - Create a data layer variable that stores the email that was used in the form submission. Make sure the variable type is Data Layer Variable and the Data Layer Variable Name equals
submitted-email
. - Create a Custom HTML tag that fires the identify call and grabs a reference to the
submitted-email
data layer variable and calls the identify method sending it’s value as the unique ID and email trait.
<script>
var email = {{Submitted Email}}; clearbit.identify(email, { "email": email });
</script>
Articles in this section
- Build a Dashboard in Google Analytics To Track Reveal Data
- Clearbit for Marketo: Database Enrichment Troubleshooting Guide
- Connect HubSpot to Clearbit
- Customize your Destination Messages with Liquid Templating
- How to Build a Report in Salesforce with Clearbit
- How to Create a Job Change Report in Salesforce
- How to Install, Uninstall and Test Clearbit in a Salesforce Sandbox
- Implement Identify Calls with Google Tag Manager
- Implement Identify Calls with HubSpot Forms
- Implement Identify calls with Hubspot Forms and Google Tag Manager