Add Google Analytics to Your Site

Add Google Analytics 4 to track traffic, conversions, and user behavior on your site.

Hiveku already includes privacy-friendly visitor analytics — see Track Site Analytics. Use Google Analytics when you need GA-specific integrations (Google Ads conversions, advanced audiences, BigQuery export) or when your team is already on GA.

Get Your Measurement ID

Before installing, grab your GA4 Measurement ID from analytics.google.com:

Admin > Property > Data streams
Click your web stream
Copy the Measurement ID — it looks like G-XXXXXXXXXX

Three Ways to Install

AI Chat (Easiest)
Manual Snippet
Next.js (@next/third-parties)

Ask the AI in your project:

Add Google Analytics GA4 tracking with ID G-XXXXXXXXXX to my site. 
Put the snippet in the root layout so it's on every page.

The AI picks the right file for your stack (Next.js root layout, static site <head>, etc.), adds the snippet, and deploys when you confirm.

Paste the official GA4 snippet in your site’s <head>:

<!-- Google tag (gtag.js) -->
<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>

Replace G-XXXXXXXXXX with your real Measurement ID.For Next.js, put this in app/layout.tsx or pages/_document.tsx. For static sites, put it in the <head> of your base template.

Next.js has a first-party helper that handles the script tag and lazy loading:

npm install @next/third-parties

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

export default function RootLayout({ children }) {
  return (
    <html>
      <body>{children}</body>
      <GoogleAnalytics gaId={process.env.NEXT_PUBLIC_GA_ID!} />
    </html>
  );
}

Set NEXT_PUBLIC_GA_ID=G-XXXXXXXXXX as an env var. This gives you cleaner code and better performance than the manual snippet.

Using an Env Var

Whichever path you choose, it’s a good idea to read the Measurement ID from an environment variable rather than hardcoding it. This way, production uses one GA property and staging uses another (or none):

<script async src="https://www.googletagmanager.com/gtag/js?id={{ NEXT_PUBLIC_GA_ID }}"></script>

See Configure Environment Variables for how to set per-environment values. GA4 uses cookies to track users across sessions. Depending on your visitors’ location, you may need a consent banner before loading GA:

EU (GDPR) — explicit opt-in required
California (CCPA) — opt-out required, at minimum
Other regions — varies, check local law

Don’t load GA before the user consents. The easiest path is to enable the cookie consent banner in Site Enhancements and gate the GA snippet on it — the AI can wire this up for you.

Hiveku’s consent banner exposes exactly these globals on your site:

What	Value
`window.__hivekuConsent`	The visitor’s stored decision: `{ v, ts, mode, gpc, categories }`. Undefined until a decision exists.
`window.__hivekuConsent.categories`	Booleans keyed by category: `necessary`, `analytics`, `advertisement`, `functionality`.
`hiveku-consent-change`	A window event fired on every decision. `event.detail` is `{ action, categories }`.
`window.__hivekuConsentGPC`	`true` when the browser sent a Global Privacy Control signal. Advertising stays denied in that case regardless of what the banner says.

There is no window.hiveku.consent. If you gate on that, the condition is permanently undefined — permanently falsy — and your analytics never initialises. Use window.__hivekuConsent (two leading underscores).

Gating the GA snippet

The consent runtime is loaded asynchronously, so reading the global once at page load usually runs before consent resolves and you get a false negative. Check the global once — the inline bootstrap sets it synchronously for visitors who already have a stored decision — then listen for the event to cover everyone else:

<script>
  (function () {
    var loaded = false;

    function loadGA() {
      if (loaded) return;
      loaded = true;
      var gaScript = document.createElement('script');
      gaScript.async = true;
      gaScript.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
      document.head.appendChild(gaScript);
      window.dataLayer = window.dataLayer || [];
      function gtag() { window.dataLayer.push(arguments); }
      gtag('js', new Date());
      gtag('config', 'G-XXXXXXXXXX');
    }

    function analyticsGranted(categories) {
      return !!(categories && categories.analytics);
    }

    if (analyticsGranted(window.__hivekuConsent && window.__hivekuConsent.categories)) {
      loadGA();
    }

    window.addEventListener('hiveku-consent-change', function (event) {
      if (analyticsGranted(event.detail && event.detail.categories)) loadGA();
    });
  })();
</script>

You only need this hand-written gate when you paste the GA snippet into your own code. If you register GA4 as a tracker in Site Enhancements instead, the consent banner injects the tag for you once the Analytics category is granted, and sets Google Consent Mode v2 defaults before any Google tag can run.

Google Tag Manager

If you prefer Tag Manager, the install flow is identical — swap the gtag.js snippet for your GTM container snippet:

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){ /* GTM snippet */ })(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

Everything else in this guide applies the same way.

Verify It’s Working

Deploy your changes

Any of the three install paths above requires a deploy.

Open the Realtime report in GA4

analytics.google.com > your property > Reports > Realtime.

Visit your site in a new tab

Load any page. Within ~30 seconds, you should see your session appear in the Realtime report.

Check the script loaded

Open DevTools > Network > filter for gtag — you should see gtag/js?id=G-XXXXXXXXXX returning 200.

Troubleshooting

No data showing after 24 hours

Check three things: (1) Measurement ID format is G- followed by 10 characters — older UA-prefixed IDs are discontinued; (2) the gtag/js script loads successfully in DevTools Network — if it 404s, the ID is wrong; (3) the snippet is in the rendered HTML, not just the source — a client-rendered React app may need special placement.

Works in dev but not production

Check your env var — NEXT_PUBLIC_GA_ID has to be set in the production environment, not just locally. Vars without the NEXT_PUBLIC_ prefix aren’t exposed to the browser.

Ad blockers blocking tracking

Expected for a non-trivial slice of users. Mitigations include server-side Measurement Protocol for important events (conversions) and using Google Tag Manager’s server-side container. Don’t try to defeat ad blockers for general pageviews — you’ll erode user trust.

Duplicate events in reports

The GA snippet was added twice — commonly in both the root layout and a page template. Search your codebase for G- and remove duplicates.

Realtime works but reports are empty after hours

GA4 processes data in batches — full reports can lag 24–48 hours after first install. Realtime is the best quick-check for “is it working.”

Get Started

AI Assistant

Code Editor

Design Studio

CMS

Email Marketing

Social Media

Advertising

Commerce

Calendar

Communications

Sales

Publishing

Native Mobile

Email

Integrations

How-Tos

Account & Settings

Partners

Add Google Analytics to Your Site

Get Your Measurement ID

Three Ways to Install

Using an Env Var

Gating the GA snippet

Google Tag Manager

Verify It’s Working

Troubleshooting

What’s Next?

Track Site Analytics

Environment Variables

​Get Your Measurement ID

​Three Ways to Install

​Using an Env Var

​Cookie Consent & Privacy

​The consent API

​Gating the GA snippet

​Google Tag Manager

​Verify It’s Working

​Troubleshooting

​What’s Next?

Track Site Analytics

Environment Variables

Get Your Measurement ID

Three Ways to Install

Using an Env Var

Cookie Consent & Privacy

The consent API

Gating the GA snippet

Google Tag Manager

Verify It’s Working

Troubleshooting

What’s Next?