From b559840584e63b9d1b61bdd04bd2f0ff853c49f4 Mon Sep 17 00:00:00 2001
From: moiz-sgtradex <moiz.shaikh@sgtradextech.com>
Date: Fri, 12 Sep 2025 09:42:32 +0530
Subject: [PATCH 1/6] feat: gtm setup for ga analytics

---
 .github/workflows/ci.yml                   |  2 ++
 .gitignore                                 |  2 ++
 package-lock.json                          | 14 ++++++++++++++
 package.json                               |  2 ++
 src/components/content/DocumentPreview.tsx |  9 ++++++++-
 src/components/content/DocumentStatus.tsx  | 11 ++++++++++-
 src/lib/gtmService.ts                      | 13 +++++++++++++
 src/main.tsx                               |  2 +-
 src/types/types.ts                         |  4 ++++
 tsconfig.json                              |  3 ++-
 10 files changed, 58 insertions(+), 4 deletions(-)
 create mode 100644 src/lib/gtmService.ts

diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 091eb44..69b2284 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -21,3 +21,5 @@ jobs:
         run: npm run lint
       - name: Build
         run: npm run build
+        env:
+          VITE_GTM_ID: ${{ secrets.VITE_GTM_ID }}
diff --git a/.gitignore b/.gitignore
index 07ed592..492770e 100644
--- a/.gitignore
+++ b/.gitignore
@@ -10,3 +10,5 @@ Thumbs.db
 eslintcache
 .prettiercache
 .netlify/
+.env
+.env.local
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 3a20b33..e5157ed 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -16,12 +16,14 @@
         "@radix-ui/react-separator": "^1.1.0",
         "@radix-ui/react-slot": "^1.1.0",
         "@radix-ui/react-tabs": "^1.1.1",
+        "@types/react-gtm-module": "^2.0.4",
         "class-variance-authority": "^0.7.0",
         "clsx": "2.1.1",
         "lucide-react": "^0.453.0",
         "qrcode.react": "^4.2.0",
         "react": "^19.1.0",
         "react-dom": "^19.1.0",
+        "react-gtm-module": "^2.0.11",
         "react-router-dom": "^7.6.1",
         "tailwind-merge": "2.5.4",
         "vite-plugin-node-polyfills": "^0.23.0"
@@ -2352,6 +2354,12 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/react-gtm-module": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@types/react-gtm-module/-/react-gtm-module-2.0.4.tgz",
+      "integrity": "sha512-5wPMWsUE5AI6O0B0K1/zbs0rFHBKu+7NWXQwDXhqvA12ooLD6W1AYiWZqR4UiOd7ixZDV1H5Ys301zEsqyIfNg==",
+      "license": "MIT"
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.33.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.33.0.tgz",
@@ -6359,6 +6367,12 @@
         "react": "^19.1.0"
       }
     },
