feat(gtag): 🚀 add simple gtag based on env key (#78)

* feat(gtag): 🚀  add simple gtag based on env key

CLOSES #74

* refactor(gtag): 🔍  add nprogress and updated gtag implementation

* refactor(gtag): 🔍  removed initial track event

Co-authored-by: Maren Osnabrug <[email protected]>
Co-authored-by: MitchelvanBever <[email protected]>

next-env.d.ts

@@ -1,2 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/types/global" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

package.json

@@ -40,6 +40,7 @@
     "framer-motion": "4.1.17",
     "next": "11.1.1",
     "next-seo": "4.26.0",
+    "nprogress": "^0.2.0",
     "react": "17.0.2",
     "react-dom": "17.0.2",
     "react-flatpickr": "3.10.7",

src/components/common/UserAgent/index.ts

@@ -0,0 +1,18 @@
+import { useEffect } from 'react';
+
+/**
+ * Detect user agent and add `data-ios` attribute to document if iOS.
+ */
+export const UserAgent = () => {
+  useEffect(() => {
+    // Browser only
+    if (typeof window !== 'undefined') {
+      const ua = navigator?.userAgent?.toString();
+      if (/(iPhone|iPad)/.test(ua)) {
+        document.documentElement.setAttribute('data-ios', '');
+      }
+    }
+  }, []);
+
+  return null;
+};

src/components/index.ts

@@ -1,2 +1,3 @@
 export * from './common/Image';
 export * from './common/Providers';
+export * from './common/UserAgent';

src/lib/gtag.ts

@@ -0,0 +1,17 @@
+declare interface GtagWindow extends Window {
+  gtag: any;
+}
+declare const window: GtagWindow;
+
+// https://developers.google.com/analytics/devguides/collection/gtagjs/pages
+export const pageview = (url: string) => {
+  window.gtag('config', process.env.NEXT_PUBLIC_GTM, {
+    page_path: url,
+  });
+};
+
+export const track = (data: any) => {
+  try {
+    window.gtag(data);
+  } catch (e) {}
+};

src/lib/index.ts

@@ -1,3 +1,4 @@
 export * from './test-utils';
 export * from './sentry';
+export * from './gtag';
 export * from './modifyResponsiveValue';

src/pages/_app.tsx

@@ -1,27 +1,80 @@
+import { useEffect, useRef } from 'react';
+
 import { withPasswordProtect } from '@storyofams/next-password-protect';
 import { DefaultSeo } from 'next-seo';
 import { AppProps } from 'next/app';
+import { useRouter } from 'next/router';
+import NProgress from 'nprogress';
 import { ReactQueryDevtools } from 'react-query/devtools';
 
-import { Providers } from '~components';
+import { Providers, UserAgent } from '~components';
 import { seo } from '~config';
 import { initSentry } from '~lib';
+import useDetectKeyboard from '~hooks/useDetectKeyboard';
+import { pageview } from '~lib/gtag';
 import CSSreset from '~styles/CSSreset';
 
+import 'nprogress/nprogress.css';
+
 import '../../public/static/fonts/stylesheet.css';
 
 if (process.env.NEXT_PUBLIC_SENTRY_DSN) {
   initSentry();
 }
 
-const MyApp = ({ pageProps, Component }: AppProps) => (
-  <Providers pageProps={pageProps}>
-    <CSSreset />
-    <DefaultSeo {...seo} />
-    <Component {...pageProps} />
-    <ReactQueryDevtools initialIsOpen={false} />
-  </Providers>
-);
+const MyApp = ({ pageProps, Component }: AppProps) => {
+  const router = useRouter();
+  const progressTimer = useRef<any>(null);
+
+  useDetectKeyboard();
+
+  useEffect(() => {
+    const startProgress = () => {
+      if (!progressTimer.current) {
+        progressTimer.current = setTimeout(NProgress.start, 120);
+      }
+    };
+
+    const onComplete = (url) => {
+      pageview(url);
+      endProgress(url);
+    };
+
+    const endProgress = (err) => {
+      if (progressTimer.current) {
+        clearTimeout(progressTimer.current);
+        progressTimer.current = null;
+
+        if (err?.cancelled) {
+          NProgress.set(0.0);
+          NProgress.remove();
+        } else {
+          NProgress.done();
+        }
+      }
+    };
+
+    router.events.on('routeChangeStart', startProgress);
+    router.events.on('routeChangeComplete', onComplete);
+    router.events.on('routeChangeError', endProgress);
+
+    return () => {
+      router.events.off('routeChangeStart', startProgress);
+      router.events.off('routeChangeComplete', onComplete);
+      router.events.off('routeChangeError', endProgress);
+    };
+  });
+
+  return (
+    <Providers pageProps={pageProps}>
+      <CSSreset />
+      <DefaultSeo {...seo} />
+      <UserAgent />
+      <Component {...pageProps} />
+      <ReactQueryDevtools initialIsOpen={false} />
+    </Providers>
+  );
+};
 
 export default process.env.PASSWORD_PROTECT
   ? withPasswordProtect(MyApp)

src/pages/_document.tsx

@@ -1,4 +1,4 @@
-import Document from 'next/document';
+import Document, { Head, Html, Main, NextScript } from 'next/document';
 import { resetId } from 'react-id-generator';
 import { ServerStyleSheet } from 'styled-components';
 
@@ -29,4 +29,42 @@ export default class MyDocument extends Document {
       sheet.seal();
     }
   }
+
+  render() {
+    return (
+      <Html>
+        <Head>
+          <script
+            dangerouslySetInnerHTML={{
+              __html: `
+                window.dataLayer = [{
+                  userLanguage: '${this.props.locale}'
+                }];
+
+                function gtag(event){dataLayer.push(event);}
+                gtag({ 'gtm.start': new Date().getTime(), event:'gtm.js' });
+              `,
+            }}
+          />
+          <script
+            async
+            src={`https://www.googletagmanager.com/gtm.js?id=${process.env.NEXT_PUBLIC_GTM}`}
+          />
+        </Head>
+        <body>
+          <noscript>
+            <iframe
+              title="tag"
+              src={`https://www.googletagmanager.com/ns.html?id=${process.env.NEXT_PUBLIC_GTM}`}
+              height="0"
+              width="0"
+              style={{ display: 'none', visibility: 'hidden' }}
+            />
+          </noscript>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
 }

src/styles/CSSreset.ts

@@ -291,6 +291,25 @@ const CSSreset = createGlobalStyle(
       max-width: 100%;
       height: auto;
     }
+
+    #nprogress {
+      z-index: 9999999;
+
+      .bar {
+        z-index: 9999999;
+        background: ${theme.colors.primary500};
+      }
+
+      .peg {
+        box-shadow: 0 0 10px ${theme.colors.primary500},
+          0 0 5px ${theme.colors.primary500};
+      }
+
+      .spinner {
+        display: none;
+      }
+    }
+
     ${themeStyles}
   `,
 );