Tracking HubSpot Forms with Google Tag Manager
Requirements: Google Analytics, Google Tag Manager
Changes: Added in a an extra guide on utilising Data Imports in GA.
Tracking Hubspot forms within Hubspot’s own system might suffice for some scenarios. For most, it lacks context. Where did they arrive from? Did they engage with other pages, events or goals? We can enable this by passing Hubspot form submissions into Google Analytics as Events.
When a Hubspot form has been successfully submitted, Hubspot fires an event that we can listen to and use to trigger marketing tags within Google Tag Manager. Below we create a Custom HTML Tag that listens for a form success, trigger a dataLayer event which can then be used to trigger a marketing tag to push this data into Google Analytics.
First, create a Custom HTML Tag, name it something appropriate (SCRIPT – HubSpot Form Listener or similar) and add an “All Pages” trigger to the page with the script below as the tag HTML:
Here’s the code:
Next, create a variable to read the hs-form-guid property (at this time, the HubSpot event does not expose the form name):
Create a new trigger for the Data Layer event triggered by the event listener:
Finally, create a new tag that uses the new trigger and HubSpot Form GUID, to send this data to Google Analytics:
Create a Goal in Google Analytics
If form submissions are a measure of success for you, we recommend creating a GA Goal which counts form submissions against user sessions. This is great for many reasons but mainly because you can use it to determine a Form Submission Rate % and plot that against any campaigns you’re running which are aiming for form submissions as a conversion point.
To add a new goal to a GA view, go to Admin > Goals
Goal Type: Custom
Goal Name: Macro: Form Submission
Label: <leave empty>
Use the Event value as the Goal Value for the conversion: For this setting, it depends on the form’s purpose. If a signup means you’re going to make a static amount of revenue eg. £120, set this to NO and enter your static value. Otherwise, leave this as YES
Now save your goal. This will begin to collect conversions as the form submissions occur.
Give your Hubspot Forms Human-friendly Names (Optional)
The Hubspot Form GUID’s are useless without context – we can help out here by adding in a human-friendly names against them. To do apply friendly form names to your data, head over to Google Analytics > Admin > Custom Definitions > Custom Dimensions
Create 2 new hit-scoped dimensions:
- Hubspot Form GUID – remember the Index number for this one
- Hubspot Form Name
Head over to GTM where you’ve created your Hubspot Form event. Enable overriding settings in the Event tag and add in a new custom dimension row with the index you noted down earlier. Ours is 10 but yours will differ. In the right-hand field named Dimension Value you need to add your Hubspot Form GUID variable from earlier. Click the little logo with a + sign on it to find it.
The end result will look like this:
Analytics Data Import
The next step is to use Google Analytics data import functionality to associate horrible looking form IDs with human friendly names.
Head over to GA > Admin > Data Import (bottom of the Property Column) > Click Create
Data Set type
Type: Custom Data
Data Set Details
Name: Hubspot Form Names
Select Views: Tick the views you wish to use this data in
Data Set schema
Key: Hubspot Form GUID
Imported Data: Hubspot Form Name
Overwrite hit data: Yes
Save this Import and then click Get Schema > Download schema template
Open the downloaded file in Excel or similar and you should see a very basic 2 column sheet. The column names will look a bit odd as they are going to tell Google Analytics which Custom Dimension Index numbers you’re importing data into. Col A is the Form GUID and Col B is your new friendly name/s.
Once you have something similar, save the file. Go back into the Data Import menu in GA and click “Manage uploads” on your new import configuration
Note: You may only have one row which is fine. You might have 100…
Click “Upload File” and then “Choose files” to select the spreadsheet you’ve just saved. Once added, hit “Upload”
At this point, Google Analytics will import your file and check it for errors. Parsing usually takes less than a minute and it will let you know if there’s an issue. Sometimes an empty row can cause issues but it’s fairly easy to fix any problems. The end result will look something like this.
So with this imported, we can build a basic report in GA under Custom Reports to check things are working as expected (provided you have data)
We recommend to leave this part for a couple of days until you know you’ve got data to report on.
When we run this report, we get some pretty helpful data! You’ll notice we haven’t even included the Hubspot Form GUID dimension because GA is associating this behind the scenes.
We could start to mix in other contextual dimensions like Source / Medium or Campaign to understand how people arrive onsite and experiment with how this data is displayed.
Q: I imported the names but no data is showing when it should be
1: GA can sometimes take up to 24 hours to propagate changes to the data. It took 3 hours for it to show for us when making this tutorial
2: Have you enabled this data import on the view you’re looking at? Check the data import configuration
3: Are you sure you have data? If you only just implemented the Custom Dimension for GUID, unless you have high volume for submissions, give it 24 hours for collect some data
4: This change will not affect legacy data even if you have GUIDs stored prior to using the Data Import tool
We hope this guide gives you more context around the users filling in these forms. Any issues, drop us a comment below.