Home › Blog › How to Add Google Analytics to Your Jekyll Site
Tutorial

How to Add Google Analytics to Your Jekyll Site

Add Google Analytics 4 to Jekyll in under 5 minutes — with the tracking snippet, privacy-friendly loading, and how to verify it's working correctly.

Updated 6 min read
How to Add Google Analytics to Your Jekyll Site

Adding Google Analytics to Jekyll takes about 5 minutes. This guide covers Google Analytics 4 (GA4), the only version Google currently supports, plus tips for privacy-friendly loading and verifying it works.

What You Need

  • A Google account
  • Your Jekyll site’s URL
  • Access to your Jekyll theme files

Step 1: Create a GA4 Property

  1. Go to analytics.google.com
  2. Click Admin (gear icon, bottom left)
  3. Click Create → Property
  4. Enter your property name and time zone, click Next
  5. Fill in your business details, click Create
  6. Choose Web as the platform
  7. Enter your website URL and stream name
  8. Click Create stream

You’ll see your Measurement ID — it looks like G-XXXXXXXXXX. Copy it.

Step 2: Add Your Measurement ID to _config.yml

Store the ID in your config so it’s easy to change and easy to disable:

# _config.yml
google_analytics: G-XXXXXXXXXX

Step 3: Create the Analytics Include

Create _includes/analytics.html:


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

The {% if site.google_analytics %} check means analytics only loads when the ID is set — remove the ID from _config.yml to disable tracking entirely.

Step 4: Add to Your Layout

In _layouts/default.html, add the include just before </head>:


<head>
  <!-- your existing head content -->
  {% include analytics.html %}
</head>

Step 5: Disable Analytics in Development

You don’t want to track your own visits while building locally. Jekyll sets JEKYLL_ENV to development by default locally and production on most hosts.

Update your include to only load in production:


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

Make sure your deployment sets the environment variable:

# Netlify / Cloudflare Pages — add environment variable:
JEKYLL_ENV=production

GitHub Actions already sets this in the default Jekyll workflow.

Step 6: Verify It’s Working

Method A: Real-time report

  1. Open Google Analytics → Reports → Realtime
  2. Open your live site in another tab
  3. You should see yourself as an active user within 30 seconds

Method B: Browser Dev Tools

  1. Open your live site
  2. Open DevTools → Network tab
  3. Filter by google or gtag
  4. Refresh the page — you should see requests to googletagmanager.com

Method C: GA4 Debugger Install the Google Analytics Debugger Chrome extension. It logs all GA4 events to the console.

GDPR requires user consent before setting analytics cookies in the EU. If your audience is European or you want to be safe:


{% if site.google_analytics and jekyll.environment == 'production' %}
<script>
  // Only load GA after user clicks "Accept"
  function loadAnalytics() {
    var s = document.createElement('script');
    s.src = 'https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}';
    s.async = true;
    document.head.appendChild(s);
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '{{ site.google_analytics }}');
  }
  
  if (localStorage.getItem('analytics_consent') === 'true') {
    loadAnalytics();
  }
</script>
{% endif %}

Option B: Switch to a Privacy-First Alternative

If GDPR compliance is important, consider:

  • Plausible Analytics — no cookies, GDPR compliant, $9/month. Add with one script tag.
  • Fathom Analytics — similar to Plausible, privacy-first
  • Cloudflare Web Analytics — free, no cookies, built into Cloudflare Pages

For Plausible:


{% if site.plausible_domain and jekyll.environment == 'production' %}
<script defer data-domain="{{ site.plausible_domain }}" 
        src="https://plausible.io/js/script.js"></script>
{% endif %}


# _config.yml
plausible_domain: yourdomain.com

Common Issues

Analytics not showing data

  • Check that JEKYLL_ENV=production is set in your deployment environment
  • Verify the script is in the <head> of your built HTML (view source on the live site)
  • Check browser console for errors
  • Make sure you’re not running an ad blocker that blocks GA

Seeing your own visits in reports

  • You’re either not using the jekyll.environment == 'production' check, or JEKYLL_ENV isn’t being set correctly on your host
  • Install the Block Yourself from Analytics Chrome extension

Data appears in GA but with wrong URL

  • Check url in _config.yml — it should be your full domain with https://
  • In GA4, verify the data stream URL matches your live site URL

Once GA4 is tracking, wait 24–48 hours and then check Reports → Acquisition → Traffic acquisition to see where your visitors are coming from. For a new site, most traffic will be direct initially — organic search traffic grows over weeks as Google indexes your posts.

Browse Jekyll themes on JekyllHub — many themes include pre-configured analytics support in their _config.yml.

jekyll google analytics google analytics 4 jekyll jekyll analytics jekyll tracking
Share LinkedIn