When building a personal blog or static website, tracking visitor traffic and user behavior is essential. Fortunately, Hugo comes with built-in support for Google Analytics 4 (GA4), making the integration quick and seamless.

This guide will walk you through setting up Google Analytics on your Hugo site step by step.

1. Obtain Your Measurement ID

Before configuring Hugo, ensure you have a Google Analytics account and an active Data Stream:

1. Log in to the Google Analytics Console.
2. Navigate to Admin -> Data Streams and select your web stream.
3. Copy your Measurement ID (it usually looks like G-XXXXXXXXXX).

2. Update Hugo Configuration

Add your GA4 Measurement ID to your site’s main configuration file located in the root directory.

Recommended Configuration (Modern Hugo)

For hugo.toml or config.toml:

[services]
  [services.googleAnalytics]
    id = 'G-XXXXXXXXXX'

For hugo.yaml or config.yaml:

services:
  googleAnalytics:
    id: 'G-XXXXXXXXXX'

Legacy Configuration (Older Hugo Versions)

If you are using an older version of Hugo, you can set the key directly at the top level of your configuration file:

googleAnalytics = 'G-XXXXXXXXXX'

3. Verify Theme Compatibility

Most modern Hugo themes include GA4 support out of the box. If tracking does not work automatically, check your theme’s head template (typically located at layouts/partials/head.html) to ensure the built-in internal template is included:

{{ template "_internal/google_analytics.html" . }}

4. Important Troubleshooting & Development Notes

1. Disabled in Local Development When running hugo server locally, Hugo automatically omits the Google Analytics tracking script. This prevents your local debugging and development activity from skewing production analytics data.

2. Enabled in Production Builds The analytics script will only be injected when building for the production environment:

   hugo --environment production
   

3. Verifying Your Setup After deploying your site, visit it in a browser while keeping the Realtime Report tab open in Google Analytics to verify that active sessions are recorded.

Conclusion

Thanks to Hugo’s built-in template mechanism, adding GA4 requires nothing more than adding your Measurement ID to the config file. This clean approach ensures simplicity without needing to hardcode external scripts into your site templates.