Tracking HubSpot form submissions accurately is essential for lead attribution, conversion optimization, and campaign measurement. Google Tag Manager (GTM) offers a clean, scalable way to track HubSpot form submissions without modifying HubSpot’s native form configuration.
This guide explains how to track successful HubSpot form submissions using a lightweight JavaScript event listener and Google Tag Manager.
Overview of the Tracking Method
HubSpot forms communicate submission events via browser postMessage callbacks. By listening for the onFormSubmitted callback, you can reliably detect when a form submission has been completed successfully and push structured data into the GTM data layer.
This approach allows you to:
- Track form submissions as conversions
- Capture form metadata and submitted values
- Trigger analytics and advertising pixels cleanly
- Maintain privacy and consent control via GTM
Step 1: Add the HubSpot Form Listener in GTM
Create a Custom HTML Tag in Google Tag Manager and paste the following script exactly as shown.
<script>
window.addEventListener(“message”, function(event) {
if(!(event.data.type === ‘hsFormCallback’ && event.data.eventName === ‘onFormSubmitted’)) return;
window.dataLayer = window.dataLayer || [];
dataLayer.push({
event: ‘hubspot_form_submitted’,
form_id: event.data.id,
user_data: event.data.data.submissionValues
});
});
</script>
What This Script Does
- Listens for HubSpot’s onFormSubmitted callback
- Fires only after a successful form submission
- Pushes a structured event (hubspot_form_submitted) to the data layer
- Captures:
- form_id– HubSpot form ID
- user_data– Submitted form field values
Step 2: Trigger the Script on Page View
Set the Custom HTML tag to fire on:
- All Pages, or
- Only pages where HubSpot forms exist
This ensures the listener is loaded before a user submits a form.
Step 3: Create a Custom Event Trigger in GTM
Next, create a trigger to detect the data layer event.
- Go to Triggers in GTM
- Click New
- Select Custom Event
Enter the event name:
hubspot_form_submitted
- Choose All Custom Events or restrict with conditions (recommended)
This trigger will be used to fire conversion tags and analytics events.
Step 4: Create Data Layer Variables
To use form data in your tags, define Data Layer Variables in GTM.
Recommended variables:
- form_id
- user_data.email
- user_data.firstname
- user_data.lastname
Step 5: Fire Analytics and Marketing Tags
Attach your marketing and analytics tags to the hubspot_form_submitted trigger, including:
- Google Analytics 4 (lead or conversion events)
- Meta Pixel / Conversions API
- LinkedIn Insight Tag
- Google Ads conversion tracking
- CRM or internal analytics tools
Privacy and Compliance Best Practices
To remain compliant with GDPR, CCPA, and other regulations:
- Fire the Custom HTML tag only after user consent is granted
- Restrict triggers by:
- Consent state
- Avoid sending personally identifiable information unless permitted
- Hash sensitive fields (such as email) when required
GTM’s trigger conditions and consent mode make it easy to enforce these rules.
Testing and Validation
Before publishing:
- Use GTM Preview mode to verify the event fires correctly
- Submit a test HubSpot form
- Confirm hubspot_form_submitted appears in the data layer
- Validate events in analytics and advertising platforms
Final Thoughts
Tracking HubSpot form submissions with Google Tag Manager using a direct onFormSubmitted listener is a clean, efficient, and reliable solution. It provides full visibility into lead generation events while maintaining flexibility, privacy control, and scalability across analytics and advertising platforms.
This method requires no changes to HubSpot’s form configuration and works seamlessly with both embedded and popup forms—making it ideal for modern marketing stacks.