How to add Google Analytics 4 to a Framer site
Add GA4 to your Framer site by pasting your G- Measurement ID into Framer's Site Settings, then publish and check visits arrive in GA4's Realtime report.
To add Google Analytics 4 to Framer, copy your Measurement ID (it starts with G-) from GA4, paste it into Site Settings → Google Analytics Measurement ID in your Framer project, save and publish. No code needed.
Before you start
Create a GA4 property and web stream, and copy its Measurement ID. How. You'll find it again in GA4 under Admin → Data streams → your stream.
Add your Measurement ID
In Framer, open your project's Site Settings.
Paste your Measurement ID into Google Analytics Measurement ID.
Save, then Publish your site. The tag is added to the published site, not to Framer's editor.
Need the full Google tag?
If you want to add Consent Mode or other settings, paste the full Google tag into Custom Code (in the head section) instead, and leave the Measurement ID field empty, so the tag isn't loaded twice.
Page changes
Framer sites change pages without a full reload. GA4's enhanced measurement counts those page changes automatically, as long as Page changes based on browser history events is on (Admin → Data streams → your stream → Enhanced measurement → Page views).
Check it works
Open your published site and GA4's Realtime overview. More ways to check.
Related
Sources
- Framer: Setting up Google Analytics
Last updated
Next.js
Add GA4 to a Next.js App Router site with the official @next/third-parties package or next/script, keep the ID in an environment variable, and track signups.
Webflow
Connect GA4 to Webflow with the built-in Google Analytics setting, or with custom code. Paste your G- Measurement ID, publish, and check Realtime.