How can I track events in my Google Analytics account using Webflow?
TL;DR
- Create a Google Tag Manager account, add the GTM code to your Webflow site's Custom Code settings, and publish the site.
- In GTM, create GA4 Event Tags with appropriate triggers (e.g., clicks or form submissions), test using Preview Mode, and publish the container.
- Alternatively, advanced users can manually fire GA4 events using JavaScript with the gtag API.
- Use GTM to track Webflow form submissions by setting up form submission triggers and defining custom event parameters.
To track events with Google Analytics in Webflow, you’ll need to manually set up event tracking through Google Tag Manager or use custom scripts for GA4. Webflow does not include built-in event tracking for GA by default.
1. Use Google Tag Manager (Recommended)
- Create a Google Tag Manager (GTM) Account at tagmanager.google.com.
- Add your GTM container to Webflow:
- Go to Project Settings > Custom Code.
- Paste your GTM container script in the Head and Body fields as instructed by GTM.
- Publish your Webflow site to update the live version with GTM.
- In GTM, create a GA4 Event Tag:
- Go to Tags > New > GA4 Event.
- Choose your GA4 Configuration Tag or create one using your Measurement ID.
- Set the Event Name (e.g., “contact_form_submit”).
- Set a Trigger (e.g., clicks or form submits).
- Use GTM Preview Mode to verify the event fires correctly.
- Publish the container in GTM after testing.
2. Add Inline Event Code (For Advanced Users Only)
- If you’re confident using JavaScript, you can manually fire GA4 events using the
gtagAPI. - Example: Add an
onClickattribute to a Webflow button using the Element Settings > Custom Attributes or use Page Settings > Footer Code to add a script that listens for events. - Event firing needs to include
gtag('event', 'event_name', {...})with parameters matching your GA4 setup.
3. Track Webflow Form Submissions in GA4
- Use GTM to listen for form submissions:
- Set a Trigger of type “Form Submission” and check "Wait for Tags" and "Check Validation" options.
- Add filters based on Form ID or Page Path.
- In your GA4 Event Tag:
- Use an Event Name like “form_submission”.
- Optionally pass fields like form name, page title, or path.
Summary
To track events in your Google Analytics account via Webflow, the best approach is to integrate Google Tag Manager and use its GA4 Event Tag to define and trigger events based on user interactions (clicks, submissions, views). This allows for flexible tracking without modifying Webflow’s core code.