For tracking any submissions from your embedded Hubspot forms on your external website (not on Hubspot pages) you will want to add the following within your Google Tag Manager.
- Go to Tags and create a new Google Analytics: GA4 Event tag.
- Attach your existing GA4 Configuration Tag or paste in your GA4 Measurement ID
- Set the Event Name to hubspot_form_success
- Click on Triggering to add a new trigger and select Custom Event
- Set the custom events name to hubspot-form-success and to fire on All Custom Events
- Save this tag
- Go to Variables and add a new Data Layer Variable
- Set its name to hs-form-guid and use Data Layer Version 2
For actually trigger these events, go back to Tags and create a new Custom HTML tag and add the following.
<script type="text/javascript">
window.addEventListener("message", function(event) {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
window.dataLayer.push({
'event': 'hubspot-form-success',
'hs-form-guid': event.data.id
});
}
});
</script>
Save and publish your new tags and your should start seeing your HubSpot events tracking in Google Analytics 4.