The gtag plugin sends the previous document title

[ori-shalom]

Have you read the Contributing Guidelines on issues?

• I have read the Contributing Guidelines on issues.

Prerequisites

• I'm using the latest version of Docusaurus.
• I have tried the npm run clear or yarn clear command.
• I have tried rm -rf node_modules yarn.lock package-lock.json and re-installing packages.
• I have tried creating a repro with https://new.docusaurus.io.
• I have read the console error message carefully (if applicable).

Description

The default Docusaurus gtag plugin reports wrong page titles to Google Analytics.
The gtag plugin adds a client module that uses onRouteDidUpdate event to send to GA the pathname and the page title.

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

Lines 1 to 33 in a2c993b

	/**
	* Copyright (c) Facebook, Inc. and its affiliates.
	*
	* This source code is licensed under the MIT license found in the
	* LICENSE file in the root directory of this source tree.
	*/
	import globalData from '@generated/globalData';
	import type {PluginOptions} from './options';
	import type {ClientModule} from '@docusaurus/types';
	const {trackingID} = globalData['docusaurus-plugin-google-gtag']!
	.default as PluginOptions;
	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,
	});
	}
	},
	};
	export default clientModule;

The title element reported to GA is the title of the last visited page instead of the title of the current page.
I suspect the issue is the way the title is updated internally with react-helmet-async which causes it to be the old title at the time of the onRouteDidUpdate event.

Reproduction

I created this reproduction of the issue by imitating the way the gtag plugin works by registering a client module with onRouteDidUpdate that logs to console the current location pathname, page title, and actual page h1 to see if the page content was updated at the time of the event.

https://stackblitz.com/edit/github-fab3de?file=docusaurus.config.js

You can navigate to different pages and see in the console that both the pathname and the page content are updated in time for the event while the title is still of the previous page.

Logs:

{
  event: 'onRouteDidUpdate',
  pathname: '/docs/page2',
  title: 'Page 1 | issue #7420',
  docH1: 'Page 2'
}
{
  event: 'onRouteDidUpdate',
  pathname: '/docs/page3',
  title: 'Page 2 | issue #7420',
  docH1: 'Page 3'
}

Reproducible demo

https://stackblitz.com/edit/github-fab3de?file=docusaurus.config.js

Steps to reproduce

1. Navigate between different pages (page1, page2, page3)
2. Inspect the logs to see the title, pathname, and page h1 content.

Expected behavior

It is expected that the reported title will be the actual title of the page.

Actual behavior

The title reported is the title of the previously visited page.

Your environment

• Public source code: https://stackblitz.com/edit/github-fab3de?file=docusaurus.config.js
• Public site URL: https://github-fab3de--3000.local.webcontainer.io/docs/page1
• Docusaurus version used: 2.0.0-beta.20
• Environment name and version: Chrome 101.0.4951.54, Node.js 16

Self-service

• I'd be willing to fix this bug myself.

A possible solution is replacing react-helmet-async with react-helmet.
If that's all that needs to be done and it won't break anything else then maybe I can issue a PR myself but I'm not familiar enough with the Docusaurus code base to know what else it could affect and I don't have a lot of time available to devote for this.

[Josh-Cena]

We migrated from react-helmet to react-helmet-async because the latter supports asynchronous rendering (which we may eventually need). I'm going to play with other solutions. Thanks for the report!

[ori-shalom]

I found a small workaround that works for me for now.
You can see it here commented out: https://stackblitz.com/edit/github-fab3de?file=plugin%2Fclient-module.js

1. Copy the gtag plugin and use it instead of the one in the presets.
2. In the plugin client module, use setTimeout without any actual timeout value to simply send the callback to the end of the call stack.

This works though I admit that using setTimeout this way is a bit hacky.

[Josh-Cena]

I'm also thinking about setTimeout. In general it should be avoided, but here I believe the title update always happens at the next tick of re-rendering, so simply delaying it by one tick should work already 👍

Feel free to send a PR