Analytics for Beta (#4224)

* adding google analytics metrics to beta

* adding google analytics metrics to beta

beta/.env.development

@@ -1,2 +1,3 @@
 NEXT_PUBLIC_HJ_SITE_ID = 2411683
-NEXT_PUBLIC_HJ_SITE_V = 6
+NEXT_PUBLIC_HJ_SITE_V = 6
+NEXT_PUBLIC_GA_TRACKING_ID = 'G-3918VS75Y6'

beta/.env.production

@@ -1,2 +1,3 @@
 NEXT_PUBLIC_HJ_SITE_ID = 2411651
-NEXT_PUBLIC_HJ_SITE_V = 6
+NEXT_PUBLIC_HJ_SITE_V = 6
+NEXT_PUBLIC_GA_TRACKING_ID = 'G-3918VS75Y6'

beta/next.config.js

@@ -17,11 +17,6 @@ module.exports = {
   async redirects() {
     return redirects.redirects;
   },
-  env: {
-    // @todo Remove when https://github.com/vercel/next.js/pull/16529 lands
-    GA_TRACKING_ID: 'XXXX',
-    NEXT_PUBLIC_GA_TRACKING_ID: 'XXX',
-  },
   rewrites() {
     return [
       {

beta/package.json

@@ -27,7 +27,6 @@
     "@docsearch/react": "3.0.0-alpha.41",
     "@headlessui/react": "^1.3.0",
     "@mdx-js/react": "^1.6.16",
-    "@next/plugin-google-analytics": "^10.0.6",
     "body-scroll-lock": "^3.1.3",
     "classnames": "^2.2.6",
     "date-fns": "^2.16.1",

beta/src/pages/_app.tsx

@@ -10,6 +10,8 @@ import '../styles/algolia.css';
 import '../styles/index.css';
 import '../styles/sandpack.css';
 import '@codesandbox/sandpack-react/dist/index.css';
+import Script from 'next/script';
+
 import {hotjar} from 'utils/hotjar';
 if (typeof window !== 'undefined') {
   hotjar(process.env.NEXT_PUBLIC_HJ_SITE_ID, process.env.NEXT_PUBLIC_HJ_SITE_V);
@@ -24,17 +26,24 @@ export default function MyApp({Component, pageProps}: AppProps) {
   if ((Component as any).isMDXComponent) {
     AppShell = (Component as any)({}).props.originalType.appShell;
   }
-  React.useEffect(() => {
-    // Monkey patch Google Tag Manager in development to just log to the console
-    if (process.env.NODE_ENV !== 'production') {
-      (window as any).gtag = (...args: any[]) => {
-        console.log('gtag: ', ...args);
-      };
-    }
-  }, []);
+
   return (
     <AppShell>
       <Component {...pageProps} />
+      <Script
+        strategy="lazyOnload"
+        src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_TRACKING_ID}`}
+      />
+      <Script id="google-analytics" strategy="lazyOnload">
+        {`
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${process.env.NEXT_PUBLIC_GA_TRACKING_ID}', {
+              page_path: window.location.pathname,
+            });
+        `}
+      </Script>
     </AppShell>
   );
 }

beta/yarn.lock

@@ -789,11 +789,6 @@
   dependencies:
     glob "7.1.7"
 
-"@next/plugin-google-analytics@^10.0.6":
-  version "10.1.3"
-  resolved "https://registry.yarnpkg.com/@next/plugin-google-analytics/-/plugin-google-analytics-10.1.3.tgz#e0696d13031ca1fced420e74ac45103464c1b0cd"
-  integrity sha512-OAiGb5SXkNnR37lU5ApMePgi8xdnL47K9/yvqWYaCvPrKteEJ9FtVzVUCHjwN1o67PmFRrVSgE3uNU7RryeU9g==
-
 "@next/polyfill-module@12.0.3-canary.10":
   version "12.0.3-canary.10"
   resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-12.0.3-canary.10.tgz#01eb16506233a00ce679f99dbaf7d8898052e192"