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 = {
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,
});
});
}
},

View file

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