Track Your Site Performance

Add Google Analytics to understand your audience and track conversions.

Setup Google Analytics 4

Free analytics wired into your base layout, loaded only on production builds

Get Your Measurement ID

Go to Google Analytics and click Start measuring
Create a property (name, timezone, currency) and fill in your business details
Choose Web as the platform and add a data stream with your site URL
Copy your Measurement ID (starts with G-)

Add the ID to client.js

Keep your Measurement ID with the rest of your site config in src/_data/client.js. Because it lives in _data, it's available in every template as client.gaId:

// src/_data/client.js
module.exports = {
  name: "Eleventy Starter Template",
  // ...your existing config

  // Google Analytics 4 Measurement ID (leave empty to disable)
  gaId: "G-XXXXXXXXXX",

  // Available in templates as client.isProduction
  isProduction: process.env.ELEVENTY_ENV === "PROD",
};

Add the Google Tag to base.html

Drop the gtag snippet into the <head> of src/_includes/layouts/base.html so every page that extends it is tracked. The {% if client.isProduction and client.gaId %} guard keeps it out of local dev builds:

<!-- src/_includes/layouts/base.html -->
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  {% if client.isProduction and client.gaId %}
  <!-- Google tag (gtag.js) -->
  <script async src="https://www.googletagmanager.com/gtag/js?id={{ client.gaId }}"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){ dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', '{{ client.gaId }}');
  </script>
  {% endif %}

  {% block head %}{% endblock %}

  <title>{{ title }}</title>
</head>

Build, Deploy & Verify

Build for production so the guard passes and the tag is included, then deploy:

# Production build (includes the GA tag)
ELEVENTY_ENV=PROD npx @11ty/eleventy

# Local dev, tag is NOT rendered
npx @11ty/eleventy --serve

Realtime report: open Google Analytics → Reports → Realtime, visit your live site, and you should appear within a minute or two
Tag Assistant: install the Google Tag Assistant extension to confirm the GA4 tag is firing correctly

That's It!

Once you see yourself in the Realtime report, tracking is live. Full reports can take 24–48 hours to populate. If you run a strict Content Security Policy, allow googletagmanager.com and google-analytics.com.

Track Custom Events

Measure button clicks, form submissions, and conversions

Google Analytics Events

The snippet in base.html defines a global gtag function on production builds. Guard your calls with window.gtag so nothing throws in local dev, then fire an event on any interaction:

<!-- gtag is defined by base.html on production builds -->

<!-- Track button click -->
<button onclick="window.gtag && gtag('event', 'signup_click')">
  Sign Up
</button>

<!-- Track form submission -->
<form onsubmit="window.gtag && gtag('event', 'contact_submit')">
  <!-- form fields -->
</form>

📋 Privacy & Cookie Consent

• If your visitors are in the EU, GDPR requires consent before loading Analytics cookies
• A common approach: show a cookie consent banner, then load Analytics only after consent is granted
• For compliant tracking, use Google Consent Mode
• Update your privacy policy to mention analytics tracking, and never track personally identifiable information (PII)

You're All Set!

Analytics is now tracking your visitors. Check your dashboard to see real-time data.

Deploy Your Site Optimize SEO