Ga scripts

web/global.d.ts

@@ -0,0 +1 @@
+declare function gtag(command: string, eventName: string, params?: any): void;

web/pages/_app.tsx

@@ -11,6 +11,7 @@ import { GameContextProvider } from "../src/contexts/GameContext";
 import { UserProvider } from "../src/contexts/UserContext";
 import Script from "next/script";
 import ErrorBoundary from "../src/components/layout/ErrorBoundary";
+import { GA_MEASUREMENT_ID, GTM_ID } from "../src/constants";
 
 export default function App({ Component, pageProps }: AppProps) {
   const [queryClient] = useState(new QueryClient());
@@ -26,7 +27,26 @@ export default function App({ Component, pageProps }: AppProps) {
                     new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
                     j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
                     'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-                    })(window,document,'script','dataLayer','GTM-KSQM8K8K');`,
+                    })(window,document,'script','dataLayer',${GTM_ID});`,
+          }}
+        />
+        {/* Global Site Tag (gtag.js) - Google Analytics */}
+        <Script
+          src={`https://www.googletagmanager.com/gtag/js?id=${GA_MEASUREMENT_ID}`}
+          strategy="afterInteractive"
+        />
+        <Script
+          id="gtag-init"
+          strategy="afterInteractive"
+          dangerouslySetInnerHTML={{
+            __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${GA_MEASUREMENT_ID}', {
+              page_path: window.location.pathname,
+            });
+          `,
           }}
         />
         <ChakraProvider theme={theme}>

web/pages/_document.tsx

@@ -1,5 +1,5 @@
 import { Html, Head, Main, NextScript } from "next/document";
-import { FULLCOUNT_ASSETS_PATH } from "../src/constants";
+import { FULLCOUNT_ASSETS_PATH, GTM_ID } from "../src/constants";
 
 export default function Document() {
   return (
@@ -36,7 +36,7 @@ export default function Document() {
         {/*<!-- Google Tag Manager (noscript) -->*/}
         <noscript>
           <iframe
-            src="https://www.googletagmanager.com/ns.html?id=GTM-KSQM8K8K"
+            src={`https://www.googletagmanager.com/ns.html?id=${GTM_ID}`}
             height="0"
             width="0"
             style={{ display: "none", visibility: "hidden" }}

web/src/constants.ts

@@ -95,3 +95,6 @@ export const blbImage = (idx: number) =>
 
 export const NUMBER_OF_BLB_IMAGES = 16;
 export const HUMBUG_REPORT_VERSION = "0.0.3";
+
+export const GA_MEASUREMENT_ID = "G-7GHX3XTZT3";
+export const GTM_ID = "GTM-KSQM8K8K";

web/src/hooks/useSignUp.tsx

@@ -21,6 +21,13 @@ const useSignUp = () => {
       sendReport("signed up", { username: variables.username, email: variables.email }, [
         `user_token: ${response.data.id}`,
       ]);
+      if (typeof gtag === "function") {
+        gtag("set", "user_properties", {
+          user_status: "signed_up",
+        });
+      } else {
+        console.warn("gtag function is not defined");
+      }
 
       getUser();
     },

web/tsconfig.json

@@ -21,7 +21,8 @@
     "**/*.tsx",
     "src/theme/components/button",
     "types/**/*.d.ts",
-    "node_modules/eslint-plugin-react/lib/types.d.ts"
+    "node_modules/eslint-plugin-react/lib/types.d.ts",
+    "global.d.ts"
   ],
   "exclude": ["node_modules", "metadata"]
 }