feat: add google analytics gtag.js plugin

docs/plugins.md

@@ -75,15 +75,26 @@ Install the plugin and configure the track id.
 
 ```html
 <script>
+  // Single ID
   window.$docsify = {
     ga: 'UA-XXXXX-Y',
   };
+
+  // Multiple IDs
+  window.$docsify = {
+    ga: [
+      'G-XXXXXXXX', // Google Analytics 4 (GA4)
+      'UA-XXXXXXXX', // Google Universal Analytics (GA3)
+      'AW-XXXXXXXX', // Google Ads
+      'DC-XXXXXXXX', // Floodlight
+    ],
+  };
 </script>
 <script src="//cdn.jsdelivr.net/npm/docsify/lib/docsify.min.js"></script>
 <script src="//cdn.jsdelivr.net/npm/docsify/lib/plugins/ga.min.js"></script>
 ```
 
-Configure by `data-ga`.
+Configure by `data-ga`, only support single gtag.
 
 <!-- prettier-ignore -->
 ```html

src/plugins/ga.js

@@ -1,31 +1,61 @@
 /* eslint-disable no-console */
 // From https://github.com/egoist/vue-ga/blob/master/src/index.js
-function appendScript() {
+
+function appendScript(id) {
   const script = document.createElement('script');
   script.async = true;
-  script.src = 'https://www.google-analytics.com/analytics.js';
+  script.src = 'https://www.googletagmanager.com/gtag/js?id=' + id;
   document.body.appendChild(script);
 }
 
-function init(id) {
-  appendScript();
-  window.ga =
-    window.ga ||
+// global site tag instance initialized
+function initGlobalSiteTag(id) {
+  appendScript(id);
+
+  window.dataLayer = window.dataLayer || [];
+  window.gtag =
+    window.gtag ||
     function () {
-      (window.ga.q = window.ga.q || []).push(arguments);
+      window.dataLayer.push(arguments);
     };
 
-  window.ga.l = Number(new Date());
-  window.ga('create', id, 'auto');
+  window.gtag('js', new Date());
+  window.gtag('config', id);
+}
+
+// add additional products to your tag
+// https://developers.google.com/tag-platform/gtagjs/install
+function initAdditionalTag(id) {
+  window.gtag('config', id);
+}
+
+function init(ids) {
+  if (Array.isArray(ids)) {
+    // set the first id to be a global site tag
+    initGlobalSiteTag(ids[0]);
+
+    // the rest ids
+    ids.forEach((id, index) => {
+      if (index > 0) {
+        initAdditionalTag(id);
+      }
+    });
+  } else {
+    initGlobalSiteTag(ids);
+  }
 }
 
 function collect() {
   if (!window.ga) {
     init($docsify.ga);
   }
 
-  window.ga('set', 'page', location.hash);
-  window.ga('send', 'pageview');
+  // usage: https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+  window.gtag('event', 'page_view', {
+    page_title: document.title,
+    page_location: location.href,
+    page_path: location.pathname,
+  });
 }
 
 const install = function (hook) {

test/e2e/ga.test.js

@@ -0,0 +1,97 @@
+// Modules, constants, and variables
+// npm run test:e2e ga.test.js
+// -----------------------------------------------------------------------------
+const docsifyInit = require('../helpers/docsify-init');
+const { test, expect } = require('./fixtures/docsify-init-fixture');
+
+const gaTagList = [
+  'AW-YYYYYY', // Google Ads
+  'DC-ZZZZZZ', // Floodlight
+  'G-XXXXXX', // Google Analytics 4 (GA4)
+  'UA-XXXXXX', // Google Universal Analytics (GA3)
+];
+
+// Suite
+// -----------------------------------------------------------------------------
+test.describe('GA Plugin Tests', () => {
+  // page request listened, print collect url
+  function pageRequestListened(page) {
+    // page.on('request', request => {
+    //   if (request.url().indexOf('www.google-analytics.com') !== -1) {
+    //     console.log(request.url());
+    //   }
+    // });
+
+    page.on('response', response => {
+      const request = response.request();
+      // googleads.g.doubleclick.net
+      // www.google-analytics.com
+      // www.googletagmanager.com
+      const reg =
+        /googleads\.g\.doubleclick\.net|www\.google-analytics\.com|www\.googletagmanager\.com/g;
+      if (request.url().match(reg)) {
+        console.log(request.url(), response.status());
+      }
+    });
+  }
+
+  // Tests
+  // ---------------------------------------------------------------------------
+  test('single gtag', async ({ page }) => {
+    pageRequestListened(page);
+
+    const docsifyInitConfig = {
+      config: {
+        ga: gaTagList[0],
+      },
+      scriptURLs: ['/lib/plugins/ga.min.js'],
+      styleURLs: ['/lib/themes/vue.css'],
+    };
+
+    await docsifyInit({
+      ...docsifyInitConfig,
+    });
+
+    const $docsify = await page.evaluate(() => window.$docsify);
+
+    // Verify config options
+    expect(typeof $docsify).toEqual('object');
+
+    console.log($docsify.ga, $docsify.ga === '');
+
+    // Tests
+    expect($docsify.ga).not.toEqual('');
+  });
+
+  test('multi gtag', async ({ page }) => {
+    pageRequestListened(page);
+
+    const docsifyInitConfig = {
+      config: {
+        ga: gaTagList,
+      },
+      scriptURLs: ['/lib/plugins/ga.min.js'],
+      styleURLs: ['/lib/themes/vue.css'],
+    };
+
+    await docsifyInit({
+      ...docsifyInitConfig,
+    });
+
+    const $docsify = await page.evaluate(() => window.$docsify);
+
+    // Verify config options
+    expect(typeof $docsify).toEqual('object');
+
+    console.log($docsify.ga, $docsify.ga === '');
+
+    // Tests
+    expect($docsify.ga).not.toEqual('');
+  });
+
+  test('data-ga attribute', async ({ page }) => {
+    pageRequestListened(page);
+
+    // TODO
+  });
+});