From cd0884f9bdc53e535368c741c63479411a47cf0a Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Mon, 10 Jun 2024 15:34:13 +0200
Subject: [PATCH] [docs] Migrate to GA4 (#42590)

---
 docs/pages/_app.js                             | 12 +++++++++---
 docs/pages/_document.js                        | 16 +++++++++++++---
 docs/src/modules/components/Ad.js              |  7 ++-----
 docs/src/modules/components/GoogleAnalytics.js | 18 ++++++++++++------
 .../components/material-icons/SearchIcons.js   |  4 +---
 5 files changed, 37 insertions(+), 20 deletions(-)

diff --git a/docs/pages/_app.js b/docs/pages/_app.js
index ffd1cdaeffe36c..7dee41be60ef81 100644
--- a/docs/pages/_app.js
+++ b/docs/pages/_app.js
@@ -142,11 +142,15 @@ function Analytics() {
 
   const codeVariant = usePersistCodeVariant();
   React.useEffect(() => {
-    window.ga('set', 'dimension1', codeVariant);
+    window.gtag('set', 'user_properties', {
+      codeVariant,
+    });
   }, [codeVariant]);
 
   React.useEffect(() => {
-    window.ga('set', 'dimension2', options.userLanguage);
+    window.gtag('set', 'user_properties', {
+      userLanguage: options.userLanguage,
+    });
   }, [options.userLanguage]);
 
   React.useEffect(() => {
@@ -160,7 +164,9 @@ function Analytics() {
      * Adjusted to track 3 or more different ratios
      */
     function trackDevicePixelRation() {
-      window.ga('set', 'dimension3', Math.round(window.devicePixelRatio * 10) / 10);
+      window.gtag('set', 'user_properties', {
+        devicePixelRatio: Math.round(window.devicePixelRatio * 10) / 10,
+      });
 
       matchMedia = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`);
       // Need to setup again.
diff --git a/docs/pages/_document.js b/docs/pages/_document.js
index 2e7d79c01e036b..37e7955825fb1b 100644
--- a/docs/pages/_document.js
+++ b/docs/pages/_document.js
@@ -26,7 +26,8 @@ if (process.env.NODE_ENV === 'production') {
   cleanCSS = new CleanCSS();
 }
 
-const GOOGLE_ID = process.env.NODE_ENV === 'production' ? 'UA-106598593-2' : 'UA-106598593-3';
+const GOOGLE_ANALYTICS_ID_V4 =
+  process.env.NODE_ENV === 'production' ? 'G-5NXDQLC2ZK' : 'G-XJ83JQEK7J';
 
 export default class MyDocument extends Document {
   render() {
@@ -85,11 +86,20 @@ export default class MyDocument extends Document {
             // eslint-disable-next-line react/no-danger
             dangerouslySetInnerHTML={{
               __html: `
-                window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
-                window.ga('create','${GOOGLE_ID}','auto');
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+window.gtag = gtag;
+gtag('js', new Date());
+gtag('config', '${GOOGLE_ANALYTICS_ID_V4}', {
+  send_page_view: false,
+});
               `,
             }}
           />
+          <script
+            async
+            src={`https://www.googletagmanager.com/gtag/js?id=${GOOGLE_ANALYTICS_ID_V4}`}
+          />
           <NextScript />
         </body>
       </Html>
diff --git a/docs/src/modules/components/Ad.js b/docs/src/modules/components/Ad.js
index df9340290fce3c..d68b7fd46408fc 100644
--- a/docs/src/modules/components/Ad.js
+++ b/docs/src/modules/components/Ad.js
@@ -76,8 +76,7 @@ const inHouseAds = [
   },
   {
     name: 'themes',
-    link:
-      'https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=in-house-themes',
+    link: 'https://mui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=in-house-themes',
     img: '/static/ads-in-house/themes.png',
     description:
       '<b>Premium Themes</b>. Kickstart your application development with a ready-made theme.',
@@ -194,9 +193,7 @@ function Ad(props) {
     }
 
     const delay = setTimeout(() => {
-      window.ga('send', {
-        hitType: 'event',
-        eventCategory: 'ad',
+      window.gtag('event', 'ad', {
         eventAction: 'display',
         eventLabel,
       });
diff --git a/docs/src/modules/components/GoogleAnalytics.js b/docs/src/modules/components/GoogleAnalytics.js
index 26fdd1a61aaf2c..6a9fbf4d0e1d62 100644
--- a/docs/src/modules/components/GoogleAnalytics.js
+++ b/docs/src/modules/components/GoogleAnalytics.js
@@ -17,9 +17,7 @@ function handleClick(event) {
 
     // We reach a tracking element, no need to look higher in the dom tree.
     if (category) {
-      window.ga('send', {
-        hitType: 'event',
-        eventCategory: category,
+      window.gtag('event', category, {
         eventAction: element.getAttribute('data-ga-event-action'),
         eventLabel: element.getAttribute('data-ga-event-label'),
       });
@@ -33,12 +31,20 @@ function handleClick(event) {
 let bound = false;
 
 export default function GoogleAnalytics() {
+  const timeout = React.useRef();
+
   React.useEffect(() => {
     // Wait for the title to be updated.
-    setTimeout(() => {
+    // React fires useEffect twice in dev mode
+    clearTimeout(timeout.current);
+    timeout.current = setTimeout(() => {
       const { canonical } = pathnameToLanguage(window.location.pathname);
-      window.ga('set', { page: canonical });
-      window.ga('send', { hitType: 'pageview' });
+
+      // https://developers.google.com/analytics/devguides/collection/ga4/views?client_type=gtag
+      window.gtag('event', 'page_view', {
+        page_title: document.title,
+        page_location: canonical,
+      });
     });
 
     if (bound) {
diff --git a/docs/src/pages/components/material-icons/SearchIcons.js b/docs/src/pages/components/material-icons/SearchIcons.js
index 7c692a4cfd700e..851dd19be2d64b 100644
--- a/docs/src/pages/components/material-icons/SearchIcons.js
+++ b/docs/src/pages/components/material-icons/SearchIcons.js
@@ -424,9 +424,7 @@ export default function SearchIcons() {
 
             // Keep track of the no results so we can add synonyms in the future.
             if (value.length >= 4 && results.length === 0) {
-              window.ga('send', {
-                hitType: 'event',
-                eventCategory: 'material-icons',
+              window.gtag('event', 'material-icons', {
                 eventAction: 'no-results',
                 eventLabel: value,
               });