refactor(docs): move gtm logic to App

jorgemoya · Jun 10, 2022 · 66c8d67 · 66c8d67
1 parent f0efe79
commit 66c8d67
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 56 deletions.
diff --git a/.gitignore b/.gitignore
@@ -10,4 +10,5 @@ packages/docs/pages/dev.tsx
 .idea
 .DS_Store
 .parcel-cache
-.tsbuildinfo
+.tsbuildinfo
+.env*.local
diff --git a/README.md b/README.md
@@ -133,7 +133,7 @@ GH_TOKEN=<token> yarn lerna publish from-package --git-remote upstream
 ```
 yarn run build
 cd packages/docs
-GTM_ID=<gtm-id> yarn run deploy --remote upstream
+yarn run deploy --remote upstream
 ```
 
 ### License

diff --git a/packages/docs/.env.production b/packages/docs/.env.production
@@ -0,0 +1 @@
+NEXT_PUBLIC_GTM_ID="GTM-KL3MKSK"
diff --git a/packages/docs/pages/_app.tsx b/packages/docs/pages/_app.tsx
@@ -1,16 +1,14 @@
 import { AlertsManager, createAlertsManager, GlobalStyles, Grid, GridItem } from '@bigcommerce/big-design';
 import { createTheme } from '@bigcommerce/big-design-theme';
-import App from 'next/app';
 import Head from 'next/head';
-import { default as Router, useRouter } from 'next/router';
-import React from 'react';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+import React, { useEffect } from 'react';
 import { UIDFork, UIDReset } from 'react-uid';
 import { ThemeProvider } from 'styled-components';
 
 import { BetaRibbon, SideNav, StoryWrapper } from '../components';
-import { pageView } from '../utils/analytics/gtm';
-
-Router.events.on('routeChangeComplete', (url) => pageView(url));
+import { GTM_ID, isProd, pageView } from '../utils/analytics/gtm';
 
 export const alertsManager = createAlertsManager();
 
@@ -28,9 +26,23 @@ const gridTemplate = {
   `,
 };
 
+const handleRouteChange = (url: string) => {
+  pageView(url);
+};
+
 const App = ({ Component, pageProps }) => {
   const router = useRouter();
 
+  useEffect(() => {
+    router.events.on('routeChangeComplete', handleRouteChange);
+    router.events.on('hashChangeComplete', handleRouteChange);
+
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange);
+      router.events.off('hashChangeComplete', handleRouteChange);
+    };
+  }, [router.events]);
+
   return (
     <>
       <Head>
@@ -53,6 +65,22 @@ const App = ({ Component, pageProps }) => {
           }
         `}
       </style>
+      {isProd && GTM_ID && (
+        <>
+          <Script strategy="afterInteractive" src={`https://www.googletagmanager.com/gtm.js?id=${GTM_ID}`} />
+          <Script
+            strategy="afterInteractive"
+            dangerouslySetInnerHTML={{
+              __html: `
+                  window.dataLayer = window.dataLayer || [];
+                  function gtag(){dataLayer.push(arguments);}
+                  gtag('js', new Date());
+                  gtag('config', '${GTM_ID}');
+          `,
+            }}
+          />
+        </>
+      )}
       <UIDReset>
         <UIDFork>
           <ThemeProvider theme={theme}>

diff --git a/packages/docs/pages/_document.tsx b/packages/docs/pages/_document.tsx
@@ -2,14 +2,8 @@ import Document, { DocumentContext, Head, Html, Main, NextScript } from 'next/do
 import React from 'react';
 import { resetServerContext } from 'react-beautiful-dnd';
 import { ServerStyleSheet } from 'styled-components';
-
-import { GTM_ID, GTM_URL } from '../utils/analytics/gtm';
-
-const isProd = process.env.NODE_ENV === 'production';
-
 export default class AppDocument extends Document {
   static async getInitialProps(ctx: DocumentContext) {
-    resetServerContext();
     const sheet = new ServerStyleSheet();
     const originalRenderPage = ctx.renderPage;
 
@@ -32,39 +26,19 @@ export default class AppDocument extends Document {
       };
     } finally {
       sheet.seal();
+      resetServerContext();
     }
   }
 
   render() {
     return (
-      <Html>
-        {this.renderGTM()}
+      <Html lang="en">
+        <Head />
         <body>
           <Main />
           <NextScript />
         </body>
       </Html>
     );
   }
-
-  private renderGTM() {
-    return isProd ? (
-      <Head>
-        {/* Global Site Tag (gtag.js) - Google Analytics */}
-        <script async src={GTM_URL} />
-        <script
-          dangerouslySetInnerHTML={{
-            __html: `
-                    window.dataLayer = window.dataLayer || [];
-                    function gtag(){dataLayer.push(arguments);}
-                    gtag('js', new Date());
-                    gtag('config', '${GTM_ID}');
-                  `,
-          }}
-        />
-      </Head>
-    ) : (
-      <Head />
-    );
-  }
 }
diff --git a/packages/docs/utils/analytics/gtm.ts b/packages/docs/utils/analytics/gtm.ts
@@ -1,30 +1,15 @@
-const GTM_CONFIG = {
-  ID: process.env.GTM_ID || '',
-  AUTH: process.env.GTM_AUTH || '',
-  PREVIEW: process.env.GTM_PREVIEW || '',
-  COOKIES_WIN: process.env.GTM_COOKIES_WIN || '',
-};
-
 export interface EventOptions {
   action: string;
   category?: string;
   label?: string;
 }
 
-export const GTM_ID = GTM_CONFIG.ID;
-
-export const GTM_URL = [
-  `https://www.googletagmanager.com/gtm.js?id=${GTM_CONFIG.ID}`,
-  GTM_CONFIG.AUTH && `gtm_auth=${GTM_CONFIG.AUTH}`,
-  GTM_CONFIG.PREVIEW && `gtm_preview=${GTM_CONFIG.PREVIEW}`,
-  GTM_CONFIG.COOKIES_WIN && `gtm_cookies_win=${GTM_CONFIG.COOKIES_WIN}`,
-]
-  .filter(Boolean)
-  .join('&');
+export const isProd = process.env.NODE_ENV === 'production';
+export const GTM_ID = process.env.NEXT_PUBLIC_GTM_ID;
 
 export const pageView = (url: string) => {
-  if (typeof window.gtag === 'function') {
-    window.gtag('config', GTM_CONFIG.ID, {
+  if (typeof window.gtag === 'function' && GTM_ID) {
+    window.gtag('config', GTM_ID, {
       page_path: url,
     });
   }