Introduction
If you’re familiar with HubSpot, you might already know that it’s a fantastic CRM with a ton of features and tools you can leverage to improve lead quality and sales for your brand. No, HubSpot did not pay me to say any of this. (I wish they had, though).
The challenge with most CRMs and form builders like Ninja Forms, WPforms, or even HubSpot is mapping lead data back to CRMs like HubSpot. In many cases, you have to use a webhook software like Zapier to connect your form to your CRM of choice.
This blog, however, will walk you through the process of limiting your need to use a webhook to map lead data back to HubSpot by using embedded HubSpot forms and how to properly track multiple HubSpot forms when you need to use two or more forms on the same page.
I will cover everything you need, including setting up the base GTM tags to track the initial form submissions and the necessary custom codes, tags, and triggers to track multiple forms.
This guide is intended to answer a few questions regarding tracking HubSpot form submissions.
- How to use HubSpot embedded forms instead of mapping form submissions into HubSpot with a webhook like Zapier
- How to track multiple HubSpot form submissions across your website or when used on the same landing page
- How to track HubSpot form submissions in GTM
- How to track HubSpot form submissions in GA4
Quick Shout Out
Before I dive into the rest of the article, I want to give a big shout-out to Julius Fedorovicius from Analytics Mania.
Thanks to the HubSpot Meeting conversion tracking video he shared on YouTube, I found the missing piece that allowed me to create the individual tracking needed for all forms on my website.
If you’re unfamiliar with Julius, he is considered one of the GOATs in the GTM and Google Analytics tracking community. I have followed him for years, and thanks to his blog and now YouTube videos, I have resolved various conversion tracking issues across websites and marketing campaigns over the years.
Julius, if you read this, thanks again for all the amazing content and resources you share!
Tracking HubSpot Forms Without Webhooks Like Zapier
The primary reason for creating this walkthrough was to limit webhooks to connect forms to our HubSpot CRM and reduce the number of platforms we use for lead and sales prospecting. Currently, we prefer leveraging multiple Hubpot forms to collect lead data across our website rather than investing in different marketing tools to accomplish the same task.
Could we use multiple marketing platforms to track each funnel we use to collect leads? Of course, but what’s the point? Our current HubSpot subscription allows us to track form submissions across our website, track blog subscribers, and booked meetings from one platform.
Logically and financially, it didn’t make sense for us to set up accounts with platforms like Calendly, MailChimp, Zapier, HubSpot, Salesforce, Google Calendar, and Google Meet to track leads and how we engage with those leads.
Eventually, we might need to build more complex funnels that require other platforms, but we prefer to keep our systems as simple as possible for now.
The simplicity saves us money and allows us to invest more time into building strategies for our clients because we’re not spending a lot of time interacting with all of these different platforms to track customer interactions. Our approach helps us automate nearly the entire client prospecting process.
We also reduce the risk of losing valuable conversions if HubSpot or Zapier updates their platforms, which could affect the webhooks or APIs needed to map lead data into our CRM.
In the end, it’s a win-win.
How To Track HubSpot Form Submissions in GTM
Now that you understand why we’re trying to simplify our lead collection process using only HubSpot. I will now walk you through tracking multiple HubSpot forms on your website or landing page.
This section will show you how to track HubSpot form submissions in GTM. It includes setting up the necessary tags and triggers to start the form-tracking process.
If you don’t plan to use multiple HubSpot forms on your website, this step, followed by tracking HubSpot form submissions in GA4, might be all you need to successfully track form submissions on your website and then pass that data into your HubSpot CRM.
However, if you plan to create a second form to track email subscribers or use HubSpot’s calendar invite functionality, you’ll need to follow this entire guide.
I suggest following the entire process because you WILL probably need to track a second HubSpot form as you work towards improved sales automation.
By going through this process now, you can avoid the headache of embedding a second form, and your form tracking stops working because you forgot to set up the necessary tracking scripts to ensure that all forms are tracking correctly.
Initial Set Up: Custom HubSpot Form Listener
For this form tracking setup to work, you need to create a custom HTML tag inside Google Tag Manager (GTM). The purpose of this form listener tag is to inject a bit of code on your website that will pass through two events in your website’s data layer.
When someone successfully submits a HubSpot form, the custom HTML tag listens for the two events listed below, which will then successfully fire your tracking tag.
The events are listed below.
- ‘HubSpotFormSubmit’
- ‘HubSpotFormId’
For those more familiar with GA4, the new conversion tracking is based on events, which are actions someone takes on your website. For more granularity, the events can be turned into key events, similar to conversion goals in the now-retired Universal Google Analytics.
This step is super important if you set up a custom conversion inside GTM to track when someone submits a HubSpot form and is then redirected to a custom URL, such as a Thank-You page.
If you use more than one HubSpot form on your website or page, the page URL tracking trigger becomes useless.
Instead, this custom HTML trigger will allow GTM to monitor when someone successfully submits a form by listening for the ‘HubSpotFormSubmit’ event. Next, it will track the HubSpot form ID by listening for the ‘HubSpotFormId’ event to identify which HubSpot form was submitted.
Every HubSpot form has a unique form ID, which will come in super handy later when we set up the tracking to differentiate between forms being submitted.
Let's Create A Custom HTML HubSpot Form Listener Tag
Go to GTM, create a new tag, select custom HTML as your tag configuration, and copy and paste the code below into the Custom HTML section.
To be safe, copy the code below and paste it into a notepad free of rich text editing so the code functionality is not affected. If you’re not sure, double-check the screenshot below.
Be sure to name your tag according to your company’s naming convention best practices (see our example).
Next, you will want to set your tag’s trigger to fire on All Pages. After you have selected the All Pages trigger, click the save button to save your new tag.
A quick note: You need to use the All Pages trigger because this tag will listen when a page on your website contains a HubSpot from when your website finishes loading on a browser.
Do not use any other triggers for this tag! From now on, this tag will be your base tracking tag for all HubSpot forms. If you plan to use HubSpot’s meeting calendar, you will need to set up a second form listener just for the meeting calendar because the event IDs for the meeting calendar are slightly different from the form tracking event IDs.
The Hubspot meeting calendar tracking will be a guide for another day.
<script type="text/javascript">
function handleMessage(event) {
if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
window.dataLayer.push({
'event': 'hubspotFormSubmit',
'hubspotFormId': event.data.id
});
}
}
window.addEventListener("message", handleMessage);
</script>
Test Your New Custom HubSpot Form Listener Tag
This step is totally up to you but is not required now. If you want to see how this tag works, activate the debug view in GTM, enter your website’s URL containing your form, and once the page finishes loading, you will see your tag fired along with some of the other base tracking tags on your website (no form submission required to test).
If you do not see the form listener tag you created in the tags that fired section, double-check the HTML code, which might have been copied and pasted incorrectly.
This is usually the culprit this early in the process.
Create A Custom Form Submit Variable
This next step is the most important piece that prevents you from properly tracking multiple HubSpot forms on your website. We identified the missing piece connecting this entire tracking process thanks to Julius’s meeting calendar tracking guide.
The biggest issue we’ve identified with using HubSpot form tracking with GTM is that the two platforms don’t play nicely with each other.
Yes, it’s super easy to set up conversion tracking for a singular HubSpot form with GTM, but when you add another form or HubSpot meeting calendar, all hell breaks loose.
For several months, we couldn’t figure out why our form conversion tracking didn’t work when we introduced a second form on the site. In many cases, we noticed that testing the forms would often “break” GTM when we tested a form submission.
This was because we used a URL trigger to fire our form submission tag when a successful form submission was redirected to a Thank-You page. Since HubSpot injects a bit of code at the end of each successful submission’s URL, GTM kept getting disconnected, which also affected our GA4 data.
While our form submission email sequences, lead notifications, and leads funneling into our CRM were working, we noticed the data collected in GA4 was inaccurate.
We often could not accurately see where people converted because GTM fell off after the submission, preventing GA4 from tracking the page visit.
Essentially, GA4 thought the visitors on our site were being referred from HubSpot because they were getting treated as brand-new sessions after each successful form submission.
Once we discovered this step, we updated our form submission trigger to fire when a HubSpot form was submitted with a unique form ID. GTM then picked up the unique form ID in the website data layer, which ultimately fired the correct form conversion tag.
This custom variable looks for the event ‘HubSpotFormId’ and replaces the event with the form’s unique ID. Whoop whoop! We’re back on track, baby!
Below is a screenshot of the custom variable you need to set up.
To create the Custom Variable above, click the Variables (Lego brick) icon in the left navigation bar in your GTM account.
Scroll down to the User-Defined Variables and click the New button to create your new variable.
For the Variable Type, select Data Layer Variable. In the Data Layer Variable Name, you want to copy-paste the hubspotFormId event from your tracking HTML code. Leave the Data Layer Version as version 2.
Click save, and you’ll return to your main GTM menu. You’ll notice my variable already references two triggers. That’s because I already use this Custom Variable with the two forms I have set up. Your Custom Variable won’t be linked to anything yet.
Create Tags For Each Form You Want to Use
Now that your base tracking tag is working (if you tested it in the previous step), you need to set up custom conversion tracking for each HubSpot form you plan to use on your website.
In our case, we have a conversion tracking tag for our Contact Us form and a separate conversion tracking tag for our Newsletter Subscribers form.
For the rest of this guide, I will use our Contact Us form as an example.
Create a new tag in GTM, select GA4 Event as your tag configuration, and set the name of your event to whatever you are trying to track. Pay close attention to this: once you complete the setup, the event’s name will be passed to GA4 when your form is successfully submitted. Likewise, this event will be turned into a key event (more on this later in the guide).
You will want to use your GA4 Measurement ID for the measurement ID field. In our case, we turned our GA4 measurement ID into a constant variable, which we could select by clicking the Lego brick icon to the right (that’s why you see the measurement ID labeled constant-ga4 measurement ID and not the numeric GA4 Measurement ID from our GA4 account).
Next, you will want to update the Event Parameters sections so that when someone fills out a form on your site, GA4 will track the page URL where the conversion took place and whether the person started on a page but converted on a second or third page, which is treated as a referring page. This part is not required but creates more granularity when tracking form submissions.
Before saving your tag, you will need to create a trigger for when your tag fires and collects the desired action, which, in this case, is when someone successfully submits a form on your website.
Let’s move on to that step.
Setting Up Your New Tag Trigger
Remember how I previously mentioned that if you were using URL or page redirects as your tag trigger, they would stop working when you add a second form or calendar to a page?
Here’s how we prevent that while ensuring we can see which form drives the most conversions on our site.
Every HubSpot form you use on your site has a unique form ID (which is why we created this event in our form listener tag). To track multiple forms on a page, you will need to create a custom event trigger for each form and then connect that custom event trigger to each form you’re trying to track.
This process ties everything together so you don’t accidentally fire a tracking tag for the wrong form.
To finish the process, click the Trigger section in the tag we’re currently working on and click the blue plus icon to create a new Trigger.
For the next step to work, you must select a Custom Event Trigger as the trigger type. Name your Custom Event Trigger according to your best practice naming convention (see my example).
In the Event Name box, copy and paste the event named hubspotFormSubmit (from your form listener HTML code).
Next, to prevent duplicate form submissions on pages with two or more HubSpot forms, set the conditions for your trigger to fire according to Some Custom Events.
In the first conditional settings box, click the drop-down arrow and look for the Custom Variable HubSpotFormId you created in the previous step. My screenshot cuts off the full name because of the naming convention I used (HubSpot form variable—hubspotFormId).
The second conditional box you need to set up is the equals condition. Do not use contains, matches, starts with, etc, because you need your tag to fire on a specific form ID.
In the third conditional box, you will want to copy and paste the unique form ID for the form you are trying to track. You can find the form ID inside your HubSpot account or in the form’s URL when editing your form in the HubSpot form builder.
Click the save button, and your form will be ready for testing.
Test Your Form Tracking
Now that you’ve set up the HubSpot form submission tracking in GTM, we need to test our form to ensure it works correctly.
Click the preview button in your GTM account, enter the page URL where your form is located, and then click connect. You are now in your GTM testing environment.
Once the page loads, all your base tracking tags will fire, including the base tracking form listener we installed at the beginning of this guide (custom HTML base tag).
For those who tested this initially, this will be your second time seeing the form listener tag fire on your website after the initial page load.
Fill out the form you are trying to test (contact us in our case) and click submit. Then go back to your GTM tag testing environment. Pay close attention to the summary screen on the left side of your screen, along with the tags that fired.
You will notice two forms fired for me because I use the same tracking setup for my organic Contact Us form submissions and my Google Ad Contact Us form submissions, so it looks like two forms fired simultaneously.
If you do not see your form tracking tag in the tags that fired section. You might have missed one of the steps in this guide. Go back and double-check each section, save any edits you make, and then refresh your testing environment to test the setup again.
Next, we need to check our form submission tracking in GA4.
How to track HubSpot form submissions in GA4
Alright, now that the hard part is over. We need to shift our focus to tracking HubSpot form submissions in GA4.
Everything we have done up to this point has involved creating tracking events on our website, passing that data to GTM, which then passes that data back to GA4 so we can create key events (formerly known as goals in Universal Analytics).
What’s the point of all of this? To collect better conversion data to see which pages are driving results and, more importantly, which forms are generating leads. All of these steps form crucial steps needed in Conversion Rate Optimization tests (CRO) so that you can improve the performance of landing pages, campaigns, and revenue streams.
The nice part about tracking HubSpot form submissions in GA4 is that as long as conversion tracking is set up correctly in GTM, GA4 handles everything else.
Reviewing Your Knewly Created Event in GA4
After setting up your conversion tracking in GTM and successfully submitting a form (see previous screenshots and tests), you will see the event you created in GA4.
You can find your newly created event in several places. You can check your real-time reports from the main GA4 interface, Events Reports under the Engagement tab, or the Debug View under your Admin panel (gear icon).
I recommend checking the Debug View, which will reflect the most accurate events and key events submitted in real-time. It’s also a great way to double-check that conversions between GTM and GA4 are working correctly.
For example, here is a screenshot of how my Contact Us form tracking works in GTM and how the data flows into GA4. The conversion tracking we set up in GTM passed the conversion as an event in GA4 after a successful form submission.
Keep in mind that the event name you see in GA4 is the naming convention you used when you first created the form tracking tag in GTM. In my case, we tested the Contact Us form, the GTM tag, and the event called contact_us_from_ty.
This naming convention tells me and my team that someone successfully submitted a Contact Us form and that the user was redirected to a thank you page. Your event is probably called something else, so pay close attention to how you label your conversions and events in GTM so they match in GA4.
Now that GA4 is tracking your HubSpot form submissions, you should make your event a key event.
Turning Your Event into a Key Event
As mentioned above, Google rebranded conversions in GA4 as key events. For those familiar with Universal Analytics, these were formerly known as Goals.
The process remains the same. However, important events such as specific form submissions, PDF downloads, video views, etc., can now be considered conversions, or key events.
The cool thing about GA4 is that the platform automatically tracks built-in events, which you can later turn into key events. For custom events you create in GTM, as long as the data flows, you can turn your event into a key event simply by flipping a switch (literally).
If you recently created an event in GTM (for example, this conversion tracking setup), it might not appear in your events report for about 24 hours. Once it does, however, simply toggle the switch next to it in GA4, and it will automatically be added to your key events reports.
The key events report is hidden inside your admin panel (gear icon), conveniently located right below your Events summary view in your GA4 account.
The Final Step - Excluding Referral Traffic in GA4
You may or may not recall that I mentioned a situation in which HubSpot form tracking breaks GTM because of how HubSpot appends form tracking data to URL redirects after successful form submissions.
We encountered the issue when we added a second HubSpot form to our site and attempted to test the form in the GTM testing environment before discovering this entire setup.
You may also recall that I mentioned we started seeing a spike in referral traffic. We also saw an increase in traffic labeled unidentified, which is a massive problem if you’re running paid advertising since it becomes harder to optimize conversions if your data is inaccurate.
We added this final step to reduce the chance that our website visitors and conversions would be labeled as “referral” traffic from HubSpot when GTM or GA4 could not correctly attribute a form submission to the existing website visitor that converted.
If you run an e-commerce business, setting up referral traffic exclusions for payment gateways like PayPal, Stripe, and Square is essential. Without these exclusions, GA4 may mistakenly attribute completed purchases as referral traffic from the payment provider instead of recognizing the true source that originally brought the customer to your site.
Properly configuring referral exclusions ensures accurate tracking of your marketing efforts and customer journey.
To set up the referral traffic exclusions, go to your GA4 Admin tab, click Property Settings, Data Collection and Modification, then click Data Streams.
Once you’re in the section above, click on your data stream to open the Data Stream settings. Then, scroll to the bottom of the page until you find the Configure tag settings. Clicking on the Google tag configuration settings will open your Google tag settings.
Once you’re inside your Google tag settings. Click the Show More drop-down underneath your current settings to reveal all available settings.
Look for the tab labeled List unwanted referrals. Also, you will notice a tab called Define internal traffic.
If you have not excluded internal website traffic from you and the rest of your team, now is a good time to collect IP addresses from your team and add them here so you are not counted as a website visitor when making website edits or testing form submissions.
After clicking the List unwanted referrals tab, you will be taken to a section where you can list all necessary referral exclusions for websites such as HubSpot, Stripe, Squarespace, etc. In our case, we are excluding HubSpot traffic. Enter the domain as shown in the screenshot (in lowercase) then click save to save your exclusion.
That’s it. With this last step, your website can collect multiple HubSpot form submissions across your entire site and pass that data back to GA4 to optimize marketing campaigns.
Conclusion
In this guide, I showed you how to track multiple HubSpot form submissions using GTM and GA4 without relying on webhook tools like Zapier.
By leveraging HubSpot’s embedded forms and setting up the proper GTM tags, triggers, and custom code, you can gain better insights into form submissions while keeping your tracking streamlined and efficient.
Implementing these strategies will help you improve lead attribution, enhance marketing analytics, and, ultimately, make more data-driven decisions.
One final thought! Most of you reading this article will likely run ads to drive traffic to your brand. You will want to duplicate the form tracking set up in Step 3 and fill in the necessary conversion data from the platform you are using (see my prior screenshot as an example of Google Ads tracking).
You will want to use the unique conversion label and tracking ID for Google Ads to track form submissions tied to your PPC Advertising. You will repeat the process for Microsoft Ads, except you will need your Microsoft UET custom event data.
In the Tag Configuration type section of your tag, instead of using GA4, you will select the appropriate platform (look for Google Ads or Microsoft Ads configuration types).
You will want to repeat this for all advertising platforms you’re using.
I hope this guide helps you solve any current HubSpot form-tracking issues you’re experiencing. If you have any questions or need further assistance, feel free to contact us. Happy tracking!
