Understanding user behavior and gauging your website's conversion performance depend on form tracking. When you're using HubSpot forms embedded on external websites (non-HubSpot pages), tracking these submissions in Google Analytics 4 (GA4) requires a strategic approach using Google Tag Manager (GTM). This comprehensive guide will walk you through the complete setup process for 2025.
Why Track HubSpot Forms in GA4?
HubSpot forms are powerful lead generation tools, but when embedded on external websites, they operate within iframes that don't naturally communicate with your website's analytics setup. Without proper tracking, you'll miss crucial conversion data that could inform your marketing decisions and ROI calculations.
Tracking HubSpot forms in GA4 through GTM provides several key benefits:
- Complete conversion visibility: See which traffic sources and campaigns generate actual form submissions
- Enhanced attribution: Connect form submissions to specific marketing channels and user journeys
- Custom event tracking: Set up goal conversions and track form-specific metrics
- Cross-platform insights: Analyze form performance alongside other website interactions
Prerequisites for Setup
Before implementing HubSpot form tracking, ensure you have the following accounts and access:
- Your website has a Google Tag Manager container installed.
- Google Analytics 4 property configured and connected to GTM
- HubSpot account with forms embedded on your external website
- Administrative access to both GTM and GA4
Additionally, it's crucial to use meaningful and descriptive naming conventions for your variables, tags, and triggers. This practice makes future maintenance and troubleshooting significantly easier.
Step 1: Create the HubSpot Form Event Listener
The foundation of HubSpot form tracking lies in creating a custom HTML tag that listens for form submission events. HubSpot forms communicate through postMessage events when submissions occur, which we can capture and send to the data layer.
Setting Up the Custom HTML Tag
Navigate to your Google Tag Manager container and create a new tag. After choosing "Custom HTML" as the tag type, put the following event listener code into practice:
<script type="text/javascript">
window.addEventListener("message", function(event) {
if(event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
'event': 'hubspot-form-success',
'form_id': event.data.id,
'form_name': event.data.id
});
}
});
</script>
This script sends relevant form data to the GTM data layer and watches for HubSpot's callback messages after a successful submission. The code captures the form ID and creates a standardized event name for triggering.
Configuring the Trigger
Set this Custom HTML tag to fire on "All Pages" to ensure it's active whenever a HubSpot form might be present. This approach ensures comprehensive coverage across your website without requiring page-specific configurations.
Step 2: Create Data Layer Variables
To capture the form information pushed by the event listener, you'll need to create custom variables in GTM. These variables will extract the form ID and other relevant data from the data layer.
Create the following Data Layer Variables:
- Variable Name: Form ID
- Type of Variable: Data Layer Variable
- Data Layer Variable Name: form_id
This variable will capture the specific HubSpot form identifier, allowing you to distinguish between different forms if you have multiple forms on your website.
Step 3: Set Up the Custom Event Trigger
Create a new trigger in GTM with the following configuration:
- Trigger Type: Custom Event
- Event Name: hubspot-form-success
- When this trigger is activated, All Custom Events
This trigger will activate whenever the event listener detects a successful HubSpot form submission, ensuring your tracking tags fire at the precise moment of conversion.
Step 4: Create the GA4 Event Tag
Now you'll create the actual tracking tag that sends form submission data to Google Analytics 4. Create a new tag with these specifications:
- Type of Tag: GA4 Event in Google Analytics
- Configuration Tag: Select your existing GA4 Configuration tag.
- Event Name: form_submission
- Event Parameters:
- form_id: {{Form ID}} (your custom variable)
- form_name: {{Form ID}} (you can customize this further)
This configuration ensures that form submissions appear as "form_submission" events in your GA4 reports, with additional parameters providing context about which specific form was submitted.
Step 5: Testing Your Implementation
Proper testing is crucial for ensuring your tracking works correctly. GTM's Preview mode can be used to verify your configuration:
- Enter Preview mode and navigate to a page with your HubSpot form
- Fill out the form and send it in.
- In the GTM Preview panel, look for the "hubspot-form-success" event.
- Verify that your GA4 event tag fires properly
- Verify that the right value is captured by the form_id variable.
Additionally, check your GA4 real-time reports to ensure events are appearing correctly with the proper parameters.
Advanced Tracking Considerations
Multiple Form Tracking
If you have multiple HubSpot forms on your website, you can enhance your tracking by creating form-specific triggers. Modify your trigger conditions to include form ID filters, allowing for more granular tracking and reporting.
Enhanced Data Collection
Consider implementing additional data layer pushes to capture user email addresses (where available and compliant with privacy regulations) or other form field data that could enhance your analysis capabilities.
Attribution and Conversion Setup
Set up your GA4 conversion events using the "form_submission" event as the basis. This enables proper attribution reporting and allows you to measure the effectiveness of different marketing channels in driving form completions.
Common Troubleshooting Issues
Several issues can prevent proper HubSpot form tracking:
- If the form listener isn't firing, make sure that every page has the Custom HTML tag set to fire.
- Missing events in GA4: Verify your GA4 Configuration tag is properly connected
- Form ID errors: Verify that your form ID variable is set up properly.
- Cross-domain issues: Ensure your HubSpot forms are properly embedded and not blocked by security policies
Maintaining Your Setup
Regular monitoring and maintenance ensure continued tracking accuracy. Periodically review your GTM Preview mode when testing new forms or website changes. Keep your event names and parameters consistent across all tracking implementations to maintain clean, analyzable data in GA4.
Conclusion
Implementing HubSpot form tracking with Google Tag Manager and Google Analytics 4 provides invaluable insights into your conversion funnel and marketing performance. This setup enables comprehensive attribution analysis, helping you understand which channels and campaigns drive actual lead generation results.
The event listener approach outlined in this guide represents the most reliable method for tracking HubSpot forms on external websites in 2025. By following these steps and maintaining proper testing protocols, you'll have robust form tracking that scales with your marketing efforts and provides the data needed for informed decision-making.
Remember to regularly review and test your implementation, especially when adding new forms or making website changes, to ensure continuous data accuracy and completeness in your analytics reporting.
References
- Analytics Mania. (2025). Track HubSpot Forms with Google Tag Manager and Google Analytics 4. Retrieved from https://www.analyticsmania.com/post/track-hubspot-forms-with-google-tag-manager-and-google-analytics-4/
- TripleDart. (February 2025). HubSpot Form Tracking in GA4 (GTM): Step-by-Step Guide. Retrieved from https://www.tripledart.com/marketing-analytics/hubspot-form-tracking-in-ga4-using-google-tag-manager
- Markestac. (April 2025). How to Track HubSpot Form Submissions in GA4 & GTM. Retrieved from https://www.markestac.com/blog/hubspot-form-tracking-gtm-ga4
- KnewChoice. (May 2025). How to Track Multiple HubSpot Forms Using Google Tag Manager and GA4. Retrieved from https://knewchoice.com/tracking-multiple-hubspot-form-submissions-with-gtm-and-ga4/
- Analytics Mania. (December 2024). HubSpot Form Tracking Recipe for Google Tag Manager and GA4. Retrieved from https://www.analyticsmania.com/google-tag-manager-recipes/hubspot-form/
- HubSpot Community. (April 2025). Tracking HubSpot forms in Google Analytics 4 for external web pages. Retrieved from https://community.hubspot.com/t5/Lead-Capture-Tools/Tracking-Hubspot-forms-in-Google-Analytics-4-for-external-web/m-p/416676
0 Comments
If You have any doubt & Please let me now