Mastering HubSpot Form Conversion Tracking on External Websites

Mastering HubSpot Form Conversion Tracking on External Websites

For marketing and sales teams leveraging HubSpot forms, understanding conversion rates is paramount. However, a common challenge arises when these forms are embedded on websites not hosted directly by HubSpot, such as those built with Framer, WordPress, or other content management systems. While HubSpot reliably captures form submissions, obtaining accurate 'form view' data to calculate precise conversion rates often requires a more integrated approach. This article explores best practices for tracking HubSpot form views and conversions when your website lives outside the HubSpot ecosystem.

The Challenge: Discrepancy in Native Tracking

When HubSpot forms are placed on external websites, the immediate issue is that HubSpot's native reporting typically shows submissions but not the corresponding views. This limitation stems from how HubSpot's tracking script interacts with its own hosted pages versus third-party environments. On HubSpot-hosted pages, the platform has full control over page load and form interaction events, allowing it to seamlessly track both views and submissions. On an external site, a basic integration might only push submission data, leaving a gap in the view count necessary for conversion rate calculation.

The core question for many teams is: how can we accurately measure form views and conversion rates when our website is built on platforms like Framer or WordPress?

Understanding the Integration Types

The root of the tracking discrepancy often lies in the method of HubSpot form integration:

• Native HubSpot Tracking Script: For HubSpot to fully track page views and form interactions on an external site, the comprehensive HubSpot tracking code snippet (found in your HubSpot portal under Tracking & Analytics > Tracking Code) must be correctly installed across all pages of your website. This script enables HubSpot to identify page views and associate them with form interactions.
• API Integration / Embedded Code Snippet (without full tracking script): If you've only embedded a form using a specific form ID or a simplified code snippet without the overarching HubSpot tracking script, HubSpot may only register the submission event. It won't have the necessary context to count the page view where the form was loaded, as it's not tracking the page itself. This is common when platforms like Framer offer a 'native' HubSpot integration that might only facilitate submission data transfer rather than full analytics.

Solution 1: The Hybrid Approach with External Analytics

The most widely adopted and recommended strategy involves a hybrid approach, combining data from HubSpot with a robust third-party analytics platform, most commonly Google Analytics 4 (GA4), or your website builder's native analytics (e.g., Framer's built-in analytics).

Step-by-Step Hybrid Tracking:

1. Capture Submissions in HubSpot: Continue to use your HubSpot forms to capture lead data. Submissions will flow directly into your HubSpot CRM, creating contacts, deals, or tickets as configured. This remains the authoritative source for submission counts.

2. Track Page Views with GA4 (or Website Builder Analytics): Ensure Google Analytics 4 is properly installed and configured on your entire website. GA4 will accurately track page views for every page where your HubSpot form is embedded. For platforms like Framer, their native analytics can also provide reliable page view data.

3. Set Up GA4 Event for Form Submissions: For a more unified view, configure a custom event in GA4 that fires specifically when a HubSpot form is successfully submitted. This can be done using Google Tag Manager (GTM) by listening for HubSpot's form submission events (e.g., hs_form_submitted). This allows GA4 to track both the page view and the submission event within its own ecosystem.

   // Example GTM Data Layer Push for HubSpot form submission (if not automatically handled by HubSpot's GTM integration)
   window.addEventListener('message', event => {
     if (event.data.type === 'hsFormCallback' && event.data.eventName === 'onFormSubmitted') {
       window.dataLayer = window.dataLayer || [];
       window.dataLayer.push({
         'event': 'hubspot_form_submission',
         'formId': event.data.id,
         'formName': event.data.data.formName // Or other relevant data
       });
     }
   });

4. Calculate Conversion Rate: Once you have reliable page view data from GA4 (or your website builder) and submission data from HubSpot (or GA4's custom event), you can calculate your conversion rate:

   Conversion Rate = (HubSpot Submissions / Page Views from GA4) * 100

   If you've set up GA4 events for submissions, you can calculate this entirely within GA4 for consistency, comparing your custom submission event count against page views for the relevant pages.

Solution 2: Ensuring Comprehensive HubSpot Script Integration

For those who wish to leverage HubSpot's native analytics as much as possible, the key is to ensure the full HubSpot tracking script is installed on your external website, not just a specific form embed code. This script is crucial for HubSpot to register page views and attribute them correctly.

Steps for Full HubSpot Tracking:

1. Locate Your HubSpot Tracking Code: In your HubSpot portal, navigate to Reports > Tracking & Analytics > Tracking Code. Copy the entire JavaScript snippet.

2. Embed on All Pages: Paste this code into the header or footer section of your website's HTML, ensuring it loads on every page where you want HubSpot to track activity. For platforms like WordPress, there are plugins (e.g., Header and Footer Scripts) that simplify this. For Framer, you'll typically find a section for custom code or scripts in the site settings.

3. Verify Installation: Use HubSpot's tracking code verification tool or check your website's source code to confirm the script is present. You can also monitor your HubSpot analytics dashboard for page view data to confirm it's working.

With the full tracking script in place, HubSpot should begin recording page views for your external pages. This will then allow you to see both views and submissions for your embedded HubSpot forms directly within HubSpot's form performance reports, provided the form itself is also a HubSpot-created form embedded via its standard embed code.

Why Accurate Conversion Rates Matter

Accurate conversion rate tracking is not just a vanity metric; it's fundamental for informed decision-making:

• Optimizing User Experience: Low conversion rates on high-traffic pages indicate potential issues with form design, page content, or user journey.
• Resource Allocation: Understanding which forms and pages are performing best helps allocate marketing and sales resources effectively.
• A/B Testing: Precise data is essential for running meaningful A/B tests on form fields, calls-to-action, and page layouts.
• ROI Calculation: Tying form submissions (leads) to the number of views allows for a clearer picture of your marketing efforts' return on investment.

Whether you opt for a hybrid GA4 approach or ensure full HubSpot script integration, the goal is to eliminate data silos and gain a holistic view of your form performance. By proactively addressing these tracking challenges, you empower your team with the insights needed to optimize your digital strategy and drive better results.

Ensuring your HubSpot forms are properly integrated and tracked is a critical step in maintaining a clean CRM and efficient inbox management. At Inbox Spam Filter, we understand the importance of accurate data for effective email triage and overall productivity, helping you focus on legitimate leads and interactions.

Related reading:

• Solving the HubSpot Multiple Form Dilemma on Webflow and Beyond
• The Hidden Cost of Dirty Data: Why Your HubSpot CRM Needs Regular Audits