Wednesday, 26 April 2023

Google Analytics 4 gtm.js not firing

I want to track submissions of Hubspot forms embedded in our contact pages with Google Analytics 4 & Google Tag Manager.​

Following this guide, I've created:

•A new GTM HTML tag called "Website Hubspot Form Submission Tracking" with the custom HTML in step 1 above to fire on two Triggers: the Contact Sales Page (URL path contains contact/sales) and the Contact Support Page (URL path contains contact/support):

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

• A new GTM trigger called "Hubspot Form Submitted" with event name hubspot-form-submit that matches the window.dataLayer.push({'event': 'hubspot-form-submit', code added above.

• A new GTM data layer variable called "Hubspot Form GUID" with the variable name hs-form-guid.

• A new GTM event tag, selecting the correct GA4 config variable, with event name website_contact_us_submitted to be triggered with the "Hubspot Form Submitted" trigger.

I've published these GTM changes.

If I select the "Website Hubspot Form Submission Tracking" tag and debug it, and visit our Contact Sales page, I see

Website Hubspot Form Submission Tracking Not Fired

If I open the Tag Not Fired, I see:

enter image description here

From this article, I see that placing the dataLayer declaration after the GTM container will cause the array to be reset, and the recommended fix for this is to be sure the data being sent to the dataLayer is being pushed onto the existing dataLayer using dataLayer.push.

However, the code sending data to the dataLayer in the first article I linked to does just that.

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

Why is the gtm.js event not firing on the Contact Support & Contact Sales pages?

Help appreciated.



from Google Analytics 4 gtm.js not firing

No comments:

Post a Comment