Tracking multiple Hubspot forms on a single page through Tag Manager

[markv]

I recently used this tutorial to set up form tracking via an event listener through GTM: https://www.3whitehats.com/knowledge/tracking-hubspot-forms-google-tag-manager/

I'm now at a point where I need to differentiate between 2 forms on one page. With the current set-up, a tag fires on both a standard contact form submit and a newsletter sign up. Anyone deal with this issue before/have any tips?

[IsaacTakushi · Accepted solution]

Welcome, @markv.

You can modify the Custom HTML Tag with a JavaScript conditional statement to distinguish between the two form guid values:

<script type="text/javascript">
  window.addEventListener("message", function(event) {
    if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
    	if (event.data.id == 'CONTACT-FORM-GUID-HERE') {
    		window.dataLayer.push({
        		'event': 'event-for-contact-form',
        		'hs-form-guid': event.data.id
     		 });
    	} else {
    		window.dataLayer.push({
        		'event': 'event-for-newsletter-signup',
        		'hs-form-guid': event.data.id
     		 });
    	}
    }
  });
</script>

Replace CONTACT-FORM-GUID-HERE with your contact form's guid. If you're not sure how to find it, check out this article.

Hope this helps!

[markv]

This works great! Thanks!

[IsaacTakushi]

Glad I could help, @markv!