+    "node_modules/react-gtm-module": {
+      "version": "2.0.11",
+      "resolved": "https://registry.npmjs.org/react-gtm-module/-/react-gtm-module-2.0.11.tgz",
+      "integrity": "sha512-8gyj4TTxeP7eEyc2QKawEuQoAZdjKvMY4pgWfycGmqGByhs17fR+zEBs0JUDq4US/l+vbTl+6zvUIx27iDo/Vw==",
+      "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/package.json b/package.json
index 5ff0e92..b0cedf8 100644
--- a/package.json
+++ b/package.json
@@ -21,12 +21,14 @@
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
     "@radix-ui/react-tabs": "^1.1.1",
+    "@types/react-gtm-module": "^2.0.4",
     "class-variance-authority": "^0.7.0",
     "clsx": "2.1.1",
     "lucide-react": "^0.453.0",
     "qrcode.react": "^4.2.0",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
+    "react-gtm-module": "^2.0.11",
     "react-router-dom": "^7.6.1",
     "tailwind-merge": "2.5.4",
     "vite-plugin-node-polyfills": "^0.23.0"
diff --git a/src/components/content/DocumentPreview.tsx b/src/components/content/DocumentPreview.tsx
index 51e8971..d37025b 100644
--- a/src/components/content/DocumentPreview.tsx
+++ b/src/components/content/DocumentPreview.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { Button } from '@/button';
 import { ExpandIcon } from 'lucide-react';
 import { ExpandPreview } from './ExpandPreview';
+import { sendGAEvent } from '../../lib/gtmService';
 
 export const DocumentPreview = ({ image, name, imageAlt }: { image: string; name: string; imageAlt: string }) => {
   const [expandPreview, setExpandPreview] = useState(false);
@@ -17,7 +18,13 @@ export const DocumentPreview = ({ image, name, imageAlt }: { image: string; name
         <Button
           variant="default"
           className="h-9 bg-interactive-componentsolid-bgenabledbgneutraldefault text-interactive-componentsolid-bgenabledcontentdefault rounded-xl"
-          onClick={() => setExpandPreview(true)}
+          onClick={() => {
+            sendGAEvent({
+              event: 'document_preview',
+              preview_title: name,
+            });
+            setExpandPreview(true);
+          }}
         >
           <ExpandIcon className="w-4 h-4 mr-1" />
           <span className="font-headers-paragraphs-header">Expand Preview</span>
diff --git a/src/components/content/DocumentStatus.tsx b/src/components/content/DocumentStatus.tsx
index 411f412..ac1a19c 100644
--- a/src/components/content/DocumentStatus.tsx
+++ b/src/components/content/DocumentStatus.tsx
@@ -4,6 +4,7 @@ import { Dialog, DialogTrigger } from '@/dialog';
 import { ChevronRightIcon } from 'lucide-react';
 import { Separator } from '@/separator';
 import { StatusProps } from '../../types/types';
+import { sendGAEvent } from '../../lib/gtmService';
 
 export const DocumentStatus = ({ id, title, statuses, selectedSchema, onStatusClick }: StatusProps) => {
   const filteredStatuses = statuses.filter((status) => status.url[selectedSchema] !== '');
@@ -30,7 +31,7 @@ export const DocumentStatus = ({ id, title, statuses, selectedSchema, onStatusCl
                         }
                       >
                         <div className="w-4 h-4 flex items-center justify-center">
-                          <img className="w-[13px] h-[13px]" alt="Qrcode" src="/qrcode.svg" />
+                          <img className="w-[13px] h-[13px]" alt="Qrcode" src="/qrcode.svg" id="qr-code-icon" />
                         </div>
                       </div>
                     </DialogTrigger>
@@ -43,6 +44,14 @@ export const DocumentStatus = ({ id, title, statuses, selectedSchema, onStatusCl
                     target="_blank"
                     rel="noopener noreferrer"
                     className="flex min-w-[180px] items-center p-2 flex-1 justify-between rounded-lg"
+                    onClick={() =>
+                      sendGAEvent({
+                        event: 'document_type',
+                        document_title: title,
+                        document_schema: selectedSchema,
+                        document_status: status.label,
+                      })
+                    }
                   >
                     <span className="font-h5 font-bold text-app-primary">{status.label}</span>
                     <ChevronRightIcon className="w-4 h-4" />
diff --git a/src/lib/gtmService.ts b/src/lib/gtmService.ts
new file mode 100644
index 0000000..8d0bc45
--- /dev/null
+++ b/src/lib/gtmService.ts
@@ -0,0 +1,13 @@
+import TagManager from 'react-gtm-module';
+import { GADataLayerEvent } from 'types/types';
+
+// Initialize GTM immediately when this module is imported
+TagManager.initialize({
+  gtmId: import.meta.env.VITE_GTM_ID!,
+});
+
+export const sendGAEvent = (eventData: GADataLayerEvent) => {
+  TagManager.dataLayer({
+    dataLayer: eventData,
+  });
+};
diff --git a/src/main.tsx b/src/main.tsx
index a4cd08f..b13701c 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -1,8 +1,8 @@
 import React, { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
-
 import { GalleryMainPage } from './pages/Gallery/GalleryMainPage';
+import './lib/gtmService'; // Import triggers GTM initialization
 
 const App = () => (
   <StrictMode>
diff --git a/src/types/types.ts b/src/types/types.ts
index 3ca0cf9..d74df92 100644
--- a/src/types/types.ts
+++ b/src/types/types.ts
@@ -28,3 +28,7 @@ export type DocumentInfoProps = {
   selectedSchema: string;
   onSchemaChange: (id: number, schema: string) => void;
 };
+
+export type GADataLayerEvent = {
+  event: string;
+} & Record<string, string>;
diff --git a/tsconfig.json b/tsconfig.json
index 2291dba..05f7077 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,7 +11,8 @@
     "baseUrl": "src",
     "paths": {
       "@/*": ["components/ui/*"]
-    }
+    },
+    "types": ["vite/client"]
   },
   "include": ["src"],
   "exclude": ["node_modules"]

From f080782600d9a977bd917a12aadd6536956a6b9e Mon Sep 17 00:00:00 2001
From: moiz-sgtradex <moiz.shaikh@sgtradextech.com>
Date: Fri, 12 Sep 2025 09:58:58 +0530
Subject: [PATCH 2/6] feat: update gtm service

---
 src/lib/gtmService.ts | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/lib/gtmService.ts b/src/lib/gtmService.ts
index 8d0bc45..46d5401 100644
--- a/src/lib/gtmService.ts
+++ b/src/lib/gtmService.ts
@@ -2,12 +2,17 @@ import TagManager from 'react-gtm-module';
 import { GADataLayerEvent } from 'types/types';
 
 // Initialize GTM immediately when this module is imported
-TagManager.initialize({
-  gtmId: import.meta.env.VITE_GTM_ID!,
-});
+const gtmId = import.meta.env.VITE_GTM_ID;
+if (gtmId) {
+  TagManager.initialize({
+    gtmId,
+  });
+}
 
 export const sendGAEvent = (eventData: GADataLayerEvent) => {
-  TagManager.dataLayer({
-    dataLayer: eventData,
-  });
+  if (gtmId) {
+    TagManager.dataLayer({
+      dataLayer: eventData,
+    });
+  }
 };

From 42dbc3172406dda00634bc42ded59634887e5106 Mon Sep 17 00:00:00 2001
From: moiz-sgtradex <moiz.shaikh@sgtradextech.com>
Date: Fri, 12 Sep 2025 12:15:27 +0530
Subject: [PATCH 3/6] feat: temp log

---
 src/lib/gtmService.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/gtmService.ts b/src/lib/gtmService.ts
index 46d5401..e23a83c 100644
--- a/src/lib/gtmService.ts
+++ b/src/lib/gtmService.ts
@@ -4,6 +4,7 @@ import { GADataLayerEvent } from 'types/types';
 // Initialize GTM immediately when this module is imported
 const gtmId = import.meta.env.VITE_GTM_ID;
 if (gtmId) {
+  console.log('Initializing GTM for analytics');
   TagManager.initialize({
     gtmId,
   });

From e0996b1f3ca191c731f63d91a7f1374a0de2d0d6 Mon Sep 17 00:00:00 2001
From: moiz-sgtradex <moiz.shaikh@sgtradextech.com>
Date: Fri, 12 Sep 2025 14:44:04 +0530
Subject: [PATCH 4/6] feat: type import update

---
 src/lib/gtmService.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/lib/gtmService.ts b/src/lib/gtmService.ts
index e23a83c..9883bec 100644
--- a/src/lib/gtmService.ts
+++ b/src/lib/gtmService.ts
@@ -1,5 +1,5 @@
 import TagManager from 'react-gtm-module';
-import { GADataLayerEvent } from 'types/types';
+import { GADataLayerEvent } from '../types/types';
 
 // Initialize GTM immediately when this module is imported
 const gtmId = import.meta.env.VITE_GTM_ID;

From 28fcad70c0c5e50ad93708c1dfe0100c388f9227 Mon Sep 17 00:00:00 2001
From: moiz-sgtradex <moiz.shaikh@sgtradextech.com>
Date: Mon, 15 Sep 2025 10:03:50 +0530
Subject: [PATCH 5/6] feat: document qr click event

---
 src/components/content/DocumentStatus.tsx | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/content/DocumentStatus.tsx b/src/components/content/DocumentStatus.tsx
index ac1a19c..08e4bb8 100644
--- a/src/components/content/DocumentStatus.tsx
+++ b/src/components/content/DocumentStatus.tsx
@@ -21,17 +21,23 @@ export const DocumentStatus = ({ id, title, statuses, selectedSchema, onStatusCl
                     <DialogTrigger asChild>
                       <div
                         className="inline-flex items-center justify-center p-2 rounded-xl border border-[#e2e3e7] cursor-pointer"
-                        onClick={() =>
+                        onClick={() => {
                           onStatusClick({
                             url: status.url[selectedSchema],
                             documentId: id,
                             label: status.label,
                             documentTitle: title,
-                          })
-                        }
+                          });
+                          sendGAEvent({
+                            event: 'document_qr_click',
+                            document_qr_title: title,
+                            document_qr_schema: selectedSchema,
+                            document_qr_status: status.label,
+                          });
+                        }}
                       >
                         <div className="w-4 h-4 flex items-center justify-center">
-                          <img className="w-[13px] h-[13px]" alt="Qrcode" src="/qrcode.svg" id="qr-code-icon" />
+                          <img className="w-[13px] h-[13px]" alt="Qrcode" src="/qrcode.svg" />
                         </div>
                       </div>
                     </DialogTrigger>

From a80578925d57239ed7a8b368fb914758bc24d530 Mon Sep 17 00:00:00 2001
From: moiz-sgtradex <moiz.shaikh@sgtradextech.com>
Date: Mon, 15 Sep 2025 10:23:30 +0530
Subject: [PATCH 6/6] feat: qr click update

---
 src/components/content/DocumentStatus.tsx | 12 ++++++------
 src/lib/gtmService.ts                     |  1 -
 2 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/src/components/content/DocumentStatus.tsx b/src/components/content/DocumentStatus.tsx
index 47094e1..48b9251 100644
--- a/src/components/content/DocumentStatus.tsx
+++ b/src/components/content/DocumentStatus.tsx
@@ -22,18 +22,18 @@ export const DocumentStatus = ({ id, title, statuses, selectedSchema, onStatusCl
                       <div
                         className="inline-flex items-center justify-center p-2 rounded-xl border border-[#e2e3e7] cursor-pointer"
                         onClick={() => {
-                          onStatusClick({
-                            url: status.url[selectedSchema],
-                            documentId: id,
-                            label: status.label,
-                            documentTitle: title,
-                          });
                           sendGAEvent({
                             event: 'document_qr_click',
                             document_qr_title: title,
                             document_qr_schema: selectedSchema,
                             document_qr_status: status.label,
                           });
+                          onStatusClick({
+                            url: status.url[selectedSchema],
+                            documentId: id,
+                            label: status.label,
+                            documentTitle: title,
+                          });
                         }}
                       >
                         <div className="w-4 h-4 flex items-center justify-center">
diff --git a/src/lib/gtmService.ts b/src/lib/gtmService.ts
index 9883bec..bdee348 100644
--- a/src/lib/gtmService.ts
+++ b/src/lib/gtmService.ts
@@ -4,7 +4,6 @@ import { GADataLayerEvent } from '../types/types';
 // Initialize GTM immediately when this module is imported
 const gtmId = import.meta.env.VITE_GTM_ID;
 if (gtmId) {
-  console.log('Initializing GTM for analytics');
   TagManager.initialize({
     gtmId,
   });