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 

1. 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 event form-submitted after a form is submitted and includes the email in the data layer variable submitted-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.
   
2. 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.
3. 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.
4. 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>