From cd5045ff2e20b2bd595eb375f4b56205668fe36e Mon Sep 17 00:00:00 2001
From: Kathryn Middleton <kmiddleton14@gmail.com>
Date: Fri, 20 Oct 2023 19:40:33 +0000
Subject: [PATCH 1/3] Cleanup old ga-lite tag and refactor GA4

---
 .env.production                    |  2 +-
 package.json                       |  1 -
 src/components/Layout/Feedback.tsx | 15 +++++-------
 src/pages/_app.tsx                 | 37 ++++++++++++++++++++----------
 src/pages/_document.tsx            |  9 --------
 src/siteConfig.js                  |  1 -
 yarn.lock                          |  5 ----
 7 files changed, 32 insertions(+), 38 deletions(-)

diff --git a/.env.production b/.env.production
index d25eb7dd4b6..e403f96b683 100644
--- a/.env.production
+++ b/.env.production
@@ -1 +1 @@
-NEXT_PUBLIC_GA_TRACKING_ID = 'UA-41298772-4'
\ No newline at end of file
+NEXT_PUBLIC_GA_TRACKING_ID = 'G-B1E83PJ3RT'
\ No newline at end of file
diff --git a/package.json b/package.json
index 472ef79c912..b5e07d70a84 100644
--- a/package.json
+++ b/package.json
@@ -30,7 +30,6 @@
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
     "debounce": "^1.2.1",
-    "ga-lite": "^2.1.4",
     "github-slugger": "^1.3.0",
     "next": "^13.4.1",
     "next-remote-watch": "^1.0.0",
diff --git a/src/components/Layout/Feedback.tsx b/src/components/Layout/Feedback.tsx
index 2bf9afe5755..86fc91350a9 100644
--- a/src/components/Layout/Feedback.tsx
+++ b/src/components/Layout/Feedback.tsx
@@ -4,7 +4,6 @@
 
 import {useState} from 'react';
 import {useRouter} from 'next/router';
-import {ga} from '../../utils/analytics';
 
 export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
   const {asPath} = useRouter();
