Hey everyone, I’m having a weird issue with tracking Hubspot form submissions in Google Tag Manager. Our site is a single-page app with three Hubspot forms. I set up a custom HTML listener for successful submissions and used a lookup table for form IDs.
The problem is when I test it and fill out more than one form in a session, the second submission shows up twice in the debug console. I don’t want to set the tag to fire once per event because users might need to submit multiple forms.
I’m thinking about asking our devs to add a dataLayer push for each form. Is that the best way to go? Or is there another fix I’m missing?
Really appreciate any help or ideas you can share. Thanks!
I’ve dealt with this exact problem on a client’s site. Here’s what worked for us:
Instead of using a custom HTML listener, we switched to the native ‘Form Submit’ trigger in GTM. It’s more reliable for SPAs.
We then created a custom JavaScript variable to extract the form ID. This way, we could differentiate between forms without relying on a lookup table.
The key was adding a short delay (about 500ms) before firing the tag. This prevented double-firing in most cases.
For extra safety, we implemented a simple timestamp check. If two submissions for the same form ID occurred within 2 seconds, we ignored the second one.
These steps solved our double-triggering issues without involving devs. Much easier than adding dataLayer pushes to every form. Hope this helps!
yo grace, ive seen this before. its probs cuz ur listener is firing twice. try using the built-in form submit trigger instead. also, u could add a cooldown period using javascript - like set a flag after submit and check it before firing again. if that dont work, yeah maybe ask ur devs for that datalayer push. good luck!
Have you considered using the History Change trigger in GTM? Since you’re working with a single-page app, this might be more reliable than form submit events. You could set it up to fire when the URL changes after a form submission.
Another approach is to use a custom JavaScript variable to detect form submissions. This can be more precise than relying on built-in triggers, especially for SPAs.
If these don’t work, implementing a debounce function in your custom HTML listener could help. It essentially delays the execution of your tag, reducing the chance of double-firing.
Lastly, if you do go the dataLayer route, ensure each push includes a unique identifier for the form. This will make your tracking more robust and easier to debug in the long run.
I’ve encountered a similar issue before and understand how frustrating it can be. Before involving your development team, check if there might be a race condition or asynchronous behavior in your custom HTML listener. If the listener isn’t properly debounced, it can trigger multiple times. You might also consider implementing a cooling period, for example, using a first-party cookie or localStorage to set a temporary flag after submission. If these measures fail, then a dataLayer push with unique identifiers per form could be the most robust solution.