test: add google analytics gtag.js plugin codesandbox fix

build/build.js

@@ -1,13 +1,13 @@
-const rollup = require('rollup')
-const buble = require('rollup-plugin-buble')
-const commonjs = require('rollup-plugin-commonjs')
-const nodeResolve = require('rollup-plugin-node-resolve')
-const { uglify } = require('rollup-plugin-uglify')
-const replace = require('rollup-plugin-replace')
-const isProd = process.env.NODE_ENV === 'production'
-const version = process.env.VERSION || require('../package.json').version
-const chokidar = require('chokidar')
-const path = require('path')
+const rollup = require('rollup');
+const buble = require('rollup-plugin-buble');
+const commonjs = require('rollup-plugin-commonjs');
+const nodeResolve = require('rollup-plugin-node-resolve');
+const { terser } = require('rollup-plugin-terser');
+const replace = require('rollup-plugin-replace');
+const isProd = process.env.NODE_ENV === 'production';
+const version = process.env.VERSION || require('../package.json').version;
+const chokidar = require('chokidar');
+const path = require('path');
 
 /**
  * @param {{
@@ -24,89 +24,100 @@ async function build(opts) {
       plugins: (opts.plugins || []).concat([
         buble({
           transforms: {
-            dangerousForOf: true
-          }}),
+            dangerousForOf: true,
+          },
+        }),
         commonjs(),
         nodeResolve(),
         replace({
           __VERSION__: version,
-          'process.env.SSR': false
-        })
+          'process.env.SSR': false,
+        }),
       ]),
       onwarn: function (message) {
         if (message.code === 'UNRESOLVED_IMPORT') {
           throw new Error(
             `Could not resolve module ` +
-            message.source +
-            `. Try running 'npm install' or using rollup's 'external' option if this is an external dependency. ` +
-            `Module ${message.source} is imported in ${message.importer}`
-            )
+              message.source +
+              `. Try running 'npm install' or using rollup's 'external' option if this is an external dependency. ` +
+              `Module ${message.source} is imported in ${message.importer}`
+          );
         }
-      }
+      },
     })
     .then(function (bundle) {
-      var dest = 'lib/' + (opts.output || opts.input)
+      var dest = 'lib/' + (opts.output || opts.input);
 
-      console.log(dest)
+      console.log(dest);
       return bundle.write({
         format: 'iife',
-        output: opts.globalName ? {name: opts.globalName} : {},
+        output: {
+          name: opts.globalName || null,
+          file: dest,
+        },
         file: dest,
-        strict: false
-      })
-    })
+        strict: false,
+      });
+    });
 }
 
 async function buildCore() {
-  const promises = []
+  const promises = [];
 
-  promises.push(build({
-    input: 'src/core/index.js',
-    output: 'docsify.js',
-  }))
+  promises.push(
+    build({
+      input: 'src/core/index.js',
+      output: 'docsify.js',
+    })
+  );
 
   if (isProd) {
-    promises.push(build({
-      input: 'src/core/index.js',
-      output: 'docsify.min.js',
-      plugins: [uglify()]
-    }))
+    promises.push(
+      build({
+        input: 'src/core/index.js',
+        output: 'docsify.min.js',
+        plugins: [terser()],
+      })
+    );
   }
 
-  await Promise.all(promises)
+  await Promise.all(promises);
 }
 
 async function buildAllPlugin() {
   var plugins = [
-    {name: 'search', input: 'search/index.js'},
-    {name: 'ga', input: 'ga.js'},
-    {name: 'matomo', input: 'matomo.js'},
-    {name: 'emoji', input: 'emoji.js'},
-    {name: 'external-script', input: 'external-script.js'},
-    {name: 'front-matter', input: 'front-matter/index.js'},
-    {name: 'zoom-image', input: 'zoom-image.js'},
-    {name: 'disqus', input: 'disqus.js'},
-    {name: 'gitalk', input: 'gitalk.js'}
-  ]
+    { name: 'search', input: 'search/index.js' },
+    { name: 'ga', input: 'ga.js' },
+    { name: 'gtag', input: 'gtag.js' },
+    { name: 'matomo', input: 'matomo.js' },
+    { name: 'emoji', input: 'emoji.js' },
+    { name: 'external-script', input: 'external-script.js' },
+    { name: 'front-matter', input: 'front-matter/index.js' },
+    { name: 'zoom-image', input: 'zoom-image.js' },
+    { name: 'disqus', input: 'disqus.js' },
+    { name: 'gitalk', input: 'gitalk.js' },
+  ];
 
   const promises = plugins.map(item => {
     return build({
       input: 'src/plugins/' + item.input,
-      output: 'plugins/' + item.name + '.js'
-    })
-  })
+      output: 'plugins/' + item.name + '.js',
+    });
+  });
 
   if (isProd) {
     plugins.forEach(item => {
-      promises.push(build({
-        input: 'src/plugins/' + item.input,
-        output: 'plugins/' + item.name + '.min.js',
-        plugins: [uglify()]
-      }))
-    })
+      promises.push(
+        build({
+          input: 'src/plugins/' + item.input,
+          output: 'plugins/' + item.name + '.min.js',
+          plugins: [terser()],
+        })
+      );
+    });
   }
 
-  await Promise.all(promises)
+  await Promise.all(promises);
 }
 
 async function main() {
@@ -116,41 +127,37 @@ async function main() {
         atomic: true,
         awaitWriteFinish: {
           stabilityThreshold: 1000,
-          pollInterval: 100
-        }
+          pollInterval: 100,
+        },
       })
       .on('change', p => {
-        console.log('[watch] ', p)
-        const dirs = p.split(path.sep)
+        console.log('[watch] ', p);
+        const dirs = p.split(path.sep);
         if (dirs[1] === 'core') {
-          buildCore()
+          buildCore();
         } else if (dirs[2]) {
-          const name = path.basename(dirs[2], '.js')
+          const name = path.basename(dirs[2], '.js');
           const input = `src/plugins/${name}${
             /\.js/.test(dirs[2]) ? '' : '/index'
-          }.js`
+          }.js`;
 
           build({
             input,
-            output: 'plugins/' + name + '.js'
-          })
+            output: 'plugins/' + name + '.js',
+          });
         }
       })
       .on('ready', () => {
-        console.log('[start]')
-        buildCore()
-        buildAllPlugin()
-      })
+        console.log('[start]');
+        buildCore();
+        buildAllPlugin();
+      });
   } else {
-    await Promise.all([
-      buildCore(),
-      buildAllPlugin()
-    ])
+    await Promise.all([buildCore(), buildAllPlugin()]);
   }
 }
 
-main().catch((e) => {
-  console.error(e)
-  process.exit(1)
-})
-
+main().catch(e => {
+  console.error(e);
+  process.exit(1);
+});

docs/plugins.md

@@ -71,6 +71,8 @@ This plugin ignores diacritical marks when performing a full text search (e.g.,
 
 ## Google Analytics
 
+> Google's Universal Analytics service will no longer process new data in standard properties beginning July 1, 2023. Prepare now by setting up and switching over to a Google Analytics 4 property and docsify's gtag.js plugin.
+
 Install the plugin and configure the track id.
 
 ```html
@@ -91,6 +93,31 @@ 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 track id.
+
+```html
+<script>
+  // Single ID
+  window.$docsify = {
+    gtag: 'UA-XXXXX-Y',
+  };
+
+  // Multiple IDs
+  window.$docsify = {
+    gtag: [
+      '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/gtag.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.