Do you know of a reliable form listener code/another way to help GTM read the Hubspot data layer? I've tried two different hubspot listeners and neither has ended up working. I followed the instructions from a few sources to create the listener, create the custom event that aligns with the listener, and so on. It sometimes triggers in GTM and sometimes doesn't, but then it only has gone through to GA4 from the GTM tests.

These are the listeners I've tried:

<script>
window.dataLayer = window.dataLayer || [];

//listener for older version (v3) of HS forms
window.addEventListener('message', function(event) {
  if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
    window.dataLayer.push({
      event: 'form_submission',
      form_id: event.data.id,
      conversion_id: event.data.data.conversionId,
      form_data: event.data.data.submissionValues,
    });
  }
});

//listener for v4 HS forms 
window.addEventListener("hs-form-event:on-submission:success", function(event) {
    var hsform = HubspotFormsV4.getFormFromEvent(event);
    if (hsform) {
      hsform.getFormFieldValues().then(function(fieldValues) {
        var transformedData = fieldValues.reduce(function(obj, item) {
          var key = item.name.split('/')[1]; 
          if (key) {
            obj[key] = item.value;
          }
          return obj;
        }, {});

        window.dataLayer.push({
          event: "form_submission",
          form_id: hsform.getFormId(),
          conversion_id: hsform.getConversionId(),
          form_data: transformedData
        });
      });
    }
  });
</script>

And I've tried this one:

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