New Google Analytics 4 plugin

Author: julien-boudry

build/build.js

@@ -80,6 +80,7 @@ async function buildAllPlugin() {
   var plugins = [
     {name: 'search', input: 'search/index.js'},
     {name: 'ga', input: 'ga.js'},
+    {name: 'ga4', input: 'ga4.js'},
     {name: 'matomo', input: 'matomo.js'},
     {name: 'emoji', input: 'emoji.js'},
     {name: 'external-script', input: 'external-script.js'},

docs/plugins.md

@@ -69,7 +69,7 @@ This plugin ignores diacritical marks when performing a full text search (e.g.,
 <script src="//polyfill.io/v3/polyfill.min.js?features=String.prototype.normalize"></script>
 ```
 
-## Google Analytics
+## Google Universal Analytics (GA3)
 
 Install the plugin and configure the track id.
 
@@ -91,6 +91,28 @@ Configure by `data-ga`.
 <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script>
 ```
 
+## Google Analytics 4 (GA4)
+
+Install the plugin and configure the gtag id.
+
+```html
+<script>
+  window.$docsify = {
+    gtag: 'G-XXXXXXXXX',
+  };
+</script>
+<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
+<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga4.min.js"></script>
+```
+
+Configure by `data-gtag`.
+
+<!-- prettier-ignore -->
+```html
+<script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js" data-gtag="G-XXXXXXXXX"></script>
+<script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script>
+```
+
 ## Emoji
 
 Renders a larger collection of emoji shorthand codes. Without this plugin, Docsify is able to render only a limited number of emoji shorthand codes.

src/plugins/ga4.js

@@ -0,0 +1,44 @@
+/* eslint-disable no-console */
+// Inspired by https://github.com/egoist/vue-ga/blob/master/src/index.js
+function appendScript(id) {
+    const script = document.createElement('script');
+    script.async = true;
+    script.src = 'https://www.googletagmanager.com/gtag/js?id='+id;
+    document.body.appendChild(script);
+  }
+
+  function init(id) {
+    appendScript(id);
+
+    window.dataLayer = window.dataLayer || [];
+
+    gtag = function() {dataLayer.push(arguments)};
+    gtag('js', new Date());
+
+    gtag('config', id, {
+        send_page_view: false, // Disable automatic pageview
+        debug_mode: (location.hostname === 'localhost') ? true : false
+    });
+  }
+
+  function collect() {
+    if (typeof gtag === 'undefined') {
+      init($docsify.gtag);
+    }
+
+    gtag('event', 'page_view', {
+        page_title: location.hash,
+        page_location: location.href
+    });
+  }
+
+  const install = function (hook) {
+    if (!$docsify.gtag) {
+        console.error('[Docsify] gtag is required.');
+        return;
+      }
+
+    hook.beforeEach(collect);
+  };
+
+  $docsify.plugins = [].concat(install, $docsify.plugins);