Integrate Google Analytics into Your Static Site

Track your visitors and grow your site with Google Analytics. Understanding your audience is crucial for optimizing content, improving user experience, and making data-driven decisions. This comprehensive guide will walk you through implementing Google Analytics 4 (GA4) on your static website, from account setup to advanced tracking configurations.

Why Use Google Analytics on Your Static Site?

Static sites are fast, secure, and simple to host—but they lack built-in analytics. Adding Google Analytics gives you powerful insights without compromising these benefits:

Understand your audience: Discover who visits your site, where they come from, and what devices they use
Track user behavior: See which pages attract the most visits and how users navigate your content
Measure content performance: Identify your best-performing content and opportunities for improvement
Set and track goals: Monitor specific user actions that matter to your business or project
Make data-driven decisions: Base your content strategy and site improvements on real user data

Getting Started with Google Analytics 4

Step 1: Create or Access Your Google Analytics Account

Go to Google Analytics and sign in with your Google account
Click “Admin” in the bottom left corner
In the Account column, click “Create Account” or select an existing account
Enter an account name (typically your organization name)
Configure data sharing settings according to your preferences
Click “Next”

Step 2: Create a Property for Your Website

Enter a property name (typically your website name)
Select your reporting time zone and currency
Click “Show advanced options”
Toggle “Create a Universal Analytics property” OFF (we’re using GA4)
Click “Next”
Enter business information as prompted
Click “Create”

Step 3: Set Up a Data Stream

From the Property column, select “Data Streams”
Choose “Web”
Enter your website URL and stream name
Configure enhanced measurement settings (recommended to leave enabled)
Click “Create stream”
Note your Measurement ID (format: G-XXXXXXXXXX)

Implementation Methods

Method 1: Basic Implementation (Google Tag)

This is the simplest method, suitable for most static sites:

In your HTML template or base layout file, add the following code just before the closing </head> tag:

<!-- 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 actual Measurement ID from step 3.

Method 2: Using Google Tag Manager (Recommended)

For more flexibility and control over tracking:

Create a Google Tag Manager account if you don’t have one
Create a container for your website
Add the Google Tag Manager code to your site (before the closing </head> tag and after the opening <body> tag)
In Tag Manager, create a new tag:
- Choose “Google Analytics: GA4 Configuration”
- Enter your Measurement ID
- Set trigger to “All Pages”
- Publish your container

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

And after the opening <body> tag:

<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

Replace GTM-XXXXXXX with your actual GTM container ID.

Method 3: Implementation with Popular Static Site Generators

Jekyll

Add to your _includes/head.html file:

<!-- 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>

Only runs in production environment to prevent tracking during local development.

Hugo

Create a partial in layouts/partials/googleanalytics.html:

<!-- In Hugo's config.toml -->
googleAnalytics = "G-XXXXXXXXXX"

<!-- In a layout template -->
{{ if not .Site.IsServer }}
  <script async src="https://www.googletagmanager.com/gtag/js?id={{ .Site.Params.googleAnalytics }}"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', '{{ .Site.Params.googleAnalytics }}');
  </script>
{{ end }}

Then include the partial in your <head> section:

{{ partial "googleanalytics.html" . }}

And include the partial in your <head> section.

Gatsby

Install the plugin:

npm install gatsby-plugin-google-gtag

Configure in gatsby-config.js:

module.exports = {
  plugins: [
    {
      resolve: `gatsby-plugin-google-gtag`,
      options: {
        trackingIds: [
          "G-XXXXXXXXXX", // Google Analytics / GA
        ],
        gtagConfig: {
          anonymize_ip: true,
          cookie_expires: 0,
        },
        pluginConfig: {
          head: true,
          respectDNT: true,
        },
      },
    },
  ],
}

Next.js

Create a custom _app.js file:

import { useEffect } from 'react'
import { useRouter } from 'next/router'

