← hugo-clarity

add google tag manager #334

0a175f668d3d72f7f27c330620e9e5769a965440 · weru · Feb 3, 2023 13:03

Signed-off-by: weru <fromweru@gmail.com>

+27 −2 · 5 files changed

  • README.md +2 −1
  • exampleSite/config/_default/params.toml +4 −1
  • layouts/_default/baseof.html +1 −0
  • layouts/partials/head.html +2 −0
  • layouts/partials/vendor/google/tag-manager.html +18 −0
diff --git a/README.md b/README.md
index eab2dfe..7161494 100644
--- a/README.md
+++ b/README.md
@@ -217,6 +217,7 @@ These options set global values that some pages or all pages in the site use by
 | twitter                    | string                      | no                  |
 | largeTwitterCard           | boolean                     | no                  |
 | ga_analytics               | string                      | no                  |
+| google_tag_manager_id      | string                      | no                  |
 | baidu_analytics            | string                      | no                  |
 | plausible_analytics        | boolean                     | no                  |
 | matomo_analytics           | boolean                     | no                  |
@@ -311,7 +312,7 @@ If you wish to globally use a [large Twitter summary card](https://developer.twi
 
 ### Web site analytics
 
-If using Google Analytics, configure the `ga_analytics` global parameter in your site with your ID.
+If using Google Analytics, configure the `ga_analytics` global parameter in your site with your ID. You can opt to set a google tag manager using `google_tag_manager_id`.
 
 If using Baidu Analytics, configure the `baidu_analytics` global parameter in your site with your ID.
 
diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
index 8e02001..8704375 100644
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -12,7 +12,10 @@ introDescription = "Technologist, perpetual student, teacher, continual incremen
 # showShare = false # Uncomment to not show share buttons on each post. Also available in each post's front matter.
 
 # Google analytics Id
-ga_analytics = "XXXXXXXXXX"
+ga_analytics = ""
+
+# Google tag manager
+google_tag_manager_id = ""
 
 # Baidu analytics Id
 # baidu_analytics = "XXXXXXXX"
diff --git a/layouts/_default/baseof.html b/layouts/_default/baseof.html
index eed5a5e..498fdf7 100644
--- a/layouts/_default/baseof.html
+++ b/layouts/_default/baseof.html
@@ -27,6 +27,7 @@
     id="documentTop"
     data-lang="{{ .Lang }}"
   >
+    {{- partialCached "vendor/google/tag-manager" (dict "noscript" true) }}
     {{- partial "header" . }}
     <main>
       {{- block "main" . }}{{ end }}
diff --git a/layouts/partials/head.html b/layouts/partials/head.html
index 507d2fa..0ecb2c3 100644
--- a/layouts/partials/head.html
+++ b/layouts/partials/head.html
@@ -43,3 +43,5 @@
   <link rel="stylesheet" href="{{ relURL . }}">
   {{- end }}
 {{- end }}
+
+{{- partial "vendor/google/tag-manager" (dict "noscript" false) }}
\ No newline at end of file
diff --git a/layouts/partials/vendor/google/tag-manager.html b/layouts/partials/vendor/google/tag-manager.html
new file mode 100644
index 0000000..e8211f4
--- /dev/null
+++ b/layouts/partials/vendor/google/tag-manager.html
@@ -0,0 +1,18 @@
+{{- $id := trim site.Params.google_tag_manager_id " " }}
+{{- $tagManagerSet := gt (len $id) 4 }}
+{{- if and hugo.IsProduction $tagManagerSet }}
+  {{- if .noscript }}
+    <!-- Google Tag Manager (noscript) -->
+    <noscript><iframe src="https://www.googletagmanager.com/ns.html?id={{ $id }}"
+    height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
+    <!-- End Google Tag Manager (noscript) -->
+  {{- else }}
+    <!-- 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','{{ $id }}');</script>
+    <!-- End Google Tag Manager -->
+  {{- end }}
+{{- end }}
\ No newline at end of file