From 4e63aa4f1454356b0bc617b79141aaae7ffe24ee Mon Sep 17 00:00:00 2001
From: Xin <xin@imfing.com>
Date: Thu, 21 Sep 2023 08:03:35 +0100
Subject: [PATCH] feat: add google analytics support (#70)

* feat: support google analytics

* docs: add instruction for setting up ga
---
 exampleSite/content/docs/guide/configuration.md |  9 +++++++++
 exampleSite/hugo.yaml                           |  2 ++
 layouts/partials/google-analytics.html          | 13 +++++++++++++
 layouts/partials/head.html                      | 11 +++++++++++
 4 files changed, 35 insertions(+)
 create mode 100644 layouts/partials/google-analytics.html

diff --git a/exampleSite/content/docs/guide/configuration.md b/exampleSite/content/docs/guide/configuration.md
index 0044c92..bf1e248 100644
--- a/exampleSite/content/docs/guide/configuration.md
+++ b/exampleSite/content/docs/guide/configuration.md
@@ -197,3 +197,12 @@ There are three available options: `full`, `wide`, and `normal`.
 By default, the page width is set to `normal`.
 
 Similarly, the width of the navbar and footer can be customized by the `params.navbar.width` and `params.footer.width` parameters.
+
+
+### Google Analytics
+
+To enable Google Analytics, set the `googleAnalytics` parameter in the config file:
+
+```yaml {filename="hugo.yaml"}
+googleAnalytics: G-XXXXXXXXXX
+```
diff --git a/exampleSite/hugo.yaml b/exampleSite/hugo.yaml
index 74a271e..6f66935 100644
--- a/exampleSite/hugo.yaml
+++ b/exampleSite/hugo.yaml
@@ -7,6 +7,8 @@ enableGitInfo: true
 # enableEmoji: false
 hasCJKLanguage: true
 
+# googleAnalytics: G-XXXXXXXXXX
+
 outputs:
   home: [HTML]
   page: [HTML]
diff --git a/layouts/partials/google-analytics.html b/layouts/partials/google-analytics.html
new file mode 100644
index 0000000..3fd65aa
--- /dev/null
+++ b/layouts/partials/google-analytics.html
@@ -0,0 +1,13 @@
+{{ with .Site.GoogleAnalytics }}
+  <!-- Global site tag (gtag.js) - Google Analytics -->
+  <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 }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index cf3904a..1e342c8 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -16,10 +16,21 @@
     {{ end -}}
   </title>
   <meta name="description" content="{{ partial "utils/page-description.html" . }}" />
+
   {{ partial "opengraph.html" . }}
   {{ template "_internal/schema.html" . -}}
   {{ template "_internal/twitter_cards.html" . -}}
+
   {{ partialCached "head-css.html" . }}
+
+
+  <!-- Google Analytics -->
+  {{- if and .Site.GoogleAnalytics (eq hugo.Environment "production") }}
+    <link rel="preconnect" href="https://www.googletagmanager.com" crossorigin />
+    {{ partial "google-analytics.html" . }}
+  {{- end }}
+
+
   <script>
     /* Initialize light/dark mode */
     if (localStorage.getItem("color-theme") === "dark" || (!("color-theme" in localStorage) && window.matchMedia("(prefers-color-scheme: dark)").matches)) {