@@ -48,14 +47,12 @@ const thumbsDownIcon = (
 function sendGAEvent(isPositive: boolean) {
   // Fragile. Don't change unless you've tested the network payload
   // and verified that the right events actually show up in GA.
-  ga(
-    'send',
-    'event',
-    'button',
-    'feedback',
-    window.location.pathname,
-    isPositive ? '1' : '0'
-  );
+  // @ts-ignore
+  gtag('event', 'feedback', {
+    event_category: 'button',
+    event_label: window.location.pathname,
+    value: isPositive ? 1 : 0,
+  });
 }
 
 function SendFeedback({onSubmit}: {onSubmit: () => void}) {
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 7173759688b..6bc04fe1113 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,7 +5,7 @@
 import {useEffect} from 'react';
 import {AppProps} from 'next/app';
 import {useRouter} from 'next/router';
-import {ga} from '../utils/analytics';
+import Script from 'next/script';
 
 import '@docsearch/css';
 import '../styles/algolia.css';
@@ -13,14 +13,15 @@ import '../styles/index.css';
 import '../styles/sandpack.css';
 
 if (typeof window !== 'undefined') {
-  if (process.env.NODE_ENV === 'production') {
-    ga('create', process.env.NEXT_PUBLIC_GA_TRACKING_ID, 'auto');
-    ga('send', 'pageview');
-  }
-  const terminationEvent = 'onpagehide' in window ? 'pagehide' : 'unload';
-  window.addEventListener(terminationEvent, function () {
-    ga('send', 'timing', 'JS Dependencies', 'unload');
-  });
+  // @ts-ignore
+  window.dataLayer = window.dataLayer || [];
+  // @ts-ignore
+  window.gtag = function () {
+    // @ts-ignore
+    window.dataLayer.push(arguments);
+  };
+  // @ts-ignore
+  gtag('js', new Date());
 }
 
 export default function MyApp({Component, pageProps}: AppProps) {
@@ -44,8 +45,10 @@ export default function MyApp({Component, pageProps}: AppProps) {
   useEffect(() => {
     const handleRouteChange = (url: string) => {
       const cleanedUrl = url.split(/[\?\#]/)[0];
-      ga('set', 'page', cleanedUrl);
-      ga('send', 'pageview');
+      // @ts-ignore
+      gtag('config', process.env.NEXT_PUBLIC_GA_TRACKING_ID, {
+        page_path: cleanedUrl,
+      });
     };
     router.events.on('routeChangeComplete', handleRouteChange);
     return () => {
@@ -53,5 +56,15 @@ export default function MyApp({Component, pageProps}: AppProps) {
     };
   }, [router.events]);
 
-  return <Component {...pageProps} />;
+  return (
+    <>
+      <Component {...pageProps} />
+      {process.env.NODE_ENV === 'production' && (
+        <Script
+          strategy="lazyOnload"
+          src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`}
+        />
+      )}
+    </>
+  );
 }
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index d8fb0c62123..392fdf88a56 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -9,15 +9,6 @@ const MyDocument = () => {
   return (
     <Html lang={siteConfig.languageCode} dir={siteConfig.isRTL ? 'rtl' : 'ltr'}>
       <Head />
-      <script
-        async
-        src={`https://www.googletagmanager.com/gtag/js?id=${siteConfig.googleAnalyticsTagId}`}
-      />
-      <script
-        dangerouslySetInnerHTML={{
-          __html: `window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '${siteConfig.googleAnalyticsTagId}');`,
-        }}
-      />
       <body className="font-text font-medium antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
         <script
           dangerouslySetInnerHTML={{
diff --git a/src/siteConfig.js b/src/siteConfig.js
index c676ca6e29b..0ada6b934d2 100644
--- a/src/siteConfig.js
+++ b/src/siteConfig.js
@@ -17,5 +17,4 @@ exports.siteConfig = {
     apiKey: 'e8451218980a351815563de007648b00',
     indexName: 'beta-react',
   },
-  googleAnalyticsTagId: 'G-B1E83PJ3RT',
 };
diff --git a/yarn.lock b/yarn.lock
index 8a3183cd5aa..c7b0f980e19 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2765,11 +2765,6 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
-ga-lite@^2.1.4:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/ga-lite/-/ga-lite-2.1.4.tgz#f0c1fd3234bc44d8b15db640a93b34dbce84d43a"
-  integrity sha512-OJqPbutD8SfgF8SebyLh0uHdpQH32d5TuviXao5yPjyO2sGW3Gm+ooDmOhvXITgPepwwKxzv7ZMVKk2/hg/+lg==
-
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"

From f5d55538c9bb6f9c934d0070dff34b267171d877 Mon Sep 17 00:00:00 2001
From: Kathryn Middleton <kmiddleton14@gmail.com>
Date: Fri, 20 Oct 2023 20:37:43 +0000
Subject: [PATCH 2/3] cleanup

---
 src/pages/_app.tsx      | 25 +------------------------
 src/pages/_document.tsx |  9 +++++++++
 2 files changed, 10 insertions(+), 24 deletions(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 6bc04fe1113..1a9d2e2c60b 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -5,25 +5,12 @@
 import {useEffect} from 'react';
 import {AppProps} from 'next/app';
 import {useRouter} from 'next/router';
-import Script from 'next/script';
 
 import '@docsearch/css';
 import '../styles/algolia.css';
 import '../styles/index.css';
 import '../styles/sandpack.css';
 
-if (typeof window !== 'undefined') {
-  // @ts-ignore
-  window.dataLayer = window.dataLayer || [];
-  // @ts-ignore
-  window.gtag = function () {
-    // @ts-ignore
-    window.dataLayer.push(arguments);
-  };
-  // @ts-ignore
-  gtag('js', new Date());
-}
-
 export default function MyApp({Component, pageProps}: AppProps) {
   const router = useRouter();
 
@@ -56,15 +43,5 @@ export default function MyApp({Component, pageProps}: AppProps) {
     };
   }, [router.events]);
 
-  return (
-    <>
-      <Component {...pageProps} />
-      {process.env.NODE_ENV === 'production' && (
-        <Script
-          strategy="lazyOnload"
-          src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`}
-        />
-      )}
-    </>
-  );
+  return <Component {...pageProps} />;
 }
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 392fdf88a56..823ca0b718f 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -9,6 +9,15 @@ const MyDocument = () => {
   return (
     <Html lang={siteConfig.languageCode} dir={siteConfig.isRTL ? 'rtl' : 'ltr'}>
       <Head />
+      <script
+        async
+        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`}
+      />
+      <script
+        dangerouslySetInnerHTML={{
+          __html: `window.dataLayer = window.dataLayer || [];function gtag(){dataLayer.push(arguments);}gtag('js', new Date());gtag('config', '${process.env.NEXT_PUBLIC_GA_TRACKING_ID}');`,
+        }}
+      />
       <body className="font-text font-medium antialiased text-lg bg-wash dark:bg-wash-dark text-secondary dark:text-secondary-dark leading-base">
         <script
           dangerouslySetInnerHTML={{

From 952a8ff4380367cc2ea4c5229c70a34900e07742 Mon Sep 17 00:00:00 2001
From: Kathryn Middleton <kmiddleton14@gmail.com>
Date: Fri, 20 Oct 2023 21:09:27 +0000
Subject: [PATCH 3/3] cleanup2

---
 src/pages/_app.tsx | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 1a9d2e2c60b..5431f87cc9e 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -11,6 +11,17 @@ import '../styles/algolia.css';
 import '../styles/index.css';
 import '../styles/sandpack.css';
 
+if (typeof window !== 'undefined') {
+  const terminationEvent = 'onpagehide' in window ? 'pagehide' : 'unload';
+  window.addEventListener(terminationEvent, function () {
+    // @ts-ignore
+    gtag('event', 'timing', {
+      event_label: 'JS Dependencies',
+      event: 'unload',
+    });
+  });
+}
+
 export default function MyApp({Component, pageProps}: AppProps) {
   const router = useRouter();
 
@@ -33,8 +44,8 @@ export default function MyApp({Component, pageProps}: AppProps) {
     const handleRouteChange = (url: string) => {
       const cleanedUrl = url.split(/[\?\#]/)[0];
       // @ts-ignore
-      gtag('config', process.env.NEXT_PUBLIC_GA_TRACKING_ID, {
-        page_path: cleanedUrl,
+      gtag('event', 'pageview', {
+        event_label: cleanedUrl,
       });
     };
     router.events.on('routeChangeComplete', handleRouteChange);