From 4b6da0e08eb2a284c914289adbd1e8dad60b8e3c Mon Sep 17 00:00:00 2001 From: endiliey Date: Sat, 30 Nov 2019 13:40:21 +0700 Subject: [PATCH 1/5] perf(v2): more performant gtag and analytics plugin --- .../src/index.js | 14 ++++++ .../docusaurus-plugin-google-gtag/src/gtag.js | 5 -- .../src/index.js | 49 ++++++++++++++++++- 3 files changed, 62 insertions(+), 6 deletions(-) diff --git a/packages/docusaurus-plugin-google-analytics/src/index.js b/packages/docusaurus-plugin-google-analytics/src/index.js index 6a5cdaa2c1e8..ecc91601b43f 100644 --- a/packages/docusaurus-plugin-google-analytics/src/index.js +++ b/packages/docusaurus-plugin-google-analytics/src/index.js @@ -14,5 +14,19 @@ module.exports = function() { getClientModules() { return [path.resolve(__dirname, './analytics')]; }, + + injectHtmlTags() { + return { + headTags: [ + { + tagName: 'link', + attributes: { + rel: 'preconnect', + href: 'https://www.google-analytics.com', + }, + }, + ], + }; + }, }; }; diff --git a/packages/docusaurus-plugin-google-gtag/src/gtag.js b/packages/docusaurus-plugin-google-gtag/src/gtag.js index bdd40d369ece..0179e28aed5a 100644 --- a/packages/docusaurus-plugin-google-gtag/src/gtag.js +++ b/packages/docusaurus-plugin-google-gtag/src/gtag.js @@ -32,11 +32,6 @@ export default (function() { } /* 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 diff --git a/packages/docusaurus-plugin-google-gtag/src/index.js b/packages/docusaurus-plugin-google-gtag/src/index.js index b6a79fee9709..1e2e6fa54de6 100644 --- a/packages/docusaurus-plugin-google-gtag/src/index.js +++ b/packages/docusaurus-plugin-google-gtag/src/index.js @@ -7,12 +7,59 @@ 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.', + ); + } + return { name: 'docusaurus-plugin-google-gtag', getClientModules() { return [path.resolve(__dirname, './gtag')]; }, + + injectHtmlTags() { + return { + headTags: [ + { + tagName: 'link', + attributes: { + rel: 'preconnect', + href: 'https://www.google-analytics.com', + }, + }, + { + tagName: 'link', + attributes: { + rel: 'preconnect', + href: 'https://www.googletagmanager.com', + }, + }, + { + tagName: 'script', + attributes: { + async: true, + src: `https://www.googletagmanager.com/gtag/js?id=${trackingID}`, + }, + }, + ], + }; + }, }; }; From 12329786c428a384f190897ed6a8fee58f241e3d Mon Sep 17 00:00:00 2001 From: endiliey Date: Sat, 30 Nov 2019 18:39:25 +0700 Subject: [PATCH 2/5] more spec compliant --- packages/docusaurus-plugin-google-gtag/src/gtag.js | 14 -------------- .../docusaurus-plugin-google-gtag/src/index.js | 9 +++++++++ 2 files changed, 9 insertions(+), 14 deletions(-) diff --git a/packages/docusaurus-plugin-google-gtag/src/gtag.js b/packages/docusaurus-plugin-google-gtag/src/gtag.js index 0179e28aed5a..2e5ab72c3ffa 100644 --- a/packages/docusaurus-plugin-google-gtag/src/gtag.js +++ b/packages/docusaurus-plugin-google-gtag/src/gtag.js @@ -31,20 +31,6 @@ export default (function() { return null; } - /* eslint-disable */ - 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}) { // Always refer to the variable on window in-case it gets overridden elsewhere. diff --git a/packages/docusaurus-plugin-google-gtag/src/index.js b/packages/docusaurus-plugin-google-gtag/src/index.js index 1e2e6fa54de6..acdfb48b75d5 100644 --- a/packages/docusaurus-plugin-google-gtag/src/index.js +++ b/packages/docusaurus-plugin-google-gtag/src/index.js @@ -35,6 +35,11 @@ module.exports = function(context) { }, injectHtmlTags() { + const innerHTML = `window.dataLayer = window.dataLayer || []; + function gtag(){dataLayer.push(arguments);} + gtag('js', new Date()); + gtag('config', ${trackingID});`; + return { headTags: [ { @@ -58,6 +63,10 @@ module.exports = function(context) { src: `https://www.googletagmanager.com/gtag/js?id=${trackingID}`, }, }, + { + tagName: 'script', + innerHTML, + }, ], }; }, From 4ade2411fb89f3e6fcde5f633258cc37b97c472a Mon Sep 17 00:00:00 2001 From: endiliey Date: Sat, 30 Nov 2019 19:32:57 +0700 Subject: [PATCH 3/5] optimize n refactor --- .../src/analytics.js | 48 +------------------ .../src/index.js | 42 +++++++++++++++- .../docusaurus-plugin-google-gtag/src/gtag.js | 25 +++------- .../src/index.js | 18 ++++--- 4 files changed, 58 insertions(+), 75 deletions(-) diff --git a/packages/docusaurus-plugin-google-analytics/src/analytics.js b/packages/docusaurus-plugin-google-analytics/src/analytics.js index 0a74149298a7..9b7b31b8707f 100644 --- a/packages/docusaurus-plugin-google-analytics/src/analytics.js +++ b/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) { - 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.', - ); + if (typeof window === 'undefined') { 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 diff --git a/packages/docusaurus-plugin-google-analytics/src/index.js b/packages/docusaurus-plugin-google-analytics/src/index.js index ecc91601b43f..7edf65f7b73d 100644 --- a/packages/docusaurus-plugin-google-analytics/src/index.js +++ b/packages/docusaurus-plugin-google-analytics/src/index.js @@ -7,15 +7,37 @@ 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-gtag`, + ); + } + + 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: [ { @@ -25,6 +47,22 @@ module.exports = function() { 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', + }, + }, ], }; }, diff --git a/packages/docusaurus-plugin-google-gtag/src/gtag.js b/packages/docusaurus-plugin-google-gtag/src/gtag.js index 2e5ab72c3ffa..9b7e8a3ebf70 100644 --- a/packages/docusaurus-plugin-google-gtag/src/gtag.js +++ b/packages/docusaurus-plugin-google-gtag/src/gtag.js @@ -7,29 +7,16 @@ import siteConfig from '@generated/docusaurus.config'; -const {themeConfig} = siteConfig; - export default (function() { - if (!themeConfig.gtag) { - return null; - } - - const {trackingID} = themeConfig.gtag; - if (process.env.NODE_ENV === 'development' && !trackingID) { - console.warn( - 'You specified the `gtag` object in `themeConfig` but the `trackingID` field was missing. ' + - 'Please ensure this is not a mistake.', - ); + if (typeof window === 'undefined') { return null; } - if ( - process.env.NODE_ENV !== 'production' || - !trackingID || - typeof window === 'undefined' - ) { - return null; - } + const { + themeConfig: { + gtag: {trackingID}, + }, + } = siteConfig; return { onRouteUpdate({location}) { diff --git a/packages/docusaurus-plugin-google-gtag/src/index.js b/packages/docusaurus-plugin-google-gtag/src/index.js index acdfb48b75d5..71358b29d212 100644 --- a/packages/docusaurus-plugin-google-gtag/src/index.js +++ b/packages/docusaurus-plugin-google-gtag/src/index.js @@ -27,19 +27,18 @@ module.exports = function(context) { ); } + 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() { - const innerHTML = `window.dataLayer = window.dataLayer || []; - function gtag(){dataLayer.push(arguments);} - gtag('js', new Date()); - gtag('config', ${trackingID});`; - + if (!isProd) { + return {}; + } return { headTags: [ { @@ -56,6 +55,7 @@ module.exports = function(context) { href: 'https://www.googletagmanager.com', }, }, + // https://developers.google.com/analytics/devguides/collection/gtagjs/#install_the_global_site_tag { tagName: 'script', attributes: { @@ -65,7 +65,11 @@ module.exports = function(context) { }, { tagName: 'script', - innerHTML, + innerHTML: ` + window.dataLayer = window.dataLayer || []; + function gtag(){dataLayer.push(arguments);} + gtag('js', new Date()); + gtag('config', '${trackingID}');`, }, ], }; From 26f1529d579930ea8e634f7af61841cef90b59bd Mon Sep 17 00:00:00 2001 From: endiliey Date: Sat, 30 Nov 2019 21:21:06 +0700 Subject: [PATCH 4/5] typo --- packages/docusaurus-plugin-google-analytics/src/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docusaurus-plugin-google-analytics/src/index.js b/packages/docusaurus-plugin-google-analytics/src/index.js index 7edf65f7b73d..8bb72276ffbc 100644 --- a/packages/docusaurus-plugin-google-analytics/src/index.js +++ b/packages/docusaurus-plugin-google-analytics/src/index.js @@ -14,7 +14,7 @@ module.exports = function(context) { if (!googleAnalytics) { throw new Error( - `You need to specify 'googleAnalytics' object in 'themeConfig' with 'trackingId' field in it to use docusaurus-plugin-google-gtag`, + `You need to specify 'googleAnalytics' object in 'themeConfig' with 'trackingId' field in it to use docusaurus-plugin-google-analytics`, ); } From a76613ba48b579523859a7a0df6c5bdcc860e608 Mon Sep 17 00:00:00 2001 From: endiliey Date: Sun, 1 Dec 2019 19:49:33 +0700 Subject: [PATCH 5/5] review --- packages/docusaurus-plugin-google-gtag/src/index.js | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/docusaurus-plugin-google-gtag/src/index.js b/packages/docusaurus-plugin-google-gtag/src/index.js index 71358b29d212..30d2d611a8da 100644 --- a/packages/docusaurus-plugin-google-gtag/src/index.js +++ b/packages/docusaurus-plugin-google-gtag/src/index.js @@ -40,6 +40,7 @@ module.exports = function(context) { return {}; } return { + // Gtag includes GA by default, so we also preconnect to google-analytics. headTags: [ { tagName: 'link',