Add google analytics option

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

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",

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
 }>

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
+})

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> = {