mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-12 00:27:21 +02:00
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
This commit is contained in:
Endi
GitHub
parent
750d1654a5
commit
046a53ebf4
4 changed files with 124 additions and 89 deletions
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
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.',
|
||||
);
|
||||
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 */
|
||||
const {
|
||||
themeConfig: {
|
||||
gtag: {trackingID},
|
||||
},
|
||||
} = siteConfig;
|
||||
|
||||
return {
|
||||
onRouteUpdate({location}) {
|
||||
|
|
|
|||
|
|
@ -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}');`,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
};
|
||||
};
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue