How to Install GA4 on Webflow the Right Way

Why it matters

A bad install gives you bad numbers. Every decision you make from those numbers is then a guess.

Webflow lists a few common traps. If you add GA4 through both the integration and custom code, you get duplicate tracking scripts. Webflow only accepts GA4 IDs, so an old "UA-" Universal Analytics ID will not work. And the integration only takes effect after you publish.

How to check it

1. Find your Measurement ID in GA4. Go to Admin. Under Data collection and modification, click Data streams, then click your stream. Copy the Measurement ID under Stream Details. It starts with "G-".
2. Compare it with Webflow. Open Site settings, Integrations tab, Google Analytics. The ID there should match.
3. Look for a second install. Check your site's head code in Webflow and any Google Tag Manager container for another GA4 tag.
4. Open the Realtime report. Browse your published site in another tab. Your visit should appear.
5. Check events in DebugView. In GA4, go to Admin. Under Data display, click DebugView. To turn on debug mode for your own device, use Google Tag Assistant.

How to fix it in Webflow

1. Pick one method. You can use the Webflow integration, custom code in the head, or Google Tag Manager. Webflow says to use only one of the integration or custom code, so you do not get duplicate scripts.
2. Create the property and stream if you need to. In GA4 Admin, click Create, then Property. Enter a name, time zone and currency. Then go to Data streams, click Add stream and choose Web. Enter your site URL and a stream name. Google recommends enabling enhanced measurement. Click Create stream.
3. Copy the Measurement ID. Follow the path from the check section above.
4. Add it with the Webflow integration. Go to Site settings, then Integrations, then Google Analytics. Paste the ID. Click Save changes. Then publish your site. The integration does not need a paid plan.
5. Or use custom code. In your data stream, click View tag instructions and choose Install manually. Paste the full snippet into your site's head code in Webflow. You need a paid Site or Workspace plan to add custom code. Do not also use the integration.
6. Or use Tag Manager. In Google Tag Manager, add the "Google Analytics: Google Analytics Configuration" tag. Webflow says the Google site tools for Webflow App can connect Tag Manager. Do not also paste the GA4 ID into the Webflow integration.
7. Remove old or duplicate tags. Delete any old GA4 snippet you no longer use. Publish again.
8. Verify. Open the Realtime report while you browse your site. Google says data collection can take up to 30 minutes to start. Webflow notes data can take about a day to show in reports.
9. Test events in DebugView. Use Tag Assistant to turn on debug mode for your device. Google says events will not appear if client-side privacy controls are in place, or if consent mode is active and you have not consented to Analytics cookies.

Checklist

• The Measurement ID starts with "G-".
• The same ID is in GA4 and in Webflow.
• Only one install method is in use.
• No old or duplicate GA4 tags remain.
• The site was published after the change.
• Realtime shows your own visit.
• DebugView shows events from your test device.
• Enhanced measurement is on in the data stream.

FAQ

Do I need a paid Webflow plan to install GA4?

Not for the integration. Webflow says you need a paid Site plan or Workspace plan to add other custom code.

Can I use the Webflow integration and custom code together?

No. Webflow says to use only one of the two, so you do not create duplicate tracking scripts.

Why does Realtime show nothing?

First, wait. Google says collection can take up to 30 minutes to start. Then check that the ID starts with "G-", matches your data stream, and that you published the site.

Dealing with this on a live Webflow site? It is the kind of work I do in Webflow SEO and AEO. Send me your site and I will tell you what I would fix first.