Webflow sync, pageviews & more.
NEW

How can I create a GA4 Event to track form conversions using Webflow, Google Tag Manager, and Google Analytics 4?

TL;DR
  • Add GTM code to Webflow and publish the site.
  • In GTM, create a form submission trigger and a GA4 event tag tied to it.
  • Use Preview Mode and GA4 DebugView to test, then publish and optionally mark the event as a GA4 conversion.

To track form conversions in Webflow using Google Tag Manager (GTM) and Google Analytics 4 (GA4) Events, follow these steps to ensure proper configuration and tracking.


1. Enable Native Form Tracking in Webflow

  • Ensure your form is built with Webflow’s native Form element.
  • Webflow triggers a form submission event (form submit) when a user successfully submits a form.

2. Set Up Your GTM Container in Webflow

  • Create a Google Tag Manager account if you haven't already.
  • Copy your GTM container code (starts with GTM-XXXXXXX).
  • In Webflow:
  • Go to Project Settings > Integrations.
  • Paste your GTM code in the Head and/or Body custom code sections.
  • Publish your site after saving.

3. Create a Form Submission Trigger in GTM

  • In GTM, go to Triggers > New.
  • Choose Trigger Type: Form Submission.
  • Click "Some Forms" to filter only successful submissions.
  • Use conditions such as:
  • Form ID or class (e.g., Form ID equals contact-form)
  • Page Path or URL if needed.
  • Name your trigger like Webflow Form Submit.
Tip: Use GTM's Preview Mode (Tag Assistant) to inspect form classes and submission behavior.

4. Create a GA4 Event Tag in GTM

  • Go to Tags > New.
  • Choose Tag Type: GA4 Event.
  • Under Configuration Tag, either:
  • Select an existing GA4 Configuration Tag, or
  • Create a new one with your Measurement ID (from GA4)
  • Under Event Name, enter a clear event identifier, e.g., form_submit or lead_generated.
  • Optionally add Event Parameters, like:
  • form_id → Set as {{Form ID}} (a GTM Variable)
  • page_path → Set as {{Page Path}} for additional context.
  • Set the Trigger to the form trigger created in Step 3.
  • Save and name your tag, e.g., GA4 - Form Submit Event.

5. Publish Your GTM Container

  • Click Submit and then Publish your GTM container.
  • Use Preview Mode to test the live site and confirm:
  • The form triggers the correct GTM tag.
  • The event appears in GA4 > Admin > DebugView.

6. (Optional) Set Up a Conversion in GA4

  • In GA4, go to Admin > Events.
  • Locate your custom event name (form_submit).
  • Toggle Mark as conversion.
  • Wait up to 24 hours for data to populate in Reports > Conversions.

Summary

Create a GA4 Event for Webflow form submissions by leveraging GTM’s form submission trigger and building a GA4 event tag attached to it. This setup sends form events to GA4 and optionally treats them as conversions. Use GA4 DebugView and GTM Preview to validate everything is firing correctly.

Rate this answer

Other Webflow Questions