From 02f6f133e3252839b6490191510857ece6d8aa91 Mon Sep 17 00:00:00 2001
From: aelassas <akram.elassas@gmail.com>
Date: Tue, 8 Oct 2024 07:38:18 +0100
Subject: [PATCH] Add google analytics option

---
 frontend/.env.example               |  2 ++
 frontend/package-lock.json          |  7 +++++++
 frontend/package.json               |  3 ++-
 frontend/src/app/(pages)/layout.tsx |  7 +++++++
 frontend/src/common/ga4.ts          | 19 +++++++++++++++++++
 frontend/src/config/env.config.ts   |  3 +++
 6 files changed, 40 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/common/ga4.ts

diff --git a/frontend/.env.example b/frontend/.env.example
index 11cb85d..f146955 100644
--- a/frontend/.env.example
+++ b/frontend/.env.example
@@ -7,3 +7,5 @@ NEXT_PUBLIC_WC_FB_APP_ID=XXXXXXXXXX
 NEXT_PUBLIC_WC_APPLE_ID=XXXXXXXXXX
 NEXT_PUBLIC_WC_GG_APP_ID=XXXXXXXXXX
 NEXT_PUBLIC_WC_STRIPE_PUBLISHABLE_KEY=STRIPE_PUBLISHABLE_KEY
+NEXT_PUBLIC_WC_GOOGLE_ANALYTICS_ENABLED=false
+NEXT_PUBLIC_WC_GOOGLE_ANALYTICS_ID=G-XXXXXXXXXX
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4a2dcd8..9d5223b 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -23,6 +23,7 @@
         "next-nprogress-bar": "^2.3.13",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
+        "react-ga4": "^2.1.0",
         "react-localization": "^1.0.19",
         "react-slick": "^0.30.2",
         "react-toastify": "^10.0.5",
@@ -4820,6 +4821,12 @@
         "react": "^18.3.1"
       }
     },
+    "node_modules/react-ga4": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/react-ga4/-/react-ga4-2.1.0.tgz",
+      "integrity": "sha512-ZKS7PGNFqqMd3PJ6+C2Jtz/o1iU9ggiy8Y8nUeksgVuvNISbmrQtJiZNvC/TjDsqD0QlU5Wkgs7i+w9+OjHhhQ==",
+      "license": "MIT"
+    },
     "node_modules/react-is": {
       "version": "16.13.1",
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 3d09114..2d9f748 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -4,7 +4,7 @@
   "private": true,
   "scripts": {
     "dev": "next dev -p 8006",
-    "build": "rimraf .net && next build",
+    "build": "rimraf .next && next build",
     "start": "next start -p 8006",
     "lint": "next lint"
   },
@@ -24,6 +24,7 @@
     "next-nprogress-bar": "^2.3.13",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
+    "react-ga4": "^2.1.0",
     "react-localization": "^1.0.19",
     "react-slick": "^0.30.2",
     "react-toastify": "^10.0.5",
diff --git a/frontend/src/app/(pages)/layout.tsx b/frontend/src/app/(pages)/layout.tsx
index 3f65cf9..7d5b9ce 100644
--- a/frontend/src/app/(pages)/layout.tsx
+++ b/frontend/src/app/(pages)/layout.tsx
@@ -13,6 +13,7 @@ import { CurrencyProvider } from '@/context/CurrencyContext'
 import { UserProvider } from '@/context/UserContext'
 import { NotificationProvider } from '@/context/NotificationContext'
 import { CartProvider } from '@/context/CartContext'
+import env from '@/config/env.config'
 import * as helper from '@/common/helper'
 
 import { strings as activateStrings } from '@/lang/activate'
@@ -42,6 +43,12 @@ import { strings as soldOutStrings } from '@/lang/sold-out'
 import 'react-toastify/dist/ReactToastify.min.css'
 import '@/styles/globals.css'
 
+import { init as initGA } from '@/common/ga4'
+
+if (env.GOOGLE_ANALYTICS_ENABLED) {
+  initGA()
+}
+
 type LayoutProps = Readonly<{
   children: React.ReactNode
 }>
diff --git a/frontend/src/common/ga4.ts b/frontend/src/common/ga4.ts
new file mode 100644
index 0000000..2970d7e
--- /dev/null
+++ b/frontend/src/common/ga4.ts
@@ -0,0 +1,19 @@
+import ga4 from 'react-ga4'
+import env from '@/config/env.config'
+
+const TRACKING_ID = env.GOOGLE_ANALYTICS_ID
+const { isProduction } = env
+
+export const init = () => ga4.initialize(TRACKING_ID, {
+  testMode: !isProduction
+})
+
+export const sendEvent = (name: string) => ga4.event('screen_view', {
+  app_name: 'wexCommerce',
+  screen_name: name,
+})
+
+export const sendPageview = (path: string) => ga4.send({
+  hitType: 'pageview',
+  page: path
+})
diff --git a/frontend/src/config/env.config.ts b/frontend/src/config/env.config.ts
index 3c989e6..4faa49a 100644
--- a/frontend/src/config/env.config.ts
+++ b/frontend/src/config/env.config.ts
@@ -4,6 +4,7 @@ const env = {
   isMobile: () => window.innerWidth <= 960,
   isTablet: () => window.innerWidth >= 500 && window.innerWidth <= 960,
   isLandscape: () => window.innerHeight <= 566,
+  isProduction: process.env.NODE_ENV === 'production',
 
   APP_TYPE: 'frontend',
   API_HOST: process.env.NEXT_PUBLIC_WC_API_HOST,
@@ -27,6 +28,8 @@ const env = {
   GG_APP_ID: String(process.env.NEXT_PUBLIC_WC_GG_APP_ID),
   STRIPE_PUBLISHABLE_KEY: String(process.env.NEXT_PUBLIC_WC_STRIPE_PUBLISHABLE_KEY),
   FEATURED_PRODUCTS_SIZE: 10,
+  GOOGLE_ANALYTICS_ENABLED: (process.env.NEXT_PUBLIC_WC_GOOGLE_ANALYTICS_ENABLED && process.env.NEXT_PUBLIC_WC_GOOGLE_ANALYTICS_ENABLED.toLowerCase()) === 'true',
+  GOOGLE_ANALYTICS_ID: String(process.env.NEXT_PUBLIC_WC_GOOGLE_ANALYTICS_ID),
 }
 
 export const CookieOptions: Partial<ResponseCookie> = {