HubSpot Form Listener Not Tracking in GTM

Developer Support CMS Development
1

Hi,

I have a form embedded on my website and I am trying to send an event when the form loads on my page.

I’ve added this script to GTM to track when the form has loaded.

This is the javascript I am using. Any thoughts on why I wouldn’t be seeing when the form has loaded?

<script type="text/javascript">
window.addEventListener("message", function(event) {
 if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormReady') {
 window.dataLayer.push({
 'event': 'hubspot-form-ready',
 'hs-form-guid': event.data.id
 });
 }
});
</script>
2

Hi, @LHobbs :waving_hand: Thanks for reaching out. Hey, @miljkovicmisa @stefen, do you have any experience or troubleshooting tips you can share with @LHobbs?

Thank you! — Jaycee

3

@LHobbs it could be because the script is running too later (after that event has already happened). For instance, if the google tag manager script is in the footer below the HubSpot form embed.

4

Hello @LHobbs , it seems you are using global events for embedded form. Have you tried binding the event directly to the embedded form like explained in this article?
Basically you would do something like this:

hbspt.forms.create({
 portalId: '',
 formId: '',
 onFormReady: function($form) {
 window.dataLayer.push({
 'event': 'hubspot-form-ready',
 'hs-form-guid': 'the form id' //this is also going to be available somewhere in $form
 });
 } 
});

If my answer was helpful please mark it as a solution.