fix(gtag): send the newly rendered page's title instead of the old one's (#7424)

Co-authored-by: Joshua Chen <sidachen2003@gmail.com>
Co-authored-by: sebastienlorber <lorber.sebastien@gmail.com>

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

@@ -15,6 +15,12 @@ const {trackingID} = globalData['docusaurus-plugin-google-gtag']!
 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 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, {
@@ -26,6 +32,7 @@ const clientModule: ClientModule = {
           page_location: window.location.href,
           page_path: location.pathname,
         });
+      });
     }
   },
 };

website/_dogfooding/clientModuleExample.ts

@@ -13,10 +13,16 @@ function logPage(
   location: Location,
   previousLocation: Location | null,
 ): void {
-  console.log(`${event}
+  console.log(event, location.pathname, {
-Previous location: ${previousLocation?.pathname}
+    location,
-Current location: ${location.pathname}
+    prevLocation: previousLocation,
-Current heading: ${document.getElementsByTagName('h1')[0]?.innerText}`);
+    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({