feat: ga analytics support

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

.gitignore

@@ -10,3 +10,5 @@ Thumbs.db
 eslintcache
 .prettiercache
 .netlify/
+.env
+.env.local

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"

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>

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

src/lib/gtmService.ts

@@ -0,0 +1,19 @@
+import TagManager from 'react-gtm-module';
+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,
+  });
+}
+
+export const sendGAEvent = (eventData: GADataLayerEvent) => {
+  if (gtmId) {
+    TagManager.dataLayer({
+      dataLayer: eventData,
+    });
+  }
+};

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>

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

tsconfig.json

@@ -11,7 +11,8 @@
     "baseUrl": "src",
     "paths": {
       "@/*": ["components/ui/*"]
-    }
+    },
+    "types": ["vite/client"]
   },
   "include": ["src"],
   "exclude": ["node_modules"]