Google will be phasing out its Universal Analytics (UA) in July 2023, leaving most of us with no choice but to use its successor Google Analytics 4 (GA4). While the two platforms differ a lot in their functionality, some things, such as form tracking, will remain similar — if not the same.
This guide will show you how to track HubSpot from submissions with Google Tag Manager (GTM) and GA4. Since we will be using GTM throughout the whole process, ensure that you have already created your GA4 and GTM accounts. Let's get to work!
Step 1: Create a new tag in GTM
The first thing you will need to do is create a custom HTML tag in Google Tag Manager.
In the Tags section, click New -> Tag configuration -> select Custom HTML.
Once you have done this, copy and paste the code below into the HTML section.
1<script type="text/javascript">
2 window.addEventListener("message", function(event) {
3 if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
4 window.dataLayer.push({
5 'event': 'hubspot-form-submit',
6 'hs-form-guid': event.data.id
7 });
8 }
9 });
10</script>Next, in the Triggering section, choose where you want this script to fire. In my case, I selected all pages, but you can also pick specific pages where your Hubspot forms are located. It’s entirely up to you how you go about it. For simplicity reasons, I will have it trigger on all pages.
You can name this trigger whatever you want, but I suggest you have some sort of naming convention to help you keep track of your tags and their purpose. For this reason, I named my tag “Hubspot - Form Submit Listener”, as it will essentially "listen" for any Hubspot form submissions on my website.
Step 2: Create a new trigger
The second thing you will need to create is a trigger.
In the Triggers section, click New -> Trigger configuration -> select Custom Event.
In the Event name section, type hubspot-form-submit, and select All custom Events. Name the trigger (e.g. HS Form Submission) and save it.
Again, you can use your custom names; however, make sure that they match the event name(s) outlined in the code in the previous step, otherwise the script won’t work properly.
Step 3: Create a data-layer variable
Go to Variables section, scroll down to user-defined variables, click New -> Variable Configuration -> select Data Layer Variable.
In the Data Variable Name section, type hs-form-guid, and in the Data Layer Version, select Version 2.
This variable is responsible for storing Hubspot form IDs, which will then be sent to GA4. This way, you'll be able to determine which HubSpot form was submitted.
Step 4: Create GA4 event tag
Almost done. In the last step you will need to create yet another tag.
Go back to the Tags section, click New -> Tag Configuration -> select Google Analytics: GA4 Event.
In the Configuration tag input, select the GA4 account where you want to be sending the conversions.
In the Event name, type hs_form_submission.
Now, every time a visitor submits a HubSpot form, GTM will send an event to GA4 under the name of hs_form_submission.
Now go to Event Parameters, and in the Parameter name input, type hs_form_id.
In the value input, select the HS Form ID variable you’ve created in step 3. You can search the different variables by clicking the icon right next to the input box.
You can also add Page Path in the Event Parameters, but this is optional. It will simply tell you on which page the submission has occurred.
In the Triggering section, add the trigger that was created in step 2. Save your work, and you're done.
Wrapping up + some notes
While your GTM tag, trigger and variable internal names don’t truly matter, I suggest you name them in a way that will help you recognize what each of them does.
Before deploying to live environment, I strongly recommend that you test your work!
Keep in mind that it may take up to 24 hours for the conversion to show up in GA4.