perf(v2): more performant gtag and analytics plugin (#2070)

* perf(v2): more performant gtag and analytics plugin

* more spec compliant

* optimize n refactor

* typo

* review

packages/docusaurus-plugin-google-analytics/src/analytics.js

@@ -5,57 +5,11 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import siteConfig from '@generated/docusaurus.config';
-
-const {themeConfig} = siteConfig;
-
 export default (function() {
-  if (!themeConfig.googleAnalytics) {
+  if (typeof window === 'undefined') {
     return null;
   }
 
-  const {trackingID} = themeConfig.googleAnalytics;
-  if (process.env.NODE_ENV === 'development' && !trackingID) {
-    console.warn(
-      'You specified the `googleAnalytics` object in `themeConfig` but the `trackingID` field was missing. ' +
-        'Please ensure this is not a mistake.',
-    );
-    return null;
-  }
-
-  if (
-    process.env.NODE_ENV !== 'production' ||
-    !trackingID ||
-    typeof window === 'undefined'
-  ) {
-    return null;
-  }
-
-  /* eslint-disable */
-  (function(i, s, o, g, r, a, m) {
-    i['GoogleAnalyticsObject'] = r;
-    (i[r] =
-      i[r] ||
-      function() {
-        (i[r].q = i[r].q || []).push(arguments);
-      }),
-      (i[r].l = 1 * new Date());
-    (a = s.createElement(o)), (m = s.getElementsByTagName(o)[0]);
-    a.async = 1;
-    a.src = g;
-    m.parentNode.insertBefore(a, m);
-  })(
-    window,
-    document,
-    'script',
-    'https://www.google-analytics.com/analytics.js',
-    'ga',
-  );
-  /* eslint-enable */
-
-  window.ga('create', trackingID, 'auto');
-  window.ga('send', 'pageview');
-
   return {
     onRouteUpdate({location}) {
       // Set page so that subsequent hits on this page are attributed

packages/docusaurus-plugin-google-analytics/src/index.js

@@ -7,12 +7,64 @@
 
 const path = require('path');
 
-module.exports = function() {
+module.exports = function(context) {
+  const {siteConfig} = context;
+  const {themeConfig} = siteConfig;
+  const {googleAnalytics} = themeConfig || {};
+
+  if (!googleAnalytics) {
+    throw new Error(
+      `You need to specify 'googleAnalytics' object in 'themeConfig' with 'trackingId' field in it to use docusaurus-plugin-google-analytics`,
+    );
+  }
+
+  const {trackingID} = googleAnalytics;
+
+  if (!trackingID) {
+    throw new Error(
+      'You specified the `googleAnalytics` object in `themeConfig` but the `trackingID` field was missing. ' +
+        'Please ensure this is not a mistake.',
+    );
+  }
+  const isProd = process.env.NODE_ENV === 'production';
   return {
     name: 'docusaurus-plugin-google-analytics',
 
     getClientModules() {
-      return [path.resolve(__dirname, './analytics')];
+      return isProd ? [path.resolve(__dirname, './analytics')] : [];
+    },
+
+    injectHtmlTags() {
+      if (!isProd) {
+        return {};
+      }
+      return {
+        headTags: [
+          {
+            tagName: 'link',
+            attributes: {
+              rel: 'preconnect',
+              href: 'https://www.google-analytics.com',
+            },
+          },
+          // https://developers.google.com/analytics/devguides/collection/analyticsjs/#alternative_async_tag
+          {
+            tagName: 'script',
+            innerHTML: `
+              window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
+              ga('create', '${trackingID}', 'auto');
+              ga('send', 'pageview');
+            `,
+          },
+          {
+            tagName: 'script',
+            attributes: {
+              async: true,
+              src: 'https://www.google-analytics.com/analytics.js',
+            },
+          },
+        ],
+      };
     },
   };
 };

packages/docusaurus-plugin-google-gtag/src/gtag.js

@@ -7,48 +7,16 @@
 
 import siteConfig from '@generated/docusaurus.config';
 
-const {themeConfig} = siteConfig;
-
 export default (function() {
-  if (!themeConfig.gtag) {
+  if (typeof window === 'undefined') {
     return null;
   }
 
-  const {trackingID} = themeConfig.gtag;
+  const {
-  if (process.env.NODE_ENV === 'development' && !trackingID) {
+    themeConfig: {
-    console.warn(
+      gtag: {trackingID},
-      'You specified the `gtag` object in `themeConfig` but the `trackingID` field was missing. ' +
+    },
-        'Please ensure this is not a mistake.',
+  } = siteConfig;
-    );
-    return null;
-  }
-
-  if (
-    process.env.NODE_ENV !== 'production' ||
-    !trackingID ||
-    typeof window === 'undefined'
-  ) {
-    return null;
-  }
-
-  /* eslint-disable */
-  const $scriptEl = window.document.createElement('script');
-  $scriptEl.async = 1;
-  $scriptEl.src = `https://www.googletagmanager.com/gtag/js?id=${trackingID}`;
-  window.document.head.appendChild($scriptEl);
-
-  window.dataLayer = window.dataLayer || [];
-  function gtag() {
-    // Have to use `arguments` instead of spreading as there are
-    // other properties attached to it e.g. callee.
-    // The GA library requires usage of `arguments.
-    window.dataLayer.push(arguments);
-  }
-  // Expose globally.
-  window.gtag = gtag;
-  gtag('js', new Date());
-  gtag('config', trackingID);
-  /* eslint-enable */
 
   return {
     onRouteUpdate({location}) {

packages/docusaurus-plugin-google-gtag/src/index.js

@@ -7,12 +7,73 @@
 
 const path = require('path');
 
-module.exports = function() {
+module.exports = function(context) {
+  const {siteConfig} = context;
+  const {themeConfig} = siteConfig;
+  const {gtag} = themeConfig || {};
+
+  if (!gtag) {
+    throw new Error(
+      `You need to specify 'gtag' object in 'themeConfig' with 'trackingId' field in it to use docusaurus-plugin-google-gtag`,
+    );
+  }
+
+  const {trackingID} = gtag;
+
+  if (!trackingID) {
+    throw new Error(
+      'You specified the `gtag` object in `themeConfig` but the `trackingID` field was missing. ' +
+        'Please ensure this is not a mistake.',
+    );
+  }
+
+  const isProd = process.env.NODE_ENV === 'production';
   return {
     name: 'docusaurus-plugin-google-gtag',
 
     getClientModules() {
-      return [path.resolve(__dirname, './gtag')];
+      return isProd ? [path.resolve(__dirname, './gtag')] : [];
+    },
+
+    injectHtmlTags() {
+      if (!isProd) {
+        return {};
+      }
+      return {
+        // Gtag includes GA by default, so we also preconnect to google-analytics.
+        headTags: [
+          {
+            tagName: 'link',
+            attributes: {
+              rel: 'preconnect',
+              href: 'https://www.google-analytics.com',
+            },
+          },
+          {
+            tagName: 'link',
+            attributes: {
+              rel: 'preconnect',
+              href: 'https://www.googletagmanager.com',
+            },
+          },
+          // https://developers.google.com/analytics/devguides/collection/gtagjs/#install_the_global_site_tag
+          {
+            tagName: 'script',
+            attributes: {
+              async: true,
+              src: `https://www.googletagmanager.com/gtag/js?id=${trackingID}`,
+            },
+          },
+          {
+            tagName: 'script',
+            innerHTML: `
+              window.dataLayer = window.dataLayer || [];
+              function gtag(){dataLayer.push(arguments);}
+              gtag('js', new Date());
+              gtag('config', '${trackingID}');`,
+          },
+        ],
+      };
     },
   };
 };