Add Hubspot event callback script to track form signups

Context

We need to find a solution for tracking Hubspot forms in Planet 4 pages that aligns with the current tracking setup we use for the Engaging Networks Form Block. 

Task

As we are doing for Hubspot Landing Pages, we can implement an event listener (provided by Hubspot documentation) on Planet 4 pages that will capture any signups happening on HS Forms. 

The script should capture the event and fire a dataLayer event once the signup is successful. We can use the dataLayer standards events such as formSubmission to facilitate the Google Analytics events set up in Google Tag Manager.

Script

<!-- Hubspot Form Event Listener: Form Submission -->
<script type="text/javascript">
window.addEventListener("message", function(event) {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
window.dataLayer.push({
'event': 'formSubmission',
'hs-form-guid': event.data.id
});
}
});
</script>
<!-- END Hubspot Form Event Listener: Form Submission -->
 

Test

**We must test if the script is firing the correct dataLayer event once the signup is completed. Important to test if the event is captured in Google Tag Manager in the following page and different use cases:

1. Form with inline thank you message
2. Form with redirect to a Hubspot page
3. Form with redirect to a Planet 4 page
4. Form set as RAW HTML 

Notes

So far, the method of using the callback script to track form submissions is not working with Hubspot pop-up forms.

Comment on this forum: "Pop-up forms don't currently trigger global form events".