From f0ad140f07312c224f841a9b80d8aebda5591c65 Mon Sep 17 00:00:00 2001
From: George Cushen <gcushen@users.noreply.github.com>
Date: Tue, 24 Sep 2019 14:00:09 +0100
Subject: [PATCH] feat: add support for Google Tag Manager + refactor GA to use
 gtag.js

GT (gtag.js) and GTM are the modern Google analytics solutions.

New `[marketing]` config section added to `params.toml`.

GT will fall back to site.GoogleAnalytics if the new `[marketing]` param
for GT/GA isn't specified, so currently no breaking changes.

May deprecate site.GoogleAnalytics in future.

Close #1349
---
 data/assets.toml                              |  4 --
 exampleSite/config/_default/params.toml       |  7 ++++
 .../partials/marketing/google_analytics.html  | 40 +++++++++++++++++++
 .../marketing/google_tag_manager.html         |  9 +++++
 layouts/partials/site_head.html               | 19 +--------
 5 files changed, 58 insertions(+), 21 deletions(-)
 create mode 100644 layouts/partials/marketing/google_analytics.html
 create mode 100644 layouts/partials/marketing/google_tag_manager.html

diff --git a/data/assets.toml b/data/assets.toml
index 26a35054..2765877f 100644
--- a/data/assets.toml
+++ b/data/assets.toml
@@ -27,10 +27,6 @@
   version = "4.1.4"
   sri = "sha256-lqvxZrPLtfffUl2G/e7szqSvPBILGbwmsGE1MKlOi0Q="
   url = "https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/%s/imagesloaded.pkgd.min.js"
-[js.autotrack]
-  version = "2.4.1"
-  sri = "sha512-HUmooslVKj4m6OBu0OgzjXXr+QuFYy/k7eLI5jdeEy/F4RSgMn6XRWRGkFi5IFaFgy7uFTkegp3Z0XnJf3Jq+g=="
-  url = "https://cdnjs.cloudflare.com/ajax/libs/autotrack/%s/autotrack.js"
 [js.gmaps]
   version = "0.4.25"
   sri = "sha256-7vjlAeb8OaTrCXZkCNun9djzuB2owUsaO72kXaFDBJs="
diff --git a/exampleSite/config/_default/params.toml b/exampleSite/config/_default/params.toml
index 5794026a..905a19b4 100644
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -243,3 +243,10 @@ plugins_js  = []
   engine = 2
   api_key = ""
   zoom = 15
+
+############################
+## Marketing
+############################
+[marketing]
+  google_analytics = ""
+  google_tag_manager = ""
diff --git a/layouts/partials/marketing/google_analytics.html b/layouts/partials/marketing/google_analytics.html
new file mode 100644
index 00000000..f6ae56cd
--- /dev/null
+++ b/layouts/partials/marketing/google_analytics.html
@@ -0,0 +1,40 @@
+{{ $ga := site.Params.marketing.google_analytics | default site.GoogleAnalytics | default "" }}
+{{ $gtm := site.Params.marketing.google_tag_manager | default "" }}
+
+{{ if eq (getenv "HUGO_ENV") "production" | and $ga | and (not $gtm) }}
+
+{{ $gtag_config := cond site.Params.privacy_pack "{ 'anonymize_ip': true }" "{}" }}
+<script async src="https://www.googletagmanager.com/gtag/js?id={{$ga}}"></script>
+<script>
+  window.dataLayer = window.dataLayer || [];
+
+  function gtag() {
+      dataLayer.push(arguments);
+  }
+
+  function trackOutboundLink(url) {
+    gtag('event', 'click', {
+         'event_category': 'outbound',
+         'event_label': url,
+         'transport_type': 'beacon',
+         'event_callback': function () {
+           document.location = url;
+         }
+    });
+    console.debug("Outbound link clicked: " + url);
+  }
+
+  function onClickCallback(event) {
+    if ((event.target.tagName !== 'A') || (event.target.host === window.location.host)) {
+      return;
+    }
+    trackOutboundLink(event.target);  // Send GA event.
+  }
+
+  gtag('js', new Date());
+  gtag('config', '{{$ga}}', {{$gtag_config}});
+
+  // Outbound link tracking.
+  document.addEventListener('click', onClickCallback, false);
+</script>
+{{ end }}
diff --git a/layouts/partials/marketing/google_tag_manager.html b/layouts/partials/marketing/google_tag_manager.html
new file mode 100644
index 00000000..1da839ab
--- /dev/null
+++ b/layouts/partials/marketing/google_tag_manager.html
@@ -0,0 +1,9 @@
+{{ if eq (getenv "HUGO_ENV") "production" | and site.Params.marketing.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','{{site.Params.marketing.google_tag_manager}}');
+</script>
+{{ end }}
diff --git a/layouts/partials/site_head.html b/layouts/partials/site_head.html
index 189f8443..3bb841eb 100644
--- a/layouts/partials/site_head.html
+++ b/layouts/partials/site_head.html
@@ -117,23 +117,8 @@
     <link rel="stylesheet" href="{{ $css_bundle.RelPermalink }}">
   {{ end }}
 
-  {{ if not site.IsServer }}
-  {{ if site.GoogleAnalytics }}
-    <script>
-      window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
-      ga('create', '{{ site.GoogleAnalytics }}', 'auto');
-      {{ if site.Params.privacy_pack }}ga('set', 'anonymizeIp', true);{{ end }}
-      ga('require', 'eventTracker');
-      ga('require', 'outboundLinkTracker');
-      ga('require', 'urlChangeTracker');
-      ga('send', 'pageview');
-    </script>
-    <script async src="https://www.google-analytics.com/analytics.js"></script>
-    {{ if ($scr.Get "use_cdn") }}
-    {{ printf "<script async src=\"%s\" integrity=\"%s\" crossorigin=\"anonymous\"></script>" (printf $js.autotrack.url $js.autotrack.version) $js.autotrack.sri | safeHTML }}
-    {{ end }}
-  {{ end }}
-  {{ end }}
+  {{ partial "marketing/google_analytics" . }}
+  {{ partial "marketing/google_tag_manager" . }}
 
   {{ with .OutputFormats.Get "RSS" }}
   <link rel="alternate" href="{{.RelPermalink}}" type="application/rss+xml" title="{{site.Title}}">