Refactored analytics integration

material/base.html

@@ -71,9 +71,7 @@
       <link rel="stylesheet" href="{{ path | url }}">
     {% endfor %}
     {% block analytics %}
-      {% if config.google_analytics %}
-        {% include "partials/integrations/analytics.html" %}
-      {% endif %}
+      {% include "partials/integrations/analytics.html" %}
     {% endblock %}
     {% block extrahead %}{% endblock %}
   </head>

material/partials/integrations/analytics.html

@@ -1,6 +1,10 @@
 {#-
   This file was automatically generated - do not edit
 -#}
-{% set analytics = config.google_analytics %}
-<script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","{{ analytics[0] }}","{{ analytics[1] }}"),ga("set","anonymizeIp",!0),ga("send","pageview"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){var e;this.value&&(e=document.location.pathname,ga("send","pageview",e+"?q="+this.value))}),"undefined"!=typeof location$&&location$.subscribe(function(e){ga("send","pageview",e.pathname)})})</script>
-<script async src="https://www.google-analytics.com/analytics.js"></script>
+{% if config.google_analytics %}
+  {% set provider = "google" %}
+{% endif %}
+{% if config.extra.analytics %}
+  {% set provider = config.extra.analytics.provider %}
+{% endif %}
+{% include "partials/integrations/analytics/" ~ provider ~ ".html" %}

material/partials/integrations/analytics/google.html

@@ -0,0 +1,16 @@
+{#-
+  This file was automatically generated - do not edit
+-#}
+{% if config.google_analytics %}
+  {% set property = config.google_analytics[0] %}
+{% endif %}
+{% if config.extra.analytics %}
+  {% set property = config.extra.analytics.property | d("", true) %}
+{% endif %}
+{% if property.startswith("G-") %}
+  <script>function gtag(){dataLayer.push(arguments)}window.dataLayer=window.dataLayer||[],gtag("js",new Date),gtag("config","{{ property }}"),document.addEventListener("DOMContentLoaded",function(){"undefined"!=typeof location$&&location$.subscribe(function(t){gtag("config","{{ property }}",{page_path:t.pathname})})})</script>
+  <script async src="https://www.googletagmanager.com/gtag/js?id={{ property }}"></script>
+{% elif property.startswith("UA-") %}
+  <script>window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)},ga.l=+new Date,ga("create","{{ property }}","auto"),ga("set","anonymizeIp",!0),ga("send","pageview"),document.addEventListener("DOMContentLoaded",function(){document.forms.search&&document.forms.search.query.addEventListener("blur",function(){var e;this.value&&(e=document.location.pathname,ga("send","pageview",e+"?q="+this.value))}),"undefined"!=typeof location$&&location$.subscribe(function(e){ga("send","pageview",e.pathname)})})</script>
+  <script async src="https://www.google-analytics.com/analytics.js"></script>
+{% endif %}

mkdocs.yml

@@ -98,6 +98,9 @@ plugins:
 
 # Customization
 extra:
+  analytics:
+    provider: google
+    property: !!python/object/apply:os.getenv ["GOOGLE_ANALYTICS_KEY"]
   social:
     - icon: fontawesome/brands/github
       link: https://github.com/squidfunk
@@ -202,8 +205,3 @@ nav:
     - Getting started:
       - Installation: insiders/getting-started.md
       - Changelog: insiders/changelog.md
-
-# Google Analytics
-google_analytics:
-  - !!python/object/apply:os.getenv ["GOOGLE_ANALYTICS_KEY"]
-  - auto

src/base.html

@@ -143,9 +143,7 @@
 
     <!-- Analytics -->
     {% block analytics %}
-      {% if config.google_analytics %}
-        {% include "partials/integrations/analytics.html" %}
-      {% endif %}
+      {% include "partials/integrations/analytics.html" %}
     {% endblock %}
 
     <!-- Custom front matter -->

src/partials/integrations/analytics.html

@@ -20,36 +20,15 @@
   IN THE SOFTWARE.
 -->
 
-<!-- Google Analytics integration -->
-{% set analytics = config.google_analytics %}
-<script>
-  window.ga = window.ga || function() {
-    (ga.q = ga.q || []).push(arguments)
-  }
-  ga.l = +new Date
+<!-- Determine analytics provider (deprecated, removed in v8) -->
+{% if config.google_analytics %}
+  {% set provider = "google" %}
+{% endif %}
 
