Tracking Hubspot forms in Google Analytics 4 for external web pages

[JGajic]

Hello, does anyone have a solution for how to track Hubspot forms in Google Analytics 4? Forms are implemented on external web pages (not Hubspot pages).

[Revvmarketing]

Hi, it's actually quite simple. I made a video tutorial on it here. 

https://www.youtube.com/watch?v=LA3t1jbCY3M

[codeandtonichq]

TRACKING FORM NAMES - EASIER METHOD

We can't get the name of the form. But if we listen for "onFormSubmit" instead of the 'onFormSubmitted' we can get all the fields user has filled. It seems to be a superior way. We can then create a hidden field and add the form name as the default value and track the form name without a lookup table in Google tag Manager. 

Tutorial here (not yet GA4 version but 98% the same)

[codeandtonichq]

Super easy method

This tutorial is the quickest way. I'd recommend Tag Manager but for most people it's too complex.
Track Hubspot forms with Google analytics. No Google Tag Manager! 

[birdman]

@CamiG It's a variable of type LookUp table. Input side the HubSpot Form ID. Output side a name you can assign. For example: "9373475934759379573952" -> "Newsletter signup". I assume you know how to find the Form ID.

[CamiG]

Yes indeed, thank you very much! I have added {{Form ID}} as the Input Variable as well.

[Shep]

@birdman thanks for these instructions - super helpful. However I can't seem to get it working. I'm stuck at the same point as CamiG - creating the LookUp table. I've created the LT variable as you described but think the Input Variable value might be wrong?

@CamiG did using the value {{Form ID}} work for you? Or did you need to create a new value/variable specifically for HS form IDs? When I go to preview mode in GTM I can't see the event firing on form submission.

[birdman]

Ok. I got it working. In the screenshot you see how I implemented this. Likely need to adjust for your own environment. {{LT - FormName}} is a lookup table with HubSpot formIDs.

[CamiG]

Hi @birdman, 

I've managed to create the tags, trigger and variables needed, which are working correctly, but now I'd like to know which forms are submitted, and it seems that you created LT - FormName variable in order to get this information. How did you manage to create it?

Thanks a lot in advance!

Camille

[Ben_M]

I just use the Hubspot form listener. This just pushes an event to the data layer that I would use to trigger GTM to capture the custom event.

<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>

[JGajic]

Hi Ben,

thanks for your response!

So, as I understood, I need to add this code to GTM? Or? If there is any tutorial on how to implement this code, could you send it to me, please?

Thank you a lot!

[jahlo]

This tutorial worked for us and is very straight forward with all above steps, hopefully, can help someone here too: https://www.youtube.com/watch?v=xd-4G0VSb2Y

[aljawo]

Thanks! It definitely works but you need the form to be embedded in any of your site's pages

[PamCotton]

Hi @jahlo thank you for sharing this tutorial with us!

Kindly,

Pam

[Ben_M · Accepted solution]

There's 3 parts to this.  Setting up that script as Custom HTML is part 1. Part 2 is setting up a trigger in GTM to listen for that event. And then step 3 is to create a Tag for your GA4 event to listen for that event trigger.

How are you tracking your form submissions today in Universal Analytics?  Your forms could be getting tracked this same way through UA, but Events are just setup differently in GA4.  So in UA you would have a category, action, and label to your events and in GA4 they are more flexible to be configured to your own parameters but those parameters have to be setup by you as many parts of this do not automatically populate.  If this already exists, you don't need to rebuild everything different for GA4, just replace the parts that are no longer relevant.  If you are not using this method today for event tracking, and are using something different we may be able to tie into that to prevent a disconnect from your old data to your new.

[birdman]

How does the GA4 event tag look in GTM? Do you have an example? Especially the Event Parameters are not clear to me. 

[Ben_M]

Looking back to your previous post, your setup appears to be correct.  If the event parameters are not working, then you probably need to review your GA4 Custom Definitions to ensure that your custom dimensions are named and that their scope matches the scope of the form submission (event).