I’m trying to set up tracking for HubSpot form submissions using Google Tag Manager but running into issues. I followed a tutorial but the events aren’t showing up when forms get submitted.
I’ve set up a custom HTML tag that listens for form events, plus I created a trigger and another tag to send the data to Google Analytics 4. I also made a variable to capture the HubSpot form ID.
Here’s the code I’m using in my listener tag:
window.addEventListener("message", function(eventData) {
if(eventData.data.type === 'hsFormCallback' && eventData.data.eventName === 'onFormSubmitted') {
window.dataLayer.push({
'event': 'hubspot_form_complete',
'form_id': eventData.data.id
});
}
});
The listener tag fires when the page loads initially, but nothing happens when I actually submit a HubSpot form. Has anyone dealt with this before? What could be preventing the form submission events from being captured?
hey, did u check the embed method? not all of them send hsFormCallback events. open the dev tools console and watch for any messages when u submit. maybe the form is using a diff callback method.
Here’s what tripped me up with GTM and HubSpot tracking - HubSpot forms load async after your listener’s already running, but the real culprit might be domain restrictions. If your forms come from a different domain than your main site, browsers will block those postMessage events. Throw some debug logging in your event listener first - see if any messages get through at all. Also check if you’ve got multiple HubSpot portals running or if the form ID in eventData actually matches what you expect. I’ve seen sandbox vs production portals use totally different event structures. SwimmingShark’s timing issue is legit too, but I’d verify the messages reach your listener before anything else.
Had the same issue last year with HubSpot forms in GTM. Your listener probably isn’t initializing before the HubSpot script loads. Wrap your event listener in a function that runs after HubSpot loads completely, or switch your custom HTML tag to fire on DOM Ready instead of Page View. Also check if your HubSpot form actually uses embedded JavaScript - if it’s an iframe, it won’t trigger the message events you’re listening for. Just inspect the form element in dev tools to verify.
check if u’ve got ad blockers or privacy extensions on - they can block HubSpot scripts. also, try adding a console.log(eventData) in your listener to see what’s coming through. the event structure might be different than what u expect.