Google Analytics 4 integration
Google Analytics 4 measures traffic, sources and key events on your site. Framer and Webflow both have a native field for the GA4 measurement ID, and on Next.js we use the GoogleAnalytics component from @next/third-parties. We set up Consent Mode v2 and the key events your team reports on, so the numbers hold up in the EU.
| Complexity | Low |
|---|---|
| Method |
|
| Typical setup | 2 to 4 hours |
| What we do | We add GA4, set up Consent Mode v2 with your banner and define the key events your team reports on. |
| Category | Analytics |
Setup by platform
How we set up Google Analytics 4
Framer
- Native
Paste the GA4 measurement ID into Framer’s site settings and publish. When the site also runs Google Tag Manager, we configure GA4 inside GTM instead and use Framer’s Cookie Banner for Consent Mode.
Webflow
- Native
Site settings, Integrations, Google Analytics: paste the GA4 measurement ID and publish. Webflow Ecommerce then sends product, cart and purchase events automatically. We never run this and the Google site tools app together.
Astro
- Embed
The Google tag goes in the shared layout, loaded after the consent defaults are set. On heavier pages we can move it off the main thread with the official @astrojs/partytown integration.
Next.js
- Embed
<GoogleAnalytics gaId="G-…" /> from @next/third-parties in the root layout (still labelled experimental by Next.js), with sendGAEvent for custom events. If GTM is on the site, GA4 lives in GTM instead.
Use cases
What teams use it for
Traffic and acquisition
Which channels, campaigns and landing pages bring visitors, by country and device.
Key events
Demo bookings, form submits and CTA clicks as key events, so marketing can see what converts.
Ads audiences
Conversions and audiences shared with Google Ads, with the EU consent signals Google requires.
Before you add it
What to watch out for
Consent and GDPR
Consent Mode v2 in the EEA
EEA users need four signals: ad_storage, analytics_storage, ad_user_data and ad_personalization. Without them they drop out of linked ad audiences.
Data layer
Count each pageview once
Use one install (native field, Google site tools app or GTM); two double every event. On Next.js, GA4’s history-based page changes cover client navigation.
Performance
Load after the page
The @next/third-parties component loads the tag after hydration. On Astro we keep the tag async or in Partytown so it never blocks the first paint.
FAQ
Questions about Google Analytics 4
Do we need custom code to add GA4 to Framer or Webflow?
No. Both have a native field for the GA4 measurement ID in site settings. Custom code only comes in when you add Google Tag Manager or other tags.
What happens to EU data if we skip Consent Mode v2?
Since March 2024, only users outside the EEA are included in audiences used by linked Google ads products, and ads measurement for EEA users is limited.
GA4 directly or through Google Tag Manager?
GA4 on its own is fine for a simple site. Once you add ad pixels or other tags, we move GA4 into GTM so every tag follows the same consent and triggers.
Keep exploring
Compare platforms
Other integrations
- Google Tag ManagerOne container for GA4, ad pixels and event tracking, so marketing can add tags without a deploy.
- PostHogProduct analytics, session replay and feature flags, with an EU cloud and a cookieless mode.
- Microsoft ClarityFree heatmaps and session recordings from Microsoft, with a consent API for EU traffic.
You've reached the end, so now…
Tell us what you’re building.
We’ll help you map the right scope, team, timeline, and next steps.
Book a call