// Google Analytics measurement ID
const GA_MEASUREMENT_ID = 'G-XXXXXXXXXX'

function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    // Google Analytics setup
    const script = document.createElement('script')
    script.src = `https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`
    script.async = true
    document.head.appendChild(script)

    window.dataLayer = window.dataLayer || []
    function gtag() { dataLayer.push(arguments) }
    gtag('js', new Date())
    gtag('config', GA_MEASUREMENT_ID)

    // Track page views
    const handleRouteChange = url => {
      gtag('event', 'page_view', {
        page_path: url,
      })
    }
    router.events.on('routeChangeComplete', handleRouteChange)

    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return <Component {...pageProps} />
}

export default MyApp

Advanced Tracking Configurations

Track Custom Events

To track specific user interactions:

// Basic event tracking
gtag('event', 'button_click', {
  'event_category': 'engagement',
  'event_label': 'newsletter_signup'
});

// For more complex interactions
gtag('event', 'generate_lead', {
  'currency': 'USD',
  'value': 99.99,
  'transaction_id': '12345',
  'items': [{
    'item_id': 'SKU_12345',
    'item_name': 'Premium Subscription'
  }]
});

Track File Downloads

document.querySelectorAll('a[href$=".pdf"], a[href$=".docx"], a[href$=".zip"]').forEach(link => {
  link.addEventListener('click', function() {
    gtag('event', 'download', {
      'event_category': 'file_download',
      'event_label': this.href.split('/').pop(),
      'value': 1
    });
  });
});

Track Outbound Links

document.querySelectorAll('a[href^="http"]').forEach(link => {
  // Only external links (not your domain)
  if (!link.href.includes(window.location.hostname)) {
    link.addEventListener('click', function(e) {
      gtag('event', 'click', {
        'event_category': 'outbound',
        'event_label': this.href,
        'transport_type': 'beacon'
      });
    });
  }
});

Track Form Submissions

document.querySelectorAll('form').forEach(form => {
  form.addEventListener('submit', function() {
    gtag('event', 'form_submission', {
      'event_category': 'forms',
      'event_label': this.id || this.action
    });
  });
});

Track Scroll Depth

let scrollTracking = {
  25: false,
  50: false,
  75: false,
  90: false
};

window.addEventListener('scroll', function() {
  let scrollPercent = Math.round((window.scrollY / (document.body.offsetHeight - window.innerHeight)) * 100);
  
  Object.keys(scrollTracking).forEach(threshold => {
    if (scrollPercent >= threshold && !scrollTracking[threshold]) {
      scrollTracking[threshold] = true;
      gtag('event', 'scroll_depth', {
        'event_category': 'engagement',
        'event_label': threshold + '%',
        'non_interaction': true
      });
    }
  });
});

Privacy and Compliance Considerations

If your site serves European visitors:

Implement a cookie consent solution
Only load Google Analytics after consent is given
Set data anonymization options

// Example of conditional loading based on consent
if (userGaveConsent()) {
  // Load Google Analytics script
  const script = document.createElement('script');
  script.async = true;
  script.src = 'https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX';
  document.head.appendChild(script);
  
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  
  // Enable privacy-enhanced mode
  gtag('config', 'G-XXXXXXXXXX', {
    'anonymize_ip': true,
    'cookie_expires': 13 * 30 * 24 * 60 * 60, // 13 months in seconds
    'cookie_domain': 'your-domain.com',
    'cookie_flags': 'SameSite=None;Secure',
  });
}

Respect Do Not Track (DNT)

function respectDoNotTrack() {
  if (window.doNotTrack || navigator.doNotTrack || navigator.msDoNotTrack) {
    const dnt = window.doNotTrack || navigator.doNotTrack || navigator.msDoNotTrack;
    if (dnt === '1' || dnt === 'yes') {
      return true; // DNT is enabled
    }
  }
  return false; // DNT is not enabled
}

