From 7830d55bb1a5f3378ae0f02ec4411fce321b2d0d Mon Sep 17 00:00:00 2001 From: Ori Shalom Date: Sun, 15 May 2022 16:08:28 +0300 Subject: [PATCH 1/5] delay sending event to gtag to next tick --- .../docusaurus-plugin-google-gtag/src/gtag.ts | 20 ++++++++++--------- 1 file changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/docusaurus-plugin-google-gtag/src/gtag.ts b/packages/docusaurus-plugin-google-gtag/src/gtag.ts index dab90146d1fc..f6f55eb03ab7 100644 --- a/packages/docusaurus-plugin-google-gtag/src/gtag.ts +++ b/packages/docusaurus-plugin-google-gtag/src/gtag.ts @@ -17,15 +17,17 @@ const clientModule: ClientModule = { if (previousLocation && location.pathname !== previousLocation.pathname) { // Always refer to the variable on window in case it gets overridden // elsewhere. - window.gtag('config', trackingID, { - page_path: location.pathname, - page_title: document.title, - }); - window.gtag('event', 'page_view', { - page_title: document.title, - page_location: window.location.href, - page_path: location.pathname, - }); + setTimeout(() => { + window.gtag('config', trackingID, { + page_path: location.pathname, + page_title: document.title, + }); + window.gtag('event', 'page_view', { + page_title: document.title, + page_location: window.location.href, + page_path: location.pathname, + }); + }; } }, }; From e01d1874874e02487894248883350ffc41e83fd2 Mon Sep 17 00:00:00 2001 From: Ori Shalom Date: Sun, 15 May 2022 16:31:26 +0300 Subject: [PATCH 2/5] missing closing parentheses for setTimeout --- packages/docusaurus-plugin-google-gtag/src/gtag.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/docusaurus-plugin-google-gtag/src/gtag.ts b/packages/docusaurus-plugin-google-gtag/src/gtag.ts index f6f55eb03ab7..bc0e944dd676 100644 --- a/packages/docusaurus-plugin-google-gtag/src/gtag.ts +++ b/packages/docusaurus-plugin-google-gtag/src/gtag.ts @@ -27,7 +27,7 @@ const clientModule: ClientModule = { page_location: window.location.href, page_path: location.pathname, }); - }; + }); } }, }; From 563f4ea034df715f32ba5178d1d5d45f85fdd58c Mon Sep 17 00:00:00 2001 From: Ori Shalom Date: Sun, 15 May 2022 16:58:48 +0300 Subject: [PATCH 3/5] Update comment for gtag plugin --- packages/docusaurus-plugin-google-gtag/src/gtag.ts | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/packages/docusaurus-plugin-google-gtag/src/gtag.ts b/packages/docusaurus-plugin-google-gtag/src/gtag.ts index bc0e944dd676..a6e82b419aa0 100644 --- a/packages/docusaurus-plugin-google-gtag/src/gtag.ts +++ b/packages/docusaurus-plugin-google-gtag/src/gtag.ts @@ -15,9 +15,15 @@ const {trackingID} = globalData['docusaurus-plugin-google-gtag']! const clientModule: ClientModule = { onRouteDidUpdate({location, previousLocation}) { if (previousLocation && location.pathname !== previousLocation.pathname) { - // Always refer to the variable on window in case it gets overridden - // elsewhere. + // Normally, the document title is updated in the next tick due to how + // `react-helmet-async` updates it. + // We want to send to gtag the current document title so we use + // setTimeout to put the function on the callback stack to be executed + // on the next tick. + // See: https://github.com/facebook/docusaurus/issues/7420 setTimeout(() => { + // Always refer to the variable on window in case it gets overridden + // elsewhere. window.gtag('config', trackingID, { page_path: location.pathname, page_title: document.title, From c546c41009618ac9bd42ce81fc3ff0d87a593c39 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Mon, 16 May 2022 12:55:02 +0800 Subject: [PATCH 4/5] fix comment --- packages/docusaurus-plugin-google-gtag/src/gtag.ts | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/docusaurus-plugin-google-gtag/src/gtag.ts b/packages/docusaurus-plugin-google-gtag/src/gtag.ts index a6e82b419aa0..2122511126a8 100644 --- a/packages/docusaurus-plugin-google-gtag/src/gtag.ts +++ b/packages/docusaurus-plugin-google-gtag/src/gtag.ts @@ -16,10 +16,9 @@ const clientModule: ClientModule = { onRouteDidUpdate({location, previousLocation}) { if (previousLocation && location.pathname !== previousLocation.pathname) { // Normally, the document title is updated in the next tick due to how - // `react-helmet-async` updates it. - // We want to send to gtag the current document title so we use - // setTimeout to put the function on the callback stack to be executed - // on the next tick. + // `react-helmet-async` updates it. We want to send the current document's + // title to gtag instead of the old one's, so we use `setTimeout` to defer + // execution to the next tick. // See: https://github.com/facebook/docusaurus/issues/7420 setTimeout(() => { // Always refer to the variable on window in case it gets overridden From d1596e4efd940449f3b215da5d7bef94e0944931 Mon Sep 17 00:00:00 2001 From: sebastienlorber Date: Fri, 27 May 2022 16:13:27 +0200 Subject: [PATCH 5/5] client modules example: log document.title to see bug in action https://github.com/facebook/docusaurus/pull/7424 --- website/_dogfooding/clientModuleExample.ts | 14 ++++++++++---- 1 file changed, 10 insertions(+), 4 deletions(-) diff --git a/website/_dogfooding/clientModuleExample.ts b/website/_dogfooding/clientModuleExample.ts index 01b2d8250631..cd61e5a99e81 100644 --- a/website/_dogfooding/clientModuleExample.ts +++ b/website/_dogfooding/clientModuleExample.ts @@ -13,10 +13,16 @@ function logPage( location: Location, previousLocation: Location | null, ): void { - console.log(`${event} -Previous location: ${previousLocation?.pathname} -Current location: ${location.pathname} -Current heading: ${document.getElementsByTagName('h1')[0]?.innerText}`); + console.log(event, location.pathname, { + location, + prevLocation: previousLocation, + heading: document.getElementsByTagName('h1')[0]?.innerText, + title: document.title, + description: ( + document.querySelector('meta[name="description"]') as HTMLMetaElement + )?.content, + htmlClassName: document.getElementsByTagName('html')[0]?.className, + }); } export function onRouteUpdate({