fix: analytics

rolling-scopes · Nov 19, 2023 · 9eb399c · 9eb399c
1 parent a48fbab
commit 9eb399c
Show file tree

Hide file tree

Showing 6 changed files with 56 additions and 25 deletions.
diff --git a/client/package.json b/client/package.json
@@ -54,7 +54,7 @@
     "@types/cookie": "0.5.4",
     "@types/jest": "29.5.8",
     "@types/lodash": "4.14.201",
-    "@types/node": "^18.18.10",
+    "@types/node": "20.9.2",
     "@types/react": "18.2.37",
     "@types/react-dom": "18.2.7",
     "@typescript-eslint/eslint-plugin": "6.6.0",

diff --git a/client/src/components/Timer.tsx b/client/src/components/Timer.tsx
@@ -18,7 +18,9 @@ export function Timer({ onElapsed, seconds }: { onElapsed: () => void; seconds:
       onElapsed();
     }
     return () => {
-      timeout && clearTimeout(timeout);
+      if (timeout) {
+        clearTimeout(timeout as NodeJS.Timeout);
+      }
     };
   }, [leftSeconds]);
 

diff --git a/client/src/pages/_app.tsx b/client/src/pages/_app.tsx
@@ -5,13 +5,15 @@ import Head from 'next/head';
 import 'antd/dist/reset.css';
 import '../styles/main.css';
 import { initializeFeatures } from 'services/features';
+import { Analytics } from './analytics';
 
 class RsSchoolApp extends App {
   render() {
     const { Component, pageProps, router } = this.props;
     initializeFeatures(router.query);
     return (
       <>
+        <Analytics />
         <Head>
           <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
           <title>App / The Rolling Scopes School</title>

diff --git a/client/src/pages/_document.tsx b/client/src/pages/_document.tsx
@@ -1,25 +1,12 @@
 import * as React from 'react';
 import Document, { Head, Html, Main, NextScript } from 'next/document';
-import Script from 'next/script';
-
-const enableAnalytics = process.env.NODE_ENV === 'production';
 
 export default class extends Document {
   render() {
     return (
       <Html lang="en">
         <Head>
           <link rel="shortcut icon" href="https://rs.school/favicon.ico" />
-
-          {enableAnalytics && <Script async src="https://www.googletagmanager.com/gtag/js?id=G-WJLHZ9CCXJ" />}
-          {enableAnalytics && <script dangerouslySetInnerHTML={{ __html: gaJsCode }} />}
-          {enableAnalytics && (
-            <script
-              defer
-              src="https://static.cloudflareinsights.com/beacon.min.js"
-              data-cf-beacon={'{"token": "e607238d732c4713b01b851ed3df61c2"}'}
-            />
-          )}
         </Head>
         <body>
           <Main />
@@ -29,11 +16,3 @@ export default class extends Document {
     );
   }
 }
-
-const gaJsCode = `
-  window.dataLayer = window.dataLayer || [];
-  function gtag(){dataLayer.push(arguments);}
-  gtag('js', new Date());
-
-  gtag('config', 'G-WJLHZ9CCXJ');
-`;
diff --git a/client/src/pages/analytics.tsx b/client/src/pages/analytics.tsx
@@ -0,0 +1,30 @@
+import Script from 'next/script';
+
+const enableAnalytics = process.env.NODE_ENV === 'production';
+
+export function Analytics() {
+  if (!enableAnalytics) {
+    return null;
+  }
+
+  return (
+    <>
+      <Script defer src="https://www.googletagmanager.com/gtag/js?id=G-WJLHZ9CCXJ" />
+      <Script id="google-analytics">
+        {`
+        window.dataLayer = window.dataLayer || [];
+        function gtag(){dataLayer.push(arguments);}
+        gtag('js', new Date());
+
+        gtag('config', 'G-WJLHZ9CCXJ');
+      `}
+      </Script>
+
+      <Script
+        defer
+        src="https://static.cloudflareinsights.com/beacon.min.js"
+        data-cf-beacon={'{"token": "e607238d732c4713b01b851ed3df61c2"}'}
+      />
+    </>
+  );
+}
diff --git a/package-lock.json b/package-lock.json