How to Add Google Analytics to Your Website (GA4, Next.js, React)

Google Analytics 4 (GA4) tells you how many people visit your site, where they come from and what they do. Adding it takes about ten minutes.

Step 1: create a GA4 property

1. Go to analytics.google.com and sign in.
2. Create an account (your business) and a property (your website).
3. Add a Web data stream with your site's URL.
4. Copy the Measurement ID — it looks like G-XXXXXXXXXX.

Step 2: add the tag

Plain HTML site

Paste this into the <head> of every page, replacing the ID:

<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', 'G-XXXXXXXXXX');
</script>

Next.js

Next.js has an official helper:

npm install @next/third-parties

// app/layout.tsx
import { GoogleAnalytics } from '@next/third-parties/google'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>{children}</body>
      <GoogleAnalytics gaId="G-XXXXXXXXXX" />
    </html>
  )
}

React single-page app (Vite)

Add the HTML snippet to index.html. GA4's enhanced measurement (on by default) tracks page changes in SPAs through the browser history, so route changes usually count as page views automatically. Check in Realtime that navigating between pages registers. (SPA vs MPA)

Website builders

Most builders (Lovable, Webflow, Framer, WordPress plugins) have a field for the Measurement ID — no code needed.

Step 3: check it works

Open your site in another tab, then in GA go to Reports → Realtime. You should appear within a minute or so.

If not:

• Ad blockers block Google Analytics. Test in a browser without one.
• Wrong ID or the snippet isn't on the page — view the page source and search for G-.
• Your consent banner is blocking it until you click Accept (that's correct behaviour).
• Content Security Policy blocks Google's scripts — add the Google domains to your CSP. (Content Security Policy)

Step 4: cookie consent

GA4 sets cookies and collects data about visitors. If you have visitors in the EU or UK, you generally need consent before loading it, and Google requires Consent Mode for EU traffic if you use its ads features. In practice:

1. Use a consent banner that blocks GA until the visitor agrees.
2. Configure Google's Consent Mode so GA respects the choice.
3. Mention analytics in your privacy policy.

(Do you need a cookie banner?, GDPR basics for app builders, Does my app need a privacy policy?)

Track the things that matter

Page views are a start. Set up key events (formerly "conversions") for actions that matter — sign-ups, purchases, contact form submissions:

gtag('event', 'sign_up', { method: 'email' })

Then mark sign_up as a key event in GA's admin. (Analytics for beginners)

Alternatives worth knowing

GA4 is free and powerful but complex, and the consent requirements add friction. Privacy-friendly analytics like Plausible, Fathom, Umami or Cloudflare Web Analytics don't use cookies, are simpler to read, and often don't need a consent banner. For many small sites they're the better choice.

Pair whatever you use with Google Search Console, which shows the searches people used to find you. (Search Console for beginners)

---

EasySpawn hosts your site with HTTPS and security headers set up sensibly — and because it's your own server, you can even self-host privacy-friendly analytics like Umami next to your app. See how it works or join the waitlist.

Related: Analytics for Beginners · Google Search Console for Beginners · Do You Need a Cookie Banner? · How to Get Your Website on Google