I followed the tutorial to track hubspot forms in GTM, but the event names aren’t showing up in GTM, and my GA4 isn’t recording them. How can I troubleshoot this? Could this issue be related to problems appearing in the console?
Hi @CAiracer,
Can you share the code you have in the Custom HTML tag (HubSpot Form Submission Custom) ?
Also, are you using the new form editor or the legacy one?
Hi，Thx for replying！
I use new form editor.
And the code are below：
<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>
Sure thing. In this case, it looks like the code you have is related to the legacy forms and you will need to update the event listener to look for the new HubSpot form events:
<script>
window.addEventListener('hs-form-event:on-submission:success', (event) => {
const { formId } = event.detail;
window.dataLayer.push({
'event': 'Hubspot-form-success',
'hs-form-guid': formId
});
});
</script>
Hope this helps!
Hi!
I tried running the code you provided, but I got the following error:
Error at line 2, character 64: This language feature is only supported for ECMASCRIPT_2015 mode or better: arrow function.
So in the end, the code I used in the custom HTML is like this:
<script>
window.addEventListener(‘hs-form-event:on-submission:success’, function(event) {
var formId = event.detail.formId
window.dataLayer.push({
‘event’: ‘Hubspot-form-success’,
‘hs-form-guid’: formId
});
});
</script>
However, I still don’t see the HubSpot form submit event appearing in the timeline. Could you help me check what might be causing this?Below are the timeline in GTM.
Oh, that’s right, GTM dislikes modern JS - sorry about that.
Your new code is close but there might be a semi-colon missing after the variable declaration.
Updated version:
<script>
window.addEventListener('hs-form-event:on-submission:success', function(event) {
var formId = event.detail.formId;
window.dataLayer.push({
'event': 'hubspot-form-success',
'hs-form-guid': formId
});
});
</script>
I tested the code this time and I can see the form success event being logged by the tag assistant after a form submission:
Also, you might need to double check your “GA-Hubspot form submission” tag to make sure that the event name in the trigger matches exactly what you have named the event in the custom HTML (i.e. ‘event’: ‘hubspot-form-success’)
Thx again for your patient and thougtful answers.
It’s very weird,the event form success event is still not being logged by the tag assistant after a form submission,and I think the trigger name is matched with the code of Customer HTML.
The current situation is Customer HTML Tag is fired, but the GA4 still not fired.
