diff --git a/packages/docusaurus-plugin-google-gtag/src/gtag.ts b/packages/docusaurus-plugin-google-gtag/src/gtag.ts index dab90146d1fc..2122511126a8 100644 --- a/packages/docusaurus-plugin-google-gtag/src/gtag.ts +++ b/packages/docusaurus-plugin-google-gtag/src/gtag.ts @@ -15,16 +15,23 @@ 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. - 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, + // Normally, the document title is updated in the next tick due to how + // `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 + // 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, + }); }); } }, 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({