// Only load analytics if DNT is not enabled
if (!respectDoNotTrack()) {
  // Load Google Analytics
}

Verifying Your Implementation

After adding the tracking code to your site:

Use Google’s Tag Assistant to verify proper installation
Check real-time reports in Google Analytics to confirm data is being collected
Test custom events using the real-time events report
Check for any errors in your browser’s developer console

Analyzing Your Data

Once your tracking is set up, learn to use these key GA4 reports:

1. Real-Time Report

See active users and their activities
Useful for testing event tracking
Found under “Reports” > “Real-time”

2. Acquisition Reports

Discover where your visitors come from
Analyze traffic sources and campaigns
Found under “Reports” > “Acquisition”

3. Engagement Reports

See which pages receive the most views
Analyze user engagement metrics
Found under “Reports” > “Engagement”

4. Conversion Reports

Track goal completions and e-commerce transactions
Measure ROI and campaign effectiveness
Found under “Reports” > “Conversions”

Common Issues and Troubleshooting

No Data in Reports

Verify the tracking code is correctly installed
Check for JavaScript errors in the console
Confirm you’re looking at the correct property/view
Check for ad-blockers or privacy extensions
Wait 24-48 hours for data processing

Incorrect Data

Check for duplicate tracking code installations
Verify your filters are set up correctly
Ensure cross-domain tracking is configured properly if needed
Check for referral exclusions if necessary

Sampling Issues

Use shorter date ranges when possible
Create custom reports with fewer dimensions and metrics
Consider Google Analytics 360 for high-traffic sites

Best Practices

Respect user privacy: Always have a clear privacy policy explaining your use of analytics
Don’t track personally identifiable information (PII): Never send email addresses, names, etc.
Set up regular reporting: Create custom reports and dashboards for metrics that matter to you
Use annotations: Mark significant events (site changes, marketing campaigns) for context
Combine with other tools: Consider supplementing GA with heatmapping or session recording tools
Clean your data: Set up filters to exclude internal traffic and bots
Set meaningful goals: Configure conversion tracking that aligns with your site’s purpose

Conclusion

Adding Google Analytics to your static site provides valuable insights with minimal performance impact. By following this guide, you’ve gained the tools to understand your audience, track important interactions, and make data-informed decisions to grow your site.

As you become more comfortable with basic analytics, don’t hesitate to explore more advanced features like custom dimensions, audiences, and Google Analytics’ machine learning capabilities to extract even deeper insights from your data.

Remember that the most successful analytics implementations focus on answering specific questions rather than collecting data for its own sake. Start with clear objectives about what you want to learn from your visitors’ behavior, and let those guide your tracking strategy.

Have questions about implementing Google Analytics on your static site? Leave a comment below!

Integrate Google Analytics into Your Static Site

Integrate Google Analytics into Your Static Site

Why Use Google Analytics on Your Static Site?

Getting Started with Google Analytics 4

Step 1: Create or Access Your Google Analytics Account

Step 2: Create a Property for Your Website

Step 3: Set Up a Data Stream

Implementation Methods

Method 1: Basic Implementation (Google Tag)

Method 2: Using Google Tag Manager (Recommended)

Method 3: Implementation with Popular Static Site Generators

Jekyll

Hugo

Gatsby

Next.js

Advanced Tracking Configurations

Track Custom Events

Track File Downloads

Track Outbound Links

Track Form Submissions

Track Scroll Depth

Privacy and Compliance Considerations

GDPR Compliance

Respect Do Not Track (DNT)

Verifying Your Implementation

Analyzing Your Data

1. Real-Time Report

2. Acquisition Reports

3. Engagement Reports

4. Conversion Reports

Common Issues and Troubleshooting

No Data in Reports

Incorrect Data

Sampling Issues

Best Practices

Conclusion

Related Articles

Mastering Google Analytics 4: The Ultimate Guide for Website Owners in 2025

How to Build a Static Blog Using Jekyll and GitHub Pages