From b140d917030b1a28030433a1f370acfe364fae37 Mon Sep 17 00:00:00 2001
From: MSghais <msghais135@gmail.com>
Date: Mon, 14 Oct 2024 00:58:05 +0200
Subject: [PATCH] add GA pwa and landing

---
 apps/mobile/src/app/StarknetProvider.tsx |  2 +-
 apps/pwa/.env.example                    |  1 +
 apps/pwa/src/app/_app.tsx                | 46 ++++++++++++++++++++++--
 apps/website/.env.example                |  2 ++
 apps/website/src/app/_app.tsx            | 43 ++++++++++++++++++++--
 turbo.json                               |  3 +-
 6 files changed, 89 insertions(+), 8 deletions(-)

diff --git a/apps/mobile/src/app/StarknetProvider.tsx b/apps/mobile/src/app/StarknetProvider.tsx
index 00edf256..74641057 100644
--- a/apps/mobile/src/app/StarknetProvider.tsx
+++ b/apps/mobile/src/app/StarknetProvider.tsx
@@ -43,7 +43,7 @@ export const StarknetReactProvider: React.FC<React.PropsWithChildren> = ({childr
             wcProjectId: WALLET_CONNECT_ID,
             dappName: 'AFK',
             description: 'AFK Starknet dApp',
-            url: 'https://afk-community',
+            url: 'https://afk-community.xyz',
             provider,
           }),
 
diff --git a/apps/pwa/.env.example b/apps/pwa/.env.example
index a8e12e13..3628f477 100644
--- a/apps/pwa/.env.example
+++ b/apps/pwa/.env.example
@@ -13,3 +13,4 @@ REACT_APP_USERNAME_STORE_CONTRACT_ADDRESS=
 REACT_APP_CANVAS_NFT_CONTRACT_ADDRESS=
 REACT_APP_USERNAME_STORE_CONTRACT_ADDRESS=
 REACT_APP_NODE_ENV=
+NEXT_PUBLIC_GOOGLE_ANALYTICS=
diff --git a/apps/pwa/src/app/_app.tsx b/apps/pwa/src/app/_app.tsx
index bc992b72..de387ad8 100644
--- a/apps/pwa/src/app/_app.tsx
+++ b/apps/pwa/src/app/_app.tsx
@@ -1,17 +1,57 @@
 import './index.css';
 import '@rainbow-me/rainbowkit/styles.css';
 
-import type {Metadata} from 'next';
+import type { Metadata } from 'next';
 export const metadata: Metadata = {
   title: 'afk community portal',
   description: 'afk community portal',
 };
-import {AppProps} from 'next/app';
+import { AppProps } from 'next/app';
 
 import Providers from './providers';
-function MyApp({Component, pageProps}: AppProps) {
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+
+
+const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS; // Replace with your actual tracking ID
+
+function MyApp({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+
+  // Track page views
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      window.gtag('config', GA_TRACKING_ID, {
+        page_path: url,
+      });
+    };
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [router.events]);
+
   return (
     <Providers>
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
+      />
+      <Script
+        id="google-analytics"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${GA_TRACKING_ID}', {
+              page_path: window.location.pathname,
+            });
+          `,
+        }}
+      />
       <Component {...pageProps} />
     </Providers>
   );
diff --git a/apps/website/.env.example b/apps/website/.env.example
index a8e12e13..17fa7e8f 100644
--- a/apps/website/.env.example
+++ b/apps/website/.env.example
@@ -13,3 +13,5 @@ REACT_APP_USERNAME_STORE_CONTRACT_ADDRESS=
 REACT_APP_CANVAS_NFT_CONTRACT_ADDRESS=
 REACT_APP_USERNAME_STORE_CONTRACT_ADDRESS=
 REACT_APP_NODE_ENV=
+
+NEXT_PUBLIC_GOOGLE_ANALYTICS=
diff --git a/apps/website/src/app/_app.tsx b/apps/website/src/app/_app.tsx
index bc992b72..b6f080e8 100644
--- a/apps/website/src/app/_app.tsx
+++ b/apps/website/src/app/_app.tsx
@@ -1,17 +1,54 @@
 import './index.css';
 import '@rainbow-me/rainbowkit/styles.css';
 
-import type {Metadata} from 'next';
+import type { Metadata } from 'next';
 export const metadata: Metadata = {
   title: 'afk community portal',
   description: 'afk community portal',
 };
-import {AppProps} from 'next/app';
+import { AppProps } from 'next/app';
 
 import Providers from './providers';
-function MyApp({Component, pageProps}: AppProps) {
+import { useEffect } from 'react';
+import { useRouter } from 'next/router';
+import Script from 'next/script';
+const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS; // Replace with your actual tracking ID
+
+function MyApp({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+
+  // Track page views
+  useEffect(() => {
+    const handleRouteChange = (url: string) => {
+      window.gtag('config', GA_TRACKING_ID, {
+        page_path: url,
+      });
+    };
+    router.events.on('routeChangeComplete', handleRouteChange);
+    return () => {
+      router.events.off('routeChangeComplete', handleRouteChange);
+    };
+  }, [router.events]);
   return (
     <Providers>
+      <Script
+        strategy="afterInteractive"
+        src={`https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}`}
+      />
+      <Script
+        id="google-analytics"
+        strategy="afterInteractive"
+        dangerouslySetInnerHTML={{
+          __html: `
+            window.dataLayer = window.dataLayer || [];
+            function gtag(){dataLayer.push(arguments);}
+            gtag('js', new Date());
+            gtag('config', '${GA_TRACKING_ID}', {
+              page_path: window.location.pathname,
+            });
+          `,
+        }}
+      />
       <Component {...pageProps} />
     </Providers>
   );
diff --git a/turbo.json b/turbo.json
index f6afc7a0..b9cac34d 100644
--- a/turbo.json
+++ b/turbo.json
@@ -40,7 +40,8 @@
     "EXPO_PUBLIC_LAYERSWAP_API_KEY",
     "EXPO_PUBLIC_GOOGLE_TAG_ID",
     "EXPO_PUBLIC_MERCHANT_ID_APPLE",
-    "STRIPE_SERVER_API_KEY"
+    "STRIPE_SERVER_API_KEY",
+    "NEXT_PUBLIC_GOOGLE_ANALYTICS"
 
   ],
   "pipeline": {