How to (correctly) track Hubspot Form Submissions

Data collection and tags
1

Hi people, I hope you can help me here. I’m not sure if it’s brain fog or what but I can’t seem to track submissions on an embedded Hubspot form here :S

  1. We have the hubspot tracking tag enabled and working
  2. We’d need to track these submissions and then be able to use them in reports on Piwik analytics (event and also Goal).
    I have read help documentation (How to track a form submission | Piwik PRO help center), but I don’t seem to get it working, I can’t find css class, etc. I remember that back in our GTM days, someone used a hubspot form event listener, but I’m not sure if that applies here.
    Thanks a lot in advance :four_leaf_clover::pray:t2:
    Elena
2

Hi Elena!

Yes, I think the same approach would still apply with the Piwik PRO Tag Manager. Hubspot forms are a bit different as they are embedded in an iframe, so the default approach (one described in the Help Center article) won’t work.

You should be able to capture the form submission event with this:

window.addEventListener('message', event => {
   if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
       var _paq = _paq || [];
       _paq.push(["trackEvent", "Form submission", "Hubspot form submitted"]);
   }
});

This is just an example, so feel free to change the custom event to whatever you like.

3

Thank YOU @anthonybartczak so no opening / closing script tags?

1280×799 109 KB

4

No Hubspot GUID either?
This is exactly the script we had on GTM:

Captura de pantalla 2023-05-23 a las 15.08.17
Captura de pantalla 2023-05-23 a las 15.08.171804×1204 174 KB

5

Hi Elena!

My example requires both the opening and closing tag (<script></script>). You can also add the ID too, it all depends on what kind of data you’d like to capture.

You can even use the GTM tag that you have created, the one I posted was just an example of the event handler. Please note that the tag you are currently using in GTM is pushing a dataLayer event which has to be picked up later by a dataLayer event trigger.

6

Thank you Anthony, eventually for the past familiarity with GTM, I followed this tutorial here and it seems to be working. Tracking Hubspot Form Submissions with Google Tag Manager - Updated | 3WhiteHats
:wink:

PS: I will wait to see if Piwik Analytics picks the event correctly too and it’s seen in the events report.

7

Can anyone help with code to extract user-entries from this form upon submit?
It is a Hubspot embedded form via iFrame.

8

I also have a challenge when it comes to the Hubspot form and validation. In Piwik Pro, it states: Note: If a form field returns a native HTML5 validation error, the form submission trigger won’t fire your tag. But that’s not happening. The Hubspot form has input fields that are required and light up red if I press submit. However, when I press submit, the Form Submit trigger in Piwik still fires. I’m not using an iframe; I’m using the Hubspot embed script.

Does anyone have a solution for this?

9

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.