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:

  1. A new GTM tag called “Website Hubspot Form Submission Tracking” for 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)
  2. 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 in 1.
  3. A new GTM data layer variable called “Hubspot Form GUID” with the variable name hs-form-guid.
  4. 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.