CMS Development

LHobbs
Membre

HubSpot Form Listener Not Tracking in GTM

Résolue

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>

 

0 Votes
2 Solutions acceptées
stefen
Solution
Conseiller clé | Partenaire solutions
Conseiller clé | Partenaire solutions

HubSpot Form Listener Not Tracking in GTM

Résolue

@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.

Stefen Phelps, Community Champion, Kelp Web Developer

Voir la solution dans l'envoi d'origine

miljkovicmisa
Solution
Contributeur de premier rang | Partenaire solutions Platinum
Contributeur de premier rang | Partenaire solutions Platinum

HubSpot Form Listener Not Tracking in GTM

Résolue

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.

Voir la solution dans l'envoi d'origine

3 Réponses
miljkovicmisa
Solution
Contributeur de premier rang | Partenaire solutions Platinum
Contributeur de premier rang | Partenaire solutions Platinum

HubSpot Form Listener Not Tracking in GTM

Résolue

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.

stefen
Solution
Conseiller clé | Partenaire solutions
Conseiller clé | Partenaire solutions

HubSpot Form Listener Not Tracking in GTM

Résolue

@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.

Stefen Phelps, Community Champion, Kelp Web Developer
Jaycee_Lewis
Gestionnaire de communauté
Gestionnaire de communauté

HubSpot Form Listener Not Tracking in GTM

Résolue

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

 

Thank you! — Jaycee

linkedin

Jaycee Lewis

Developer Community Manager

Community | HubSpot

0 Votes