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>
This commit is contained in:
Ori Shalom 2022-05-27 17:48:29 +03:00 committed by GitHub
parent 7ab97d4726
commit 49ecd8f472
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 27 additions and 14 deletions

View file

@ -15,16 +15,23 @@ const {trackingID} = globalData['docusaurus-plugin-google-gtag']!
const clientModule: ClientModule = { const clientModule: ClientModule = {
onRouteDidUpdate({location, previousLocation}) { onRouteDidUpdate({location, previousLocation}) {
if (previousLocation && location.pathname !== previousLocation.pathname) { if (previousLocation && location.pathname !== previousLocation.pathname) {
// Always refer to the variable on window in case it gets overridden // Normally, the document title is updated in the next tick due to how
// elsewhere. // `react-helmet-async` updates it. We want to send the current document's
window.gtag('config', trackingID, { // title to gtag instead of the old one's, so we use `setTimeout` to defer
page_path: location.pathname, // execution to the next tick.
page_title: document.title, // See: https://github.com/facebook/docusaurus/issues/7420
}); setTimeout(() => {
window.gtag('event', 'page_view', { // Always refer to the variable on window in case it gets overridden
page_title: document.title, // elsewhere.
page_location: window.location.href, window.gtag('config', trackingID, {
page_path: location.pathname, 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,
});
}); });
} }
}, },

View file

@ -13,10 +13,16 @@ function logPage(
location: Location, location: Location,
previousLocation: Location | null, previousLocation: Location | null,
): void { ): 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({ export function onRouteUpdate({