add GA pwa and landing

AFK-AlignedFamKernel · Oct 13, 2024 · b140d91 · b140d91
1 parent 17794f7
commit b140d91
Show file tree

Hide file tree

Showing 6 changed files with 89 additions and 8 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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": {