perf(v2): more performant gtag and analytics plugin

[endiliey]

Motivation

I merged #2062 (comment) to wrong branch. But anyway I added some more optimization here

Gtag
We use inject head html hooks, so that the script head is not appended after JS load. Removing this code

We should move this

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

Lines 40 to 51 in 6155115

	window.dataLayer = window.dataLayer || [];
	function gtag() {
	// Have to use `arguments` instead of spreading as there are
	// other properties attached to it e.g. callee.
	// The GA library requires usage of `arguments.
	window.dataLayer.push(arguments);
	}
	// Expose globally.
	window.gtag = gtag;
	gtag('js', new Date());
	gtag('config', trackingID);
	/* eslint-enable */

to head like what https://developers.google.com/analytics/devguides/collection/gtagjs/ recommend.

Doing it via client modules previously will put it in main bundle.

Google analytics
Instead of old https://developers.google.com/analytics/devguides/collection/analyticsjs/#the_google_analytics_tag

We use the async tag https://developers.google.com/analytics/devguides/collection/analyticsjs/#alternative_async_tag since our user is mostly not on IE9 or older browser

Summary

• Also tried to leverage more on build time for checking instead of doing it client side
• Try to be more spec compliant

Have you read the Contributing Guidelines on pull requests?

yes

Test Plan

Gtag
Production build

Also spec compliant with
https://developers.google.com/analytics/devguides/collection/gtagjs/

Google analytics

https://developers.google.com/analytics/devguides/collection/analyticsjs/#alternative_async_tag

[docusaurus-bot]

Deploy preview for docusaurus-2 ready!

Built with commit a76613b

https://deploy-preview-2070--docusaurus-2.netlify.com

[docusaurus-bot]

Deploy preview for docusaurus-preview ready!

Built with commit a76613b

https://deploy-preview-2070--docusaurus-preview.netlify.com

[yangshun]

Looks good, thanks for the optimization.

[yangshun]

Why do we still need preconnect to https://www.google-analytics.com?

I see <script type="text/javascript" async="" src="https://www.google-analytics.com/analytics.js"></script> in the deploy preview's HTML which seems to be added in by the loaded gtag script. Is that why you do preconnect to google-analytics.com here? If so, it would be good to add a comment as it isn't obvious.

[endiliey]

yes. because gtag automatically add google analytics script for you. So its better to preconnect