fix(gtag): send the newly rendered page's title instead of the old on…

…e'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,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,
+        });
       });
     }
   },

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({