style: 💄 cleaner analytics setup

gmpetrov · Sep 14, 2023 · 1552279 · 1552279 · vercel · Sep 14, 2023
1 parent 680ac7a
commit 1552279
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 17 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -55,12 +55,11 @@ ARG NEXT_PUBLIC_STRIPE_PUBLISHABLE_KEY
 ARG NEXT_PUBLIC_STRIPE_PAYMENT_LINK_LEVEL_1
 ARG NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID
 ARG NEXT_PUBLIC_CRISP_PLUGIN_ID
+ARG NEXT_PUBLIC_GA_ID
+ARG NEXT_PUBLIC_HOTJAR_ID
 
 RUN NODE_OPTIONS="--max_old_space_size=4096" npm run build
 
-# If using npm comment out above and use below instead
-# RUN npm run build
-
 # Production image, copy all the files and run next
 FROM base AS runner
 WORKDIR /app

diff --git a/fly/fly.toml b/fly/fly.toml
@@ -19,6 +19,9 @@ worker = "node --max-old-space-size=1536 server/datasource-loader.js"
     NEXT_PUBLIC_STRIPE_PAYMENT_LINK_LEVEL_1="https://buy.stripe.com/4gw17tegmdAp04UcMM"
     NEXT_PUBLIC_STRIPE_PRICING_TABLE_ID="prctbl_1N7Hu2IDmvRZDzsDlOYpGt04"
     NEXT_PUBLIC_CRISP_PLUGIN_ID="a52b874e-489f-40f1-a00a-1b1f4bdad545"
+    NEXT_PUBLIC_GA_ID="G-QTN3QP6PKB"
+    NEXT_PUBLIC_HOTJAR_ID="3480619"
+
 
 [http_service]
   processes = ["web"]

diff --git a/pages/_app.tsx b/pages/_app.tsx
@@ -7,6 +7,7 @@ import '@react-pdf-viewer/default-layout/lib/styles/index.css';
 import '@react-pdf-viewer/search/lib/styles/index.css';
 import '@react-pdf-viewer/highlight/lib/styles/index.css';
 
+import { String } from 'aws-sdk/clients/cloudsearchdomain';
 import type { AppProps } from 'next/app';
 import dynamic from 'next/dynamic';
 import { useRouter } from 'next/router';
@@ -55,6 +56,23 @@ export default function App({
     }
   }, []);
 
+  React.useEffect(() => {
+    function onRouteChangeComplete(url: String) {
+      if (process.env.NEXT_PUBLIC_GA_ID) {
+        window?.gtag?.('event', 'page_view', {
+          page_location: url
+        })
+      }
+    }
+
+    router.events.on('routeChangeComplete', onRouteChangeComplete)
+
+    return () => {
+      router.events.off('routeChangeComplete', onRouteChangeComplete)
+    }
+  }, [router.events])
+
+
   if (router.pathname === '/agents/[agentId]/iframe') {
     return getLayout(
       <SessionProvider>

diff --git a/pages/_document.tsx b/pages/_document.tsx
@@ -41,30 +41,37 @@ class CustomDocument extends Document {
             rel="stylesheet"
           />
 
-          <Script
-            src="https://www.googletagmanager.com/gtag/js?id=G-QTN3QP6PKB"
-            strategy="afterInteractive"
-          />
-          <Script id="google-analytics" strategy="afterInteractive">
-            {`
+          {process.env.NEXT_PUBLIC_GA_ID && (
+            <Script
+              src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GA_ID}`}
+              strategy="afterInteractive"
+            />
+          )}
+
+          {process.env.NEXT_PUBLIC_GA_ID && (
+            <Script id="google-analytics" strategy="afterInteractive">
+              {`
           window.dataLayer = window.dataLayer || [];
           function gtag(){window.dataLayer.push(arguments);}
           gtag('js', new Date());
+          
+          gtag('config', '${process.env.NEXT_PUBLIC_GA_ID}');
+          `}
+            </Script>
+          )}
 
-          gtag('config', 'G-QTN3QP6PKB');
-        `}
-          </Script>
-
-          <Script id="hotjar" strategy="afterInteractive">
-            {`(function(h,o,t,j,a,r){
+          {process.env.NEXT_PUBLIC_HOTJAR_ID && (
+            <Script id="hotjar" strategy="afterInteractive">
+              {`(function(h,o,t,j,a,r){
         h.hj=h.hj||function(){(h.hj.q=h.hj.q||[]).push(arguments)};
-        h._hjSettings={hjid:3480619,hjsv:6};
+        h._hjSettings={hjid:${process.env.NEXT_PUBLIC_HOTJAR_ID},hjsv:6};
         a=o.getElementsByTagName('head')[0];
         r=o.createElement('script');r.async=1;
         r.src=t+h._hjSettings.hjid+j+h._hjSettings.hjsv;
         a.appendChild(r);
     })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`}
-          </Script>
+            </Script>
+          )}
 
           <script
             async