[Beta] Use a light GA client (#4355)

* [Beta] Use a light GA client

* oopsie

beta/package.json

@@ -31,6 +31,7 @@
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",
     "debounce": "^1.2.1",
+    "ga-lite": "^2.1.4",
     "github-slugger": "^1.3.0",
     "next": "^12.0.10",
     "parse-numeric-range": "^1.2.0",

beta/src/components/Layout/Feedback.tsx

@@ -4,6 +4,8 @@
 
 import * as React from 'react';
 import {useRouter} from 'next/router';
+// @ts-ignore
+import galite from 'ga-lite';
 
 export function Feedback({onSubmit = () => {}}: {onSubmit?: () => void}) {
   const {pathname} = useRouter();
@@ -43,6 +45,19 @@ const thumbsDownIcon = (
   </svg>
 );
 
+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.
+  galite(
+    'send',
+    'event',
+    'button',
+    'feedback',
+    window.location.pathname,
+    isPositive ? '1' : '0'
+  );
+}
+
 function SendFeedback({onSubmit}: {onSubmit: () => void}) {
   const [isSubmitted, setIsSubmitted] = React.useState(false);
   return (
@@ -56,13 +71,8 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
           className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3 mr-2"
           onClick={() => {
             setIsSubmitted(true);
-            // @ts-ignore
-            gtag('event', 'feedback', {
-              event_category: 'button',
-              event_label: window.location.pathname,
-              value: 1,
-            });
             onSubmit();
+            sendGAEvent(true);
           }}>
           {thumbsUpIcon}
         </button>
@@ -73,13 +83,8 @@ function SendFeedback({onSubmit}: {onSubmit: () => void}) {
           className="bg-secondary-button dark:bg-secondary-button-dark rounded-lg text-primary dark:text-primary-dark px-3"
           onClick={() => {
             setIsSubmitted(true);
-            // @ts-ignore
-            gtag('event', 'feedback', {
-              event_category: 'button',
-              event_label: window.location.pathname,
-              value: 0,
-            });
             onSubmit();
+            sendGAEvent(false);
           }}>
           {thumbsDownIcon}
         </button>

beta/src/pages/_app.tsx

@@ -5,6 +5,8 @@
 import * as React from 'react';
 import {AppProps} from 'next/app';
 import {useRouter} from 'next/router';
+// @ts-ignore
+import galite from 'ga-lite';
 import '@docsearch/css';
 import '../styles/fonts.css';
 import '../styles/algolia.css';
@@ -16,25 +18,20 @@ import Script from 'next/script';
 const EmptyAppShell: React.FC = ({children}) => <>{children}</>;
 
 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());
+  if (process.env.NODE_ENV === 'production') {
+    galite('create', process.env.NEXT_PUBLIC_GA_TRACKING_ID, 'auto');
+  }
+  window.addEventListener('unload', function () {
+    galite('send', 'timing', 'JS Dependencies', 'unload');
+  });
 }
 
 export default function MyApp({Component, pageProps}: AppProps) {
   const router = useRouter();
   React.useEffect(() => {
     const handleRouteChange = (url: string) => {
-      // @ts-ignore
-      gtag('config', process.env.NEXT_PUBLIC_GA_TRACKING_ID, {
-        page_path: url,
-      });
+      galite('set', 'page', url);
+      galite('send', 'pageview');
     };
     router.events.on('routeChangeComplete', handleRouteChange);
     return () => {
@@ -52,12 +49,6 @@ export default function MyApp({Component, pageProps}: AppProps) {
   return (
     <AppShell>
       <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}`}
-        />
-      )}
     </AppShell>
   );
 }

beta/yarn.lock

@@ -2306,6 +2306,11 @@ 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.1:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"