Hola! ¡Tenemos nuestra Comunidad en Español!

Tracking multiple Hubspot forms on a single page through Tag Manager

SOLVE
Highlighted
New Contributor

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?

Reply
0 Upvotes
1 Accepted solution

Accepted Solutions
HubSpot Moderator

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!

Isaac Takushi

HubSpot Developer Support
Reply
0 Upvotes
3 Replies
HubSpot Moderator

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!

Isaac Takushi

HubSpot Developer Support
Reply
0 Upvotes
New Contributor

This works great! Thanks!

Reply
0 Upvotes
HubSpot Moderator

Glad I could help, @markv!

Isaac Takushi

HubSpot Developer Support
Reply
0 Upvotes