Advanced Guide: Tracking HubSpot Form Submissions in GA4 with Google Tag Manager

Tracking form submissions is crucial for understanding user interactions and conversions on your website. If you're using HubSpot forms, you can set up tracking in Google Analytics 4 (GA4) via Google Tag Manager (GTM). This article walks you through an advanced step-by-step guide to implementing this tracking setup.

Step 1: Identify the Form Submission Event

HubSpot forms don't trigger traditional form submission events like native HTML forms. Instead, they rely on JavaScript-based events. Here's how to capture these:

• Inspect Your HubSpot Form Behavior:
• Open the webpage containing your HubSpot form.
• Use Chrome Developer Tools (Right-click > Inspect or press Ctrl+Shift+I).
• Navigate to the "Network" tab and submit the form to identify requests sent during submission
• Enable GTM's Preview Mode:
• Open Google Tag Manager and click on the "Preview" button to activate Debug mode.
• Submit the HubSpot form and review the event flow in GTM's Debug Console.
• Look for Submission Triggers:
• Check if a built-in GTM trigger like a "Click" or "DOM Element" is fired during submission.
• Alternatively, identify any HubSpot-specific events by monitoring the Data Layer or using Custom JavaScript listeners.

Step 2: Create a Custom Trigger in GTM

If no built-in GTM trigger is fired, you'll need to set up a custom trigger. HubSpot offers a onFormSubmit callback in its forms API, which you can use.

1. Custom HTML Tag for Callback:

<script>
  hbspt.forms.create({
    portalId: 'YOUR_PORTAL_ID',
    formId: 'YOUR_FORM_ID',
    onFormSubmit: function() {
      window.dataLayer = window.dataLayer || [];
      window.dataLayer.push({
        event: 'hubspotFormSubmit',
        formId: 'YOUR_FORM_ID',
      });
    }
  });
</script>        

• Replace YOUR_PORTAL_ID and YOUR_FORM_ID with your actual HubSpot form details.
• Save the tag and assign it to trigger on the specific page where the form resides.

2. Verify Trigger Execution:

• Use GTM's Preview mode again to ensure that the hubspotFormSubmit event is pushed to the Data Layer upon form submission.

Step 3: Set Up a GA4 Event Tag

Now that you have a hubspotFormSubmit event in the Data Layer, configure GA4 to capture it.

1. Create a New Tag:

• Tag Type: Google Analytics: GA4 Event.
• Configuration Tag: Select your GA4 configuration tag.
• Event Name: hubspot_form_submission (or a custom name of your choice).

2. Add Event Parameters:

• Form ID: {{DL - formId}} (Create a Data Layer variable if not already done.)
• Page Path: {{Page Path}}.
• Submission Time: Use the built-in GTM variable {{Event Timestamp}} for advanced tracking.

3. Set Trigger:

Trigger Type: "Custom Event Trigger."

• Event Name: hubspotFormSubmit.

4. Test the Tag:

• Enter GTM Preview mode.
• Submit the form and confirm that the GA4 Event tag fires as expected.

Step 4: Verify in GA4

1. Real-Time Reports:

• Open GA4's real-time reporting and look for your hubspot_form_submission event.

2. Custom Event Configuration:

• In GA4, go to "Events" under the "Configure" section.
• Mark the hubspot_form_submission event as a conversion if it's a critical goal.

Optional: Enhance Tracking with Event Attributes

Add custom dimensions or metrics to capture more details about the submission, such as:

• Form Name: Add it to the Data Layer and pass it as a parameter.
• Submission Status: Track whether the submission was successful or failed (using HubSpot's onFormError callback).

Troubleshooting Tips

1. Event Not Firing:

• Confirm the HubSpot script and GTM container are implemented correctly on the page.
• Check browser console for JavaScript errors.

2. No Data in GA4:

• Ensure the GA4 configuration tag is firing.
• Validate the GA4 Measurement ID in the tag settings.

3. Debugging Data Layer Push:

• Use Chrome extensions like DataLayer Inspector+ to validate dataLayer pushes.

Conclusion

With the above setup, you'll be able to track HubSpot form submissions in GA4, enabling a comprehensive view of user interactions. This data helps optimize your forms, improve conversion rates, and make informed business decisions. If you have any issues or questions, feel free to leave a comment or reach out!

I’m passionate about empowering organizations with data-driven decision-making while respecting user privacy.

Here’s how you can connect with me or view my work:

Upwork Profile: Upwor

Freelancer Profile: Freelancer

My Blog on GTM & Website Analytics: Google Tag Manager Solution

If you or someone in your network is looking for an experienced professional in this space, I’d love to connect and chat further!