Merge remote-tracking branch 'origin/main'

HamburgJ · Feb 1, 2025 · 63cf733 · 63cf733
2 parents 32cbf01 + 7fc09f4
commit 63cf733
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -2,9 +2,7 @@
 
 A simple React-based word matching game where you solve puzzles by matching items to their correct categories.
 
-## Demo 🎯
-
-[Play Match 5](https://hamburgj.github.io/match-five/) 
+## [👉 Play Now!](https://burgerfun.tech/match-five/) 
 
 ## About the Game 📖
 

diff --git a/public/index.html b/public/index.html
@@ -15,6 +15,16 @@
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap" rel="stylesheet">
+
+    <!-- Google Analytics -->
+    <script async src="https://www.googletagmanager.com/gtag/js?id=%REACT_APP_GA_ID%"></script>
+    <script>
+      window.dataLayer = window.dataLayer || [];
+      function gtag(){dataLayer.push(arguments);}
+      gtag('js', new Date());
+      gtag('config', '%REACT_APP_GA_ID%');
+    </script>
+
     <title>Match Five</title>
   </head>
   <body>

diff --git a/src/index.tsx b/src/index.tsx
@@ -3,10 +3,14 @@ import ReactDOM from 'react-dom/client';
 import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
+import { initGA } from './utils/analytics';
 import { Provider } from 'react-redux';
 import { PersistGate } from 'redux-persist/integration/react';
 import { store, persistor } from './store/store';
 
+// Initialize Google Analytics
+initGA();
+
 const root = ReactDOM.createRoot(
   document.getElementById('root') as HTMLElement
 );

diff --git a/src/utils/analytics.ts b/src/utils/analytics.ts
@@ -0,0 +1,64 @@
+import ReactGA from 'react-ga4';
+
+const GA_ID = process.env.REACT_APP_GA_ID || process.env.VITE_GA_ID || process.env.CF_GA_ID;
+const isProduction = process.env.NODE_ENV === 'production';
+
+export const initGA = () => {
+  if (!GA_ID) {
+    if (!isProduction) {
+      console.log('Analytics disabled: No measurement ID available');
+    }
+    return;
+  }
+
+  try {
+    ReactGA.initialize(GA_ID, {
+      gaOptions: {
+        debug_mode: !isProduction
+      }
+    });
+    // Send initial pageview
+    ReactGA.send({
+      hitType: "pageview",
+      page: window.location.pathname,
+      title: "Match Five - Word Association Game"
+    });
+  } catch (error) {
+    if (!isProduction) {
+      console.warn('Failed to initialize Google Analytics:', error);
+    }
+  }
+};
+
+export const logPageView = (page: string) => {
+  if (!GA_ID) return;
+
+  try {
+    ReactGA.send({
+      hitType: "pageview",
+      page,
+      title: "Match Five - Word Association Game"
+    });
+  } catch (error) {
+    if (!isProduction) {
+      console.warn('Failed to log page view:', error);
+    }
+  }
+};
+
+export const logGameEvent = (action: string, label?: string, value?: number) => {
+  if (!GA_ID) return;
+
+  try {
+    ReactGA.event({
+      category: 'Game',
+      action,
+      label,
+      value
+    });
+  } catch (error) {
+    if (!isProduction) {
+      console.warn('Failed to log game event:', error);
+    }
+  }
+}; 
diff --git a/tsconfig.tsbuildinfo b/tsconfig.tsbuildinfo