-  /* Set up integration and send page view */
-  ga("create", "{{ analytics[0] }}", "{{ analytics[1] }}")
-  ga("set", "anonymizeIp", true)
-  ga("send", "pageview")
+<!-- Determine analytics provider -->
+{% if config.extra.analytics %}
+  {% set provider = config.extra.analytics.provider %}
+{% endif %}
 
-  /* Register handler to log search on blur */
-  document.addEventListener("DOMContentLoaded", function() {
-    if (document.forms.search) {
-      var query = document.forms.search.query
-      query.addEventListener("blur", function() {
-        if (this.value) {
-          var path = document.location.pathname;
-          ga("send", "pageview", path + "?q=" + this.value)
-        }
-      })
-    }
-
-    /* Send page view on location change */
-    if (typeof location$ !== "undefined")
-      location$.subscribe(function(url) {
-        ga("send", "pageview", url.pathname)
-      })
-  })
-</script>
-<script async src="https://www.google-analytics.com/analytics.js"></script>
+<!-- Analytics provider -->
+{% include "partials/integrations/analytics/" ~ provider ~ ".html" %}

src/partials/integrations/analytics/google.html

@@ -0,0 +1,93 @@
+<!--
+  Copyright (c) 2016-2021 Martin Donath <martin.donath@squidfunk.com>
+
+  Permission is hereby granted, free of charge, to any person obtaining a copy
+  of this software and associated documentation files (the "Software"), to
+  deal in the Software without restriction, including without limitation the
+  rights to use, copy, modify, merge, publish, distribute, sublicense, and/or
+  sell copies of the Software, and to permit persons to whom the Software is
+  furnished to do so, subject to the following conditions:
+
+  The above copyright notice and this permission notice shall be included in
+  all copies or substantial portions of the Software.
+
+  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+  FITNESS FOR A PARTICULAR PURPOSE AND NON-INFRINGEMENT. IN NO EVENT SHALL THE
+  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+  FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
+  IN THE SOFTWARE.
+-->
+
+<!-- Determine analytics property (deprecated, removed in v8) -->
+{% if config.google_analytics %}
+  {% set property = config.google_analytics[0] %}
+{% endif %}
+
+<!-- Determine analytics property -->
+{% if config.extra.analytics %}
+  {% set property = config.extra.analytics.property | d("", true) %}
+{% endif %}
+
+<!-- Google Analytics 4 (G-XXXXXXXXXX) -->
+{% if property.startswith("G-") %}
+  <script>
+    window.dataLayer = window.dataLayer || []
+    function gtag() { dataLayer.push(arguments) }
+
+    /* Set up integration and send page view */
+    gtag("js", new Date())
+    gtag("config", "{{ property }}")
+
+    /* Register virtual event handlers */
+    document.addEventListener("DOMContentLoaded", function() {
+
+      /* Send page view on location change */
+      if (typeof location$ !== "undefined")
+        location$.subscribe(function(url) {
+          gtag("config", "{{ property }}", {
+            page_path: url.pathname
+          })
+        })
+    })
+  </script>
+  <script async src="https://www.googletagmanager.com/gtag/js?id={{ property }}">
+  </script>
+
+<!-- Google Analytics (UA-XXXXXXXX-X) -->
+{% elif property.startswith("UA-") %}
+  <script>
+    window.ga = window.ga || function() {
+      (ga.q = ga.q || []).push(arguments)
+    }
+    ga.l = +new Date()
+
+    /* Set up integration and send page view */
+    ga("create", "{{ property }}", "auto")
+    ga("set", "anonymizeIp", true)
+    ga("send", "pageview")
+
+    /* Register virtual event handlers */
+    document.addEventListener("DOMContentLoaded", function() {
+      if (document.forms.search) {
+        var query = document.forms.search.query
+        query.addEventListener("blur", function() {
+          if (this.value) {
+            var path = document.location.pathname;
+            ga("send", "pageview", path + "?q=" + this.value)
+          }
+        })
+      }
+
+      /* Send page view on location change */
+      if (typeof location$ !== "undefined")
+        location$.subscribe(function(url) {
+          ga("send", "pageview", url.pathname)
+        })
+    })
+  </script>
+  <script async src="https://www.google-analytics.com/analytics.js"></script>
+{% endif %}
+
+