added segment source

.env

@@ -0,0 +1 @@
+REACT_APP_SEGMENT_SOURCE_KEY='yEVKwWFjOEqjTWJbq7iN8IxkJ5dghbB1'

.gitignore

@@ -13,6 +13,7 @@ node_modules
 
 # misc
 .DS_Store
+.env
 .env.local
 .env.development.local
 .env.test.local

package.json

@@ -4,6 +4,7 @@
   "private": true,
   "dependencies": {
     "@reduxjs/toolkit": "^1.8.5",
+    "@segment/analytics-next": "^1.77.0",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

src/index.js

@@ -1,11 +1,11 @@
-import React from "react";
+import React, { useEffect } from "react";
 import ReactDOM from "react-dom/client";
 import "../node_modules/font-awesome/css/font-awesome.min.css";
 import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import { Provider } from "react-redux";
 import store from "./redux/store";
-
+import analytics from "./lib/segment"; // Import Segment
 import {
   Home,
   Product,
@@ -21,26 +21,34 @@ import {
 import ScrollToTop from "./components/ScrollToTop";
 import { Toaster } from "react-hot-toast";
 
+const Root = () => {
+  useEffect(() => {
+    analytics.page(); // Track page views on load
+  }, []);
+
+  return (
+    <BrowserRouter>
+      <ScrollToTop>
+        <Provider store={store}>
+          <Routes>
+            <Route path="/" element={<Home />} />
+            <Route path="/product" element={<Products />} />
+            <Route path="/product/:id" element={<Product />} />
+            <Route path="/about" element={<AboutPage />} />
+            <Route path="/contact" element={<ContactPage />} />
+            <Route path="/cart" element={<Cart />} />
+            <Route path="/login" element={<Login />} />
+            <Route path="/register" element={<Register />} />
+            <Route path="/checkout" element={<Checkout />} />
+            <Route path="*" element={<PageNotFound />} />
+            <Route path="/product/*" element={<PageNotFound />} />
+          </Routes>
+        </Provider>
+      </ScrollToTop>
+      <Toaster />
+    </BrowserRouter>
+  );
+};
+
 const root = ReactDOM.createRoot(document.getElementById("root"));
-root.render(
-  <BrowserRouter>
-    <ScrollToTop>
-      <Provider store={store}>
-        <Routes>
-          <Route path="/" element={<Home />} />
-          <Route path="/product" element={<Products />} />
-          <Route path="/product/:id" element={<Product />} />
-          <Route path="/about" element={<AboutPage />} />
-          <Route path="/contact" element={<ContactPage />} />
-          <Route path="/cart" element={<Cart />} />
-          <Route path="/login" element={<Login />} />
-          <Route path="/register" element={<Register />} />
-          <Route path="/checkout" element={<Checkout />} />
-          <Route path="*" element={<PageNotFound />} />
-          <Route path="/product/*" element={<PageNotFound />} />
-        </Routes>
-      </Provider>
-    </ScrollToTop>
-    <Toaster />
-  </BrowserRouter>
-);
+root.render(<Root />);

src/lib/segment.js

@@ -0,0 +1,7 @@
+import { AnalyticsBrowser } from '@segment/analytics-next'
+
+
+const analytics = new AnalyticsBrowser()
+analytics.load({ writeKey: process.env.REACT_APP_SEGMENT_SOURCE_KEY})
+
+export default analytics

src/pages/AboutPage.jsx

@@ -1,6 +1,13 @@
 import React from 'react'
+import { useEffect } from 'react';
+import analytics from '../lib/segment';
 import { Footer, Navbar } from "../components";
+
 const AboutPage = () => {
+  useEffect(() => {
+    analytics.page(); // Track page views on load
+  }, []);
+
   return (
     <>
       <Navbar />

src/pages/Cart.jsx

@@ -1,13 +1,18 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { Footer, Navbar } from "../components";
 import { useSelector, useDispatch } from "react-redux";
 import { addCart, delCart } from "../redux/action";
 import { Link } from "react-router-dom";
+import analytics from "../lib/segment";
 
 const Cart = () => {
   const state = useSelector((state) => state.handleCart);
   const dispatch = useDispatch();
 
+  useEffect(() => {
+    analytics.page(); // Track page views on load
+  }, []);
+
   const EmptyCart = () => {
     return (
       <div className="container">

src/pages/Checkout.jsx

@@ -2,7 +2,13 @@ import React from "react";
 import { Footer, Navbar } from "../components";
 import { useSelector } from "react-redux";
 import { Link } from "react-router-dom";
+import { useEffect } from "react";
+import analytics from "../lib/segment";
+
 const Checkout = () => {
+  useEffect(() => {
+    analytics.page(); // Track page views on load
+  }, []);
   const state = useSelector((state) => state.handleCart);
 
   const EmptyCart = () => {