Insert Google Analytics Tracking Code in Hugo (googleAnalytics)

This article explains how to insert Google Analytics tracking code in Hugo.

Set the Tracking ID in the Configuration File

First, in the Google Analytics admin screen, run “Add property” and add the address of the website you want to analyze. If you do not have a Google Analytics account, create one first. The tracking ID issued at this time, such as G-AB1CD2EFGH, is identification information for determining access to that website. Because this ID differs by website, it is best to set it in the Hugo configuration file.

Hugo provides the googleAnalytics parameter in advance as a configuration file parameter. Set the tracking ID issued by the Google Analytics site as follows.
config.toml

baseURL = "https://www.devkuam.com/"
languageCode = "ko-kr"
title = "My Blog"
theme = "devkuma"

googleAnalytics = "G-AB1CD2EFGH" # example code

With this setting, you can check the tracking ID in template files with .Site.GoogleAnalytics.

Configure Automatic Insertion of Tracking Code (JS)

To use Google Analytics, each page must include tracking code like the following before the head element.

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

  gtag('config', 'G-AB1CD2EFGH');
</script>

Here, use a Hugo partial template to include the HTML code above in each page. The part that specifies a tracking ID such as G-AB1CD2EFGH is replaced with the value specified by the googleAnalytics parameter in the configuration file.

layouts/partials/analytics.html

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

  gtag('config', '{{ "{{" }} . }}');
</script>

{{ end }}
{{ end }}

Lines 1 and 2 of the template above control output so that tracking code is not printed when testing on a local Hugo server or when googleAnalytics is not configured.

Include the created partial template from a template file as follows. Here, it is included from the base template (baseof).
layouts/_default/baseof.html

<!DOCTYPE html>
<html lang="ja">
<head>
  {{- partial "analytics" . -}}
  <meta charset="UTF-8">
  ...omitted...
</head>
<body>
  ...omitted...
</body>
</html>

Now all pages include the Google Analytics tracking code.

Appendix: Hugo Built-in Template

In fact, Hugo provides a built-in internal template that includes Google Analytics tracking code.

You can easily insert tracking code by writing the following in any template file.

{{ template "_internal/google_analytics.html" . }}  <!-- synchronous version -->
{{ template "_internal/google_analytics_async.html" . }}  <!-- asynchronous version -->

However, built-in templates do not suppress code output when running on a local server, and they may not flexibly handle Google changes, so it is better to create a partial template if possible.