diff --git a/app/[slug]/PageClient.tsx b/app/[slug]/PageClient.tsx
index 50187c9..490f78c 100644
--- a/app/[slug]/PageClient.tsx
+++ b/app/[slug]/PageClient.tsx
@@ -22,6 +22,7 @@ import SEOComponent from '@/app/components/theme/SEOComponent/SEOComponent';
 import { detectBrowser } from '@/app/libs/helpers';
 import EdgeIcon from '@/app/components/theme/Icon/edgeIcon';
 import { useTheme } from '@/app/contexts/themeContext';
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from '@/app/libs/analytics';
 
 const PageClient = ({ slug }: { slug: string }) => {
   const [browser, setBrowser] = useState('chrome');
@@ -51,6 +52,7 @@ const PageClient = ({ slug }: { slug: string }) => {
   const currentTool = developmentToolsRoutes.find(
     (tool: any) => tool.path === pathname
   );
+  const toolName = meta_data?.meta_title?.split(' - ')?.[0] || pathname;
 
   return (
     <>
@@ -94,7 +96,18 @@ const PageClient = ({ slug }: { slug: string }) => {
                     Swiftly document and share bugs like never before
                   </p>
                   <div className="flex items-center gap-3 mt-6 mb-4">
-                    <Link target="_blank" href={Extension_URL}>
+                    <Link
+                      target="_blank"
+                      href={Extension_URL}
+                      onClick={() =>
+                        trackEvent('add_to_chrome_click', {
+                          page_type: PAGE_TYPE,
+                          platform: getRuntimePlatform(),
+                          section_name: 'Hero Section',
+                          cta_text: browser === 'edge' ? 'Add to Edge' : 'Add to Chrome',
+                        })
+                      }
+                    >
                       <Button
                         className={`btn-primary flex items-center z-20 justify-center gap-3 rounded-full px-4 ${DevelopmentToolsStyles.addToChromeButton}`}
                       >
@@ -229,7 +242,17 @@ const PageClient = ({ slug }: { slug: string }) => {
                         </h2>
                       </div>
                       {development_tools_list?.map((tool: any, index: any) => (
-                        <Link key={index} href={tool?.url}>
+                        <Link
+                          key={index}
+                          href={tool?.url}
+                          onClick={() =>
+                            trackEvent('dev_tool_card_click', {
+                              page_type: PAGE_TYPE,
+                              platform: getRuntimePlatform(),
+                              tool_name: tool?.tool,
+                            })
+                          }
+                        >
                           <div
                             className={`p-3 mb-2 cursor-pointer rounded-xl border-[1px] border-transparent hover:border-1 hover:border-primary bg-black text-white hover:text-primary ${DevelopmentToolsStyles.sidePanelItem}`}
                           >
@@ -1076,7 +1099,18 @@ const PageClient = ({ slug }: { slug: string }) => {
                       Swiftly document and share bugs like never before
                     </p>
                     <div className="flex items-center gap-3 mt-6 mb-4">
-                      <Link target="_blank" href={Extension_URL}>
+                      <Link
+                        target="_blank"
+                        href={Extension_URL}
+                        onClick={() =>
+                          trackEvent('add_to_chrome_click', {
+                            page_type: PAGE_TYPE,
+                            platform: getRuntimePlatform(),
+                            section_name: 'Bottom CTA Section',
+                            cta_text: browser === 'edge' ? 'Add to Edge' : 'Add to Chrome',
+                          })
+                        }
+                      >
                         <Button
                           className={`btn-primary flex items-center z-20 justify-center gap-3 rounded-full px-4 ${DevelopmentToolsStyles.addToChromeButton}`}
                         >
diff --git a/app/components/developmentToolsComponent/amIUsingTor.tsx b/app/components/developmentToolsComponent/amIUsingTor.tsx
index fe30193..34a6274 100644
--- a/app/components/developmentToolsComponent/amIUsingTor.tsx
+++ b/app/components/developmentToolsComponent/amIUsingTor.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useEffect, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const Cmd = ({ children }: { children: string }) => (
   <code className="px-2 py-1 rounded bg-black/40 border border-white/10 font-mono text-xs">
@@ -125,13 +126,21 @@ const AmIUsingTor = () => {
     } catch {}
   };
 
-  const copyResult = () => {
+  const copyResult = async () => {
     const result = `Tor Detection Result: ${torResult.isTor ? 'YES' : 'NO'}
 Confidence: ${torResult.confidence}
 Details: ${torResult.details}
 User Agent: ${navigator.userAgent}
 Timestamp: ${new Date().toISOString()}`;
-    copy(result);
+    try {
+      await navigator.clipboard.writeText(result);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Am I Using Tor",
+        tool_action: "Copy",
+      });
+    } catch {}
   };
 
   const getStatusColor = () => {
diff --git a/app/components/developmentToolsComponent/apiKeyGenerator.tsx b/app/components/developmentToolsComponent/apiKeyGenerator.tsx
index 7458a0e..d04031b 100644
--- a/app/components/developmentToolsComponent/apiKeyGenerator.tsx
+++ b/app/components/developmentToolsComponent/apiKeyGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Charset = {
   upper: boolean;
@@ -85,6 +86,16 @@ const ApiKeyGenerator: React.FC = () => {
     run();
   }, [length, count, groupSize, charset, prefix, suffix, autoUpdate]);
 
+  const handleGenerateClick = () => {
+    run();
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "API Key Generator",
+      tool_action: "Generate",
+    });
+  };
+
   const onCopy = async () => {
     try {
       await navigator.clipboard.writeText(keys.join("\n"));
@@ -239,7 +250,7 @@ const ApiKeyGenerator: React.FC = () => {
                 <div className="flex items-center justify-between">
                   <label className="font-medium">Generator</label>
                   <button
-                    onClick={run}
+                    onClick={handleGenerateClick}
                     className="px-3 py-1 bg-primary hover:bg-primary/80 rounded text-sm transition-colors text-black font-bold"
                   >
                     Generate
diff --git a/app/components/developmentToolsComponent/asciiToDecimalConverter.tsx b/app/components/developmentToolsComponent/asciiToDecimalConverter.tsx
index 99de919..50f4a66 100644
--- a/app/components/developmentToolsComponent/asciiToDecimalConverter.tsx
+++ b/app/components/developmentToolsComponent/asciiToDecimalConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const AsciiToDecimalConverter = () => {
   const [input, setInput] = useState<string>("");
@@ -20,7 +21,16 @@ const AsciiToDecimalConverter = () => {
       setOutput("");
       return;
     }
-    setOutput(convertAsciiToDecimal(input));
+    const result = convertAsciiToDecimal(input);
+    setOutput(result);
+    if (!result.startsWith("Error")) {
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "ASCII to Decimal Converter",
+        tool_action: "Convert",
+      });
+    }
   };
 
   const clearAll = () => {
diff --git a/app/components/developmentToolsComponent/asciiToUnicodeConverter.tsx b/app/components/developmentToolsComponent/asciiToUnicodeConverter.tsx
index 6fa4b86..cbab96a 100644
--- a/app/components/developmentToolsComponent/asciiToUnicodeConverter.tsx
+++ b/app/components/developmentToolsComponent/asciiToUnicodeConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 function decodeAsciiEscapesToUnicode(input: string): string {
   // Supports sequences like \u0041 and raw ASCII characters
@@ -20,6 +21,12 @@ const AsciiToUnicodeConverter = () => {
       return;
     }
     setOutput(decodeAsciiEscapesToUnicode(input));
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "ASCII to Unicode",
+      tool_action: "Convert",
+    });
   };
 
   const clearAll = () => {
diff --git a/app/components/developmentToolsComponent/barcodeGenerator.tsx b/app/components/developmentToolsComponent/barcodeGenerator.tsx
index 28a5315..9a09a02 100644
--- a/app/components/developmentToolsComponent/barcodeGenerator.tsx
+++ b/app/components/developmentToolsComponent/barcodeGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Symbology =
   | "CODE128"
@@ -524,6 +525,14 @@ const BarcodeGenerator: React.FC = () => {
 
   const onGenerate = () => {
     setOutput(result.svg);
+    if (result.svg) {
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Barcode Generator",
+        tool_action: "Generate",
+      });
+    }
   };
 
   const onCopy = async () => {
diff --git a/app/components/developmentToolsComponent/base64Decoder.tsx b/app/components/developmentToolsComponent/base64Decoder.tsx
index 3946035..47380ed 100644
--- a/app/components/developmentToolsComponent/base64Decoder.tsx
+++ b/app/components/developmentToolsComponent/base64Decoder.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useRef, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const Base64Decoder = () => {
   const [encodedText, setEncodedText] = useState("");
@@ -39,6 +40,12 @@ const Base64Decoder = () => {
     if (!decodedText) return;
     try {
       await navigator.clipboard.writeText(decodedText);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Base64 Decoder",
+        tool_action: "Copy",
+      });
     } catch (_) {}
   };
 
diff --git a/app/components/developmentToolsComponent/base64Encoder.tsx b/app/components/developmentToolsComponent/base64Encoder.tsx
index 08e8522..bd623e1 100644
--- a/app/components/developmentToolsComponent/base64Encoder.tsx
+++ b/app/components/developmentToolsComponent/base64Encoder.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useRef, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const Base64Encoder = () => {
   const [plainText, setPlainText] = useState("");
@@ -31,6 +32,12 @@ const Base64Encoder = () => {
     if (!encodedText) return;
     try {
       await navigator.clipboard.writeText(encodedText);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Base64 Encoder",
+        tool_action: "Copy",
+      });
     } catch (_) {}
   };
 
diff --git a/app/components/developmentToolsComponent/base64ToImageConverter.tsx b/app/components/developmentToolsComponent/base64ToImageConverter.tsx
index 7ca8d28..4361046 100644
--- a/app/components/developmentToolsComponent/base64ToImageConverter.tsx
+++ b/app/components/developmentToolsComponent/base64ToImageConverter.tsx
@@ -2,6 +2,7 @@
 
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const MAX_DECODED_BYTES = 10 * 1024 * 1024;
 
@@ -163,6 +164,12 @@ const Base64ToImageConverter: React.FC = () => {
     document.body.appendChild(a);
     a.click();
     a.remove();
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Base64 To Image Converter",
+      tool_action: "Download",
+    });
   };
 
   const copyInput = async () => {
diff --git a/app/components/developmentToolsComponent/bcdToDecimalConverter.tsx b/app/components/developmentToolsComponent/bcdToDecimalConverter.tsx
index bd71135..47c5a7a 100644
--- a/app/components/developmentToolsComponent/bcdToDecimalConverter.tsx
+++ b/app/components/developmentToolsComponent/bcdToDecimalConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 function parseBcdToDecimal(input: string): string {
   const clean = input.replace(/\s+/g, "");
@@ -45,6 +46,12 @@ const BcdToDecimalConverter: React.FC = () => {
     } else {
       setError("");
       setOutput(res);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "BCD to Decimal Converter",
+        tool_action: "Convert",
+      });
     }
   }, [input]);
 
diff --git a/app/components/developmentToolsComponent/bcryptGenerator.tsx b/app/components/developmentToolsComponent/bcryptGenerator.tsx
index aa5514b..36d2193 100644
--- a/app/components/developmentToolsComponent/bcryptGenerator.tsx
+++ b/app/components/developmentToolsComponent/bcryptGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useState, useMemo } from "react";
 import bcrypt from 'bcryptjs';
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 // Custom styles for the range slider
 const sliderStyles = `
@@ -81,6 +82,12 @@ const BcryptGenerator = () => {
     try {
       const hash = await generateHash(password, saltRounds);
       setHashedPassword(hash);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Bcrypt Generator",
+        tool_action: "Generate Hash",
+      });
     } catch (error) {
       console.error('Error generating hash:', error);
     } finally {
@@ -95,6 +102,12 @@ const BcryptGenerator = () => {
     try {
       const isValid = await verifyHash(verifyPassword, verifyHashInput);
       setVerificationResult(isValid);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Bcrypt Generator",
+        tool_action: "Verify Password",
+      });
     } catch (error) {
       console.error('Error verifying password:', error);
       setVerificationResult(false);
diff --git a/app/components/developmentToolsComponent/binaryToDecimalConverter.tsx b/app/components/developmentToolsComponent/binaryToDecimalConverter.tsx
index 9d52f55..9d47af9 100644
--- a/app/components/developmentToolsComponent/binaryToDecimalConverter.tsx
+++ b/app/components/developmentToolsComponent/binaryToDecimalConverter.tsx
@@ -7,6 +7,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 function parseBinary(input: string): number | null {
   const clean = input.replace(/\s+/g, "");
@@ -38,6 +39,18 @@ const BinaryToDecimalConverter: React.FC = () => {
     if (autoUpdate) convert();
   }, [input, autoUpdate, convert]);
 
+  const onConvertClick = useCallback(() => {
+    convert();
+    if (parseBinary(input) !== null) {
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Binary to Decimal Converter",
+        tool_action: "Convert",
+      });
+    }
+  }, [convert, input]);
+
   const onCopy = useCallback(async () => {
     try {
       await navigator.clipboard.writeText(output);
@@ -90,7 +103,7 @@ const BinaryToDecimalConverter: React.FC = () => {
                   Auto-update
                 </label>
                 <button
-                  onClick={convert}
+                  onClick={onConvertClick}
                   className="border border-black/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold"
                 >
                   Convert
diff --git a/app/components/developmentToolsComponent/bitwiseCalculator.tsx b/app/components/developmentToolsComponent/bitwiseCalculator.tsx
index fb18ac0..04d15fd 100644
--- a/app/components/developmentToolsComponent/bitwiseCalculator.tsx
+++ b/app/components/developmentToolsComponent/bitwiseCalculator.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Base = "bin" | "dec" | "hex";
 type Op = "AND" | "OR" | "XOR" | "NOT" | "SHL" | "SHR" | "USHR";
@@ -82,7 +83,7 @@ const BitwiseCalculator: React.FC = () => {
 
   const fileRef = useRef<HTMLInputElement>(null);
 
-  const compute = () => {
+  const compute = (trackOnSuccess = false) => {
     const a = parseInputToUnsigned(inputA, baseIn);
     const b = parseInputToUnsigned(inputB, baseIn);
 
@@ -96,6 +97,14 @@ const BitwiseCalculator: React.FC = () => {
       setOutput(
         formatUnsigned(res, baseOut, width, grouping, thousands, signedView)
       );
+      if (trackOnSuccess) {
+        trackEvent("dev_tool_used", {
+          page_type: PAGE_TYPE,
+          platform: getRuntimePlatform(),
+          tool_name: "Bitwise Calculator",
+          tool_action: "Compute",
+        });
+      }
       return;
     }
 
@@ -140,6 +149,14 @@ const BitwiseCalculator: React.FC = () => {
     setOutput(
       formatUnsigned(res, baseOut, width, grouping, thousands, signedView)
     );
+    if (trackOnSuccess) {
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Bitwise Calculator",
+        tool_action: "Compute",
+      });
+    }
   };
 
   useEffect(() => {
@@ -147,7 +164,7 @@ const BitwiseCalculator: React.FC = () => {
     compute();
   }, [inputA, inputB, baseIn, baseOut, width, signedView, grouping, thousands, operation, autoConvert]);
 
-  const onConvert = () => compute();
+  const onConvert = () => compute(true);
 
   const onCopy = async () => {
     try {
diff --git a/app/components/developmentToolsComponent/celsiusFahrenheitConverter.tsx b/app/components/developmentToolsComponent/celsiusFahrenheitConverter.tsx
index d5e0546..be0139a 100644
--- a/app/components/developmentToolsComponent/celsiusFahrenheitConverter.tsx
+++ b/app/components/developmentToolsComponent/celsiusFahrenheitConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Direction = "CtoF" | "FtoC";
 
@@ -50,6 +51,12 @@ const CelsiusFahrenheitConverter: React.FC = () => {
   const onConvert = () => {
     const converted = convertNumbersInText(input, direction, decimals, thousandsSep);
     setOutput(converted);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Celcius to Fahrenheit Converter",
+      tool_action: "Convert",
+    });
   };
 
   const onCopy = async () => {
diff --git a/app/components/developmentToolsComponent/characterCounterComponent.tsx b/app/components/developmentToolsComponent/characterCounterComponent.tsx
index 7410b5e..49771d9 100644
--- a/app/components/developmentToolsComponent/characterCounterComponent.tsx
+++ b/app/components/developmentToolsComponent/characterCounterComponent.tsx
@@ -1,14 +1,34 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const CharacterCounterComponent = () => {
   const [text, setText] = useState("");
   const [includeSpaces, setIncludeSpaces] = useState(true); // State to track space inclusion
   const [includeSpecialChars, setIncludeSpecialChars] = useState(true); // State to track special character inclusion
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+    };
+  }, []);
 
   const handleTextChange = (e: any) => {
-    setText(e.target.value);
+    const value = e.target.value;
+    setText(value);
+    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+    if (value.trim()) {
+      debounceTimerRef.current = setTimeout(() => {
+        trackEvent("dev_tool_used", {
+          page_type: PAGE_TYPE,
+          platform: getRuntimePlatform(),
+          tool_name: "Character Counter",
+          tool_action: "Count",
+        });
+      }, 1000);
+    }
   };
 
   const handleIncludeSpacesChange = (e: any) => {
diff --git a/app/components/developmentToolsComponent/cmykToHexConverter.tsx b/app/components/developmentToolsComponent/cmykToHexConverter.tsx
index b3e6b36..71537bb 100644
--- a/app/components/developmentToolsComponent/cmykToHexConverter.tsx
+++ b/app/components/developmentToolsComponent/cmykToHexConverter.tsx
@@ -2,6 +2,7 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const cmykToRgb = (c: number, m: number, y: number, k: number): { r: number; g: number; b: number } => {
   const C = c / 100;
@@ -111,6 +112,12 @@ const CmykToHexConverter: React.FC = () => {
   const copyHex = useCallback(async () => {
     try {
       await navigator.clipboard.writeText(hex);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "CMYK to HEX Converter",
+        tool_action: "Copy",
+      });
     } catch (_) {}
   }, [hex]);
 
diff --git a/app/components/developmentToolsComponent/cmykToRgbConverter.tsx b/app/components/developmentToolsComponent/cmykToRgbConverter.tsx
index a1abf60..6cd6b9e 100644
--- a/app/components/developmentToolsComponent/cmykToRgbConverter.tsx
+++ b/app/components/developmentToolsComponent/cmykToRgbConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 interface Options {
   percentInput: boolean; // input as 0–100%
@@ -85,7 +86,15 @@ const CmykToRgbConverter: React.FC = () => {
     try { await navigator.clipboard.writeText(options.percentInput ? `cmyk(${c}%, ${m}%, ${y}%, ${k}%)` : `cmyk(${c}, ${m}, ${y}, ${k})`); } catch (_) {}
   }, [c, m, y, k, options.percentInput]);
   const copyRgb = useCallback(async () => {
-    try { await navigator.clipboard.writeText(`rgb(${rOut}, ${gOut}, ${bOut})`); } catch (_) {}
+    try {
+      await navigator.clipboard.writeText(`rgb(${rOut}, ${gOut}, ${bOut})`);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "CMYK to RGB Converter",
+        tool_action: "Copy",
+      });
+    } catch (_) {}
   }, [rOut, gOut, bOut]);
 
   return (
diff --git a/app/components/developmentToolsComponent/codeCompareTool.tsx b/app/components/developmentToolsComponent/codeCompareTool.tsx
index c3578ef..002f551 100644
--- a/app/components/developmentToolsComponent/codeCompareTool.tsx
+++ b/app/components/developmentToolsComponent/codeCompareTool.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type DiffOp = "equal" | "insert" | "delete";
 
@@ -87,6 +88,12 @@ const CodeCompareTool = () => {
   const onCompare = () => {
     if (!left.trim() || !right.trim()) { setError("Please provide both code inputs."); setCompared(false); return; }
     setError(null); setCompared(true);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Code Compare Online Tool",
+      tool_action: "Compare",
+    });
   };
 
   const handleUpload = (side: "left" | "right") => (e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/app/components/developmentToolsComponent/colorInvertor.tsx b/app/components/developmentToolsComponent/colorInvertor.tsx
index 329a14d..f6a8af0 100644
--- a/app/components/developmentToolsComponent/colorInvertor.tsx
+++ b/app/components/developmentToolsComponent/colorInvertor.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const normalizeHex = (v: string) => {
   let s = v.trim().replace(/[^0-9a-fA-F]/g, "");
@@ -43,6 +44,12 @@ const ColorInvertor: React.FC = () => {
   const copy = async (v: string) => {
     try {
       await navigator.clipboard.writeText(`#${v}`);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Color Inverter",
+        tool_action: "Copy",
+      });
     } catch {}
   };
 
diff --git a/app/components/developmentToolsComponent/colorPickerTool.tsx b/app/components/developmentToolsComponent/colorPickerTool.tsx
index 5b7fd8c..12bece1 100644
--- a/app/components/developmentToolsComponent/colorPickerTool.tsx
+++ b/app/components/developmentToolsComponent/colorPickerTool.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useEffect, useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type RGB = { r: number; g: number; b: number };
 type HSL = { h: number; s: number; l: number };
@@ -99,7 +100,15 @@ const ColorPickerTool = () => {
     setHex(rgbToHex(rgbNew));
   };
 
-  const copy = async (text: string) => navigator.clipboard.writeText(text);
+  const copy = async (text: string, action: string) => {
+    await navigator.clipboard.writeText(text);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Color Picker Tool",
+      tool_action: action,
+    });
+  };
 
   return (
     <section>
@@ -131,7 +140,7 @@ const ColorPickerTool = () => {
                         />
                         <button
                           type="button"
-                          onClick={() => copy(hex)}
+                          onClick={() => copy(hex, "Copy HEX")}
                           className="absolute right-2 top-2 px-3 py-1 bg-primary text-black text-sm rounded hover:bg-opacity-80"
                         >
                           Copy
@@ -165,7 +174,7 @@ const ColorPickerTool = () => {
                   </div>
                   <button
                     type="button"
-                    onClick={() => copy(rgbaCss)}
+                    onClick={() => copy(rgbaCss, "Copy RGBA")}
                     className={`${DevelopmentToolsStyles.converterButton} text-black font-bold py-3 px-6 rounded-lg`}
                   >
                     Copy RGBA
diff --git a/app/components/developmentToolsComponent/creditCardGeneratorComponent.tsx b/app/components/developmentToolsComponent/creditCardGeneratorComponent.tsx
index 1500fed..3db4263 100644
--- a/app/components/developmentToolsComponent/creditCardGeneratorComponent.tsx
+++ b/app/components/developmentToolsComponent/creditCardGeneratorComponent.tsx
@@ -10,6 +10,7 @@ import DinersClubCardIcon from "../theme/Icon/dinersClubCardIcon";
 import DiscoverCardIcon from "../theme/Icon/discoverCardIcon";
 import JCBCardIcon from "../theme/Icon/JCBCardIcon";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 // Map card types to their respective icons
 const cardIcons: any = {
@@ -155,6 +156,12 @@ const CreditCardGeneratorComponent = () => {
     }
 
     setCards(generatedCards); // ✅ Correctly update the state
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Credit Card Generator",
+      tool_action: "Generate",
+    });
   };
 
   const handleCopy = (fieldId: any, index: any) => {
diff --git a/app/components/developmentToolsComponent/creditCardValidatorComponent.tsx b/app/components/developmentToolsComponent/creditCardValidatorComponent.tsx
index dc296e7..667554c 100644
--- a/app/components/developmentToolsComponent/creditCardValidatorComponent.tsx
+++ b/app/components/developmentToolsComponent/creditCardValidatorComponent.tsx
@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
 import { ToastContainer, toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css"; // Import the toast CSS
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const cardConfigs = {
   Visa: { bin: /^4/, length: [16] },
@@ -60,6 +61,12 @@ const CreditCardValidatorComponent = () => {
     const isValidCard = luhnCheck(sanitizedNumber);
     setIsValid(isValidCard);
     setCardType(getCardType(sanitizedNumber));
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Credit Card Validator",
+      tool_action: "Validate",
+    });
 
     // Show appropriate toast message
     if (!isValidCard) {
diff --git a/app/components/developmentToolsComponent/crontabGenerator.tsx b/app/components/developmentToolsComponent/crontabGenerator.tsx
index 3e37b26..7c8da2c 100644
--- a/app/components/developmentToolsComponent/crontabGenerator.tsx
+++ b/app/components/developmentToolsComponent/crontabGenerator.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Field = "minute" | "hour" | "dom" | "month" | "dow";
 
@@ -238,7 +239,17 @@ const CrontabGenerator = () => {
     setDow(parse(dw));
   };
 
-  const copy = async () => { try { await navigator.clipboard.writeText(cron); } catch {} };
+  const copy = async () => {
+    try {
+      await navigator.clipboard.writeText(cron);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Crontab Generator",
+        tool_action: "Copy",
+      });
+    } catch {}
+  };
 
   return (
     <div className="md:mt-8 mt-4 text-white">
diff --git a/app/components/developmentToolsComponent/cssMinify.tsx b/app/components/developmentToolsComponent/cssMinify.tsx
index fad8ade..90a145d 100644
--- a/app/components/developmentToolsComponent/cssMinify.tsx
+++ b/app/components/developmentToolsComponent/cssMinify.tsx
@@ -2,6 +2,7 @@
 
 import React, { useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const minify = (css: string): string =>
   css
@@ -43,6 +44,12 @@ const CssMinify = () => {
     const src = input || example;
     const result = minify(src);
     setOutput(result);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "CSS Minify",
+      tool_action: "Minify",
+    });
   };
 
   const copy = async () =>
diff --git a/app/components/developmentToolsComponent/cssPrettify.tsx b/app/components/developmentToolsComponent/cssPrettify.tsx
index 55286e2..ab60a63 100644
--- a/app/components/developmentToolsComponent/cssPrettify.tsx
+++ b/app/components/developmentToolsComponent/cssPrettify.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 // Very lightweight CSS formatter (not a full parser but practical)
 const prettify = (css: string, indentSize: number): string => {
@@ -31,6 +32,12 @@ const CssPrettify = () => {
     const src = input || example;
     const result = prettify(src, indentSize);
     setOutput(result);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "CSS Prettify",
+      tool_action: "Prettify",
+    });
   };
 
   const copy = async () => output && (await navigator.clipboard.writeText(output));
diff --git a/app/components/developmentToolsComponent/cssToLess.tsx b/app/components/developmentToolsComponent/cssToLess.tsx
index 88ebdaf..817aaf8 100644
--- a/app/components/developmentToolsComponent/cssToLess.tsx
+++ b/app/components/developmentToolsComponent/cssToLess.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const Cmd = ({ children }: { children: string }) => (
   <code className="px-2 py-1 rounded bg-black/40 border border-white/10 font-mono text-xs">{children}</code>
@@ -73,7 +74,15 @@ const CssToLess = () => {
   const less = useMemo(() => convertCssToLess(css), [css]);
 
   const copyToClipboard = async (text: string) => {
-    try { await navigator.clipboard.writeText(text); } catch {}
+    try {
+      await navigator.clipboard.writeText(text);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "CSS to LESS",
+        tool_action: "Copy",
+      });
+    } catch {}
   };
   const clearAll = () => setCss("");
 
diff --git a/app/components/developmentToolsComponent/cssToSass.tsx b/app/components/developmentToolsComponent/cssToSass.tsx
index 7019f73..a33dc8b 100644
--- a/app/components/developmentToolsComponent/cssToSass.tsx
+++ b/app/components/developmentToolsComponent/cssToSass.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const Cmd = ({ children }: { children: string }) => (
   <code className="px-2 py-1 rounded bg-black/40 border border-white/10 font-mono text-xs">{children}</code>
@@ -102,6 +103,12 @@ h1 {
   const copyToClipboard = async (text: string) => {
     try {
       await navigator.clipboard.writeText(text);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "CSS to SASS",
+        tool_action: "Copy",
+      });
     } catch (err) {
       console.error('Failed to copy text: ', err);
     }
diff --git a/app/components/developmentToolsComponent/cssToScssConverter.tsx b/app/components/developmentToolsComponent/cssToScssConverter.tsx
index d434986..c294694 100644
--- a/app/components/developmentToolsComponent/cssToScssConverter.tsx
+++ b/app/components/developmentToolsComponent/cssToScssConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type VarMap = Record<string, string>;
 
@@ -114,7 +115,15 @@ const CSSToSCSSConverter = () => {
   const [scss, setScss] = useState("");
   const fileRef = useRef<HTMLInputElement>(null);
 
-  const onConvert = () => setScss(convertCssToScss(css));
+  const onConvert = () => {
+    setScss(convertCssToScss(css));
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "CSS to SCSS Converter",
+      tool_action: "Convert",
+    });
+  };
   const onCopy = async () => { try { await navigator.clipboard.writeText(scss); } catch {} };
   const onDownload = () => {
     const blob = new Blob([scss], { type: "text/x-scss;charset=utf-8" });
diff --git a/app/components/developmentToolsComponent/cssToStylus.tsx b/app/components/developmentToolsComponent/cssToStylus.tsx
index a4880ef..ce08758 100644
--- a/app/components/developmentToolsComponent/cssToStylus.tsx
+++ b/app/components/developmentToolsComponent/cssToStylus.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type IndentSize = 2 | 4;
 
@@ -106,6 +107,16 @@ const CssToStylus: React.FC = () => {
   const convert = useCallback(() => setOutput(cssToStylus(input, options)), [input, options]);
   useEffect(() => { if (autoUpdate) convert(); }, [input, options, autoUpdate, convert]);
 
+  const handleConvertClick = useCallback(() => {
+    convert();
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "CSS to Stylus Converter",
+      tool_action: "Convert",
+    });
+  }, [convert]);
+
   const onCopy = useCallback(async () => { try { await navigator.clipboard.writeText(output); } catch (_) {} }, [output]);
   const onDownload = useCallback(() => {
     const blob = new Blob([output], { type: "text/plain;charset=utf-8" });
@@ -136,7 +147,7 @@ const CssToStylus: React.FC = () => {
                   <input type="checkbox" className="accent-primary" checked={autoUpdate} onChange={(e) => setAutoUpdate(e.target.checked)} />
                   Auto-update
                 </label>
-                <button onClick={convert} className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm">Convert</button>
+                <button onClick={handleConvertClick} className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm">Convert</button>
               </div>
               <div className="flex items-center gap-2 flex-wrap">
                 <button onClick={onCopy} className="border border-white/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold">Copy</button>
diff --git a/app/components/developmentToolsComponent/cssValidator.tsx b/app/components/developmentToolsComponent/cssValidator.tsx
index 0546186..c0e8f5b 100644
--- a/app/components/developmentToolsComponent/cssValidator.tsx
+++ b/app/components/developmentToolsComponent/cssValidator.tsx
@@ -1,5 +1,6 @@
 "use client";
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type IssueType = "error" | "warning";
 interface Issue { line: number; column: number; message: string; type: IssueType }
@@ -55,6 +56,29 @@ const CssValidator = () => {
   const [css, setCss] = useState<string>(`/* Paste CSS here */\nbody {\n  font-family: system-ui\n  color: #222;\n}`);
   const issues = useMemo(() => validateCss(css), [css]);
   const hasErrors = issues.some((i) => i.type === "error");
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isFirstRenderRef = useRef(true);
+
+  useEffect(() => {
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      return;
+    }
+    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+    if (css.trim()) {
+      debounceTimerRef.current = setTimeout(() => {
+        trackEvent("dev_tool_used", {
+          page_type: PAGE_TYPE,
+          platform: getRuntimePlatform(),
+          tool_name: "CSS Validator",
+          tool_action: "Validate",
+        });
+      }, 1000);
+    }
+    return () => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+    };
+  }, [css]);
 
   return (
     <div className="md:mt-8 mt-4 text-white">
diff --git a/app/components/developmentToolsComponent/csvToExcelFileConvertor.tsx b/app/components/developmentToolsComponent/csvToExcelFileConvertor.tsx
index 152886a..7a94914 100644
--- a/app/components/developmentToolsComponent/csvToExcelFileConvertor.tsx
+++ b/app/components/developmentToolsComponent/csvToExcelFileConvertor.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type ParsedCSV = {
   rows: string[][];
@@ -116,6 +117,12 @@ const CsvToExcelFileConvertor = () => {
       a.click();
       URL.revokeObjectURL(url);
     }
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "CSV to Excel File Convertor",
+      tool_action: "Download",
+    });
   };
 
   const clearAll = () => {
diff --git a/app/components/developmentToolsComponent/csvToJson.tsx b/app/components/developmentToolsComponent/csvToJson.tsx
index 182df85..d6647c0 100644
--- a/app/components/developmentToolsComponent/csvToJson.tsx
+++ b/app/components/developmentToolsComponent/csvToJson.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const detectDelimiter = (text: string): string => {
   const candidates = [",", ";", "\t", "|", ":"]; // common delimiters
@@ -76,6 +77,12 @@ const CSVToJSON = () => {
     const data = parseCSV(csv, { delimiter, hasHeader, trim, ignoreEmpty });
     try {
       setJsonOut(JSON.stringify(data, null, 2));
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "CSV to JSON Converter",
+        tool_action: "Convert",
+      });
     } catch {
       setJsonOut("[]");
     }
diff --git a/app/components/developmentToolsComponent/csvToTextConverter.tsx b/app/components/developmentToolsComponent/csvToTextConverter.tsx
index a80ae1f..7f96a56 100644
--- a/app/components/developmentToolsComponent/csvToTextConverter.tsx
+++ b/app/components/developmentToolsComponent/csvToTextConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useState, useRef } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const CsvToTextConverter = () => {
   const [csvText, setCsvText] = useState<string>("");
@@ -173,6 +174,12 @@ const CsvToTextConverter = () => {
       await navigator.clipboard.writeText(convertedText);
       setError("Text copied to clipboard successfully!");
       setTimeout(() => setError(""), 3000);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "CSV to TXT Converter",
+        tool_action: "Copy",
+      });
     } catch (err) {
       setError("Failed to copy to clipboard");
     }
diff --git a/app/components/developmentToolsComponent/curlToCodeConverter.tsx b/app/components/developmentToolsComponent/curlToCodeConverter.tsx
index 039a945..be1dc37 100644
--- a/app/components/developmentToolsComponent/curlToCodeConverter.tsx
+++ b/app/components/developmentToolsComponent/curlToCodeConverter.tsx
@@ -3,6 +3,7 @@ import React, { useState, useCallback } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
 import CopyIcon from "../theme/Icon/copyIcon";
 import ReloadIcon from "../theme/Icon/reload";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 // ─── Types ───────────────────────────────────────────────────────────────────
 
@@ -591,6 +592,12 @@ const CurlToCodeConverter = () => {
       await navigator.clipboard.writeText(output);
       setCopySuccess(true);
       setTimeout(() => setCopySuccess(false), 2000);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Curl To Code Converter",
+        tool_action: "Copy",
+      });
     } catch {
       setError("Failed to copy to clipboard.");
     }
diff --git a/app/components/developmentToolsComponent/decimalToAsciiConverter.tsx b/app/components/developmentToolsComponent/decimalToAsciiConverter.tsx
index f4d5799..7648c76 100644
--- a/app/components/developmentToolsComponent/decimalToAsciiConverter.tsx
+++ b/app/components/developmentToolsComponent/decimalToAsciiConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const DecimalToAsciiConverter = () => {
   const [input, setInput] = useState<string>("");
@@ -35,7 +36,16 @@ const DecimalToAsciiConverter = () => {
       return;
     }
 
-    setOutput(convertDecimalToAscii(input));
+    const result = convertDecimalToAscii(input);
+    setOutput(result);
+    if (!result.startsWith("Error")) {
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Decimal to ASCII Converter",
+        tool_action: "Convert",
+      });
+    }
   };
 
   const clearAll = () => {
diff --git a/app/components/developmentToolsComponent/decimalToBinaryConverter.tsx b/app/components/developmentToolsComponent/decimalToBinaryConverter.tsx
index 35d0bab..9920749 100644
--- a/app/components/developmentToolsComponent/decimalToBinaryConverter.tsx
+++ b/app/components/developmentToolsComponent/decimalToBinaryConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 function parseDecimal(input: string): number | null {
   const clean = input.trim();
@@ -33,6 +34,18 @@ const DecimalToBinaryConverter: React.FC = () => {
 
   useEffect(() => { if (autoUpdate) convert(); }, [input, groupSize, padTo, autoUpdate, convert]);
 
+  const onConvertClick = useCallback(() => {
+    convert();
+    if (parseDecimal(input) !== null) {
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Decimal to Binary Converter",
+        tool_action: "Convert",
+      });
+    }
+  }, [convert, input]);
+
   const onCopy = useCallback(async () => { try { await navigator.clipboard.writeText(output); } catch (_) {} }, [output]);
   const onDownload = useCallback(() => {
     const blob = new Blob([output], { type: "text/plain;charset=utf-8" });
@@ -63,7 +76,7 @@ const DecimalToBinaryConverter: React.FC = () => {
                   <input type="checkbox" className="accent-primary" checked={autoUpdate} onChange={(e) => setAutoUpdate(e.target.checked)} />
                   Auto-update
                 </label>
-                <button onClick={convert} className="border border-black/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold">Convert</button>
+                <button onClick={onConvertClick} className="border border-black/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold">Convert</button>
               </div>
               <div className="flex items-center gap-2">
                 <button onClick={onCopy} className="border border-white/30 px-3 py-1 rounded text-sm bg-primary hover:bg-primary/90 text-black font-bold">Copy</button>
diff --git a/app/components/developmentToolsComponent/decimalToGrayCode.tsx b/app/components/developmentToolsComponent/decimalToGrayCode.tsx
index ac491ad..e50a6e1 100644
--- a/app/components/developmentToolsComponent/decimalToGrayCode.tsx
+++ b/app/components/developmentToolsComponent/decimalToGrayCode.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useCallback, useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type ConvertOptions = {
   showMapping: boolean;
@@ -83,6 +84,12 @@ const DecimalToGrayCode: React.FC = () => {
       if (hasInvalid) {
         setError("Some inputs were invalid. They are marked as Invalid.");
       }
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Decimal to Grey Code",
+        tool_action: "Convert",
+      });
     } catch (_e: unknown) {
       setError("Failed to convert. Please check your input.");
     }
diff --git a/app/components/developmentToolsComponent/decimalToHexConverter.tsx b/app/components/developmentToolsComponent/decimalToHexConverter.tsx
index a4df102..970ba00 100644
--- a/app/components/developmentToolsComponent/decimalToHexConverter.tsx
+++ b/app/components/developmentToolsComponent/decimalToHexConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 function parseDecimal(input: string): number | null {
   const clean = input.trim();
@@ -32,7 +33,19 @@ const DecimalToHexConverter: React.FC = () => {
 
   useEffect(() => { if (autoUpdate) convert(); }, [input, uppercase, autoUpdate, convert]);
 
-  const onCopy = useCallback(async () => { try { await navigator.clipboard.writeText(output); } catch (_) {} }, [output]);
+  const onCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(output);
+      if (output) {
+        trackEvent("dev_tool_used", {
+          page_type: PAGE_TYPE,
+          platform: getRuntimePlatform(),
+          tool_name: "Decimal to Hex Converter",
+          tool_action: "Copy",
+        });
+      }
+    } catch (_) {}
+  }, [output]);
   const onDownload = useCallback(() => {
     const blob = new Blob([output], { type: "text/plain;charset=utf-8" });
     const url = URL.createObjectURL(blob);
diff --git a/app/components/developmentToolsComponent/decimalToOctalConverter.tsx b/app/components/developmentToolsComponent/decimalToOctalConverter.tsx
index 5c6df2a..cc739c1 100644
--- a/app/components/developmentToolsComponent/decimalToOctalConverter.tsx
+++ b/app/components/developmentToolsComponent/decimalToOctalConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 function parseDecimal(input: string): number | null {
   const clean = input.trim();
@@ -30,6 +31,18 @@ const DecimalToOctalConverter: React.FC = () => {
 
   useEffect(() => { if (autoUpdate) convert(); }, [input, autoUpdate, convert]);
 
+  const onConvertClick = useCallback(() => {
+    convert();
+    if (parseDecimal(input) !== null) {
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Decimal to Octal Converter",
+        tool_action: "Convert",
+      });
+    }
+  }, [convert, input]);
+
   const onCopy = useCallback(async () => { try { await navigator.clipboard.writeText(output); } catch (_) {} }, [output]);
   const onDownload = useCallback(() => {
     const blob = new Blob([output], { type: "text/plain;charset=utf-8" });
@@ -60,7 +73,7 @@ const DecimalToOctalConverter: React.FC = () => {
                   <input type="checkbox" className="accent-primary" checked={autoUpdate} onChange={(e) => setAutoUpdate(e.target.checked)} />
                   Auto-update
                 </label>
-                <button onClick={convert} className="border border-black/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold">Convert</button>
+                <button onClick={onConvertClick} className="border border-black/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold">Convert</button>
               </div>
               <div className="flex items-center gap-2">
                 <button onClick={onCopy} className="border border-white/30 px-3 py-1 rounded text-sm bg-primary hover:bg-primary/90 text-black font-bold">Copy</button>
diff --git a/app/components/developmentToolsComponent/epochConverter.tsx b/app/components/developmentToolsComponent/epochConverter.tsx
index af8d025..bbfd506 100644
--- a/app/components/developmentToolsComponent/epochConverter.tsx
+++ b/app/components/developmentToolsComponent/epochConverter.tsx
@@ -7,6 +7,7 @@ import utc from "dayjs/plugin/utc";
 import timezone from "dayjs/plugin/timezone";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
 import { ReloadOutlined, DeleteOutlined, CopyOutlined, CheckOutlined } from "@ant-design/icons";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 dayjs.extend(relativeTime);
 dayjs.extend(utc);
@@ -88,6 +89,15 @@ const EpochConverter = () => {
     }
   };
 
+  const trackCopy = () => {
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Unix Timestamp Converter",
+      tool_action: "Copy",
+    });
+  };
+
   // Derived values for display
   const validTimestamp = /^-?\d+$/.test(timestamp);
   const currentDayjs = validTimestamp ? dayjs(isMilliseconds ? Number(timestamp) : Number(timestamp) * 1000) : null;
@@ -180,6 +190,7 @@ const EpochConverter = () => {
                           copyable={{
                             text: currentDayjs.format("YYYY-MM-DD HH:mm:ss"),
                             icon: [...copyIconPair],
+                            onCopy: trackCopy,
                           }}
                           className="text-lg font-mono text-green-400 [&_.ant-typography-copy]:text-primary"
                         >
@@ -196,6 +207,7 @@ const EpochConverter = () => {
                           copyable={{
                             text: `${currentDayjs.utc().format("YYYY-MM-DD HH:mm:ss")} UTC`,
                             icon: [...copyIconPair],
+                            onCopy: trackCopy,
                           }}
                           className="text-lg font-mono text-blue-400 [&_.ant-typography-copy]:text-primary"
                         >
@@ -212,6 +224,7 @@ const EpochConverter = () => {
                           copyable={{
                             text: currentDayjs.toISOString(),
                             icon: [...copyIconPair],
+                            onCopy: trackCopy,
                           }}
                           className="text-sm font-mono text-yellow-500 break-all [&_.ant-typography-copy]:text-primary"
                         >
diff --git a/app/components/developmentToolsComponent/excelCompare.tsx b/app/components/developmentToolsComponent/excelCompare.tsx
index 7397451..45e4eea 100644
--- a/app/components/developmentToolsComponent/excelCompare.tsx
+++ b/app/components/developmentToolsComponent/excelCompare.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type CellState = "same" | "diff" | "added" | "removed";
 
@@ -145,6 +146,12 @@ const ExcelCompare = () => {
     a.click();
     document.body.removeChild(a);
     URL.revokeObjectURL(url);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Excel Compare",
+      tool_action: "Download",
+    });
   };
 
   return (
diff --git a/app/components/developmentToolsComponent/fibonacciCalculator.tsx b/app/components/developmentToolsComponent/fibonacciCalculator.tsx
index 1f5565b..9a2779c 100644
--- a/app/components/developmentToolsComponent/fibonacciCalculator.tsx
+++ b/app/components/developmentToolsComponent/fibonacciCalculator.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Mode = "nth" | "sequence";
 
@@ -98,6 +99,12 @@ const FibonacciCalculator: React.FC = () => {
     } else {
       setOutput(computeSequence(n));
     }
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Fabonacci Calculator",
+      tool_action: "Convert",
+    });
   };
 
   const onCopy = async () => {
diff --git a/app/components/developmentToolsComponent/findAndReplaceString.tsx b/app/components/developmentToolsComponent/findAndReplaceString.tsx
index ca21566..55994a7 100644
--- a/app/components/developmentToolsComponent/findAndReplaceString.tsx
+++ b/app/components/developmentToolsComponent/findAndReplaceString.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Flags = {
   global: boolean;
@@ -76,6 +77,7 @@ const FindAndReplaceString: React.FC = () => {
     setOutput(res.output);
     setCount(res.count);
     setError(res.error);
+    return res;
   };
 
   useEffect(() => {
@@ -83,6 +85,18 @@ const FindAndReplaceString: React.FC = () => {
     run();
   }, [input, find, replace, autoUpdate, useRegex, wholeWord, flags]);
 
+  const handleReplaceClick = () => {
+    const res = run();
+    if (!res.error) {
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Find and Replace String",
+        tool_action: "Replace",
+      });
+    }
+  };
+
   const onCopy = async () => {
     try {
       await navigator.clipboard.writeText(output);
@@ -227,7 +241,7 @@ const FindAndReplaceString: React.FC = () => {
                 <div className="flex items-center justify-between">
                   <label className="font-medium">Input</label>
                   <button
-                    onClick={run}
+                    onClick={handleReplaceClick}
                     className="px-3 py-1 bg-primary hover:bg-primary/80 rounded text-sm transition-colors text-black font-bold"
                   >
                     Replace
diff --git a/app/components/developmentToolsComponent/graphqlFormatter.tsx b/app/components/developmentToolsComponent/graphqlFormatter.tsx
index 5bff0fa..980fa39 100644
--- a/app/components/developmentToolsComponent/graphqlFormatter.tsx
+++ b/app/components/developmentToolsComponent/graphqlFormatter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type IndentSize = 2 | 4;
 
@@ -254,6 +255,12 @@ const GraphQLFormatter: React.FC = () => {
     try {
       const formatted = formatGraphQL(input, { indentSize });
       setOutput(formatted);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "GraphQL Formatter",
+        tool_action: "Format",
+      });
     } catch (e) {
       setOutput("");
     }
diff --git a/app/components/developmentToolsComponent/greyCodeToDesimal.tsx b/app/components/developmentToolsComponent/greyCodeToDesimal.tsx
index 449538e..abfd693 100644
--- a/app/components/developmentToolsComponent/greyCodeToDesimal.tsx
+++ b/app/components/developmentToolsComponent/greyCodeToDesimal.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useCallback, useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type ConvertOptions = {
   showMapping: boolean; // show "input -> output" instead of raw numbers
@@ -82,6 +83,12 @@ const GreyCodeToDecimal: React.FC = () => {
       } else {
         setError("");
       }
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Grey Code to Decimal",
+        tool_action: "Convert",
+      });
     } catch (_e: unknown) {
       setError("Failed to convert. Please check your input.");
     }
diff --git a/app/components/developmentToolsComponent/harFileViewer.tsx b/app/components/developmentToolsComponent/harFileViewer.tsx
index a68c691..6e3e193 100644
--- a/app/components/developmentToolsComponent/harFileViewer.tsx
+++ b/app/components/developmentToolsComponent/harFileViewer.tsx
@@ -2,6 +2,7 @@
 
 import React, { useMemo, useRef, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type HarNameValue = { name: string; value: string };
 
@@ -197,6 +198,14 @@ const HarFileViewer = () => {
     setHar(res.har);
     setError(res.error);
     setActiveId(-1);
+    if (!res.error) {
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Har File Viewer",
+        tool_action: "Upload",
+      });
+    }
   };
 
   const onPickFile = () => fileInputRef.current?.click();
diff --git a/app/components/developmentToolsComponent/hexToAscii.tsx b/app/components/developmentToolsComponent/hexToAscii.tsx
index 9981448..1e495b7 100644
--- a/app/components/developmentToolsComponent/hexToAscii.tsx
+++ b/app/components/developmentToolsComponent/hexToAscii.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useEffect, useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const HexToAscii = () => {
   const [hexInput, setHexInput] = useState("");
@@ -49,6 +50,16 @@ const HexToAscii = () => {
     setAsciiOutput(result);
   };
 
+  const handleConvertClick = () => {
+    handleHexToAscii();
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Hex to ASCII Converter",
+      tool_action: "Convert",
+    });
+  };
+
   useEffect(() => {
     if (autoUpdateHex) {
       handleHexToAscii();
@@ -91,7 +102,7 @@ const HexToAscii = () => {
                           <input type="checkbox" className="accent-primary" checked={autoUpdateHex} onChange={(e) => setAutoUpdateHex(e.target.checked)} />
                           Auto-update
                         </label>
-                        <button onClick={handleHexToAscii} className="border border-black/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold" disabled={!hexInput.trim()}>Convert</button>
+                        <button onClick={handleConvertClick} className="border border-black/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold" disabled={!hexInput.trim()}>Convert</button>
                         <button onClick={() => handleCopy(asciiOutput)} className="border border-black/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold" disabled={!asciiOutput}>Copy</button>
                       </div>
                     </div>
diff --git a/app/components/developmentToolsComponent/hexToBinaryConverter.tsx b/app/components/developmentToolsComponent/hexToBinaryConverter.tsx
index 88aaafe..af81392 100644
--- a/app/components/developmentToolsComponent/hexToBinaryConverter.tsx
+++ b/app/components/developmentToolsComponent/hexToBinaryConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 function parseHex(input: string): string | null {
   const clean = input.replace(/\s+/g, "").replace(/^0x/i, "");
@@ -38,7 +39,19 @@ const HexToBinaryConverter: React.FC = () => {
 
   useEffect(() => { if (autoUpdate) convert(); }, [input, groupSize, autoUpdate, convert]);
 
-  const onCopy = useCallback(async () => { try { await navigator.clipboard.writeText(output); } catch (_) {} }, [output]);
+  const onCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(output);
+      if (output) {
+        trackEvent("dev_tool_used", {
+          page_type: PAGE_TYPE,
+          platform: getRuntimePlatform(),
+          tool_name: "Hex to Binary Converter",
+          tool_action: "Copy",
+        });
+      }
+    } catch (_) {}
+  }, [output]);
   const onDownload = useCallback(() => {
     const blob = new Blob([output], { type: "text/plain;charset=utf-8" });
     const url = URL.createObjectURL(blob);
diff --git a/app/components/developmentToolsComponent/hexToCmykConverter.tsx b/app/components/developmentToolsComponent/hexToCmykConverter.tsx
index 8ab1eff..fa36d56 100644
--- a/app/components/developmentToolsComponent/hexToCmykConverter.tsx
+++ b/app/components/developmentToolsComponent/hexToCmykConverter.tsx
@@ -2,6 +2,7 @@
 
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 function parseHex(hex: string): { r: number; g: number; b: number } | null {
   let h = hex.trim();
@@ -131,6 +132,12 @@ const HexToCmykConverter: React.FC = () => {
       const y = Math.round(cmyk.y * 100);
       const k = Math.round(cmyk.k * 100);
       await navigator.clipboard.writeText(`cmyk(${c}%, ${m}%, ${y}%, ${k}%)`);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "HEX to CMYK Converter",
+        tool_action: "Copy",
+      });
     } catch (_) {}
   }, [cmyk]);
 
diff --git a/app/components/developmentToolsComponent/hexToPantone.tsx b/app/components/developmentToolsComponent/hexToPantone.tsx
index 589d279..9d4d41c 100644
--- a/app/components/developmentToolsComponent/hexToPantone.tsx
+++ b/app/components/developmentToolsComponent/hexToPantone.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useMemo, useState, useCallback } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Pantone = { name: string; r: number; g: number; b: number };
 
@@ -56,6 +57,18 @@ const HexToPantone: React.FC = () => {
     try { await navigator.clipboard.writeText(hex.toUpperCase()); } catch (_) {}
   }, [hex]);
 
+  const onCopyPantoneName = useCallback(async (name: string) => {
+    try {
+      await navigator.clipboard.writeText(name);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Hex to Pantone",
+        tool_action: "Copy",
+      });
+    } catch (_) {}
+  }, []);
+
   return (
     <div className="md:mt-8 mt-4 text-white">
       <div className="flex-1 flex items-center justify-center">
@@ -121,7 +134,7 @@ const HexToPantone: React.FC = () => {
                     <div className="flex items-center justify-between gap-2 px-3 py-2">
                       <span className="text-xs truncate" title={it.pantone.name}>{it.pantone.name}</span>
                       <button
-                        onClick={async () => { try { await navigator.clipboard.writeText(it.pantone.name); } catch (_) {} }}
+                        onClick={() => onCopyPantoneName(it.pantone.name)}
                         className="border border-white/20 px-2 py-0.5 rounded text-[11px] bg-primary text-black font-bold"
                       >Copy</button>
                     </div>
diff --git a/app/components/developmentToolsComponent/hexToRGBConverter.tsx b/app/components/developmentToolsComponent/hexToRGBConverter.tsx
index 2ef45f3..9e89089 100644
--- a/app/components/developmentToolsComponent/hexToRGBConverter.tsx
+++ b/app/components/developmentToolsComponent/hexToRGBConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useCallback, useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type ConvertOptions = {
   outputCssFunction: boolean; // rgb()/rgba() vs raw numbers
@@ -65,6 +66,12 @@ const HexToRGBConverter: React.FC = () => {
     try {
       setError("");
       setOutput(convertInputToOutput(input, options));
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Hex to RGB Converter",
+        tool_action: "Convert",
+      });
     } catch (e: unknown) {
       setError("Failed to convert. Please check your input.");
     }
diff --git a/app/components/developmentToolsComponent/hoursToSecounds.tsx b/app/components/developmentToolsComponent/hoursToSecounds.tsx
index 5f35a01..732a32b 100644
--- a/app/components/developmentToolsComponent/hoursToSecounds.tsx
+++ b/app/components/developmentToolsComponent/hoursToSecounds.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const HoursToSecounds = () => {
   const [hours, setHours] = useState<string>("");
@@ -29,6 +30,12 @@ const HoursToSecounds = () => {
   const handleCopy = async () => {
     try {
       await navigator.clipboard.writeText(String(totalSeconds));
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Hours to Seconds",
+        tool_action: "Copy",
+      });
     } catch (_) {}
   };
 
diff --git a/app/components/developmentToolsComponent/htmlCodeGenerator.tsx b/app/components/developmentToolsComponent/htmlCodeGenerator.tsx
index 22b6da8..4752628 100644
--- a/app/components/developmentToolsComponent/htmlCodeGenerator.tsx
+++ b/app/components/developmentToolsComponent/htmlCodeGenerator.tsx
@@ -3,6 +3,7 @@ import React, { useState } from "react";
 import CopyIcon from "../theme/Icon/copyIcon";
 import { CheckIcon } from "../theme/Icon/checkIcon";
 import DownOutlinedIcon from "../theme/Icon/downOutlinedIcon";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const HtmlCodeGenerator: React.FC = () => {
   const [generated, setGenerated] = useState<string>("");
@@ -62,6 +63,12 @@ const HtmlCodeGenerator: React.FC = () => {
       const data = await res.json();
       if (data?.html) {
         setGenerated(data.html);
+        trackEvent("dev_tool_used", {
+          page_type: PAGE_TYPE,
+          platform: getRuntimePlatform(),
+          tool_name: "HTML Code Generator",
+          tool_action: "Generate",
+        });
       } else if (data?.error) {
         setGenerated(`<!-- Error: ${data.error} -->`);
       }
diff --git a/app/components/developmentToolsComponent/htmlEntitiesToTextConverter.tsx b/app/components/developmentToolsComponent/htmlEntitiesToTextConverter.tsx
index 1f2513a..ceedd8c 100644
--- a/app/components/developmentToolsComponent/htmlEntitiesToTextConverter.tsx
+++ b/app/components/developmentToolsComponent/htmlEntitiesToTextConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 // Decode basic named entities and numeric (decimal/hex) references
 const decodeEntities = (input: string) => {
@@ -34,7 +35,15 @@ const HtmlEntitiesToTextConverter = () => {
   const [input, setInput] = useState("");
   const [output, setOutput] = useState("");
 
-  const onConvert = () => setOutput(decodeEntities(input));
+  const onConvert = () => {
+    setOutput(decodeEntities(input));
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "HTML Entities to Text Converter",
+      tool_action: "Convert",
+    });
+  };
   const onCopy = async () => { try { await navigator.clipboard.writeText(output); } catch {} };
   const onDownload = () => {
     const blob = new Blob([output], { type: "text/plain;charset=utf-8" });
diff --git a/app/components/developmentToolsComponent/htmlEscape.tsx b/app/components/developmentToolsComponent/htmlEscape.tsx
index 4dc8078..d62a474 100644
--- a/app/components/developmentToolsComponent/htmlEscape.tsx
+++ b/app/components/developmentToolsComponent/htmlEscape.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const NAMED_MAP: Record<string, string> = {
   "&": "&amp;",
@@ -44,6 +45,16 @@ const HtmlEscape: React.FC = () => {
     run();
   }, [input, autoUpdate, encodeQuotes, encodeNonAscii, useNamed]);
 
+  const handleEscapeClick = () => {
+    run();
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "HTML Escape",
+      tool_action: "Escape",
+    });
+  };
+
   const onCopy = async () => {
     try {
       await navigator.clipboard.writeText(output);
@@ -136,7 +147,7 @@ const HtmlEscape: React.FC = () => {
                 <div className="flex items-center justify-between">
                   <label className="font-medium">Input</label>
                   <button
-                    onClick={run}
+                    onClick={handleEscapeClick}
                     className="px-3 py-1 bg-primary hover:bg-primary/80 rounded text-sm transition-colors text-black font-bold"
                   >
                     Escape
diff --git a/app/components/developmentToolsComponent/htmlMinify.tsx b/app/components/developmentToolsComponent/htmlMinify.tsx
index a9c651c..822ea65 100644
--- a/app/components/developmentToolsComponent/htmlMinify.tsx
+++ b/app/components/developmentToolsComponent/htmlMinify.tsx
@@ -2,6 +2,7 @@
 
 import React, { useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const minify = (html: string): string => {
   return html
@@ -34,6 +35,12 @@ const HtmlMinify = () => {
     const src = input || example;
     const result = minify(src);
     setOutput(result);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "HTML Minify",
+      tool_action: "Minify",
+    });
   };
 
   const copy = async () =>
diff --git a/app/components/developmentToolsComponent/htmlPrettify.tsx b/app/components/developmentToolsComponent/htmlPrettify.tsx
index f2683e7..38f9a34 100644
--- a/app/components/developmentToolsComponent/htmlPrettify.tsx
+++ b/app/components/developmentToolsComponent/htmlPrettify.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const prettify = (html: string, indentSize: number): string => {
   const indent = (level: number) => " ".repeat(level * indentSize);
@@ -35,6 +36,12 @@ const HtmlPrettify = () => {
     const src = input || example;
     const result = prettify(src, indentSize);
     setOutput(result);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "HTML Prettify",
+      tool_action: "Prettify",
+    });
   };
 
   const copy = async () => output && (await navigator.clipboard.writeText(output));
diff --git a/app/components/developmentToolsComponent/htmlTester.tsx b/app/components/developmentToolsComponent/htmlTester.tsx
index c08b628..7db76f2 100644
--- a/app/components/developmentToolsComponent/htmlTester.tsx
+++ b/app/components/developmentToolsComponent/htmlTester.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useState, useEffect } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const Cmd = ({ children }: { children: string }) => (
   <code className="px-2 py-1 rounded bg-black/40 border border-white/10 font-mono text-xs">
@@ -137,6 +138,12 @@ const HtmlTester = () => {
     const errors = validateHTML(htmlCode);
     setValidationErrors(errors);
     setIsValidating(false);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "HTML Tester",
+      tool_action: "Validate",
+    });
   };
 
   const handleClear = () => {
diff --git a/app/components/developmentToolsComponent/htmlToBBCode.tsx b/app/components/developmentToolsComponent/htmlToBBCode.tsx
index 38a3068..7663b2a 100644
--- a/app/components/developmentToolsComponent/htmlToBBCode.tsx
+++ b/app/components/developmentToolsComponent/htmlToBBCode.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type IndentSize = 2 | 4;
 
@@ -95,7 +96,18 @@ const HtmlToBBCode: React.FC = () => {
 
   const fileRef = useRef<HTMLInputElement>(null);
 
-  const convert = useCallback(() => setOutput(htmlToBbcode(input, options)), [input, options]);
+  const convert = useCallback(() => {
+    const result = htmlToBbcode(input, options);
+    setOutput(result);
+    if (result) {
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "HTML to BBCode",
+        tool_action: "Convert",
+      });
+    }
+  }, [input, options]);
   useEffect(() => { if (autoUpdate) convert(); }, [input, options, autoUpdate, convert]);
 
   const onCopy = useCallback(async () => { try { await navigator.clipboard.writeText(output); } catch (_) {} }, [output]);
diff --git a/app/components/developmentToolsComponent/htmlToJade.tsx b/app/components/developmentToolsComponent/htmlToJade.tsx
index 7204547..90e6677 100644
--- a/app/components/developmentToolsComponent/htmlToJade.tsx
+++ b/app/components/developmentToolsComponent/htmlToJade.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type IndentSize = 2 | 4;
 
@@ -143,7 +144,20 @@ const HtmlToJade: React.FC = () => {
                   <input type="checkbox" className="accent-primary" checked={autoUpdate} onChange={(e) => setAutoUpdate(e.target.checked)} />
                   Auto-update
                 </label>
-                <button onClick={convert} className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm">Convert</button>
+                <button
+                  onClick={() => {
+                    convert();
+                    trackEvent("dev_tool_used", {
+                      page_type: PAGE_TYPE,
+                      platform: getRuntimePlatform(),
+                      tool_name: "HTML To Jade",
+                      tool_action: "Convert",
+                    });
+                  }}
+                  className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm"
+                >
+                  Convert
+                </button>
               </div>
               <div className="flex items-center gap-2 flex-wrap">
                 <button onClick={onCopy} className="border border-white/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold">Copy</button>
diff --git a/app/components/developmentToolsComponent/htmlToMarkDownComponent.tsx b/app/components/developmentToolsComponent/htmlToMarkDownComponent.tsx
index d6acd61..67cdd5c 100644
--- a/app/components/developmentToolsComponent/htmlToMarkDownComponent.tsx
+++ b/app/components/developmentToolsComponent/htmlToMarkDownComponent.tsx
@@ -5,6 +5,7 @@ import { Editor } from "@monaco-editor/react";
 import TurndownService from "turndown";
 import { ToastContainer, toast } from "react-toastify"; // Import ToastContainer and toast
 import "react-toastify/dist/ReactToastify.css"; // Import the toast CSS
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const HtmlToMarkDownComponent = () => {
   const [htmlInput, setHtmlInput] = useState("");
@@ -62,6 +63,12 @@ const HtmlToMarkDownComponent = () => {
     // Update state with the Markdown output
     setMarkdownOutput(markdown);
     toast.success("Conversion successful!");
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "HTML To Markdown",
+      tool_action: "Convert",
+    });
   };
 
   const removeCss = (html: any) => {
diff --git a/app/components/developmentToolsComponent/htmlUnescape.tsx b/app/components/developmentToolsComponent/htmlUnescape.tsx
index a5f3950..7e62c21 100644
--- a/app/components/developmentToolsComponent/htmlUnescape.tsx
+++ b/app/components/developmentToolsComponent/htmlUnescape.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 function unescapeHtml(input: string): string {
   // handle numeric decimal, hex, and common named entities
@@ -28,6 +29,16 @@ const HtmlUnescape: React.FC = () => {
     run();
   }, [input, autoUpdate]);
 
+  const handleUnescapeClick = () => {
+    run();
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "HTML Unescape",
+      tool_action: "Unescape",
+    });
+  };
+
   const onCopy = async () => {
     try {
       await navigator.clipboard.writeText(output);
@@ -92,7 +103,7 @@ const HtmlUnescape: React.FC = () => {
                 <div className="flex items-center justify-between">
                   <label className="font-medium">Input</label>
                   <button
-                    onClick={run}
+                    onClick={handleUnescapeClick}
                     className="px-3 py-1 bg-primary hover:bg-primary/80 rounded text-sm transition-colors text-black font-bold"
                   >
                     Unescape
diff --git a/app/components/developmentToolsComponent/htmlValidator.tsx b/app/components/developmentToolsComponent/htmlValidator.tsx
index 61c403a..ffb8445 100644
--- a/app/components/developmentToolsComponent/htmlValidator.tsx
+++ b/app/components/developmentToolsComponent/htmlValidator.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Issue = { type: "error" | "warning"; message: string; selector?: string };
 
@@ -65,6 +66,12 @@ const HTMLValidator: React.FC = () => {
 
   const onValidate = () => {
     setIssues(runValidation(html));
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "HTML Validator Online",
+      tool_action: "Validate",
+    });
   };
 
   const onUpload = (e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/app/components/developmentToolsComponent/htmlViewer.tsx b/app/components/developmentToolsComponent/htmlViewer.tsx
index 10f552f..7133ca8 100644
--- a/app/components/developmentToolsComponent/htmlViewer.tsx
+++ b/app/components/developmentToolsComponent/htmlViewer.tsx
@@ -2,6 +2,7 @@
 
 import React, { useRef, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const DEFAULT_HTML =
   "<h1>Hello, HTML Viewer</h1>\n<p>Edit the HTML to see updates here.</p>";
@@ -39,6 +40,12 @@ const HtmlViewer: React.FC = () => {
   const copy = async () => {
     try {
       await navigator.clipboard.writeText(editorValue);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "HTML Viewer Online",
+        tool_action: "Copy",
+      });
     } catch {
       // ignore
     }
diff --git a/app/components/developmentToolsComponent/idnDecode.tsx b/app/components/developmentToolsComponent/idnDecode.tsx
index da72c22..20c662f 100644
--- a/app/components/developmentToolsComponent/idnDecode.tsx
+++ b/app/components/developmentToolsComponent/idnDecode.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type IndentSize = 2 | 4;
 
@@ -133,7 +134,19 @@ const IdnDecode: React.FC = () => {
                   <input type="checkbox" className="accent-primary" checked={autoUpdate} onChange={(e) => setAutoUpdate(e.target.checked)} />
                   Auto-update
                 </label>
-                <button onClick={convert} className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm">Decode</button>
+                <button
+                  onClick={() => {
+                    if (!input.trim()) return;
+                    convert();
+                    trackEvent("dev_tool_used", {
+                      page_type: PAGE_TYPE,
+                      platform: getRuntimePlatform(),
+                      tool_name: "IDN Decode",
+                      tool_action: "Decode",
+                    });
+                  }}
+                  className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm"
+                >Decode</button>
               </div>
               <div className="flex items-center gap-2 flex-wrap">
                 <button onClick={onCopy} className="border border-white/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold">Copy</button>
diff --git a/app/components/developmentToolsComponent/idnEncode.tsx b/app/components/developmentToolsComponent/idnEncode.tsx
index d474afe..1dab047 100644
--- a/app/components/developmentToolsComponent/idnEncode.tsx
+++ b/app/components/developmentToolsComponent/idnEncode.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type IndentSize = 2 | 4;
 
@@ -154,7 +155,19 @@ const IdnEncode: React.FC = () => {
                   <input type="checkbox" className="accent-primary" checked={autoUpdate} onChange={(e) => setAutoUpdate(e.target.checked)} />
                   Auto-update
                 </label>
-                <button onClick={convert} className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm">Encode</button>
+                <button
+                  onClick={() => {
+                    if (!input.trim()) return;
+                    convert();
+                    trackEvent("dev_tool_used", {
+                      page_type: PAGE_TYPE,
+                      platform: getRuntimePlatform(),
+                      tool_name: "IDN Encode",
+                      tool_action: "Encode",
+                    });
+                  }}
+                  className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm"
+                >Encode</button>
               </div>
               <div className="flex items-center gap-2 flex-wrap">
                 <button onClick={onCopy} className="border border-white/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold">Copy</button>
diff --git a/app/components/developmentToolsComponent/imageResizer.tsx b/app/components/developmentToolsComponent/imageResizer.tsx
index b8d35a0..a8116b7 100644
--- a/app/components/developmentToolsComponent/imageResizer.tsx
+++ b/app/components/developmentToolsComponent/imageResizer.tsx
@@ -2,6 +2,7 @@
 
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const clamp = (value: number, min: number, max: number) => {
   return Math.min(max, Math.max(min, value));
@@ -178,6 +179,12 @@ const ImageResizer = () => {
     const base = fileName ? fileName.replace(/\.[^.]+$/, "") : "image";
     a.download = `${base}-${targetWidth}x${targetHeight}.${format === "jpg" ? "jpg" : format}`;
     a.click();
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Image Resizer",
+      tool_action: "Download",
+    });
   };
 
   const targetBytes = useMemo(() => {
@@ -220,6 +227,12 @@ const ImageResizer = () => {
         return URL.createObjectURL(finalBlob);
       });
       setOutputBytes(finalBlob.size);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Image Resizer",
+        tool_action: "Compress",
+      });
     } catch {
       setError("Failed to optimize file size");
     } finally {
diff --git a/app/components/developmentToolsComponent/imageToBase64Converter.tsx b/app/components/developmentToolsComponent/imageToBase64Converter.tsx
index 852df36..ea9e8bf 100644
--- a/app/components/developmentToolsComponent/imageToBase64Converter.tsx
+++ b/app/components/developmentToolsComponent/imageToBase64Converter.tsx
@@ -2,6 +2,7 @@
 
 import React, { useCallback, useRef, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const MAX_BYTES = 10 * 1024 * 1024;
 
@@ -95,6 +96,12 @@ const ImageToBase64Converter: React.FC = () => {
     if (!outputText) return;
     try {
       await navigator.clipboard.writeText(outputText);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Image To Base64 Converter",
+        tool_action: "Copy",
+      });
     } catch {
       // ignore
     }
diff --git a/app/components/developmentToolsComponent/internetSpeedTest.tsx b/app/components/developmentToolsComponent/internetSpeedTest.tsx
index 49eba26..cf47a22 100644
--- a/app/components/developmentToolsComponent/internetSpeedTest.tsx
+++ b/app/components/developmentToolsComponent/internetSpeedTest.tsx
@@ -2,6 +2,7 @@
 
 import React, { useState, useRef, useEffect } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 interface SpeedTestResult {
   downloadSpeed: number;
@@ -77,6 +78,12 @@ const InternetSpeedTest = () => {
       const testResult = await simulateSpeedTest();
       setResult(testResult);
       setTestHistory((prev) => [testResult, ...prev.slice(0, 4)]); // Keep last 5 results
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Internet Speed Test",
+        tool_action: "Run Test",
+      });
     } catch (err) {
       setError("Speed test failed. Please try again.");
     } finally {
diff --git a/app/components/developmentToolsComponent/ipToHexConverter.tsx b/app/components/developmentToolsComponent/ipToHexConverter.tsx
index ca32541..6dabfd9 100644
--- a/app/components/developmentToolsComponent/ipToHexConverter.tsx
+++ b/app/components/developmentToolsComponent/ipToHexConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type GroupSeparator = "" | " " | ":" | "-";
 
@@ -82,7 +83,7 @@ const IpToHexConverter: React.FC = () => {
 
   const fileRef = useRef<HTMLInputElement>(null);
 
-  const convert = useCallback(() => {
+  const convert = useCallback((trackOnSuccess = false) => {
     const v4 = parseIPv4(input);
     const v6 = v4 ? null : parseIPv6(input);
     if (!v4 && !v6) {
@@ -95,6 +96,14 @@ const IpToHexConverter: React.FC = () => {
     let hex = toHex(bytes, uppercase, separator);
     if (prefix0x && separator === "") hex = "0x" + (uppercase ? hex.toUpperCase() : hex.toLowerCase());
     setOutput(hex);
+    if (trackOnSuccess) {
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "IP to Hex Converter",
+        tool_action: "Convert",
+      });
+    }
   }, [input, uppercase, separator, prefix0x]);
 
   useEffect(() => { if (autoUpdate) convert(); }, [input, uppercase, separator, prefix0x, autoUpdate, convert]);
@@ -129,7 +138,7 @@ const IpToHexConverter: React.FC = () => {
                   <input type="checkbox" className="accent-primary" checked={autoUpdate} onChange={(e) => setAutoUpdate(e.target.checked)} />
                   Auto-update
                 </label>
-                <button onClick={convert} className="border border-black/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold">Convert</button>
+                <button onClick={() => convert(true)} className="border border-black/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold">Convert</button>
               </div>
               <div className="flex items-center gap-2 flex-wrap">
                 <button onClick={onCopy} className="border border-black/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold">Copy</button>
diff --git a/app/components/developmentToolsComponent/ipv4SubnetCalculator.tsx b/app/components/developmentToolsComponent/ipv4SubnetCalculator.tsx
index 7d8fdcc..00849e2 100644
--- a/app/components/developmentToolsComponent/ipv4SubnetCalculator.tsx
+++ b/app/components/developmentToolsComponent/ipv4SubnetCalculator.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 interface SubnetResults {
   networkAddress: string;
@@ -208,6 +209,12 @@ const Ipv4SubnetCalculator: React.FC = () => {
       } else {
         setCidrInput(String(cidr));
       }
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "IPv4 Subnet Calculator",
+        tool_action: "Calculate",
+      });
     }
   }, [ip, cidrInput, maskInput, inputMode]);
 
diff --git a/app/components/developmentToolsComponent/javascriptEscape.tsx b/app/components/developmentToolsComponent/javascriptEscape.tsx
index 794588d..5b8b062 100644
--- a/app/components/developmentToolsComponent/javascriptEscape.tsx
+++ b/app/components/developmentToolsComponent/javascriptEscape.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const Cmd = ({ children }: { children: string }) => (
   <code className="px-2 py-1 rounded bg-black/40 border border-white/10 font-mono text-xs">{children}</code>
@@ -48,7 +49,17 @@ const JavaScriptEscape = () => {
     return `const s = "${inner}";`;
   }, [mode]);
 
-  const copy = async (text: string) => { try { await navigator.clipboard.writeText(text); } catch {} };
+  const copy = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "JavaScript Escape",
+        tool_action: "Copy",
+      });
+    } catch {}
+  };
   const clear = () => setRaw("");
 
   return (
diff --git a/app/components/developmentToolsComponent/javascriptMinifierComponent.tsx b/app/components/developmentToolsComponent/javascriptMinifierComponent.tsx
index 07bef66..8c37b0e 100644
--- a/app/components/developmentToolsComponent/javascriptMinifierComponent.tsx
+++ b/app/components/developmentToolsComponent/javascriptMinifierComponent.tsx
@@ -4,6 +4,7 @@ import MonacoEditor, { Editor } from "@monaco-editor/react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
 import { ToastContainer, toast } from "react-toastify"; // Import ToastContainer and toast
 import "react-toastify/dist/ReactToastify.css"; // Import the toast CSS
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const JavascriptMinifierComponent = () => {
   const [inputJson, setInputJson] = useState("");
@@ -19,6 +20,12 @@ const JavascriptMinifierComponent = () => {
       const parsedJson = JSON.parse(inputJson);
       setMinifiedJson(JSON.stringify(parsedJson));
       toast.success("JSON successfully minified!");
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "JavaScript Minifier",
+        tool_action: "Minify",
+      });
     } catch (error) {
       toast.error("Invalid JSON input. Please fix it and try again.");
     }
diff --git a/app/components/developmentToolsComponent/javascriptRegexTester.tsx b/app/components/developmentToolsComponent/javascriptRegexTester.tsx
index 9221b66..9116d22 100644
--- a/app/components/developmentToolsComponent/javascriptRegexTester.tsx
+++ b/app/components/developmentToolsComponent/javascriptRegexTester.tsx
@@ -1,5 +1,6 @@
 "use client"
 import React, { useMemo, useState } from 'react'
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from '@/app/libs/analytics'
 
 type RegexFlags = {
   i: boolean
@@ -79,6 +80,12 @@ const JavascriptRegexTester = () => {
     try {
       const r = new RegExp(regex.source, flagsString.replace('g',''))
       setText(text.replace(r, replaceWith))
+      trackEvent('dev_tool_used', {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: 'JavaScript Regex Tester',
+        tool_action: 'Replace First',
+      })
     } catch {}
   }
 
@@ -87,10 +94,24 @@ const JavascriptRegexTester = () => {
     try {
       const r = new RegExp(regex.source, flagsString.includes('g') ? flagsString : flagsString + 'g')
       setText(text.replace(r, replaceWith))
+      trackEvent('dev_tool_used', {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: 'JavaScript Regex Tester',
+        tool_action: 'Replace All',
+      })
     } catch {}
   }
 
-  const runTest = () => setManualRunKey((k) => k + 1)
+  const runTest = () => {
+    setManualRunKey((k) => k + 1)
+    trackEvent('dev_tool_used', {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: 'JavaScript Regex Tester',
+      tool_action: 'Test Match',
+    })
+  }
   const resetAll = () => {
     setPattern('')
     setText('')
diff --git a/app/components/developmentToolsComponent/javascriptTester.tsx b/app/components/developmentToolsComponent/javascriptTester.tsx
index e7fc28c..5e390b0 100644
--- a/app/components/developmentToolsComponent/javascriptTester.tsx
+++ b/app/components/developmentToolsComponent/javascriptTester.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type LogEntry = { type: "log" | "warn" | "error"; message: string };
 
@@ -36,6 +37,12 @@ const JavaScriptTester = () => {
     setSrcDoc(wrap);
     // bump key to ensure fresh execution
     setReloadKey((k) => k + 1);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "JavaScript Tester",
+      tool_action: "Run",
+    });
   };
 
   useEffect(() => {
diff --git a/app/components/developmentToolsComponent/javascriptValidatorLinter.tsx b/app/components/developmentToolsComponent/javascriptValidatorLinter.tsx
index fb2b4a2..58b325f 100644
--- a/app/components/developmentToolsComponent/javascriptValidatorLinter.tsx
+++ b/app/components/developmentToolsComponent/javascriptValidatorLinter.tsx
@@ -1,5 +1,6 @@
 "use client";
-import React, { useMemo, useState } from "react";
+import React, { useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type IssueType = "error" | "warning";
 interface Issue { line: number; column: number; message: string; type: IssueType }
@@ -66,6 +67,29 @@ const JavaScriptValidatorLinter = () => {
   const syntaxIssues = useMemo(() => checkSyntax(code), [code]);
   const lintIssues = useMemo(() => (autoLint ? basicLint(code) : []), [code, autoLint]);
   const hasErrors = syntaxIssues.length > 0;
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+  const isFirstRenderRef = useRef(true);
+
+  useEffect(() => {
+    if (isFirstRenderRef.current) {
+      isFirstRenderRef.current = false;
+      return;
+    }
+    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+    if (code.trim()) {
+      debounceTimerRef.current = setTimeout(() => {
+        trackEvent("dev_tool_used", {
+          page_type: PAGE_TYPE,
+          platform: getRuntimePlatform(),
+          tool_name: "JavaScript Validator & Linter",
+          tool_action: "Validate",
+        });
+      }, 1000);
+    }
+    return () => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+    };
+  }, [code]);
 
   return (
     <div className="md:mt-8 mt-4 text-white">
diff --git a/app/components/developmentToolsComponent/jsObfuscatorComponent.tsx b/app/components/developmentToolsComponent/jsObfuscatorComponent.tsx
index f7668ae..bd2b1e7 100644
--- a/app/components/developmentToolsComponent/jsObfuscatorComponent.tsx
+++ b/app/components/developmentToolsComponent/jsObfuscatorComponent.tsx
@@ -4,6 +4,7 @@ import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
 import { toast, ToastContainer } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
 import { Editor } from "@monaco-editor/react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const JsObfuscatorComponent = () => {
   const [inputCode, setInputCode] = useState("");
@@ -22,6 +23,12 @@ const JsObfuscatorComponent = () => {
         controlFlowFlattening: true,
       }).getObfuscatedCode();
       setOutputCode(obfuscatedCode);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "JS Obfuscator",
+        tool_action: "Obfuscate",
+      });
     } catch (error) {
       setOutputCode("");
       toast.error(`Error obfuscating code: ${(error as Error).message}`);
diff --git a/app/components/developmentToolsComponent/jsonCompare.tsx b/app/components/developmentToolsComponent/jsonCompare.tsx
index 5781819..9a0edfd 100644
--- a/app/components/developmentToolsComponent/jsonCompare.tsx
+++ b/app/components/developmentToolsComponent/jsonCompare.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type ChangeType = "added" | "removed" | "modified";
 interface ChangeItem { path: string; type: ChangeType; left?: any; right?: any }
@@ -124,6 +125,12 @@ const JSONCompare = () => {
   const onCompare = () => {
     try {
       parseJson(left); parseJson(right); setCompared(true); setError(null);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "JSON Compare",
+        tool_action: "Compare",
+      });
     } catch (e: any) { setError(e?.message || "Invalid JSON"); setCompared(false); }
   };
 
diff --git a/app/components/developmentToolsComponent/jsonMinifierComponent.tsx b/app/components/developmentToolsComponent/jsonMinifierComponent.tsx
index 5d29c61..43e1b65 100644
--- a/app/components/developmentToolsComponent/jsonMinifierComponent.tsx
+++ b/app/components/developmentToolsComponent/jsonMinifierComponent.tsx
@@ -4,6 +4,7 @@ import { Editor } from "@monaco-editor/react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
 import { ToastContainer, toast } from "react-toastify"; // Import ToastContainer and toast
 import "react-toastify/dist/ReactToastify.css"; // Import the toast CSS
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const JsonMinifierComponent = () => {
   const [inputJson, setInputJson] = useState("");
@@ -39,6 +40,12 @@ const JsonMinifierComponent = () => {
       const parsedJson = JSON.parse(inputJson);
       setMinifiedJson(JSON.stringify(parsedJson));
       toast.success("JSON minified successfully!");
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "JSON Minifier",
+        tool_action: "Minify",
+      });
     } catch (error) {
       toast.error("Invalid JSON input. Please fix it and try again.");
       toast.success("");
diff --git a/app/components/developmentToolsComponent/jsonPrittifierComponent.tsx b/app/components/developmentToolsComponent/jsonPrittifierComponent.tsx
index b2ddea3..c5b987b 100644
--- a/app/components/developmentToolsComponent/jsonPrittifierComponent.tsx
+++ b/app/components/developmentToolsComponent/jsonPrittifierComponent.tsx
@@ -5,6 +5,7 @@ import Editor from "@monaco-editor/react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
 import { ToastContainer, toast } from "react-toastify"; // Import ToastContainer and toast
 import "react-toastify/dist/ReactToastify.css"; // Import the toast CSS
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const JsonPrettifierComponent = () => {
   const [inputJson, setInputJson] = useState("");
@@ -48,6 +49,12 @@ const JsonPrettifierComponent = () => {
       const parsedJson = JSON.parse(inputJson);
       setPrettifiedJson(JSON.stringify(parsedJson, null, indentation)); // Prettify JSON with selected indentation
       toast.success("JSON successfully prettified!");
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "JSON Formatter/Prettifier Tool",
+        tool_action: "Prettify",
+      });
     } catch (error) {
       toast.error("Invalid JSON input. Please fix it and try again.");
     }
diff --git a/app/components/developmentToolsComponent/jsonToCsvConverter.tsx b/app/components/developmentToolsComponent/jsonToCsvConverter.tsx
index 53eff7a..83c0553 100644
--- a/app/components/developmentToolsComponent/jsonToCsvConverter.tsx
+++ b/app/components/developmentToolsComponent/jsonToCsvConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 // Flatten nested objects: {user: {name: "Alice"}} => {"user.name": "Alice"}
 const flattenObject = (obj: any, prefix = ""): Record<string, any> => {
@@ -88,6 +89,12 @@ const JsonToCsvConverter: React.FC = () => {
       }
       const csv = jsonToCsv(parsed, { delimiter, includeHeader, flatten });
       setCsvOut(csv);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "JSON to CSV Converter",
+        tool_action: "Convert",
+      });
     } catch (err) {
       setError("Invalid JSON format");
       setCsvOut("");
diff --git a/app/components/developmentToolsComponent/jsonToTxt.tsx b/app/components/developmentToolsComponent/jsonToTxt.tsx
index 5f1755c..6188a35 100644
--- a/app/components/developmentToolsComponent/jsonToTxt.tsx
+++ b/app/components/developmentToolsComponent/jsonToTxt.tsx
@@ -2,6 +2,7 @@
 
 import React, { useEffect, useRef, useState } from "react";
 import CopyButton from "../ui/CopyButton";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Mode = "json-lines" | "keys" | "values" | "key=value" | "path=value";
 
@@ -75,13 +76,21 @@ const JsonToTxt: React.FC = () => {
   const [uniqueOnly, setUniqueOnly] = useState(false);
   const fileRef = useRef<HTMLInputElement>(null);
 
-  const convert = () => {
+  const convert = (manual = false) => {
     let text = toText(input, mode, pretty);
     if (uniqueOnly && !text.startsWith("Error:")) {
       const lines = text.split(/\r?\n/);
       text = Array.from(new Set(lines)).join("\n");
     }
     setOutput(text);
+    if (manual && !text.startsWith("Error:")) {
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "JSON to TXT Online Converter",
+        tool_action: "Convert",
+      });
+    }
   };
 
   useEffect(() => {
@@ -178,7 +187,7 @@ const JsonToTxt: React.FC = () => {
                 <div className="flex items-center justify-between">
                   <label className="font-medium">Input (JSON)</label>
                   <button
-                    onClick={convert}
+                    onClick={() => convert(true)}
                     className="px-3 py-1 bg-primary hover:bg-primary/80 rounded text-sm transition-colors text-black font-bold"
                   >
                     Convert
diff --git a/app/components/developmentToolsComponent/jsonToTypeScript.tsx b/app/components/developmentToolsComponent/jsonToTypeScript.tsx
index 7a26fc1..afe9a74 100644
--- a/app/components/developmentToolsComponent/jsonToTypeScript.tsx
+++ b/app/components/developmentToolsComponent/jsonToTypeScript.tsx
@@ -3,6 +3,7 @@ import React, { useMemo, useState, useRef } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
 import ReloadIcon from "../theme/Icon/reload";
 import CopyIcon from "../theme/Icon/copyIcon";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const JsonToTypeScript = () => {
   const [jsonInput, setJsonInput] = useState<string>("");
@@ -131,6 +132,12 @@ const JsonToTypeScript = () => {
       await navigator.clipboard.writeText(typeScriptCode);
       setError("TypeScript code copied to clipboard successfully!");
       setTimeout(() => setError(""), 3000);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Json to Typescript Converter",
+        tool_action: "Copy",
+      });
     } catch (err) {
       setError("Failed to copy to clipboard");
     }
diff --git a/app/components/developmentToolsComponent/jsonToXmlConverter.tsx b/app/components/developmentToolsComponent/jsonToXmlConverter.tsx
index 23ff3c9..c7bb4d3 100644
--- a/app/components/developmentToolsComponent/jsonToXmlConverter.tsx
+++ b/app/components/developmentToolsComponent/jsonToXmlConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type IndentSize = 2 | 4;
 
@@ -149,7 +150,21 @@ const JsonToXmlConverter: React.FC = () => {
                   <input type="checkbox" className="accent-primary" checked={autoUpdate} onChange={(e) => setAutoUpdate(e.target.checked)} />
                   Auto-update
                 </label>
-                <button onClick={convert} className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm">Convert</button>
+                <button
+                  onClick={() => {
+                    convert();
+                    try {
+                      JSON.parse(input);
+                      trackEvent("dev_tool_used", {
+                        page_type: PAGE_TYPE,
+                        platform: getRuntimePlatform(),
+                        tool_name: "JSON to XML Converter",
+                        tool_action: "Convert",
+                      });
+                    } catch (_) {}
+                  }}
+                  className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm"
+                >Convert</button>
               </div>
               <div className="flex items-center gap-2 flex-wrap">
                 <button onClick={onCopy} className="border border-white/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold">Copy</button>
diff --git a/app/components/developmentToolsComponent/jsonToYamlConverter.tsx b/app/components/developmentToolsComponent/jsonToYamlConverter.tsx
index 3078074..5affa55 100644
--- a/app/components/developmentToolsComponent/jsonToYamlConverter.tsx
+++ b/app/components/developmentToolsComponent/jsonToYamlConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type IndentSize = 2 | 4;
 
@@ -118,7 +119,21 @@ const JsonToYamlConverter: React.FC = () => {
                   <input type="checkbox" className="accent-primary" checked={autoUpdate} onChange={(e) => setAutoUpdate(e.target.checked)} />
                   Auto-update
                 </label>
-                <button onClick={convert} className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm">Convert</button>
+                <button
+                  onClick={() => {
+                    convert();
+                    try {
+                      JSON.parse(input);
+                      trackEvent("dev_tool_used", {
+                        page_type: PAGE_TYPE,
+                        platform: getRuntimePlatform(),
+                        tool_name: "JSON to YAML Converter",
+                        tool_action: "Convert",
+                      });
+                    } catch (_) {}
+                  }}
+                  className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm"
+                >Convert</button>
               </div>
               <div className="flex items-center gap-2">
                 <button onClick={onCopy} className="border border-white/30 px-3 py-1 rounded text-sm bg-primary hover:bg-primary/90 text-black font-bold">Copy</button>
diff --git a/app/components/developmentToolsComponent/jsonValidator.tsx b/app/components/developmentToolsComponent/jsonValidator.tsx
index f83b21a..5c29bb4 100644
--- a/app/components/developmentToolsComponent/jsonValidator.tsx
+++ b/app/components/developmentToolsComponent/jsonValidator.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 interface ValidationResult {
   isValid: boolean;
@@ -236,6 +237,12 @@ const JsonValidator = () => {
       const results = validateJson(jsonInput);
       setValidationResults(results);
       setIsLoading(false);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "JSON Validator Online",
+        tool_action: "Validate",
+      });
     }, 100);
   };
 
@@ -247,6 +254,12 @@ const JsonValidator = () => {
       const results = validateAgainstSchema(jsonInput, schemaInput);
       setSchemaValidation(results);
       setIsLoading(false);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "JSON Validator Online",
+        tool_action: "Schema Validate",
+      });
     }, 100);
   };
 
@@ -280,6 +293,12 @@ const JsonValidator = () => {
     );
 
     setJsonInput(fixed);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "JSON Validator Online",
+      tool_action: "Smart Repair",
+    });
   };
 
   const handleFileUpload = (event: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/app/components/developmentToolsComponent/jwtDecoder.tsx b/app/components/developmentToolsComponent/jwtDecoder.tsx
index cae8b29..2df9983 100644
--- a/app/components/developmentToolsComponent/jwtDecoder.tsx
+++ b/app/components/developmentToolsComponent/jwtDecoder.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 interface JwtParts {
   header: any;
@@ -98,7 +99,19 @@ const JwtDecoder: React.FC = () => {
 
   useEffect(() => { if (autoUpdate) decode(); }, [input, formatJson, showExpiry, autoUpdate, decode]);
 
-  const onCopy = useCallback(async () => { try { await navigator.clipboard.writeText(output); } catch (_) {} }, [output]);
+  const onCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(output);
+      if (output) {
+        trackEvent("dev_tool_used", {
+          page_type: PAGE_TYPE,
+          platform: getRuntimePlatform(),
+          tool_name: "JWT Decoder",
+          tool_action: "Copy",
+        });
+      }
+    } catch (_) {}
+  }, [output]);
   const onDownload = useCallback(() => {
     const blob = new Blob([output], { type: "text/plain;charset=utf-8" });
     const url = URL.createObjectURL(blob);
diff --git a/app/components/developmentToolsComponent/kmToMilesConverter.tsx b/app/components/developmentToolsComponent/kmToMilesConverter.tsx
index 6bb02c7..7138a4a 100644
--- a/app/components/developmentToolsComponent/kmToMilesConverter.tsx
+++ b/app/components/developmentToolsComponent/kmToMilesConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const KM_TO_MI = 1 / 1.609344; // exact inverse
 
@@ -31,7 +32,19 @@ const KmToMilesConverter: React.FC = () => {
 
   useEffect(() => { if (autoUpdate) convert(); }, [input, precision, autoUpdate, convert]);
 
-  const onCopy = useCallback(async () => { try { await navigator.clipboard.writeText(output); } catch (_) {} }, [output]);
+  const onCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(output);
+      if (output) {
+        trackEvent("dev_tool_used", {
+          page_type: PAGE_TYPE,
+          platform: getRuntimePlatform(),
+          tool_name: "Kilometers to Miles Converter",
+          tool_action: "Copy",
+        });
+      }
+    } catch (_) {}
+  }, [output]);
   const onDownload = useCallback(() => {
     const blob = new Blob([output], { type: "text/plain;charset=utf-8" });
     const url = URL.createObjectURL(blob);
diff --git a/app/components/developmentToolsComponent/lineCounterComponent.tsx b/app/components/developmentToolsComponent/lineCounterComponent.tsx
index c1cf05d..9f479ae 100644
--- a/app/components/developmentToolsComponent/lineCounterComponent.tsx
+++ b/app/components/developmentToolsComponent/lineCounterComponent.tsx
@@ -1,12 +1,32 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const LineCounterComponent = () => {
   const [text, setText] = useState("");
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+    };
+  }, []);
 
   const handleTextChange = (e: any) => {
-    setText(e.target.value);
+    const value = e.target.value;
+    setText(value);
+    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+    if (value.trim()) {
+      debounceTimerRef.current = setTimeout(() => {
+        trackEvent("dev_tool_used", {
+          page_type: PAGE_TYPE,
+          platform: getRuntimePlatform(),
+          tool_name: "Line Counter",
+          tool_action: "Count",
+        });
+      }, 1000);
+    }
   };
 
   const countLines = () => {
diff --git a/app/components/developmentToolsComponent/loremIpsumGeneratorComponent.tsx b/app/components/developmentToolsComponent/loremIpsumGeneratorComponent.tsx
index dc4ce36..47bac24 100644
--- a/app/components/developmentToolsComponent/loremIpsumGeneratorComponent.tsx
+++ b/app/components/developmentToolsComponent/loremIpsumGeneratorComponent.tsx
@@ -2,6 +2,7 @@
 import React, { useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
 import { lorem } from "@/app/libs/constants";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const LoremIpsumGeneratorComponent = () => {
   const [count, setCount] = useState<any>(1);
@@ -59,6 +60,12 @@ const LoremIpsumGeneratorComponent = () => {
     }
 
     setLoremText(output);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Lorem Ipsum Generator",
+      tool_action: "Generate",
+    });
   };
 
   const copyToClipboard = (text: string) => {
diff --git a/app/components/developmentToolsComponent/lowerCaseConverterComponent.tsx b/app/components/developmentToolsComponent/lowerCaseConverterComponent.tsx
index 64d3abd..f0e96fc 100644
--- a/app/components/developmentToolsComponent/lowerCaseConverterComponent.tsx
+++ b/app/components/developmentToolsComponent/lowerCaseConverterComponent.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const LowerCaseConverterComponent = () => {
   const [inputText, setInputText] = useState("");
@@ -13,6 +14,12 @@ const LowerCaseConverterComponent = () => {
 
   const transformToLowerCase = () => {
     setTransformedText(inputText.toLowerCase());
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Text to Lowercase Converter",
+      tool_action: "Convert",
+    });
   };
 
   const copyToClipboard = () => {
diff --git a/app/components/developmentToolsComponent/markDownToHTMLComponent.tsx b/app/components/developmentToolsComponent/markDownToHTMLComponent.tsx
index 68a52ae..0ad976c 100644
--- a/app/components/developmentToolsComponent/markDownToHTMLComponent.tsx
+++ b/app/components/developmentToolsComponent/markDownToHTMLComponent.tsx
@@ -5,6 +5,7 @@ import { Editor } from "@monaco-editor/react";
 import { marked } from "marked"; // Import marked.js for Markdown to HTML conversion
 import { toast, ToastContainer } from "react-toastify"; // Import toast and ToastContainer
 import "react-toastify/dist/ReactToastify.css"; // Import toast styles
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const MarkDownToHtmlComponent = () => {
   const [markdownInput, setMarkdownInput] = useState("");
@@ -34,6 +35,12 @@ const MarkDownToHtmlComponent = () => {
     const html: any = marked(markdownWithClassesRestored);
     setHtmlOutput(html);
     toast.success("Conversion successful!"); // Display success toast
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Markdown To HTML",
+      tool_action: "Convert",
+    });
   };
 
   const handleClear = () => {
diff --git a/app/components/developmentToolsComponent/markdownFormatter.tsx b/app/components/developmentToolsComponent/markdownFormatter.tsx
index 8b6d5e5..dc71e8b 100644
--- a/app/components/developmentToolsComponent/markdownFormatter.tsx
+++ b/app/components/developmentToolsComponent/markdownFormatter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 // Lightweight markdown formatter: trims trailing spaces, normalizes heading spaces,
 // ensures single blank lines between blocks, normalizes list/blockquote/code fences.
@@ -78,6 +79,16 @@ const MarkdownFormatter: React.FC = () => {
     );
   };
 
+  const onFormatClick = () => {
+    convert();
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Markdown Formatter",
+      tool_action: "Format",
+    });
+  };
+
   useEffect(() => {
     if (autoUpdate) convert();
   }, [
@@ -154,7 +165,7 @@ const MarkdownFormatter: React.FC = () => {
               <div className="space-y-2">
                 <div className="flex items-center justify-between">
                   <label className="font-medium">Input (Markdown)</label>
-                  <button onClick={convert} className="px-3 py-1 bg-primary hover:bg-primary/80 rounded text-sm transition-colors text-black font-bold">Format</button>
+                  <button onClick={onFormatClick} className="px-3 py-1 bg-primary hover:bg-primary/80 rounded text-sm transition-colors text-black font-bold">Format</button>
                 </div>
                 <textarea value={input} onChange={(e) => setInput(e.target.value)} placeholder="# heading\n\n- list item\n\n> quote" className="w-full h-64 p-4 bg-black/20 border border-white/20 rounded-lg text-white placeholder-gray-400 font-mono text-sm resize-none focus:outline-none focus:border-blue-500" />
               </div>
diff --git a/app/components/developmentToolsComponent/milesToKmConverter.tsx b/app/components/developmentToolsComponent/milesToKmConverter.tsx
index b611d89..f26d6de 100644
--- a/app/components/developmentToolsComponent/milesToKmConverter.tsx
+++ b/app/components/developmentToolsComponent/milesToKmConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const MI_TO_KM = 1.609344; // exact
 
@@ -31,7 +32,19 @@ const MilesToKmConverter: React.FC = () => {
 
   useEffect(() => { if (autoUpdate) convert(); }, [input, precision, autoUpdate, convert]);
 
-  const onCopy = useCallback(async () => { try { await navigator.clipboard.writeText(output); } catch (_) {} }, [output]);
+  const onCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(output);
+      if (output) {
+        trackEvent("dev_tool_used", {
+          page_type: PAGE_TYPE,
+          platform: getRuntimePlatform(),
+          tool_name: "Miles to Kilometers Converter",
+          tool_action: "Copy",
+        });
+      }
+    } catch (_) {}
+  }, [output]);
   const onDownload = useCallback(() => {
     const blob = new Blob([output], { type: "text/plain;charset=utf-8" });
     const url = URL.createObjectURL(blob);
diff --git a/app/components/developmentToolsComponent/morseCodeTranslator.tsx b/app/components/developmentToolsComponent/morseCodeTranslator.tsx
index 1fa9309..66cac29 100644
--- a/app/components/developmentToolsComponent/morseCodeTranslator.tsx
+++ b/app/components/developmentToolsComponent/morseCodeTranslator.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const Cmd = ({ children }: { children: string }) => (
   <code className="px-2 py-1 rounded bg-black/40 border border-white/10 font-mono text-xs">{children}</code>
@@ -94,6 +95,18 @@ const MorseCodeTranslator = () => {
   }, [input, mode]);
 
   const copy = async (text: string) => { try { await navigator.clipboard.writeText(text); } catch {} };
+  const copyOutput = async () => {
+    if (!output) return;
+    try {
+      await navigator.clipboard.writeText(output);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Morse Code Translator",
+        tool_action: "Copy",
+      });
+    } catch {}
+  };
   const clear = () => setInput("");
   const swap = () => {
     setMode((m) => (m === "text-to-morse" ? "morse-to-text" : "text-to-morse"));
@@ -182,7 +195,7 @@ const MorseCodeTranslator = () => {
                           </button>
                         </>
                       )}
-                      <button onClick={() => copy(output)} className="px-3 py-1 bg-primary text-black rounded text-sm font-bold hover:bg-primary/80">Copy</button>
+                      <button onClick={copyOutput} className="px-3 py-1 bg-primary text-black rounded text-sm font-bold hover:bg-primary/80">Copy</button>
                     </div>
                   </div>
                   <textarea value={output} readOnly className="w-full h-52 p-3 bg-black/40 border border-white/10 rounded font-mono text-sm" placeholder="Output will appear here..." />
diff --git a/app/components/developmentToolsComponent/numbersToWordsConverter.tsx b/app/components/developmentToolsComponent/numbersToWordsConverter.tsx
index 544e49c..d603f3e 100644
--- a/app/components/developmentToolsComponent/numbersToWordsConverter.tsx
+++ b/app/components/developmentToolsComponent/numbersToWordsConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type ScaleTuple = [value: number, name: string];
 
@@ -184,6 +185,14 @@ const NumbersToWordsConverter: React.FC = () => {
       capitalize,
     });
     setOutput(converted);
+    if (input.trim()) {
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Numbers to Words Converter",
+        tool_action: "Convert",
+      });
+    }
   };
 
   const onCopy = async () => {
diff --git a/app/components/developmentToolsComponent/octalToBinaryConverter.tsx b/app/components/developmentToolsComponent/octalToBinaryConverter.tsx
index 774c9a2..1e5b5ff 100644
--- a/app/components/developmentToolsComponent/octalToBinaryConverter.tsx
+++ b/app/components/developmentToolsComponent/octalToBinaryConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 function parseOctal(input: string): string | null {
   const clean = input.replace(/\s+/g, "");
@@ -38,7 +39,19 @@ const OctalToBinaryConverter: React.FC = () => {
 
   useEffect(() => { if (autoUpdate) convert(); }, [input, groupSize, autoUpdate, convert]);
 
-  const onCopy = useCallback(async () => { try { await navigator.clipboard.writeText(output); } catch (_) {} }, [output]);
+  const onCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(output);
+      if (output) {
+        trackEvent("dev_tool_used", {
+          page_type: PAGE_TYPE,
+          platform: getRuntimePlatform(),
+          tool_name: "Octal to Binary Converter",
+          tool_action: "Copy",
+        });
+      }
+    } catch (_) {}
+  }, [output]);
   const onDownload = useCallback(() => {
     const blob = new Blob([output], { type: "text/plain;charset=utf-8" });
     const url = URL.createObjectURL(blob);
diff --git a/app/components/developmentToolsComponent/octalToDecimalConverter.tsx b/app/components/developmentToolsComponent/octalToDecimalConverter.tsx
index c979d1f..5c71ad9 100644
--- a/app/components/developmentToolsComponent/octalToDecimalConverter.tsx
+++ b/app/components/developmentToolsComponent/octalToDecimalConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 function parseOctal(input: string): number | null {
   const clean = input.trim();
@@ -27,6 +28,18 @@ const OctalToDecimalConverter: React.FC = () => {
 
   useEffect(() => { if (autoUpdate) convert(); }, [input, autoUpdate, convert]);
 
+  const onConvertClick = useCallback(() => {
+    convert();
+    if (parseOctal(input) !== null) {
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Octal to Decimal Converter",
+        tool_action: "Convert",
+      });
+    }
+  }, [convert, input]);
+
   const onCopy = useCallback(async () => { try { await navigator.clipboard.writeText(output); } catch (_) {} }, [output]);
   const onDownload = useCallback(() => {
     const blob = new Blob([output], { type: "text/plain;charset=utf-8" });
@@ -57,7 +70,7 @@ const OctalToDecimalConverter: React.FC = () => {
                   <input type="checkbox" className="accent-primary" checked={autoUpdate} onChange={(e) => setAutoUpdate(e.target.checked)} />
                   Auto-update
                 </label>
-                <button onClick={convert} className="border border-black/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold">Convert</button>
+                <button onClick={onConvertClick} className="border border-black/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold">Convert</button>
               </div>
               <div className="flex items-center gap-2">
                 <button onClick={onCopy} className="border border-white/30 px-3 py-1 rounded text-sm bg-primary hover:bg-primary/90 text-black font-bold">Copy</button>
diff --git a/app/components/developmentToolsComponent/phoneNumberExtractor.tsx b/app/components/developmentToolsComponent/phoneNumberExtractor.tsx
index 5dfc420..fc04d2b 100644
--- a/app/components/developmentToolsComponent/phoneNumberExtractor.tsx
+++ b/app/components/developmentToolsComponent/phoneNumberExtractor.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Format = "raw" | "digits" | "+intl";
 type Mode = "phone" | "number";
@@ -41,6 +42,12 @@ const PhoneNumberExtractor: React.FC = () => {
     const found = mode === "phone" ? base.map((p) => normalize(p, format)) : base;
     const list = uniqueOnly ? Array.from(new Set(found)) : found;
     setOutput(list.filter((v) => v.length > 0));
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Phone Number Extractor",
+      tool_action: "Extract",
+    });
   };
 
   const onCopy = async () => { try { await navigator.clipboard.writeText(output.join("\n")); } catch {} };
diff --git a/app/components/developmentToolsComponent/phpFormatter.tsx b/app/components/developmentToolsComponent/phpFormatter.tsx
index 9aef0e8..6f02ab3 100644
--- a/app/components/developmentToolsComponent/phpFormatter.tsx
+++ b/app/components/developmentToolsComponent/phpFormatter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type IndentSize = 2 | 4;
 
@@ -178,7 +179,20 @@ const PHPFormatter: React.FC = () => {
                   <input type="checkbox" className="accent-primary" checked={autoUpdate} onChange={(e) => setAutoUpdate(e.target.checked)} />
                   Auto-update
                 </label>
-                <button onClick={convert} className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm">Beautify</button>
+                <button
+                  onClick={() => {
+                    convert();
+                    trackEvent("dev_tool_used", {
+                      page_type: PAGE_TYPE,
+                      platform: getRuntimePlatform(),
+                      tool_name: "PHP Formatter",
+                      tool_action: "Beautify",
+                    });
+                  }}
+                  className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm"
+                >
+                  Beautify
+                </button>
               </div>
             </div>
 
diff --git a/app/components/developmentToolsComponent/placeholderImageGenerator.tsx b/app/components/developmentToolsComponent/placeholderImageGenerator.tsx
index 1b8f979..4b55015 100644
--- a/app/components/developmentToolsComponent/placeholderImageGenerator.tsx
+++ b/app/components/developmentToolsComponent/placeholderImageGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type ImageFormat = "jpg" | "png" | "webp" | "gif";
 
@@ -95,6 +96,12 @@ const PlaceholderImageGenerator = () => {
 
     const url = generatePlaceholderUrl();
     setOutput(url);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Placeholder Image Generator",
+      tool_action: "Generate",
+    });
   };
 
   const copyUrl = async () => {
diff --git a/app/components/developmentToolsComponent/pxToRemConverter.tsx b/app/components/developmentToolsComponent/pxToRemConverter.tsx
index 6d1f38b..6aee027 100644
--- a/app/components/developmentToolsComponent/pxToRemConverter.tsx
+++ b/app/components/developmentToolsComponent/pxToRemConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useEffect, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type ActiveField = "em" | "px" | "rem" | "percent" | "pt";
 
@@ -52,6 +53,16 @@ const PxToRemConverter = () => {
     setBasePx(!isNaN(num) && num > 0 ? num : 16);
   };
 
+  const handleConvertClick = () => {
+    recalcFrom(active, basePx, active === "px" ? px : active === "em" ? em : active === "rem" ? rem : active === "percent" ? percent : pt);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "PX to REM Converter",
+      tool_action: "Convert",
+    });
+  };
+
   const reset = () => {
     setBasePx(16);
     setEm(1);
@@ -156,7 +167,7 @@ const PxToRemConverter = () => {
                 <div className="flex items-center gap-4">
                   <button
                     type="button"
-                    onClick={() => recalcFrom(active, basePx, active === "px" ? px : active === "em" ? em : active === "rem" ? rem : active === "percent" ? percent : pt)}
+                    onClick={handleConvertClick}
                     className={`bg-white text-black font-bold py-3 px-6 rounded-lg`}
                   >
                     Convert
diff --git a/app/components/developmentToolsComponent/pythonFormatter.tsx b/app/components/developmentToolsComponent/pythonFormatter.tsx
index 05c92b0..d68aa1c 100644
--- a/app/components/developmentToolsComponent/pythonFormatter.tsx
+++ b/app/components/developmentToolsComponent/pythonFormatter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type IndentSize = 2 | 4;
 
@@ -179,7 +180,20 @@ const PythonFormatter: React.FC = () => {
                   <input type="checkbox" className="accent-primary" checked={autoUpdate} onChange={(e) => setAutoUpdate(e.target.checked)} />
                   Auto-update
                 </label>
-                <button onClick={convert} className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm">Beautify</button>
+                <button
+                  onClick={() => {
+                    convert();
+                    trackEvent("dev_tool_used", {
+                      page_type: PAGE_TYPE,
+                      platform: getRuntimePlatform(),
+                      tool_name: "Python Formatter",
+                      tool_action: "Beautify",
+                    });
+                  }}
+                  className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm"
+                >
+                  Beautify
+                </button>
               </div>
             </div>
 
diff --git a/app/components/developmentToolsComponent/qrCodeGenerator.tsx b/app/components/developmentToolsComponent/qrCodeGenerator.tsx
index 6489bdd..fc23060 100644
--- a/app/components/developmentToolsComponent/qrCodeGenerator.tsx
+++ b/app/components/developmentToolsComponent/qrCodeGenerator.tsx
@@ -3,6 +3,7 @@ import React, { useState, useRef } from "react";
 import { QRCodeCanvas } from "qrcode.react";
 import CopyIcon from "../theme/Icon/copyIcon";
 import { CheckIcon } from "../theme/Icon/checkIcon";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const QRCodeGenerator = () => {
   const [inputText, setInputText] = useState("Hello, World!");
@@ -42,6 +43,12 @@ const QRCodeGenerator = () => {
       link.href = canvas.toDataURL("image/png");
       link.click();
       setIsGenerating(false);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "QR Code Generator",
+        tool_action: "Download",
+      });
     }, 500);
   };
 
diff --git a/app/components/developmentToolsComponent/randomAddressGenerator.tsx b/app/components/developmentToolsComponent/randomAddressGenerator.tsx
index 3a14a5e..06df8ee 100644
--- a/app/components/developmentToolsComponent/randomAddressGenerator.tsx
+++ b/app/components/developmentToolsComponent/randomAddressGenerator.tsx
@@ -3,6 +3,7 @@ import React, { useMemo, useState } from "react";
 import ReloadIcon from "../theme/Icon/reload";
 import CopyIcon from "../theme/Icon/copyIcon";
 import { CheckIcon } from "../theme/Icon/checkIcon";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type SupportedCountry = "US" | "UK" | "CA" | "AU" | "IN";
 
@@ -127,6 +128,12 @@ const RandomAddressGenerator: React.FC = () => {
     const a = generateOne();
     const full = `${a.buildingNumber} ${a.streetName} ${a.streetType}, ${a.city}, ${a.state} ${a.postalCode}, ${a.country}`;
     setAddresses([full]);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Random Address Generator",
+      tool_action: "Generate",
+    });
   };
 
   const copySingle = async (text: string, index: number) => {
diff --git a/app/components/developmentToolsComponent/randomCSVGenerator.tsx b/app/components/developmentToolsComponent/randomCSVGenerator.tsx
index a493681..d223364 100644
--- a/app/components/developmentToolsComponent/randomCSVGenerator.tsx
+++ b/app/components/developmentToolsComponent/randomCSVGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type ColumnType =
   | "string"
@@ -211,6 +212,16 @@ const RandomCSVGenerator = () => {
   const updateColumn = (id: string, patch: Partial<Column>) =>
     setColumns((cols) => cols.map((c) => (c.id === id ? { ...c, ...patch } : c)));
 
+  const handleRegenerate = () => {
+    setRegen((n) => n + 1);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Random CSV Generator",
+      tool_action: "Regenerate",
+    });
+  };
+
   return (
     <section>
       <div className="md:mt-8 mt-4">
@@ -309,7 +320,7 @@ const RandomCSVGenerator = () => {
                     <div className="flex items-center gap-3 mt-4 flex-wrap">
                       <button
                         type="button"
-                        onClick={() => setRegen((n) => n + 1)}
+                        onClick={handleRegenerate}
                         className="px-4 py-2 bg-primary hover:bg-primary text-black rounded-lg text-sm font-bold"
                       >
                         Regenerate
diff --git a/app/components/developmentToolsComponent/randomCharacterGenerator.tsx b/app/components/developmentToolsComponent/randomCharacterGenerator.tsx
index a5aa879..04bebbf 100644
--- a/app/components/developmentToolsComponent/randomCharacterGenerator.tsx
+++ b/app/components/developmentToolsComponent/randomCharacterGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type CharacterType = "letters" | "numbers" | "symbols" | "mixed" | "custom";
 type CaseType = "lowercase" | "uppercase" | "mixed" | "title";
@@ -89,6 +90,12 @@ const RandomCharacterGenerator = () => {
     if (randomChar) {
       const result = applyCase(randomChar, caseType);
       setOutput(result);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Random Character Generator",
+        tool_action: "Generate",
+      });
     } else {
       setError("No characters available after exclusions");
     }
diff --git a/app/components/developmentToolsComponent/randomClockTimeGenerator.tsx b/app/components/developmentToolsComponent/randomClockTimeGenerator.tsx
index 1859703..0dcf995 100644
--- a/app/components/developmentToolsComponent/randomClockTimeGenerator.tsx
+++ b/app/components/developmentToolsComponent/randomClockTimeGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Separator = "newline" | "comma" | "space";
 
@@ -37,6 +38,12 @@ const RandomClockTimeGenerator = () => {
     const items: string[] = [];
     for (let i = 0; i < n; i++) items.push(randomTime());
     setOutput(items.join("\n"));
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Random Time Generator",
+      tool_action: "Generate",
+    });
   };
 
   const clearAll = () => setOutput("");
diff --git a/app/components/developmentToolsComponent/randomColorGenerator.tsx b/app/components/developmentToolsComponent/randomColorGenerator.tsx
index 5e80f62..7cf3ad7 100644
--- a/app/components/developmentToolsComponent/randomColorGenerator.tsx
+++ b/app/components/developmentToolsComponent/randomColorGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type ColorFormat = "hex" | "rgb" | "hsl" | "all";
 type ColorType = "any" | "bright" | "pastel" | "dark" | "monochrome";
@@ -195,6 +196,12 @@ const RandomColorGenerator = () => {
 
     const result = colors.join(separatorChar);
     setOutput(result);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Random Color Generator",
+      tool_action: "Generate",
+    });
   };
 
   const clearAll = () => {
diff --git a/app/components/developmentToolsComponent/randomDateGenerator.tsx b/app/components/developmentToolsComponent/randomDateGenerator.tsx
index bdc8ef8..cd835c0 100644
--- a/app/components/developmentToolsComponent/randomDateGenerator.tsx
+++ b/app/components/developmentToolsComponent/randomDateGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useState, useRef } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type OutputFormat = "iso" | "locale" | "unix";
 
@@ -70,6 +71,12 @@ const RandomDateGenerator = () => {
       results.push(s);
     }
     setOutput(results.join("\n"));
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Random Date Generator",
+      tool_action: "Generate",
+    });
   };
 
   const clearAll = () => {
diff --git a/app/components/developmentToolsComponent/randomDecimalNumberGenerator.tsx b/app/components/developmentToolsComponent/randomDecimalNumberGenerator.tsx
index 744fa10..6064cbc 100644
--- a/app/components/developmentToolsComponent/randomDecimalNumberGenerator.tsx
+++ b/app/components/developmentToolsComponent/randomDecimalNumberGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Separator = "newline" | "comma" | "space" | "tab";
 type DecimalFormat = "standard" | "scientific" | "engineering";
@@ -119,8 +120,14 @@ const RandomDecimalNumberGenerator = () => {
     // Format and join numbers
     const formattedNumbers = numbers.map((num) => formatDecimal(num, decimalFormat, decimalPlaces));
     const result = formattedNumbers.join(separatorChar);
-    
+
     setOutput(result);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Random Decimal Number Generator",
+      tool_action: "Generate",
+    });
   };
 
   const clearAll = () => {
diff --git a/app/components/developmentToolsComponent/randomGUIDGenerator.tsx b/app/components/developmentToolsComponent/randomGUIDGenerator.tsx
index 4d0a5f5..fbf85d6 100644
--- a/app/components/developmentToolsComponent/randomGUIDGenerator.tsx
+++ b/app/components/developmentToolsComponent/randomGUIDGenerator.tsx
@@ -5,6 +5,7 @@ import { useForm } from "react-hook-form";
 import CopyIcon from "../theme/Icon/copyIcon";
 import ReloadIcon from "../theme/Icon/reload";
 import { CheckIcon } from "../theme/Icon/checkIcon";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 
 const RandomGUIDGenerator = () => {
@@ -45,6 +46,12 @@ const RandomGUIDGenerator = () => {
       newGUIDs.push(formatGUID(generateGUID()));
     }
     setGeneratedGUIDs(newGUIDs);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Random GUID Generator",
+      tool_action: "Generate",
+    });
   };
 
   // Copy to clipboard
diff --git a/app/components/developmentToolsComponent/randomIPGenerator.tsx b/app/components/developmentToolsComponent/randomIPGenerator.tsx
index b2724fb..adaf16b 100644
--- a/app/components/developmentToolsComponent/randomIPGenerator.tsx
+++ b/app/components/developmentToolsComponent/randomIPGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const isPrivateIPv4 = (octets: number[]) => {
   const [a, b] = octets;
@@ -69,7 +70,15 @@ const RandomIPGenerator = () => {
     return { out, text: out.join(delim) };
   }, [version, count, uniqueOnly, includePrivate, includeReserved, delimiter]);
 
-  const copy = () => navigator.clipboard.writeText(list.text);
+  const copy = () => {
+    navigator.clipboard.writeText(list.text);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Random IP Generator",
+      tool_action: "Copy",
+    });
+  };
   const download = () => {
     const blob = new Blob([list.text], { type: "text/plain" });
     const url = URL.createObjectURL(blob);
diff --git a/app/components/developmentToolsComponent/randomJsonDataGenerator.tsx b/app/components/developmentToolsComponent/randomJsonDataGenerator.tsx
index b56fe14..48f1b13 100644
--- a/app/components/developmentToolsComponent/randomJsonDataGenerator.tsx
+++ b/app/components/developmentToolsComponent/randomJsonDataGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type FieldType =
   | "string"
@@ -217,6 +218,12 @@ const RandomJsonDataGenerator = () => {
       result.push(obj);
     }
     setOutput(JSON.stringify(result, null, pretty ? 2 : 0));
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "JSON Generator",
+      tool_action: "Generate",
+    });
   };
 
   const copyOutput = async () => {
diff --git a/app/components/developmentToolsComponent/randomNumberGenerator.tsx b/app/components/developmentToolsComponent/randomNumberGenerator.tsx
index a1cd765..ff0d942 100644
--- a/app/components/developmentToolsComponent/randomNumberGenerator.tsx
+++ b/app/components/developmentToolsComponent/randomNumberGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type NumberType = "integer" | "decimal" | "percentage" | "currency";
 type Separator = "newline" | "comma" | "space" | "tab";
@@ -155,6 +156,12 @@ const RandomNumberGenerator = () => {
     const result = formattedNumbers.join(separatorChar);
 
     setOutput(result);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Random Number Generator",
+      tool_action: "Generate",
+    });
   };
 
   const clearAll = () => {
diff --git a/app/components/developmentToolsComponent/randomParagraphGenerator.tsx b/app/components/developmentToolsComponent/randomParagraphGenerator.tsx
index 30a011f..e3735ab 100644
--- a/app/components/developmentToolsComponent/randomParagraphGenerator.tsx
+++ b/app/components/developmentToolsComponent/randomParagraphGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useState, useRef, useCallback } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const CONSONANTS = "bcdfghjklmnpqrstvwxyz".split("");
 const VOWELS = "aeiou".split("");
@@ -92,6 +93,12 @@ const RandomParagraphGenerator = () => {
     if (!textToCopy) return;
     try {
       await navigator.clipboard.writeText(textToCopy);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Random Paragraph Generator",
+        tool_action: "Copy",
+      });
     } catch (_) {}
   };
 
diff --git a/app/components/developmentToolsComponent/randomPasswardGenerator.tsx b/app/components/developmentToolsComponent/randomPasswardGenerator.tsx
index 154397d..1b32506 100644
--- a/app/components/developmentToolsComponent/randomPasswardGenerator.tsx
+++ b/app/components/developmentToolsComponent/randomPasswardGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Separator = "newline" | "comma" | "space";
 
@@ -63,6 +64,12 @@ const RandomPasswardGenerator = () => {
     const items: string[] = [];
     for (let i = 0; i < n; i++) items.push(buildOne());
     setOutput(items.join("\n"));
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "undefined",
+      tool_action: "Generate",
+    });
   };
 
   const clearAll = () => setOutput("");
diff --git a/app/components/developmentToolsComponent/randomSentanceGenerator.tsx b/app/components/developmentToolsComponent/randomSentanceGenerator.tsx
index 97427b1..30caa2e 100644
--- a/app/components/developmentToolsComponent/randomSentanceGenerator.tsx
+++ b/app/components/developmentToolsComponent/randomSentanceGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useState, useRef, useCallback } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Separator = "newline" | "paragraph";
 
@@ -63,6 +64,12 @@ const RandomSentanceGenerator = () => {
     const sentences: string[] = [];
     for (let i = 0; i < n; i++) sentences.push(randomSentence(minW, maxW));
     setOutput(sentences.join("\n"));
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "AI Sentence Generator",
+      tool_action: "Generate",
+    });
   };
 
   const clearAll = () => {
@@ -139,6 +146,12 @@ const RandomSentanceGenerator = () => {
       }
       
       setAiOutput(aiText);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "AI Sentence Generator",
+        tool_action: "Generate",
+      });
     } catch (err: any) {
       if (err.name === 'AbortError') {
         setErrorMessage("Request cancelled");
diff --git a/app/components/developmentToolsComponent/randomStringGenerator.tsx b/app/components/developmentToolsComponent/randomStringGenerator.tsx
index ee7f94d..217d621 100644
--- a/app/components/developmentToolsComponent/randomStringGenerator.tsx
+++ b/app/components/developmentToolsComponent/randomStringGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Separator = "newline" | "comma" | "space";
 
@@ -49,6 +50,12 @@ const RandomStringGenerator = () => {
     const items: string[] = [];
     for (let i = 0; i < n; i++) items.push(buildOne());
     setOutput(items.join("\n"));
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Random String Generator",
+      tool_action: "Generate",
+    });
   };
 
   const clearAll = () => setOutput("");
diff --git a/app/components/developmentToolsComponent/randomTextFromRegEX.tsx b/app/components/developmentToolsComponent/randomTextFromRegEX.tsx
index 396547b..3c74f1c 100644
--- a/app/components/developmentToolsComponent/randomTextFromRegEX.tsx
+++ b/app/components/developmentToolsComponent/randomTextFromRegEX.tsx
@@ -5,6 +5,7 @@ import { useForm } from "react-hook-form";
 import CopyIcon from "../theme/Icon/copyIcon";
 import ReloadIcon from "../theme/Icon/reload";
 import { CheckIcon } from "../theme/Icon/checkIcon";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const RandomTextFromRegEX = () => {
   const { register, formState, setValue, watch } = useForm<any>({});
@@ -166,6 +167,12 @@ const RandomTextFromRegEX = () => {
         }
       }
       setGeneratedTexts(newTexts);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Random Text From Regex",
+        tool_action: "Generate",
+      });
     } catch (error) {
       setPatternError("Error generating text from pattern");
     }
diff --git a/app/components/developmentToolsComponent/randomUsernameGenerator.tsx b/app/components/developmentToolsComponent/randomUsernameGenerator.tsx
index b3fc718..e055961 100644
--- a/app/components/developmentToolsComponent/randomUsernameGenerator.tsx
+++ b/app/components/developmentToolsComponent/randomUsernameGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const LETTERS = "abcdefghijklmnopqrstuvwxyz";
 const NUMBERS = "0123456789";
@@ -225,6 +226,12 @@ const RandomUsernameGenerator = () => {
     const n = Math.min(200, Math.max(1, count));
     for (let i = 0; i < n; i++) list.push(buildOne());
     setOutput(list.join("\n"));
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Random Username Generator",
+      tool_action: "Generate",
+    });
   };
 
   const clearAll = () => setOutput("");
diff --git a/app/components/developmentToolsComponent/randomWordGenerator.tsx b/app/components/developmentToolsComponent/randomWordGenerator.tsx
index ca39565..9f34001 100644
--- a/app/components/developmentToolsComponent/randomWordGenerator.tsx
+++ b/app/components/developmentToolsComponent/randomWordGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Separator = "newline" | "comma" | "space";
 
@@ -60,6 +61,12 @@ const RandomWordGenerator = () => {
       items.push(randomWord(len));
     }
     setOutput(items.join("\n"));
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Random Word Generator",
+      tool_action: "Generate",
+    });
   };
 
   const clearAll = () => setOutput("");
@@ -108,6 +115,12 @@ const RandomWordGenerator = () => {
         .filter(Boolean);
 
       setOutput(words.join("\n"));
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Random Word Generator",
+        tool_action: "Generate",
+      });
     } catch (error) {
       setError("Failed to generate AI words. Please try again.");
       console.error(error);
diff --git a/app/components/developmentToolsComponent/randomXMLGenerator.tsx b/app/components/developmentToolsComponent/randomXMLGenerator.tsx
index a4b1aa0..eb0af63 100644
--- a/app/components/developmentToolsComponent/randomXMLGenerator.tsx
+++ b/app/components/developmentToolsComponent/randomXMLGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type FieldType = "string" | "number" | "boolean" | "date" | "uuid" | "email";
 
@@ -72,6 +73,12 @@ const RandomXMLGenerator = () => {
     }
     const xml = items.join("\n\n");
     setOutput(pretty ? formatXML(xml) : xml);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Random XML Generator",
+      tool_action: "Generate",
+    });
   };
 
   const copyOutput = async () => {
diff --git a/app/components/developmentToolsComponent/remToPxConverter.tsx b/app/components/developmentToolsComponent/remToPxConverter.tsx
index 1c78a72..9256ded 100644
--- a/app/components/developmentToolsComponent/remToPxConverter.tsx
+++ b/app/components/developmentToolsComponent/remToPxConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useEffect, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type ActiveField = "rem" | "px" | "em" | "percent" | "pt";
 
@@ -52,6 +53,16 @@ const RemToPxConverter = () => {
     setBasePx(!isNaN(num) && num > 0 ? num : 16);
   };
 
+  const handleConvert = () => {
+    recalcFrom(active, basePx, active === "px" ? px : active === "rem" ? rem : active === "em" ? em : active === "percent" ? percent : pt);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "REM to PX Converter",
+      tool_action: "Convert",
+    });
+  };
+
   const reset = () => {
     setBasePx(16);
     setRem(1);
@@ -156,7 +167,7 @@ const RemToPxConverter = () => {
                 <div className="flex items-center gap-4">
                   <button
                     type="button"
-                    onClick={() => recalcFrom(active, basePx, active === "px" ? px : active === "rem" ? rem : active === "em" ? em : active === "percent" ? percent : pt)}
+                    onClick={handleConvert}
                     className={`bg-white text-black font-bold py-3 px-6 rounded-lg`}
                   >
                     Convert
diff --git a/app/components/developmentToolsComponent/removeSpaces.tsx b/app/components/developmentToolsComponent/removeSpaces.tsx
index 921bc26..ea380b4 100644
--- a/app/components/developmentToolsComponent/removeSpaces.tsx
+++ b/app/components/developmentToolsComponent/removeSpaces.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const removeSpacesConvert = (
   text: string,
@@ -126,7 +127,7 @@ const RemoveSpaces: React.FC = () => {
               <div className="space-y-2">
                 <div className="flex items-center justify-between">
                   <label className="font-medium">Input</label>
-                  <button onClick={doConvert} className="px-3 py-1 bg-primary hover:bg-primary/80 rounded text-sm transition-colors text-black font-bold">Convert</button>
+                  <button onClick={() => { doConvert(); trackEvent("dev_tool_used", { page_type: PAGE_TYPE, platform: getRuntimePlatform(), tool_name: "Remove Spaces from Text", tool_action: "Convert" }); }} className="px-3 py-1 bg-primary hover:bg-primary/80 rounded text-sm transition-colors text-black font-bold">Convert</button>
                 </div>
                 <textarea value={input} onChange={(e) => setInput(e.target.value)} placeholder="Paste or type text here..." className="w-full h-64 p-4 bg-black/20 border border-white/20 rounded-lg text-white placeholder-gray-400 font-mono text-sm resize-none focus:outline-none focus:border-blue-500" />
               </div>
diff --git a/app/components/developmentToolsComponent/reverseTextGenerator.tsx b/app/components/developmentToolsComponent/reverseTextGenerator.tsx
index f8bc473..a67e903 100644
--- a/app/components/developmentToolsComponent/reverseTextGenerator.tsx
+++ b/app/components/developmentToolsComponent/reverseTextGenerator.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Mode = "characters" | "words" | "lines";
 
@@ -46,7 +47,15 @@ const ReverseTextGenerator: React.FC = () => {
     sentences: (input.match(/[^.!?]+[.!?]+/g) || (input.trim() ? [input] : [])).length,
   }), [input]);
 
-  const onReverse = () => setOutput(reverseByMode(input, mode));
+  const onReverse = () => {
+    setOutput(reverseByMode(input, mode));
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Reverse Text Generator",
+      tool_action: "Reverse Text",
+    });
+  };
   const onCopy = async () => { try { await navigator.clipboard.writeText(output); } catch {} };
   const onDownload = () => {
     const blob = new Blob([output], { type: "text/plain;charset=utf-8" });
@@ -94,11 +103,11 @@ const ReverseTextGenerator: React.FC = () => {
             {/* Quick Actions */}
             <div className="grid sm:grid-cols-2 md:grid-cols-3 gap-4">
               <button onClick={onReverse} className="px-4 py-2 border border-white/20 rounded-md hover:bg-white/5 text-sm">⇄ Reverse Text</button>
-              <button onClick={() => setOutput(mirrorWordLetters(input))} className="px-4 py-2 border border-white/20 rounded-md hover:bg-white/5 text-sm">⟫⟫ Mirrored Text</button>
-              <button onClick={() => setOutput(swapCase(input))} className="px-4 py-2 border border-white/20 rounded-md hover:bg-white/5 text-sm">⇄ Letter Flip</button>
-              <button onClick={() => setOutput(input.split(/\s+/).reverse().join(" "))} className="px-4 py-2 border border-white/20 rounded-md hover:bg-white/5 text-sm">⇆ Reverse Wording</button>
-              <button onClick={() => setOutput(toMirroredLetters(input))} className="px-4 py-2 border border-white/20 rounded-md hover:bg-white/5 text-sm">🄂 Mirrored Letters</button>
-              <button onClick={() => setOutput(toUpsideDown(input))} className="px-4 py-2 border border-white/20 rounded-md hover:bg-white/5 text-sm">⇵ Upside Down</button>
+              <button onClick={() => { setOutput(mirrorWordLetters(input)); trackEvent("dev_tool_used", { page_type: PAGE_TYPE, platform: getRuntimePlatform(), tool_name: "Reverse Text Generator", tool_action: "Mirrored Text" }); }} className="px-4 py-2 border border-white/20 rounded-md hover:bg-white/5 text-sm">⟫⟫ Mirrored Text</button>
+              <button onClick={() => { setOutput(swapCase(input)); trackEvent("dev_tool_used", { page_type: PAGE_TYPE, platform: getRuntimePlatform(), tool_name: "Reverse Text Generator", tool_action: "Letter Flip" }); }} className="px-4 py-2 border border-white/20 rounded-md hover:bg-white/5 text-sm">⇄ Letter Flip</button>
+              <button onClick={() => { setOutput(input.split(/\s+/).reverse().join(" ")); trackEvent("dev_tool_used", { page_type: PAGE_TYPE, platform: getRuntimePlatform(), tool_name: "Reverse Text Generator", tool_action: "Reverse Wording" }); }} className="px-4 py-2 border border-white/20 rounded-md hover:bg-white/5 text-sm">⇆ Reverse Wording</button>
+              <button onClick={() => { setOutput(toMirroredLetters(input)); trackEvent("dev_tool_used", { page_type: PAGE_TYPE, platform: getRuntimePlatform(), tool_name: "Reverse Text Generator", tool_action: "Mirrored Letters" }); }} className="px-4 py-2 border border-white/20 rounded-md hover:bg-white/5 text-sm">🄂 Mirrored Letters</button>
+              <button onClick={() => { setOutput(toUpsideDown(input)); trackEvent("dev_tool_used", { page_type: PAGE_TYPE, platform: getRuntimePlatform(), tool_name: "Reverse Text Generator", tool_action: "Upside Down" }); }} className="px-4 py-2 border border-white/20 rounded-md hover:bg-white/5 text-sm">⇵ Upside Down</button>
             </div>
 
             {/* Output */}
diff --git a/app/components/developmentToolsComponent/rgbToCmykConverter.tsx b/app/components/developmentToolsComponent/rgbToCmykConverter.tsx
index 1958c6b..31fc3ea 100644
--- a/app/components/developmentToolsComponent/rgbToCmykConverter.tsx
+++ b/app/components/developmentToolsComponent/rgbToCmykConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type IndentSize = 2 | 4;
 // Options removed with simplified UI
@@ -59,7 +60,15 @@ const RgbToCmykConverter: React.FC = () => {
     try { await navigator.clipboard.writeText(`rgb(${r}, ${g}, ${b})`); } catch (_) {}
   }, [r, g, b]);
   const copyCmyk = useCallback(async () => {
-    try { await navigator.clipboard.writeText(`cmyk(${cOut}%, ${mOut}%, ${yOut}%, ${kOut}%)`); } catch (_) {}
+    try {
+      await navigator.clipboard.writeText(`cmyk(${cOut}%, ${mOut}%, ${yOut}%, ${kOut}%)`);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "RGB to CMYK Converter",
+        tool_action: "Copy",
+      });
+    } catch (_) {}
   }, [cOut, mOut, yOut, kOut]);
 
   return (
diff --git a/app/components/developmentToolsComponent/rgbToHexConverter.tsx b/app/components/developmentToolsComponent/rgbToHexConverter.tsx
index aef2958..2b2d766 100644
--- a/app/components/developmentToolsComponent/rgbToHexConverter.tsx
+++ b/app/components/developmentToolsComponent/rgbToHexConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useCallback, useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type ConvertOptions = {
   includeHash: boolean;
@@ -146,6 +147,12 @@ const RgbToHexConverter: React.FC = () => {
     try {
       setError("");
       setOutput(convertRgbToHex(input, options));
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "RGB to Hex Converter",
+        tool_action: "Convert",
+      });
     } catch (_e: unknown) {
       setError("Failed to convert. Please check your input.");
     }
diff --git a/app/components/developmentToolsComponent/rot13EncoderDecoderComponent.tsx b/app/components/developmentToolsComponent/rot13EncoderDecoderComponent.tsx
index 58f1402..a81042d 100644
--- a/app/components/developmentToolsComponent/rot13EncoderDecoderComponent.tsx
+++ b/app/components/developmentToolsComponent/rot13EncoderDecoderComponent.tsx
@@ -2,6 +2,7 @@
 
 import React, { useCallback, useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 function rot13Transform(text: string): string {
   return text.replace(/[A-Za-z]/g, (char) => {
@@ -25,7 +26,15 @@ const Rot13EncoderDecoderComponent: React.FC = () => {
   }, [inputText]);
 
   const copyOutput = useCallback(async () => {
-    try { await navigator.clipboard.writeText(outputText); } catch (_) {}
+    try {
+      await navigator.clipboard.writeText(outputText);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "ROT13 Encoder/Decoder",
+        tool_action: "Copy",
+      });
+    } catch (_) {}
   }, [outputText]);
 
   return (
diff --git a/app/components/developmentToolsComponent/rotateImageTool.tsx b/app/components/developmentToolsComponent/rotateImageTool.tsx
index afc1d44..72f17dd 100644
--- a/app/components/developmentToolsComponent/rotateImageTool.tsx
+++ b/app/components/developmentToolsComponent/rotateImageTool.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useEffect, useRef, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const clamp = (value: number, min: number, max: number) => {
   return Math.min(max, Math.max(min, value));
@@ -100,6 +101,12 @@ const RotateImageTool = () => {
     const ext = downloadFormat === "jpg" ? "jpg" : "png";
     a.download = `${fileName ? fileName.replace(/\.[^.]+$/, '') + '-' : ''}rotated.${ext}`;
     a.click();
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Rotate Image Tool",
+      tool_action: "Download",
+    });
   };
 
   const clearAll = () => {
diff --git a/app/components/developmentToolsComponent/rotationCalculatorComponent.tsx b/app/components/developmentToolsComponent/rotationCalculatorComponent.tsx
index 4284f70..7801203 100644
--- a/app/components/developmentToolsComponent/rotationCalculatorComponent.tsx
+++ b/app/components/developmentToolsComponent/rotationCalculatorComponent.tsx
@@ -2,6 +2,7 @@
 
 import React, { useCallback, useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type AngleUnit = "deg" | "rad" | "turn" | "grad";
 
@@ -47,7 +48,15 @@ const RotationCalculatorComponent: React.FC = () => {
   }), [resultDeg]);
 
   const copy = useCallback(async (text: string) => {
-    try { await navigator.clipboard.writeText(text); } catch (_) {}
+    try {
+      await navigator.clipboard.writeText(text);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Rotation Calculator",
+        tool_action: "Copy",
+      });
+    } catch (_) {}
   }, []);
 
   const clear = useCallback(() => {
diff --git a/app/components/developmentToolsComponent/roundingCalculator.tsx b/app/components/developmentToolsComponent/roundingCalculator.tsx
index e4d2c3c..f39c586 100644
--- a/app/components/developmentToolsComponent/roundingCalculator.tsx
+++ b/app/components/developmentToolsComponent/roundingCalculator.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Mode =
   | "round-half-up"
@@ -225,7 +226,15 @@ const RoundingCalculator: React.FC = () => {
                     Input
                   </label>
                   <button
-                    onClick={calculate}
+                    onClick={() => {
+                      calculate();
+                      trackEvent("dev_tool_used", {
+                        page_type: PAGE_TYPE,
+                        platform: getRuntimePlatform(),
+                        tool_name: "Rounding Calculator Online",
+                        tool_action: "Calculate",
+                      });
+                    }}
                     className="px-3 py-1 bg-primary hover:bg-primary/80 rounded text-sm transition-colors text-black font-bold"
                   >
                     Calculate
diff --git a/app/components/developmentToolsComponent/scssToCssConverter.tsx b/app/components/developmentToolsComponent/scssToCssConverter.tsx
index f0fdc21..16eec84 100644
--- a/app/components/developmentToolsComponent/scssToCssConverter.tsx
+++ b/app/components/developmentToolsComponent/scssToCssConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type VarMap = Record<string, string>;
 
@@ -111,7 +112,15 @@ const ScssToCssConverter: React.FC = () => {
   const [css, setCss] = useState("");
   const fileRef = useRef<HTMLInputElement>(null);
 
-  const onConvert = () => setCss(transpileScssToCss(scss));
+  const onConvert = () => {
+    setCss(transpileScssToCss(scss));
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "SCSS to CSS Converter",
+      tool_action: "Convert",
+    });
+  };
   const onCopy = async () => { try { await navigator.clipboard.writeText(css); } catch {} };
   const onDownload = () => {
     const blob = new Blob([css], { type: "text/css;charset=utf-8" });
diff --git a/app/components/developmentToolsComponent/sentenceCounterComponent.tsx b/app/components/developmentToolsComponent/sentenceCounterComponent.tsx
index 1574f2d..fa60897 100644
--- a/app/components/developmentToolsComponent/sentenceCounterComponent.tsx
+++ b/app/components/developmentToolsComponent/sentenceCounterComponent.tsx
@@ -1,12 +1,32 @@
 "use client";
-import React, { useState } from "react";
+import React, { useEffect, useRef, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const SentenceCounterComponent = () => {
   const [text, setText] = useState("");
+  const debounceTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);
+
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+    };
+  }, []);
 
   const handleTextChange = (e: any) => {
-    setText(e.target.value);
+    const value = e.target.value;
+    setText(value);
+    if (debounceTimerRef.current) clearTimeout(debounceTimerRef.current);
+    if (value.trim()) {
+      debounceTimerRef.current = setTimeout(() => {
+        trackEvent("dev_tool_used", {
+          page_type: PAGE_TYPE,
+          platform: getRuntimePlatform(),
+          tool_name: "Sentence Counter",
+          tool_action: "Count",
+        });
+      }, 1000);
+    }
   };
 
   const countSentences = () => {
diff --git a/app/components/developmentToolsComponent/shuffleLetters.tsx b/app/components/developmentToolsComponent/shuffleLetters.tsx
index 8892844..4a4a924 100644
--- a/app/components/developmentToolsComponent/shuffleLetters.tsx
+++ b/app/components/developmentToolsComponent/shuffleLetters.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Mode = "letters-in-words" | "all-characters" | "word-order";
 
@@ -102,7 +103,16 @@ const ShuffleLetters = () => {
 
   const stats = useMemo(() => ({ lines: output ? output.split(/\r?\n/).length : 0, chars: output.length }), [output]);
 
-  const copy = () => navigator.clipboard.writeText(output);
+  const copy = () => {
+    navigator.clipboard.writeText(output).then(() => {
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Shuffle Letters",
+        tool_action: "Copy",
+      });
+    });
+  };
   const download = () => {
     const blob = new Blob([output], { type: "text/plain" });
     const url = URL.createObjectURL(blob);
diff --git a/app/components/developmentToolsComponent/shuffleTextLines.tsx b/app/components/developmentToolsComponent/shuffleTextLines.tsx
index 1e10c99..59e1abd 100644
--- a/app/components/developmentToolsComponent/shuffleTextLines.tsx
+++ b/app/components/developmentToolsComponent/shuffleTextLines.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 function createSeededRng(seed: string) {
   let h = 2166136261 >>> 0;
@@ -58,7 +59,16 @@ const ShuffleTextLines = () => {
 
   const stats = useMemo(() => ({ lines: parsed.length }), [parsed]);
 
-  const copy = () => navigator.clipboard.writeText(output);
+  const copy = () => {
+    navigator.clipboard.writeText(output).then(() => {
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Shuffle Text Lines",
+        tool_action: "Copy",
+      });
+    });
+  };
   const download = () => {
     const blob = new Blob([output], { type: "text/plain" });
     const url = URL.createObjectURL(blob);
diff --git a/app/components/developmentToolsComponent/sortNumbers.tsx b/app/components/developmentToolsComponent/sortNumbers.tsx
index e9b03e4..780e9e6 100644
--- a/app/components/developmentToolsComponent/sortNumbers.tsx
+++ b/app/components/developmentToolsComponent/sortNumbers.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Order = "asc" | "desc";
 
@@ -31,6 +32,12 @@ const SortNumbers: React.FC = () => {
     if (uniqueOnly) nums = Array.from(new Set(nums));
     nums.sort((a, b) => (order === "asc" ? a - b : b - a));
     setOutput(nums.join(delimiter === "\\n" ? "\n" : delimiter));
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Sort Numbers Online",
+      tool_action: "Sort",
+    });
   };
 
   const onCopy = async () => { try { await navigator.clipboard.writeText(output); } catch {} };
diff --git a/app/components/developmentToolsComponent/sortWords.tsx b/app/components/developmentToolsComponent/sortWords.tsx
index c7dcf8f..e1ba76c 100644
--- a/app/components/developmentToolsComponent/sortWords.tsx
+++ b/app/components/developmentToolsComponent/sortWords.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Order = "asc" | "desc";
 type Mode = "alphabetic" | "length" | "numeric";
@@ -55,6 +56,12 @@ const SortWords: React.FC = () => {
 
     const result = words.map((w) => w.raw).join(delimiter === "\\n" ? "\n" : delimiter);
     setOutput(result);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Online Alphabetizer: Sort Words Alphabetically",
+      tool_action: "Sort",
+    });
   };
 
   const onCopy = async () => { try { await navigator.clipboard.writeText(output); } catch {} };
diff --git a/app/components/developmentToolsComponent/sortingList.tsx b/app/components/developmentToolsComponent/sortingList.tsx
index a3b22c9..e2f28b0 100644
--- a/app/components/developmentToolsComponent/sortingList.tsx
+++ b/app/components/developmentToolsComponent/sortingList.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Mode = "lex" | "numeric" | "length";
 
@@ -57,7 +58,16 @@ const SortingList = () => {
 
   const stats = useMemo(() => ({ total: parsed.length, unique: new Set(parsed).size }), [parsed]);
 
-  const copy = () => navigator.clipboard.writeText(output);
+  const copy = () => {
+    navigator.clipboard.writeText(output).then(() => {
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Sorting List",
+        tool_action: "Copy",
+      });
+    });
+  };
   const download = () => {
     const blob = new Blob([output], { type: "text/plain" });
     const url = URL.createObjectURL(blob);
diff --git a/app/components/developmentToolsComponent/sqlFormatterAndBeautifier.tsx b/app/components/developmentToolsComponent/sqlFormatterAndBeautifier.tsx
index 4ee6584..8c7cc62 100644
--- a/app/components/developmentToolsComponent/sqlFormatterAndBeautifier.tsx
+++ b/app/components/developmentToolsComponent/sqlFormatterAndBeautifier.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useCallback, useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type FormatOptions = {
   indentSize: number;
@@ -153,6 +154,12 @@ const SqlFormatterAndBeautifier: React.FC = () => {
       setError("");
       const formatted = formatSqlHeuristic(input, options);
       setOutput(formatted);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "SQL Formatter and Beautifier",
+        tool_action: "Format",
+      });
     } catch (_e: unknown) {
       setError("Failed to format. Please check your input.");
     }
diff --git a/app/components/developmentToolsComponent/sqlMinify.tsx b/app/components/developmentToolsComponent/sqlMinify.tsx
index 429e5a1..9c15fdb 100644
--- a/app/components/developmentToolsComponent/sqlMinify.tsx
+++ b/app/components/developmentToolsComponent/sqlMinify.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useCallback, useMemo, useState } from 'react';
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from '@/app/libs/analytics';
 
 type MinifyOptions = {
   removeLineComments: boolean;
@@ -188,6 +189,12 @@ const SqlMinify: React.FC = () => {
       setError('');
       const result = minifySql(input, options);
       setOutput(result);
+      trackEvent('dev_tool_used', {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: 'SQL Minify',
+        tool_action: 'Minify',
+      });
     } catch (e: unknown) {
       setError('Failed to minify SQL. Please check your input.');
     }
diff --git a/app/components/developmentToolsComponent/sqlToCsvConverter.tsx b/app/components/developmentToolsComponent/sqlToCsvConverter.tsx
index db3485c..ee4126d 100644
--- a/app/components/developmentToolsComponent/sqlToCsvConverter.tsx
+++ b/app/components/developmentToolsComponent/sqlToCsvConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type ParseResult = { headers: string[]; rows: string[][] };
 
@@ -92,7 +93,16 @@ const SqlToCsvConverter = () => {
     URL.revokeObjectURL(url);
   };
 
-  const copy = async () => csv && (await navigator.clipboard.writeText(csv));
+  const copy = async () => {
+    if (!csv) return;
+    await navigator.clipboard.writeText(csv);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "SQL to CSV Converter",
+      tool_action: "Copy",
+    });
+  };
   const clearAll = () => { setSql(""); setError(""); };
 
   return (
diff --git a/app/components/developmentToolsComponent/sqlToJson.tsx b/app/components/developmentToolsComponent/sqlToJson.tsx
index 22be16b..9030a70 100644
--- a/app/components/developmentToolsComponent/sqlToJson.tsx
+++ b/app/components/developmentToolsComponent/sqlToJson.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type IndentSize = 2 | 4;
 
@@ -168,6 +169,12 @@ const SqlToJson: React.FC = () => {
     } else {
       setError("");
       setOutput(out);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "SQL to JSON",
+        tool_action: "Convert",
+      });
     }
   }, [input, options]);
 
diff --git a/app/components/developmentToolsComponent/stringDiffrenceChecker.tsx b/app/components/developmentToolsComponent/stringDiffrenceChecker.tsx
index a32bfbe..592a2cd 100644
--- a/app/components/developmentToolsComponent/stringDiffrenceChecker.tsx
+++ b/app/components/developmentToolsComponent/stringDiffrenceChecker.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type DiffOp = "equal" | "insert" | "delete";
 
@@ -182,6 +183,12 @@ const StringDiffrenceChecker = () => {
     }
     setCompareError(null);
     setCompared(true);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "String Difference Checker",
+      tool_action: "Compare",
+    });
   };
 
   return (
diff --git a/app/components/developmentToolsComponent/stripHTML.tsx b/app/components/developmentToolsComponent/stripHTML.tsx
index 549b07f..f32a661 100644
--- a/app/components/developmentToolsComponent/stripHTML.tsx
+++ b/app/components/developmentToolsComponent/stripHTML.tsx
@@ -1,5 +1,6 @@
 "use client"
 import React, { useMemo, useState } from 'react'
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from '@/app/libs/analytics'
 
 const StripHTML = () => {
   const [html, setHtml] = useState('')
@@ -36,7 +37,16 @@ const StripHTML = () => {
   }, [html, preserveLineBreaks, collapseWhitespace, removeComments, dedupeBlankLines, bulletizeListItems])
 
   const copy = async () => {
-    try { await navigator.clipboard.writeText(stripped) } catch {}
+    if (!stripped) return
+    try {
+      await navigator.clipboard.writeText(stripped)
+      trackEvent('dev_tool_used', {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: 'Strip HTML',
+        tool_action: 'Copy',
+      })
+    } catch {}
   }
   const clear = () => setHtml('')
   const paste = async () => { try { const t = await navigator.clipboard.readText(); setHtml(t) } catch {} }
diff --git a/app/components/developmentToolsComponent/svgConverter.tsx b/app/components/developmentToolsComponent/svgConverter.tsx
index c9636d4..f6e6f40 100644
--- a/app/components/developmentToolsComponent/svgConverter.tsx
+++ b/app/components/developmentToolsComponent/svgConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useRef, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const SvgConverter = () => {
   const [svgInput, setSvgInput] = useState("");
@@ -208,6 +209,12 @@ export default SvgIcon;`;
     if (!output) return;
     try {
       await navigator.clipboard.writeText(output);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "SVG to React/CSS Utility",
+        tool_action: "Copy",
+      });
     } catch (_) {}
   };
 
diff --git a/app/components/developmentToolsComponent/svgViewer.tsx b/app/components/developmentToolsComponent/svgViewer.tsx
index 5284792..ab15cbb 100644
--- a/app/components/developmentToolsComponent/svgViewer.tsx
+++ b/app/components/developmentToolsComponent/svgViewer.tsx
@@ -2,6 +2,7 @@
 
 import React, { useMemo, useRef, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const SAMPLE_SVG = `<svg width="160" height="160" viewBox="0 0 160 160" xmlns="http://www.w3.org/2000/svg">
   <defs>
@@ -148,6 +149,12 @@ const SvgViewer = () => {
   const copy = async (text: string) => {
     try {
       await navigator.clipboard.writeText(text);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "SVG Viewer Online",
+        tool_action: "Copy",
+      });
     } catch {
       // ignore
     }
diff --git a/app/components/developmentToolsComponent/textCompare.tsx b/app/components/developmentToolsComponent/textCompare.tsx
index 879a1ec..a6d4c8b 100644
--- a/app/components/developmentToolsComponent/textCompare.tsx
+++ b/app/components/developmentToolsComponent/textCompare.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type DiffOp = "equal" | "insert" | "delete";
 interface DiffChunk { op: DiffOp; text: string }
@@ -118,6 +119,12 @@ const TextCompare = () => {
   const onCompare = () => {
     if (!left.trim() || !right.trim()) { setError("Please provide both inputs."); setCompared(false); return; }
     setError(null); setCompared(true);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Text Compare",
+      tool_action: "Compare",
+    });
   };
 
   const handleUpload = (side: "left" | "right") => (e: React.ChangeEvent<HTMLInputElement>) => {
diff --git a/app/components/developmentToolsComponent/textRepeater.tsx b/app/components/developmentToolsComponent/textRepeater.tsx
index 3332499..4e9c6b0 100644
--- a/app/components/developmentToolsComponent/textRepeater.tsx
+++ b/app/components/developmentToolsComponent/textRepeater.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const TextRepeater = () => {
   const [input, setInput] = useState("");
@@ -44,7 +45,16 @@ const TextRepeater = () => {
     return { lines, chars };
   }, [output]);
 
-  const copy = () => navigator.clipboard.writeText(output);
+  const copy = () => {
+    navigator.clipboard.writeText(output).then(() => {
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Text Repeater",
+        tool_action: "Copy",
+      });
+    });
+  };
   const download = () => {
     const blob = new Blob([output], { type: "text/plain" });
     const url = URL.createObjectURL(blob);
diff --git a/app/components/developmentToolsComponent/textToCsv.tsx b/app/components/developmentToolsComponent/textToCsv.tsx
index 780dc9d..b61ed7c 100644
--- a/app/components/developmentToolsComponent/textToCsv.tsx
+++ b/app/components/developmentToolsComponent/textToCsv.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Mode = "lines" | "words" | "regex";
 
@@ -137,7 +138,20 @@ const TextToCsv: React.FC = () => {
               <div className="space-y-2">
                 <div className="flex items-center justify-between">
                   <label className="font-medium">Input (Text)</label>
-                  <button onClick={convert} className="px-3 py-1 bg-primary hover:bg-primary/80 rounded text-sm transition-colors text-black font-bold">Convert</button>
+                  <button
+                    onClick={() => {
+                      convert();
+                      trackEvent("dev_tool_used", {
+                        page_type: PAGE_TYPE,
+                        platform: getRuntimePlatform(),
+                        tool_name: "Text to CSV",
+                        tool_action: "Convert",
+                      });
+                    }}
+                    className="px-3 py-1 bg-primary hover:bg-primary/80 rounded text-sm transition-colors text-black font-bold"
+                  >
+                    Convert
+                  </button>
                 </div>
                 <textarea value={input} onChange={(e) => setInput(e.target.value)} placeholder={`apple\nbanana\ncherry`} className="w-full h-64 p-4 bg-black/20 border border-white/20 rounded-lg text-white placeholder-gray-400 font-mono text-sm resize-none focus:outline-none focus:border-blue-500" />
               </div>
diff --git a/app/components/developmentToolsComponent/textToHtmlEntitiesConvertor.tsx b/app/components/developmentToolsComponent/textToHtmlEntitiesConvertor.tsx
index 356b8e8..fe199a0 100644
--- a/app/components/developmentToolsComponent/textToHtmlEntitiesConvertor.tsx
+++ b/app/components/developmentToolsComponent/textToHtmlEntitiesConvertor.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const encodeToEntities = (input: string) => {
   let result = "";
@@ -39,7 +40,15 @@ const TextToHtmlEntitiesConvertor = () => {
   const [input, setInput] = useState("");
   const [output, setOutput] = useState("");
 
-  const onConvert = () => setOutput(encodeToEntities(input));
+  const onConvert = () => {
+    setOutput(encodeToEntities(input));
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Text to HTML Entities Convertor",
+      tool_action: "Convert",
+    });
+  };
   const onCopy = async () => {
     try {
       await navigator.clipboard.writeText(output);
diff --git a/app/components/developmentToolsComponent/textToOneLine.tsx b/app/components/developmentToolsComponent/textToOneLine.tsx
index 2964880..756fcc3 100644
--- a/app/components/developmentToolsComponent/textToOneLine.tsx
+++ b/app/components/developmentToolsComponent/textToOneLine.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const toOneLine = (
   text: string,
@@ -158,7 +159,15 @@ const TextToOneLine: React.FC = () => {
                 <div className="flex items-center justify-between">
                   <label className="font-medium">Input</label>
                   <button
-                    onClick={convert}
+                    onClick={() => {
+                      convert();
+                      trackEvent("dev_tool_used", {
+                        page_type: PAGE_TYPE,
+                        platform: getRuntimePlatform(),
+                        tool_name: "Text to One Line Online Converter",
+                        tool_action: "Convert",
+                      });
+                    }}
                     className="px-3 py-1 bg-primary hover:bg-primary/80 rounded text-sm transition-colors text-black font-bold"
                   >
                     Convert
diff --git a/app/components/developmentToolsComponent/timeCalculator.tsx b/app/components/developmentToolsComponent/timeCalculator.tsx
index c354bc9..2db4db7 100644
--- a/app/components/developmentToolsComponent/timeCalculator.tsx
+++ b/app/components/developmentToolsComponent/timeCalculator.tsx
@@ -2,6 +2,7 @@
 
 import React, { useEffect, useMemo, useRef, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Mode = "add" | "subtract" | "multiply" | "divide" | "between";
 type Unit = "ms" | "s" | "min" | "h" | "d" | "w" | "mo" | "y";
@@ -193,6 +194,12 @@ const TimeCalculator = () => {
   const copy = async (text: string) => {
     try {
       await navigator.clipboard.writeText(text);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Time Calculator",
+        tool_action: "Copy",
+      });
     } catch {
       // ignore
     }
diff --git a/app/components/developmentToolsComponent/txtToCsvConverter.tsx b/app/components/developmentToolsComponent/txtToCsvConverter.tsx
index 2ec8f32..b1c53d3 100644
--- a/app/components/developmentToolsComponent/txtToCsvConverter.tsx
+++ b/app/components/developmentToolsComponent/txtToCsvConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useMemo, useState, useRef } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const TxtToCsvConverter = () => {
   const [text, setText] = useState<string>("");
@@ -92,6 +93,12 @@ const TxtToCsvConverter = () => {
       await navigator.clipboard.writeText(csv);
       setError("CSV copied to clipboard successfully!");
       setTimeout(() => setError(""), 3000);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "TXT to CSV Converter",
+        tool_action: "Copy",
+      });
     } catch (err) {
       setError("Failed to copy to clipboard");
     }
diff --git a/app/components/developmentToolsComponent/typescriptFormatter.tsx b/app/components/developmentToolsComponent/typescriptFormatter.tsx
index 033fae6..30ecb92 100644
--- a/app/components/developmentToolsComponent/typescriptFormatter.tsx
+++ b/app/components/developmentToolsComponent/typescriptFormatter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type Options = {
   trimTrailingSpaces: boolean;
@@ -169,7 +170,20 @@ const TypescriptFormatter: React.FC = () => {
               <div className="space-y-2">
                 <div className="flex items-center justify-between">
                   <label className="font-medium">Input (TypeScript)</label>
-                  <button onClick={convert} className="px-3 py-1 bg-primary hover:bg-primary/80 rounded text-sm transition-colors text-black font-bold">Format</button>
+                  <button
+                    onClick={() => {
+                      convert();
+                      trackEvent("dev_tool_used", {
+                        page_type: PAGE_TYPE,
+                        platform: getRuntimePlatform(),
+                        tool_name: "TypeScript Formatter",
+                        tool_action: "Format",
+                      });
+                    }}
+                    className="px-3 py-1 bg-primary hover:bg-primary/80 rounded text-sm transition-colors text-black font-bold"
+                  >
+                    Format
+                  </button>
                 </div>
                 <textarea value={input} onChange={(e) => setInput(e.target.value)} placeholder={`export interface User{\nname:string\nage:number\n}`} className="w-full h-64 p-4 bg-black/20 border border-white/20 rounded-lg text-white placeholder-gray-400 font-mono text-sm resize-none focus:outline-none focus:border-blue-500" />
               </div>
diff --git a/app/components/developmentToolsComponent/unicodeToAsciiConverter.tsx b/app/components/developmentToolsComponent/unicodeToAsciiConverter.tsx
index 98febe6..75d264a 100644
--- a/app/components/developmentToolsComponent/unicodeToAsciiConverter.tsx
+++ b/app/components/developmentToolsComponent/unicodeToAsciiConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 function encodeUnicodeToAsciiEscapes(input: string): string {
   let result = "";
@@ -26,6 +27,12 @@ const UnicodeToAsciiConverter = () => {
       return;
     }
     setOutput(encodeUnicodeToAsciiEscapes(input));
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Unicode to ASCII",
+      tool_action: "Convert",
+    });
   };
 
   const clearAll = () => {
diff --git a/app/components/developmentToolsComponent/upperCaseConverterComponent.tsx b/app/components/developmentToolsComponent/upperCaseConverterComponent.tsx
index 4808b4a..3b8499a 100644
--- a/app/components/developmentToolsComponent/upperCaseConverterComponent.tsx
+++ b/app/components/developmentToolsComponent/upperCaseConverterComponent.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const UpperCaseConverterComponent = () => {
   const [inputText, setInputText] = useState<any>("");
@@ -13,6 +14,12 @@ const UpperCaseConverterComponent = () => {
 
   const transformToUpperCase = () => {
     setTransformedText(inputText.toUpperCase());
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Text to Uppercase Converter",
+      tool_action: "Convert",
+    });
   };
 
   const copyToClipboard = () => {
diff --git a/app/components/developmentToolsComponent/urlDecode.tsx b/app/components/developmentToolsComponent/urlDecode.tsx
index 767b2d9..79cbd36 100644
--- a/app/components/developmentToolsComponent/urlDecode.tsx
+++ b/app/components/developmentToolsComponent/urlDecode.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const safeDecode = (value: string, plusAsSpace: boolean) => {
   try {
@@ -27,7 +28,15 @@ const URLDecode = () => {
     return current;
   }, [input, plusAsSpace, decodeRepeatedly]);
 
-  const copy = () => navigator.clipboard.writeText(output);
+  const copy = () => {
+    navigator.clipboard.writeText(output);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "URL Decode",
+      tool_action: "Copy",
+    });
+  };
   const download = () => {
     const blob = new Blob([output], { type: "text/plain" });
     const url = URL.createObjectURL(blob);
diff --git a/app/components/developmentToolsComponent/urlEncode.tsx b/app/components/developmentToolsComponent/urlEncode.tsx
index 6d7f95b..4eabb5d 100644
--- a/app/components/developmentToolsComponent/urlEncode.tsx
+++ b/app/components/developmentToolsComponent/urlEncode.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const encodeSafe = (value: string, spaceAsPlus: boolean) => {
   const encoded = encodeURIComponent(value);
@@ -13,7 +14,15 @@ const URLEncode = () => {
 
   const output = useMemo(() => encodeSafe(input, spaceAsPlus), [input, spaceAsPlus]);
 
-  const copy = () => navigator.clipboard.writeText(output);
+  const copy = () => {
+    navigator.clipboard.writeText(output);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "URL Encode",
+      tool_action: "Copy",
+    });
+  };
   const download = () => {
     const blob = new Blob([output], { type: "text/plain" });
     const url = URL.createObjectURL(blob);
diff --git a/app/components/developmentToolsComponent/urlParser.tsx b/app/components/developmentToolsComponent/urlParser.tsx
index ea6eb9c..24184eb 100644
--- a/app/components/developmentToolsComponent/urlParser.tsx
+++ b/app/components/developmentToolsComponent/urlParser.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useState, useEffect } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 interface QueryParam {
   id: string;
@@ -134,6 +135,12 @@ const UrlParser = () => {
     const updatedParams = [...queryParams, newParam];
     setQueryParams(updatedParams);
     updateUrlFromParams(updatedParams);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "URL Parser & Query String Editor",
+      tool_action: "Add Parameter",
+    });
   };
 
   const updateUrlPart = (part: 'protocol' | 'hostname' | 'pathname' | 'hash', value: string) => {
diff --git a/app/components/developmentToolsComponent/utf8Decode.tsx b/app/components/developmentToolsComponent/utf8Decode.tsx
index c1412b1..a3fa14b 100644
--- a/app/components/developmentToolsComponent/utf8Decode.tsx
+++ b/app/components/developmentToolsComponent/utf8Decode.tsx
@@ -7,6 +7,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type InputMode = "percent" | "hex" | "base64" | "raw" | "unicode";
 
@@ -165,7 +166,16 @@ const Utf8Decode: React.FC = () => {
                   Auto-update
                 </label>
                 <button
-                  onClick={convert}
+                  onClick={() => {
+                    if (!input.trim()) return;
+                    convert();
+                    trackEvent("dev_tool_used", {
+                      page_type: PAGE_TYPE,
+                      platform: getRuntimePlatform(),
+                      tool_name: "UTF8 Decode",
+                      tool_action: "Decode",
+                    });
+                  }}
                   className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm"
                 >
                   Decode
diff --git a/app/components/developmentToolsComponent/utf8Encode.tsx b/app/components/developmentToolsComponent/utf8Encode.tsx
index fa4fb9d..744e9f8 100644
--- a/app/components/developmentToolsComponent/utf8Encode.tsx
+++ b/app/components/developmentToolsComponent/utf8Encode.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type OutputMode = "percent" | "hex" | "base64" | "unicode";
 
@@ -59,6 +60,16 @@ const Utf8Encode: React.FC = () => {
   const convert = useCallback(() => setOutput(encodeUtf8(input, options.mode, options.hexUppercase, options.hexSeparator)), [input, options]);
   useEffect(() => { if (autoUpdate) convert(); }, [input, options, autoUpdate, convert]);
 
+  const onEncodeClick = useCallback(() => {
+    convert();
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "UTF8 Encode",
+      tool_action: "Encode",
+    });
+  }, [convert]);
+
   const onCopy = useCallback(async () => { try { await navigator.clipboard.writeText(output); } catch (_) {} }, [output]);
   const onDownload = useCallback(() => {
     const blob = new Blob([output], { type: "text/plain;charset=utf-8" });
@@ -87,7 +98,7 @@ const Utf8Encode: React.FC = () => {
                   <input type="checkbox" className="accent-primary" checked={autoUpdate} onChange={(e) => setAutoUpdate(e.target.checked)} />
                   Auto-update
                 </label>
-                <button onClick={convert} className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm">Encode</button>
+                <button onClick={onEncodeClick} className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm">Encode</button>
               </div>
               <div className="flex items-center gap-2">
                 <button onClick={onCopy} className="border border-white/30 px-3 py-1 rounded text-sm bg-primary hover:bg-primary/90 text-black font-bold">Copy</button>
diff --git a/app/components/developmentToolsComponent/whatIsMyBrowser.tsx b/app/components/developmentToolsComponent/whatIsMyBrowser.tsx
index 640fb6f..9317780 100644
--- a/app/components/developmentToolsComponent/whatIsMyBrowser.tsx
+++ b/app/components/developmentToolsComponent/whatIsMyBrowser.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type BrowserInfo = {
   browserName: string;
@@ -264,6 +265,12 @@ const WhatIsMyBrowser: React.FC = () => {
   const handleCopy = useCallback(async () => {
     try {
       await navigator.clipboard.writeText(json);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "What is My Browser",
+        tool_action: "Copy",
+      });
     } catch (_) {}
   }, [json]);
 
diff --git a/app/components/developmentToolsComponent/whatIsMyISP.tsx b/app/components/developmentToolsComponent/whatIsMyISP.tsx
index 009cf97..87df106 100644
--- a/app/components/developmentToolsComponent/whatIsMyISP.tsx
+++ b/app/components/developmentToolsComponent/whatIsMyISP.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useEffect, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const Cmd = ({ children }: { children: string }) => (
   <code className="px-2 py-1 rounded bg-black/40 border border-white/10 font-mono text-xs">
@@ -74,7 +75,7 @@ const WhatIsMyISP = () => {
     } catch {}
   };
 
-  const copyAllInfo = () => {
+  const copyAllInfo = async () => {
     const info = `IP: ${ispInfo.ip}
 ISP: ${ispInfo.isp}
 Organization: ${ispInfo.organization}
@@ -82,7 +83,15 @@ Country: ${ispInfo.country}
 Region: ${ispInfo.region}
 City: ${ispInfo.city}
 Timezone: ${ispInfo.timezone}`;
-    copy(info);
+    try {
+      await navigator.clipboard.writeText(info);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "What is My ISP",
+        tool_action: "Copy",
+      });
+    } catch {}
   };
 
   return (
diff --git a/app/components/developmentToolsComponent/whatIsMyLocalIPAddress.tsx b/app/components/developmentToolsComponent/whatIsMyLocalIPAddress.tsx
index 75359d7..1e80e06 100644
--- a/app/components/developmentToolsComponent/whatIsMyLocalIPAddress.tsx
+++ b/app/components/developmentToolsComponent/whatIsMyLocalIPAddress.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type IpInfo = { ip: string; type: "IPv4" | "IPv6"; source: string };
 
@@ -75,9 +76,16 @@ const WhatIsMyLocalIPAddress = () => {
   }, []);
 
   const copyAll = async () => {
+    if (ips.length === 0) return;
     const text = ips.map((i) => `${i.ip} (${i.type})`).join("\n");
     try {
       await navigator.clipboard.writeText(text);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "What Is My Local IP Address",
+        tool_action: "Copy",
+      });
     } catch {}
   };
 
diff --git a/app/components/developmentToolsComponent/whatIsMyUserAgent.tsx b/app/components/developmentToolsComponent/whatIsMyUserAgent.tsx
index 293f162..8795b05 100644
--- a/app/components/developmentToolsComponent/whatIsMyUserAgent.tsx
+++ b/app/components/developmentToolsComponent/whatIsMyUserAgent.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useEffect, useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type ParsedUA = {
   browser: string;
@@ -62,6 +63,12 @@ const WhatIsMyUserAgent: React.FC = () => {
       await navigator.clipboard.writeText(ua);
       setCopied(true);
       setTimeout(() => setCopied(false), 1200);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "What is My User Agent",
+        tool_action: "Copy",
+      });
     } catch {}
   };
 
diff --git a/app/components/developmentToolsComponent/whatOperatingSystemDoIHave.tsx b/app/components/developmentToolsComponent/whatOperatingSystemDoIHave.tsx
index 0600a5c..f6882ad 100644
--- a/app/components/developmentToolsComponent/whatOperatingSystemDoIHave.tsx
+++ b/app/components/developmentToolsComponent/whatOperatingSystemDoIHave.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type OSInfo = {
   osName?: string;
@@ -106,7 +107,15 @@ const WhatOperatingSystemDoIHave: React.FC = () => {
   const json = useMemo(() => (info ? JSON.stringify(info, null, 2) : ""), [info]);
 
   const handleCopy = useCallback(async () => {
-    try { await navigator.clipboard.writeText(json); } catch (_) {}
+    try {
+      await navigator.clipboard.writeText(json);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "What Operating System Do I Have",
+        tool_action: "Copy",
+      });
+    } catch (_) {}
   }, [json]);
 
   return (
diff --git a/app/components/developmentToolsComponent/whatVersionOfAndroidDoIHave.tsx b/app/components/developmentToolsComponent/whatVersionOfAndroidDoIHave.tsx
index eeddbfa..85f0e69 100644
--- a/app/components/developmentToolsComponent/whatVersionOfAndroidDoIHave.tsx
+++ b/app/components/developmentToolsComponent/whatVersionOfAndroidDoIHave.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useEffect, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const detectAndroid = (): string | null => {
   if (typeof navigator === "undefined") return null;
@@ -14,7 +15,17 @@ const detectAndroid = (): string | null => {
 const WhatVersionOfAndroidDoIHave = () => {
   const [detected, setDetected] = useState<string | null>(null);
   useEffect(() => { setDetected(detectAndroid()); }, []);
-  const copy = async (text: string) => { try { await navigator.clipboard.writeText(text) } catch {} };
+  const copy = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "What version of Android do I have?",
+        tool_action: "Copy",
+      });
+    } catch {}
+  };
 
   return (
     <div className="md:mt-8 mt-4 text-white">
diff --git a/app/components/developmentToolsComponent/whatVersionOfChromeDoIHave.tsx b/app/components/developmentToolsComponent/whatVersionOfChromeDoIHave.tsx
index 3fdbbea..c507ab0 100644
--- a/app/components/developmentToolsComponent/whatVersionOfChromeDoIHave.tsx
+++ b/app/components/developmentToolsComponent/whatVersionOfChromeDoIHave.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type ChromeInfo = {
   isChrome: boolean;
@@ -86,7 +87,15 @@ const WhatVersionOfChromeDoIHave: React.FC = () => {
   const json = useMemo(() => (info ? JSON.stringify(info, null, 2) : ""), [info]);
 
   const handleCopy = useCallback(async () => {
-    try { await navigator.clipboard.writeText(json); } catch (_) {}
+    try {
+      await navigator.clipboard.writeText(json);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "What Version of Chrome Do I Have",
+        tool_action: "Copy",
+      });
+    } catch (_) {}
   }, [json]);
 
   return (
diff --git a/app/components/developmentToolsComponent/whatVersionOfFirefoxDoIHave.tsx b/app/components/developmentToolsComponent/whatVersionOfFirefoxDoIHave.tsx
index f57f3c2..adb7cc8 100644
--- a/app/components/developmentToolsComponent/whatVersionOfFirefoxDoIHave.tsx
+++ b/app/components/developmentToolsComponent/whatVersionOfFirefoxDoIHave.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useEffect, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const detectFirefox = (): string | null => {
   if (typeof navigator === "undefined") return null;
@@ -19,6 +20,12 @@ const WhatVersionOfFirefoxDoIHave = () => {
   const copy = async (text: string) => {
     try {
       await navigator.clipboard.writeText(text);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "What version of Firefox do I have?",
+        tool_action: "Copy",
+      });
     } catch {}
   };
 
diff --git a/app/components/developmentToolsComponent/whatVersionOfFlashDoIHave.tsx b/app/components/developmentToolsComponent/whatVersionOfFlashDoIHave.tsx
index 27fbe0b..0368b96 100644
--- a/app/components/developmentToolsComponent/whatVersionOfFlashDoIHave.tsx
+++ b/app/components/developmentToolsComponent/whatVersionOfFlashDoIHave.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useEffect, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const Cmd = ({ children }: { children: string }) => (
   <code className="px-2 py-1 rounded bg-black/40 border border-white/10 font-mono text-xs">{children}</code>
@@ -21,7 +22,17 @@ const WhatVersionOfFlashDoIHave = () => {
   const [status, setStatus] = useState<string>("Flash is discontinued and not supported in modern browsers");
   useEffect(() => { setStatus(detectFlash()); }, []);
 
-  const copy = async (text: string) => { try { await navigator.clipboard.writeText(text); } catch {} };
+  const copy = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "What version of Flash do I have?",
+        tool_action: "Copy",
+      });
+    } catch {}
+  };
 
   return (
     <div className="md:mt-8 mt-4 text-white">
diff --git a/app/components/developmentToolsComponent/whatVersionOfIOSDoIHave.tsx b/app/components/developmentToolsComponent/whatVersionOfIOSDoIHave.tsx
index 636d2e1..b85d685 100644
--- a/app/components/developmentToolsComponent/whatVersionOfIOSDoIHave.tsx
+++ b/app/components/developmentToolsComponent/whatVersionOfIOSDoIHave.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useEffect, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const detectIOS = (): string | null => {
   if (typeof navigator === "undefined") return null;
@@ -21,6 +22,12 @@ const WhatVersionOfIOSDoIHave = () => {
   const copy = async (text: string) => {
     try {
       await navigator.clipboard.writeText(text);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "What version of iOS do I have?",
+        tool_action: "Copy",
+      });
     } catch {}
   };
 
diff --git a/app/components/developmentToolsComponent/whatVersionOfJavaDoIHave.tsx b/app/components/developmentToolsComponent/whatVersionOfJavaDoIHave.tsx
index 51dfe4c..128b2dc 100644
--- a/app/components/developmentToolsComponent/whatVersionOfJavaDoIHave.tsx
+++ b/app/components/developmentToolsComponent/whatVersionOfJavaDoIHave.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const Cmd = ({ children }: { children: string }) => (
   <code className="px-2 py-1 rounded bg-black/40 border border-white/10 font-mono text-xs">
@@ -10,6 +11,12 @@ const Cmd = ({ children }: { children: string }) => (
 const copy = async (text: string) => {
   try {
     await navigator.clipboard.writeText(text);
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "What version of Java is installed?",
+      tool_action: "Copy",
+    });
   } catch {}
 };
 
diff --git a/app/components/developmentToolsComponent/whatVersionOfMacOSDoIHave.tsx b/app/components/developmentToolsComponent/whatVersionOfMacOSDoIHave.tsx
index 8473a4a..b93b950 100644
--- a/app/components/developmentToolsComponent/whatVersionOfMacOSDoIHave.tsx
+++ b/app/components/developmentToolsComponent/whatVersionOfMacOSDoIHave.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useEffect, useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const Cmd = ({ children }: { children: string }) => (
   <code className="px-2 py-1 rounded bg-black/40 border border-white/10 font-mono text-xs">
@@ -44,6 +45,12 @@ const WhatVersionOfMacOSDoIHave = () => {
   const copy = async (text: string) => {
     try {
       await navigator.clipboard.writeText(text);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "What version of macOS do I have?",
+        tool_action: "Copy",
+      });
     } catch {}
   };
 
diff --git a/app/components/developmentToolsComponent/whatVersionOfSafariDoIHave.tsx b/app/components/developmentToolsComponent/whatVersionOfSafariDoIHave.tsx
index 28d7c5b..1a5de7c 100644
--- a/app/components/developmentToolsComponent/whatVersionOfSafariDoIHave.tsx
+++ b/app/components/developmentToolsComponent/whatVersionOfSafariDoIHave.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useEffect, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const detectSafari = (): string | null => {
   if (typeof navigator === "undefined") return null;
@@ -24,6 +25,12 @@ const WhatVersionOfSafariDoIHave = () => {
   const copy = async (text: string) => {
     try {
       await navigator.clipboard.writeText(text);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "What version of Safari do I have?",
+        tool_action: "Copy",
+      });
     } catch {}
   };
 
diff --git a/app/components/developmentToolsComponent/whatVersionOfWindowsDoIHave.tsx b/app/components/developmentToolsComponent/whatVersionOfWindowsDoIHave.tsx
index 41dfc14..eb7da62 100644
--- a/app/components/developmentToolsComponent/whatVersionOfWindowsDoIHave.tsx
+++ b/app/components/developmentToolsComponent/whatVersionOfWindowsDoIHave.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useCallback, useEffect, useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type WindowsInfo = {
   osName: string; // Windows 10 or Windows 11, etc.
@@ -91,6 +92,12 @@ const WhatVersionOfWindowsDoIHave: React.FC = () => {
   const handleCopy = useCallback(async () => {
     try {
       await navigator.clipboard.writeText(json);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "What Version of Windows Do I Have",
+        tool_action: "Copy",
+      });
     } catch (_) {}
   }, [json]);
 
diff --git a/app/components/developmentToolsComponent/whatsMyBrowserSize.tsx b/app/components/developmentToolsComponent/whatsMyBrowserSize.tsx
index 0b660dd..a75faad 100644
--- a/app/components/developmentToolsComponent/whatsMyBrowserSize.tsx
+++ b/app/components/developmentToolsComponent/whatsMyBrowserSize.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useEffect, useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const WhatsMyBrowserSize = () => {
   const [inner, setInner] = useState<{ w: number; h: number }>({ w: 0, h: 0 });
@@ -24,6 +25,12 @@ const WhatsMyBrowserSize = () => {
   const copy = async (text: string) => {
     try {
       await navigator.clipboard.writeText(text);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "Whats My Browser Size",
+        tool_action: "Copy",
+      });
     } catch {}
   };
 
diff --git a/app/components/developmentToolsComponent/wordCounterComponent.tsx b/app/components/developmentToolsComponent/wordCounterComponent.tsx
index d6c3c78..564b4c4 100644
--- a/app/components/developmentToolsComponent/wordCounterComponent.tsx
+++ b/app/components/developmentToolsComponent/wordCounterComponent.tsx
@@ -2,6 +2,7 @@
 import React, { useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
 import CopyButton from "../ui/CopyButton";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const WordCounterComponent = () => {
   const [text, setText] = useState("");
@@ -14,6 +15,16 @@ const WordCounterComponent = () => {
     return text.trim() ? text.trim().split(/\s+/).length : 0;
   };
 
+  const handleCopyClick = () => {
+    if (!text.trim()) return;
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Word Count Tool",
+      tool_action: "Copy",
+    });
+  };
+
   return (
     <section>
       <div className="md:mt-8 mt-4">
@@ -60,12 +71,14 @@ const WordCounterComponent = () => {
                     Clear Text
                   </button>
 
-                  <CopyButton 
-                    text={text} 
-                    variant="text" 
-                    className={`${DevelopmentToolsStyles.converterButton} w-[280px] text-black font-bold py-3 px-8 rounded-lg items-center transition-transform transform hover:shadow-[2px_2px_1px_0px_rgba(0,0,0,0.5)] shadow-[3px_3px_2px_0px_rgba(0,0,0,0.5)] ${!text ? "opacity-70 cursor-not-allowed" : ""}`}
-                  />
-                  
+                  <span onClick={handleCopyClick}>
+                    <CopyButton
+                      text={text}
+                      variant="text"
+                      className={`${DevelopmentToolsStyles.converterButton} w-[280px] text-black font-bold py-3 px-8 rounded-lg items-center transition-transform transform hover:shadow-[2px_2px_1px_0px_rgba(0,0,0,0.5)] shadow-[3px_3px_2px_0px_rgba(0,0,0,0.5)] ${!text ? "opacity-70 cursor-not-allowed" : ""}`}
+                    />
+                  </span>
+
                 </div>
               </div>
             </div>
diff --git a/app/components/developmentToolsComponent/wordsToNumbers.tsx b/app/components/developmentToolsComponent/wordsToNumbers.tsx
index 460d478..ec95643 100644
--- a/app/components/developmentToolsComponent/wordsToNumbers.tsx
+++ b/app/components/developmentToolsComponent/wordsToNumbers.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 // Basic English words-to-number conversion supporting negatives and decimals.
 // Converts number words found anywhere in the text to their numeric forms.
@@ -307,6 +308,12 @@ const WordsToNumbers: React.FC = () => {
     } else {
       setOutput(converted);
     }
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "Words to Number Online Converter",
+      tool_action: "Convert",
+    });
   };
   const onCopy = async () => {
     try {
diff --git a/app/components/developmentToolsComponent/xmlCompare.tsx b/app/components/developmentToolsComponent/xmlCompare.tsx
index b4d27d3..4dfdd1f 100644
--- a/app/components/developmentToolsComponent/xmlCompare.tsx
+++ b/app/components/developmentToolsComponent/xmlCompare.tsx
@@ -7,6 +7,7 @@ import React, {
   useRef,
   useState,
 } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type IndentSize = 2 | 4;
 
@@ -227,7 +228,15 @@ const XmlCompare: React.FC = () => {
                   Auto-update
                 </label>
                 <button
-                  onClick={convert}
+                  onClick={() => {
+                    convert();
+                    trackEvent("dev_tool_used", {
+                      page_type: PAGE_TYPE,
+                      platform: getRuntimePlatform(),
+                      tool_name: "XML Compare",
+                      tool_action: "Compare",
+                    });
+                  }}
                   className="bg-primary text-black font-semibold border border-black/30 px-3 py-1 rounded text-xs sm:text-sm"
                 >
                   Compare
diff --git a/app/components/developmentToolsComponent/xmlEscape.tsx b/app/components/developmentToolsComponent/xmlEscape.tsx
index 4fa5c79..6e9e960 100644
--- a/app/components/developmentToolsComponent/xmlEscape.tsx
+++ b/app/components/developmentToolsComponent/xmlEscape.tsx
@@ -1,5 +1,6 @@
 "use client";
 import React, { useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 const Cmd = ({ children }: { children: string }) => (
   <code className="px-2 py-1 rounded bg-black/40 border border-white/10 font-mono text-xs">{children}</code>
@@ -29,7 +30,17 @@ const XMLEscape = () => {
   const [mode, setMode] = useState<"escape" | "unescape">("escape");
 
   const output = useMemo(() => (mode === "escape" ? escapeXML(raw) : unescapeXML(raw)), [raw, mode]);
-  const copy = async (text: string) => { try { await navigator.clipboard.writeText(text); } catch {} };
+  const copy = async (text: string) => {
+    try {
+      await navigator.clipboard.writeText(text);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "XML Escape",
+        tool_action: "Copy",
+      });
+    } catch {}
+  };
   const clear = () => setRaw("");
 
   return (
diff --git a/app/components/developmentToolsComponent/xmlMinify.tsx b/app/components/developmentToolsComponent/xmlMinify.tsx
index 236b681..9aa4062 100644
--- a/app/components/developmentToolsComponent/xmlMinify.tsx
+++ b/app/components/developmentToolsComponent/xmlMinify.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useCallback, useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type MinifyOptions = {
   removeComments: boolean;
@@ -79,6 +80,12 @@ const XmlMinify = () => {
       setError("");
       const result = minifyXml(input, options);
       setOutput(result);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "XML Minify",
+        tool_action: "Minify",
+      });
     } catch (e: any) {
       setOutput("");
       setError(e?.message || "Failed to minify XML");
diff --git a/app/components/developmentToolsComponent/xmlPrettify.tsx b/app/components/developmentToolsComponent/xmlPrettify.tsx
index 0a777cd..0e45a3e 100644
--- a/app/components/developmentToolsComponent/xmlPrettify.tsx
+++ b/app/components/developmentToolsComponent/xmlPrettify.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useCallback, useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type IndentSize = 2 | 4;
 
@@ -85,6 +86,12 @@ const XmlPrettify = () => {
       setError("");
       const res = prettifyXml(input);
       setOutput(res);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "XML Prettify",
+        tool_action: "Prettify",
+      });
     } catch (e: any) {
       setOutput("");
       setError(e?.message || "Failed to prettify XML");
diff --git a/app/components/developmentToolsComponent/xmlToJsonConverter.tsx b/app/components/developmentToolsComponent/xmlToJsonConverter.tsx
index 759d463..edc6453 100644
--- a/app/components/developmentToolsComponent/xmlToJsonConverter.tsx
+++ b/app/components/developmentToolsComponent/xmlToJsonConverter.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type IndentSize = 2 | 4;
 
@@ -132,7 +133,18 @@ const XmlToJsonConverter: React.FC = () => {
 
   const fileRef = useRef<HTMLInputElement>(null);
 
-  const convert = useCallback(() => setOutput(convertXmlToJson(input, options)), [input, options]);
+  const convert = useCallback(() => {
+    const result = convertXmlToJson(input, options);
+    setOutput(result);
+    if (result) {
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "XML to JSON Converter",
+        tool_action: "Convert",
+      });
+    }
+  }, [input, options]);
   useEffect(() => { if (autoUpdate) convert(); }, [input, options, autoUpdate, convert]);
 
   const onCopy = useCallback(async () => { try { await navigator.clipboard.writeText(output); } catch (_) {} }, [output]);
diff --git a/app/components/developmentToolsComponent/xorCalculator.tsx b/app/components/developmentToolsComponent/xorCalculator.tsx
index cdc3707..67641c7 100644
--- a/app/components/developmentToolsComponent/xorCalculator.tsx
+++ b/app/components/developmentToolsComponent/xorCalculator.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import React, { useCallback, useEffect, useMemo, useState } from "react";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type RadixMode = "hex" | "dec" | "bin";
 
@@ -80,6 +81,16 @@ const XorCalculator: React.FC = () => {
 
   useEffect(() => { if (autoUpdate) compute(); }, [rows, options, autoUpdate, compute]);
 
+  const onCalculateClick = useCallback(() => {
+    compute();
+    trackEvent("dev_tool_used", {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: "XOR Calculator",
+      tool_action: "Calculate",
+    });
+  }, [compute]);
+
   const addRow = () => setRows((rs) => [...rs, { id: crypto.randomUUID(), value: "" }]);
   const removeRow = (id: string) => setRows((rs) => (rs.length > 1 ? rs.filter((r) => r.id !== id) : rs));
   const updateRow = (id: string, v: string) => setRows((rs) => rs.map((r) => (r.id === id ? { ...r, value: v } : r)));
@@ -168,7 +179,7 @@ const XorCalculator: React.FC = () => {
                   <input type="checkbox" className="accent-primary" checked={autoUpdate} onChange={(e) => setAutoUpdate(e.target.checked)} />
                   Auto-update
                 </label>
-                <button onClick={compute} className="border border-black/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold">Calculate</button>
+                <button onClick={onCalculateClick} className="border border-black/30 px-3 py-1 rounded text-xs sm:text-sm bg-primary hover:bg-primary/90 text-black font-bold">Calculate</button>
               </div>
               <div className="flex items-center gap-2">
                 <button onClick={onCopy} className="border border-white/30 px-3 py-1 rounded text-sm bg-primary hover:bg-primary/90 text-black font-bold">Copy</button>
diff --git a/app/components/developmentToolsComponent/yamlFormatterAndBeautifier.tsx b/app/components/developmentToolsComponent/yamlFormatterAndBeautifier.tsx
index d0daace..7150ff1 100644
--- a/app/components/developmentToolsComponent/yamlFormatterAndBeautifier.tsx
+++ b/app/components/developmentToolsComponent/yamlFormatterAndBeautifier.tsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useCallback, useMemo, useState } from "react";
 import DevelopmentToolsStyles from "../../developmentToolsStyles.module.scss";
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from "@/app/libs/analytics";
 
 type FormatOptions = {
   indentSize: number; // spaces per level
@@ -107,6 +108,12 @@ const YAMLFormatterAndBeautifier: React.FC = () => {
       setError("");
       const formatted = formatYamlBestEffort(input, options);
       setOutput(formatted);
+      trackEvent("dev_tool_used", {
+        page_type: PAGE_TYPE,
+        platform: getRuntimePlatform(),
+        tool_name: "YAML Formatter and Beautifier",
+        tool_action: "Format",
+      });
     } catch (_e: unknown) {
       setError("Failed to format. Please check your input.");
     }
diff --git a/app/components/headerMenuDropdownComponents/productMenuComponent.tsx b/app/components/headerMenuDropdownComponents/productMenuComponent.tsx
index 83603ff..54772af 100644
--- a/app/components/headerMenuDropdownComponents/productMenuComponent.tsx
+++ b/app/components/headerMenuDropdownComponents/productMenuComponent.tsx
@@ -16,6 +16,7 @@ import DeveloperIcon from '../theme/Icon/developersLogIcon';
 import AllFeatureIcon from '../theme/Icon/allFeatureIcon';
 import AnnotationIcon from '../theme/Icon/annotationIcon';
 import { WEB_URL } from '@/app/libs/constants';
+import { trackNavInteraction } from '@/app/libs/analytics';
 
 const FeaturesMenu = [
   {
@@ -91,12 +92,19 @@ const BB_FOR = [
 
 interface ProductMenuComponentProps {
   setCollapsed: (d: any) => void;
+  sectionName?: string;
 }
 
 const ProductMenuComponent = (props: ProductMenuComponentProps) => {
-  const { setCollapsed } = props;
+  const { setCollapsed, sectionName = 'Products' } = props;
   const pathname = usePathname();
 
+  const trackDesktop = (subSectionName: string, ctaText: string, url: string) =>
+    trackNavInteraction('desktop', { sectionName, subSectionName, ctaText, destinationUrl: url });
+
+  const trackMobile = (subSectionName: string, ctaText: string, url: string) =>
+    trackNavInteraction('mobile', { sectionName, subSectionName, ctaText, destinationUrl: url });
+
   return (
     <div className="relative cursor-pointer">
       <div className="absolute top-[25px] lg:left-[-265px] 2xl:left-[-270px] px-3 md:px-auto mx-auto bg-[#111111] !w-[1280px] md:block hidden">
@@ -132,6 +140,7 @@ const ProductMenuComponent = (props: ProductMenuComponentProps) => {
                     className={`${
                       pathname === menu?.url ? 'text-white' : 'text-white/70'
                     } hover:text-white`}
+                    onClick={() => trackDesktop('FEATURES', menu.label, menu.url)}
                   >
                     <p className="flex items-center text-center font-normal text-base">
                       <span className="mr-2">{menu.icon}</span>
@@ -152,6 +161,9 @@ const ProductMenuComponent = (props: ProductMenuComponentProps) => {
                     className={`${
                       pathname === menu?.url ? 'text-white' : 'text-white/70'
                     } hover:text-white`}
+                    onClick={() =>
+                      trackDesktop('BETTERBUGS FOR', menu.label, menu.url)
+                    }
                   >
                     <p className="flex text-center font-normal text-base">
                       <span className="mr-2 mt-1">{menu.icon}</span>
@@ -176,7 +188,10 @@ const ProductMenuComponent = (props: ProductMenuComponentProps) => {
                 className={`${
                   pathname === menu?.url ? 'text-white' : 'text-white/80'
                 } hover:text-white`}
-                onClick={() => setCollapsed(false)}
+                onClick={() => {
+                  trackMobile('FEATURES', menu.label, menu.url);
+                  setCollapsed(false);
+                }}
               >
                 <p className="flex text-center font-normal text-base">
                   <span className="mr-2 mt-1">{menu.icon}</span>
@@ -197,7 +212,10 @@ const ProductMenuComponent = (props: ProductMenuComponentProps) => {
                 className={`${
                   pathname === menu?.url ? 'text-white' : 'text-white/80'
                 } hover:text-white`}
-                onClick={() => setCollapsed(false)}
+                onClick={() => {
+                  trackMobile('BETTERBUGS FOR', menu.label, menu.url);
+                  setCollapsed(false);
+                }}
               >
                 <p className="flex text-center font-normal text-base">
                   <span className="mr-2 mt-1">{menu.icon}</span>
diff --git a/app/components/headerMenuDropdownComponents/resourceMenuComponent.tsx b/app/components/headerMenuDropdownComponents/resourceMenuComponent.tsx
index 8e42b89..028af64 100644
--- a/app/components/headerMenuDropdownComponents/resourceMenuComponent.tsx
+++ b/app/components/headerMenuDropdownComponents/resourceMenuComponent.tsx
@@ -16,6 +16,7 @@ import { TrillioIcon } from '../theme/Icon/trillioIcon';
 import { SentryIcon } from '../theme/Icon/sentryIcon';
 import { AzureBoardIcon } from '../theme/Icon/azureBoardIcon';
 import { WEB_URL } from '@/app/libs/constants';
+import { trackNavInteraction } from '@/app/libs/analytics';
 
 const KnowledgeHubMenu = [
   {
@@ -91,13 +92,20 @@ const IntegrationMenu = [
 
 interface ResourceMenuComponentProps {
   setCollapsed: (d: any) => void;
+  sectionName?: string;
 }
 
 const ResourceMenuComponent = (props: ResourceMenuComponentProps) => {
-  const { setCollapsed } = props;
+  const { setCollapsed, sectionName = 'Integrations' } = props;
 
   const pathname = usePathname();
 
+  const trackDesktop = (subSectionName: string, ctaText: string, url: string) =>
+    trackNavInteraction('desktop', { sectionName, subSectionName, ctaText, destinationUrl: url });
+
+  const trackMobile = (subSectionName: string, ctaText: string, url: string) =>
+    trackNavInteraction('mobile', { sectionName, subSectionName, ctaText, destinationUrl: url });
+
   return (
     <div className="relative">
       <div className="absolute top-[25px] lg:left-[-480px] 2xl:left-[-485px] md:block hidden mx-auto bg-[#111111] !w-[1280px]">
@@ -127,6 +135,9 @@ const ResourceMenuComponent = (props: ResourceMenuComponentProps) => {
                               className={`${
                                 pathname === menu?.url && 'text-white'
                               } text-white/80 hover:text-white`}
+                              onClick={() =>
+                                trackDesktop('INTEGRATION', menu.label, menu.url)
+                              }
                             >
                               <p className="flex flex-col text-left font-normal text-base">
                                 <div className="flex items-center">
@@ -161,6 +172,9 @@ const ResourceMenuComponent = (props: ResourceMenuComponentProps) => {
                               className={`${
                                 pathname === menu?.url && 'text-white'
                               } text-white/80 hover:text-white`}
+                              onClick={() =>
+                                trackDesktop('INTEGRATION', menu.label, menu.url)
+                              }
                             >
                               <div className="flex flex-col text-left font-normal text-base">
                                 <div className="flex items-center">
@@ -198,6 +212,9 @@ const ResourceMenuComponent = (props: ResourceMenuComponentProps) => {
                       className={`${
                         pathname === menu?.url && 'text-white'
                       } text-white/80 hover:text-white`}
+                      onClick={() =>
+                        trackDesktop('KNOWLEDGE HUB', menu.label, menu.url)
+                      }
                     >
                       <p className="flex text-center font-normal text-base">
                         <span className="mr-2 mt-1">{menu.icon}</span>
@@ -225,7 +242,10 @@ const ResourceMenuComponent = (props: ResourceMenuComponentProps) => {
                   className={`${
                     pathname === menu?.url && 'text-white'
                   } text-white/80 hover:text-white`}
-                  onClick={() => setCollapsed(false)}
+                  onClick={() => {
+                    trackMobile('INTEGRATIONS', menu.label, menu.url);
+                    setCollapsed(false);
+                  }}
                 >
                   <div className="flex flex-col text-left font-normal text-base">
                     <div className="flex items-center">
@@ -256,7 +276,10 @@ const ResourceMenuComponent = (props: ResourceMenuComponentProps) => {
                   className={`${
                     pathname === menu?.url && 'text-white'
                   } text-white/80 hover:text-white`}
-                  onClick={() => setCollapsed(false)}
+                  onClick={() => {
+                    trackMobile('KNOWLEDGE HUB', menu.label, menu.url);
+                    setCollapsed(false);
+                  }}
                 >
                   <p className="flex text-center font-normal text-base">
                     <span className="mr-2 mt-1">{menu.icon}</span>
diff --git a/app/components/headerMenuDropdownComponents/solutionMenuComponent.tsx b/app/components/headerMenuDropdownComponents/solutionMenuComponent.tsx
index 24e288f..9ec60c3 100644
--- a/app/components/headerMenuDropdownComponents/solutionMenuComponent.tsx
+++ b/app/components/headerMenuDropdownComponents/solutionMenuComponent.tsx
@@ -11,6 +11,7 @@ import FounderIcon from '../theme/Icon/founderIcon';
 import Image from 'next/image';
 import ComaresionBugHeardIcon from '../theme/Icon/comaresionBugHeardIcon';
 import { WEB_URL } from '@/app/libs/constants';
+import { trackNavInteraction } from '@/app/libs/analytics';
 // import { fetchComparisonAPI } from '@/api/comparison';
 
 const RoleMenu = [
@@ -46,7 +47,7 @@ const defaultComparesionsMenu = [
   {
     icon: <ComaresionBugHeardIcon />,
     label: 'BetterBugs.io vs. BugHerd',
-    url: `${WEB_URL}/comparisons/betterbugs-io-vs-bugherd`,
+    url: `${WEB_URL}/comparisons/bugherd-alternative`,
   },
 ];
 
@@ -62,15 +63,22 @@ const defaultComparesionsMenu = [
 
 interface SolutionMenuComponentProps {
   setCollapsed: (d: any) => void;
+  sectionName?: string;
 }
 
 const SolutionMenuComponent = (props: SolutionMenuComponentProps) => {
-  const { setCollapsed } = props;
+  const { setCollapsed, sectionName = 'Solutions' } = props;
   const pathname = usePathname();
   const [comparesionsMenu, setComparesionsMenu] = useState(
     defaultComparesionsMenu
   );
 
+  const trackDesktop = (subSectionName: string, ctaText: string, url: string) =>
+    trackNavInteraction('desktop', { sectionName, subSectionName, ctaText, destinationUrl: url });
+
+  const trackMobile = (subSectionName: string, ctaText: string, url: string) =>
+    trackNavInteraction('mobile', { sectionName, subSectionName, ctaText, destinationUrl: url });
+
   // useEffect(() => {
   //   const fetchComparisons = async () => {
   //     try {
@@ -144,6 +152,9 @@ const SolutionMenuComponent = (props: SolutionMenuComponentProps) => {
                       className={`${
                         pathname === menu?.url && 'text-white'
                       } text-white/70 hover:text-white`}
+                      onClick={() =>
+                        trackDesktop('SOLUTIONS BY ROLE', menu.label, menu.url)
+                      }
                     >
                       <p className="flex text-center font-normal text-base">
                         <span className="mr-2 mt-1">{menu.icon}</span>
@@ -168,6 +179,9 @@ const SolutionMenuComponent = (props: SolutionMenuComponentProps) => {
                       className={`${
                         pathname === menu?.url && 'text-white'
                       } text-white/70 hover:text-white`}
+                      onClick={() =>
+                        trackDesktop('COMPARISON', menu.label, menu.url)
+                      }
                     >
                       <p className="flex text-center font-normal text-base">
                         <span className="mr-2 mt-1">{menu.icon}</span>
@@ -197,7 +211,10 @@ const SolutionMenuComponent = (props: SolutionMenuComponentProps) => {
                   className={`${
                     pathname === menu?.url && 'text-white'
                   } text-white/80 hover:text-white`}
-                  onClick={() => setCollapsed(false)}
+                  onClick={() => {
+                    trackMobile('SOLUTION BY ROLE', menu.label, menu.url);
+                    setCollapsed(false);
+                  }}
                 >
                   <p className="flex text-center font-normal text-base">
                     <span className="mr-2 mt-1">{menu.icon}</span>
@@ -220,7 +237,10 @@ const SolutionMenuComponent = (props: SolutionMenuComponentProps) => {
                   className={`${
                     pathname === menu?.url && 'text-white'
                   } text-white/80 hover:text-white`}
-                  onClick={() => setCollapsed(false)}
+                  onClick={() => {
+                    trackMobile('COMPARISON', menu.label, menu.url);
+                    setCollapsed(false);
+                  }}
                 >
                   <p className="flex text-center font-normal text-base">
                     <span className="mr-2 mt-1">{menu.icon}</span>
diff --git a/app/components/headerMenuDropdownComponents/toolsMenuComponent.tsx b/app/components/headerMenuDropdownComponents/toolsMenuComponent.tsx
index 0d427d9..902b125 100644
--- a/app/components/headerMenuDropdownComponents/toolsMenuComponent.tsx
+++ b/app/components/headerMenuDropdownComponents/toolsMenuComponent.tsx
@@ -6,14 +6,31 @@ import BlogsIcon from '../theme/Icon/blogsIcon';
 import DeveloperIcon from '../theme/Icon/developersLogIcon';
 import MCPIcon from '../theme/Icon/mcpIcon';
 import { WEB_URL } from '@/app/libs/constants';
+import { trackNavInteraction } from '@/app/libs/analytics';
 
 const ToolsMenuComponent = ({
   setCollapsed,
+  sectionName = 'Resources',
 }: {
   setCollapsed?: (v: boolean) => void;
+  sectionName?: string;
 }) => {
   const handleClick = () => setCollapsed?.(false);
 
+  const trackDesktop = (ctaText: string, url: string) =>
+    trackNavInteraction('desktop', {
+      sectionName,
+      ctaText,
+      destinationUrl: url,
+    });
+
+  const trackMobile = (ctaText: string, url: string) =>
+    trackNavInteraction('mobile', {
+      sectionName,
+      ctaText,
+      destinationUrl: url,
+    });
+
   return (
     <div className="relative">
       {/* desktop view */}
@@ -24,6 +41,7 @@ const ToolsMenuComponent = ({
             <Link
               href={`${WEB_URL}/blog`}
               className="flex items-center gap-2 px-3 py-2 rounded-md text-white/80 hover:text-white hover:bg-white/5 text-sm"
+              onClick={() => trackDesktop('Blogs', `${WEB_URL}/blog`)}
             >
               <span className="mt-0.5">
                 <BlogsIcon />
@@ -35,6 +53,9 @@ const ToolsMenuComponent = ({
             <Link
               href={`${WEB_URL}/development-tools`}
               className="flex items-center gap-2 px-3 py-2 rounded-md text-white/80 hover:text-white hover:bg-white/5 text-sm"
+              onClick={() =>
+                trackDesktop('Developer Tools', `${WEB_URL}/development-tools`)
+              }
             >
               <span className="mt-0.5">
                 <DeveloperIcon />
@@ -46,6 +67,7 @@ const ToolsMenuComponent = ({
             <Link
               href={`${WEB_URL}/mcp`}
               className="flex items-center gap-2 px-3 py-2 rounded-md text-white/80 hover:text-white hover:bg-white/5 text-sm"
+              onClick={() => trackDesktop('MCP', `${WEB_URL}/mcp`)}
             >
               <span className="mt-0.5">
                 <MCPIcon />
@@ -63,7 +85,10 @@ const ToolsMenuComponent = ({
           <li className="md:px-3 py-1.5">
             <Link
               href={`${WEB_URL}/blog`}
-              onClick={handleClick}
+              onClick={() => {
+                trackMobile('Blogs', `${WEB_URL}/blog`);
+                handleClick();
+              }}
               className="flex items-center gap-2 px-3 py-2 rounded-md text-white/80 hover:text-white hover:bg-white/5 text-sm"
             >
               <span className="mt-0.5">
@@ -75,7 +100,10 @@ const ToolsMenuComponent = ({
           <li className="md:px-3 py-1.5">
             <Link
               href={`${WEB_URL}/development-tools`}
-              onClick={handleClick}
+              onClick={() => {
+                trackMobile('Developer Tools', `${WEB_URL}/development-tools`);
+                handleClick();
+              }}
               className="flex items-center gap-2 px-3 py-2 rounded-md text-white/80 hover:text-white hover:bg-white/5 text-sm"
             >
               <span className="mt-0.5">
diff --git a/app/components/layout/Header/headerComponent.tsx b/app/components/layout/Header/headerComponent.tsx
index 6ea72cb..5d35b4c 100644
--- a/app/components/layout/Header/headerComponent.tsx
+++ b/app/components/layout/Header/headerComponent.tsx
@@ -20,6 +20,12 @@ import SolutionMenuComponent from '../../headerMenuDropdownComponents/solutionMe
 import ResourceMenuComponent from '../../headerMenuDropdownComponents/resourceMenuComponent';
 import ToolsMenuComponent from '../../headerMenuDropdownComponents/toolsMenuComponent';
 import { useTheme } from '@/app/contexts/themeContext';
+import {
+  trackEvent,
+  PAGE_TYPE,
+  PLATFORM,
+  trackNavInteraction,
+} from '@/app/libs/analytics';
 
 const responsiveHeader = [
   // {
@@ -250,7 +256,9 @@ const HeaderComponent = () => {
       url: `${WEB_URL}`,
       dropdown: [
         {
-          label: <ProductMenuComponent {...{ setCollapsed }} />,
+          label: (
+            <ProductMenuComponent {...{ setCollapsed }} sectionName="Products" />
+          ),
         },
       ],
     },
@@ -260,7 +268,12 @@ const HeaderComponent = () => {
       url: `${WEB_URL}`,
       dropdown: [
         {
-          label: <SolutionMenuComponent {...{ setCollapsed }} />,
+          label: (
+            <SolutionMenuComponent
+              {...{ setCollapsed }}
+              sectionName="Solutions"
+            />
+          ),
         },
       ],
     },
@@ -270,7 +283,12 @@ const HeaderComponent = () => {
       url: `${WEB_URL}`,
       dropdown: [
         {
-          label: <ResourceMenuComponent {...{ setCollapsed }} />,
+          label: (
+            <ResourceMenuComponent
+              {...{ setCollapsed }}
+              sectionName="Integrations"
+            />
+          ),
         },
       ],
     },
@@ -280,7 +298,9 @@ const HeaderComponent = () => {
       url: `${WEB_URL}`,
       dropdown: [
         {
-          label: <ToolsMenuComponent {...{ setCollapsed }} />,
+          label: (
+            <ToolsMenuComponent {...{ setCollapsed }} sectionName="Resources" />
+          ),
         },
       ],
     },
@@ -295,25 +315,36 @@ const HeaderComponent = () => {
     {
       key: '1',
       header: 'Products',
-      content: <ProductMenuComponent {...{ setCollapsed }} />,
+      content: (
+        <ProductMenuComponent {...{ setCollapsed }} sectionName="Products" />
+      ),
       url: `${WEB_URL}`,
     },
     {
       key: '2',
       header: 'Solutions',
-      content: <SolutionMenuComponent {...{ setCollapsed }} />,
+      content: (
+        <SolutionMenuComponent {...{ setCollapsed }} sectionName="Solutions" />
+      ),
       url: `${WEB_URL}`,
     },
     {
       key: '3',
       header: 'Integration',
-      content: <ResourceMenuComponent {...{ setCollapsed }} />,
+      content: (
+        <ResourceMenuComponent
+          {...{ setCollapsed }}
+          sectionName="Integrations"
+        />
+      ),
       url: `${WEB_URL}`,
     },
     {
       key: '4',
       header: 'Resources',
-      content: <ToolsMenuComponent {...{ setCollapsed }} />,
+      content: (
+        <ToolsMenuComponent {...{ setCollapsed }} sectionName="Resources" />
+      ),
       url: `${WEB_URL}`,
     },
   ];
@@ -362,7 +393,16 @@ const HeaderComponent = () => {
       >
         <div className="relative">
           <div className="container mx-auto flex items-center justify-between py-3">
-            <Link href={`${WEB_URL}`} className="flex items-center">
+            <Link
+              href={`${WEB_URL}`}
+              className="flex items-center"
+              onClick={() =>
+                trackEvent('logo_click', {
+                  page_type: PAGE_TYPE,
+                  platform: PLATFORM.desktop,
+                })
+              }
+            >
               <Image
                 src={logoSrc}
                 width={190}
@@ -406,7 +446,16 @@ const HeaderComponent = () => {
                         </p>
                       </Dropdown>
                     ) : (
-                      <Link href={menu?.url}>
+                      <Link
+                        href={menu?.url}
+                        onClick={() =>
+                          trackNavInteraction('desktop', {
+                            sectionName: menu?.label,
+                            ctaText: menu?.label,
+                            destinationUrl: menu?.url,
+                          })
+                        }
+                      >
                         <p
                           className={`${
                             router == menu?.url && '!text-white'
@@ -442,6 +491,13 @@ const HeaderComponent = () => {
                     utmSource ? `?utm_source=${utmSource}` : ''
                   }`}
                   target="_blank"
+                  onClick={() =>
+                    trackNavInteraction('desktop', {
+                      sectionName: 'NA',
+                      ctaText: 'Login',
+                      destinationUrl: 'https://app.betterbugs.io/login',
+                    })
+                  }
                 >
                   <div className="flex font-medium items-center text-white/80 hover:text-white py-4 px-6 text-sm">
                     Login
@@ -454,6 +510,12 @@ const HeaderComponent = () => {
                     utmSource ? `?utm_source=${utmSource}` : ''
                   }`}
                   target="_blank"
+                  onClick={() =>
+                    trackEvent('get_started_click', {
+                      page_type: PAGE_TYPE,
+                      platform: PLATFORM.desktop,
+                    })
+                  }
                 >
                   <Button
                     className={`${hederStyles.getStartedButton} font-medium flex items-center rounded-full border !border-light-primary btn-gradient ${
@@ -482,7 +544,15 @@ const HeaderComponent = () => {
               >
                 <MenuIcon className="w-10 h-10" />
               </div>
-              <Link href={`${WEB_URL}`}>
+              <Link
+                href={`${WEB_URL}`}
+                onClick={() =>
+                  trackEvent('logo_click', {
+                    page_type: PAGE_TYPE,
+                    platform: PLATFORM.mobile,
+                  })
+                }
+              >
                 <Image
                   src={logoSrc}
                   width={150}
@@ -509,6 +579,12 @@ const HeaderComponent = () => {
                   utmSource ? `?utm_source=${utmSource}` : ''
                 }`}
                 target="_blank"
+                onClick={() =>
+                  trackEvent('get_started_click', {
+                    page_type: PAGE_TYPE,
+                    platform: PLATFORM.mobile,
+                  })
+                }
               >
                 <Button
                   className={`${hederStyles.getStartedButton} btn-primary font-medium flex items-center rounded-full border !border-light-primary text-[#FFFFFF0D] hover:bg-primary scroll-gradient !text-base px-4 !h-10`}
@@ -561,7 +637,14 @@ const HeaderComponent = () => {
                     <Link href={data.url} key={index}>
                       <p
                         className="text-white text-lg font-medium py-3"
-                        onClick={() => setCollapsed(false)}
+                        onClick={() => {
+                          trackNavInteraction('mobile', {
+                            sectionName: data.header,
+                            ctaText: data.header,
+                            destinationUrl: data.url,
+                          });
+                          setCollapsed(false);
+                        }}
                       >
                         {data.header}
                       </p>
@@ -570,7 +653,18 @@ const HeaderComponent = () => {
                 </div>
               </div>
               <div className="flex flex-col items-center justify-center px-4 mb-5">
-                <Link target="_blank" href={Extension_URL}>
+                <Link
+                  target="_blank"
+                  href={Extension_URL}
+                  onClick={() =>
+                    trackEvent('add_to_chrome_click', {
+                      page_type: PAGE_TYPE,
+                      platform: PLATFORM.mobile,
+                      section_name: 'Header',
+                      cta_text: browser === 'edge' ? 'Add to Edge' : 'Add to Chrome',
+                    })
+                  }
+                >
                   <Button className="btn-primary text-sm flex items-center justify-center gap-1 rounded-full px-4">
                     {browser === 'edge' ? (
                       <EdgeIcon className="w-7 h-7" />
diff --git a/app/components/layout/footer/footerComponent.tsx b/app/components/layout/footer/footerComponent.tsx
index 9545311..05f434b 100644
--- a/app/components/layout/footer/footerComponent.tsx
+++ b/app/components/layout/footer/footerComponent.tsx
@@ -11,6 +11,10 @@ import YouTubeIcon from '../../theme/Icon/youTubeIcon';
 import DiscordIcon from '../../theme/Icon/discordIcon';
 import { WEB_URL } from '@/app/libs/constants';
 import { useTheme } from '@/app/contexts/themeContext';
+import {
+  trackFooterInteraction,
+  trackSocialInteraction,
+} from '@/app/libs/analytics';
 
 const FooterComponent = () => {
   const { isLightTheme } = useTheme();
@@ -19,6 +23,9 @@ const FooterComponent = () => {
   const router = useRouter();
   const [sectionId, setSectionId] = useState<string | null>(null);
 
+  const trackFooter = (sectionName: string, ctaText: string, url: string) =>
+    trackFooterInteraction(sectionName, ctaText, url);
+
   const handleClick = (url: string, id?: string) => (e: any) => {
     e.preventDefault();
     if (id) {
@@ -112,10 +119,10 @@ const FooterComponent = () => {
     { label: 'Managers', url: `${WEB_URL}/solution/managers` },
     { label: 'Support Teams', url: `${WEB_URL}/solution/support-teams` },
     { label: 'Founders', url: `${WEB_URL}/solution/founders` },
-    {
-      label: 'Comparisons',
-      url: `${WEB_URL}/comparisons/betterbugs-io-vs-bugherd`,
-    },
+    // {
+    //   label: 'Comparisons',
+    //   url: `${WEB_URL}/comparisons/betterbugs-io-vs-bugherd`,
+    // },
   ];
 
   const socialIconWrapperClass = isLightTheme
@@ -153,6 +160,7 @@ const FooterComponent = () => {
                       className={`${
                         pathname === menu.url && 'text-white'
                       } text-white/70 hover:text-white`}
+                      onClick={() => trackFooter('About', menu.label, menu.url)}
                     >
                       <span className="font-medium text-base text-white/70 hover:text-white">
                         {menu.label}
@@ -173,6 +181,7 @@ const FooterComponent = () => {
                       className={`${
                         pathname === menu.url && 'text-white'
                       } text-white/70 hover:text-white`}
+                      onClick={() => trackFooter('Legal', menu.label, menu.url)}
                     >
                       <span className="font-medium text-base text-white/70 hover:text-white">
                         {menu.label}
@@ -190,9 +199,10 @@ const FooterComponent = () => {
                     <Link
                       target="_blank"
                       href={menu.url}
-                      onClick={
-                        menu.id ? handleClick(menu.url, menu.id) : undefined
-                      }
+                      onClick={(e: any) => {
+                        trackFooter('Features', menu.label, menu.url);
+                        if (menu.id) handleClick(menu.url, menu.id)(e);
+                      }}
                       className={`${
                         pathname === menu.url && 'text-white'
                       } text-white/70 hover:text-white`}
@@ -216,6 +226,9 @@ const FooterComponent = () => {
                       className={`${
                         pathname === menu.url && 'text-secondary'
                       } text-white/70 hover:text-secondary`}
+                      onClick={() =>
+                        trackFooter('Integrations', menu.label, menu.url)
+                      }
                     >
                       <span className="font-medium text-base text-white/70 hover:text-white">
                         {menu.label}
@@ -236,6 +249,9 @@ const FooterComponent = () => {
                       className={`${
                         pathname === menu.url && 'text-secondary'
                       } text-white/70 hover:text-secondary`}
+                      onClick={() =>
+                        trackFooter('Use Cases', menu.label, menu.url)
+                      }
                     >
                       <span className="font-medium text-base text-white/70 hover:text-white">
                         {menu.label}
@@ -286,6 +302,7 @@ const FooterComponent = () => {
                   href="https://www.linkedin.com/company/betterbugs/"
                   target="_blank"
                   aria-label="LinkedIn"
+                  onClick={() => trackSocialInteraction('Linked-IN')}
                 >
                   <div className={socialIconWrapperClass}>
                     <LinkedinIcon className={socialIconClass} />
@@ -295,6 +312,7 @@ const FooterComponent = () => {
                   href="https://twitter.com/BetterBugs"
                   target="_blank"
                   aria-label="Twitter"
+                  onClick={() => trackSocialInteraction('X')}
                 >
                   <div className={socialIconWrapperClass}>
                     <TwitterIcon className={socialIconClass} />
@@ -304,6 +322,7 @@ const FooterComponent = () => {
                   href="https://www.instagram.com/betterbugshq/"
                   target="_blank"
                   aria-label="Instagram"
+                  onClick={() => trackSocialInteraction('Instagram')}
                 >
                   <div className={socialIconWrapperClass}>
                     <InstagramIcon className={socialIconClass} />
@@ -313,6 +332,7 @@ const FooterComponent = () => {
                   href="https://www.youtube.com/@betterbugshq"
                   target="_blank"
                   aria-label="LinkedIn"
+                  onClick={() => trackSocialInteraction('YouTube')}
                 >
                   <div className={socialIconWrapperWideClass}>
                     <YouTubeIcon className={`${socialIconClass} !w-12 !h-12`} />
@@ -322,6 +342,7 @@ const FooterComponent = () => {
                   href="https://discord.com/invite/HF8XjwVtPh"
                   target="_blank"
                   aria-label="Discord"
+                  onClick={() => trackSocialInteraction('Discord')}
                 >
                   <div className={socialIconWrapperWideClass}>
                     <DiscordIcon className={`${socialIconClass} !w-12 !h-12`} />
diff --git a/app/layout.tsx b/app/layout.tsx
index 76b2287..5cd279e 100644
--- a/app/layout.tsx
+++ b/app/layout.tsx
@@ -111,7 +111,9 @@ window.gtag =
           </>
         )}
         <link rel="alternate" href="https://www.betterbugs.io/" />
-        <link href="/favicon.ico" rel="icon" />
+        <link rel="icon" href="/favicon.ico" sizes="any" />
+        <link rel="icon" type="image/svg+xml" href="/images/bb-icon.svg" />
+        <link rel="apple-touch-icon" href="/images/bb-icon.svg" />
         <meta property="og:locale" content="en_US" />
         <meta property="og:type" content="website" />
         <link rel="preconnect" href="https://fonts.googleapis.com" />
diff --git a/app/libs/analytics.ts b/app/libs/analytics.ts
new file mode 100644
index 0000000..1af0adb
--- /dev/null
+++ b/app/libs/analytics.ts
@@ -0,0 +1,90 @@
+declare global {
+  interface Window {
+    dataLayer?: any[];
+  }
+}
+
+// This app is served at betterbugs.io/development-tools via a rewrite proxy,
+// so it shares cookies with the marketing site and bb-app on *.betterbugs.io.
+const BB_UID_COOKIE = 'bb_uid';
+
+const getCookie = (name: string): string | undefined => {
+  if (typeof document === 'undefined') return undefined;
+  const match = document.cookie.match(
+    new RegExp('(?:^|; )' + name.replace(/([.$?*|{}()[\]\\/+^])/g, '\\$1') + '=([^;]*)')
+  );
+  return match ? decodeURIComponent(match[1]) : undefined;
+};
+
+export const trackEvent = (event: string, params: Record<string, any> = {}) => {
+  if (typeof window === 'undefined') return;
+  const userId = getCookie(BB_UID_COOKIE);
+  window.dataLayer = window.dataLayer || [];
+  window.dataLayer.push({
+    event,
+    ...params,
+    user_id: userId || undefined,
+    user_type: userId ? 'logged_in' : 'guest',
+  });
+};
+
+// Every page in this app is a development-tools page per the GA4 schema
+// (page_type: home_page, development_tools, etc.) — no per-route derivation
+// needed like on the marketing site.
+export const PAGE_TYPE = 'development_tools';
+
+export const PLATFORM = {
+  desktop: 'd-web',
+  mobile: 'm-web',
+} as const;
+
+// For components with no separate desktop/mobile markup, resolve platform
+// from viewport width at click time (md breakpoint = 768px, matches Tailwind's `md:`).
+export const getRuntimePlatform = (): string => {
+  if (typeof window === 'undefined') return PLATFORM.desktop;
+  return window.innerWidth < 768 ? PLATFORM.mobile : PLATFORM.desktop;
+};
+
+// Shared tracker for header nav / dropdown links.
+export const trackNavInteraction = (
+  variant: 'desktop' | 'mobile',
+  params: {
+    sectionName: string;
+    subSectionName?: string;
+    ctaText: string;
+    destinationUrl: string;
+  }
+) => {
+  trackEvent(
+    variant === 'desktop' ? 'navigation_interaction' : 'hamburger_menu_interaction',
+    {
+      page_type: PAGE_TYPE,
+      platform: variant === 'desktop' ? PLATFORM.desktop : PLATFORM.mobile,
+      section_name: params.sectionName,
+      sub_section_name: params.subSectionName ?? 'NA',
+      cta_text: params.ctaText,
+      destination_url: params.destinationUrl,
+    }
+  );
+};
+
+// Shared trackers for the footer.
+export const trackFooterInteraction = (
+  sectionName: string,
+  ctaText: string,
+  destinationUrl: string
+) =>
+  trackEvent('footer_interaction', {
+    page_type: PAGE_TYPE,
+    platform: getRuntimePlatform(),
+    section_name: sectionName,
+    cta_text: ctaText,
+    destination_url: destinationUrl,
+  });
+
+export const trackSocialInteraction = (ctaText: string) =>
+  trackEvent('social_interaction', {
+    page_type: PAGE_TYPE,
+    platform: getRuntimePlatform(),
+    cta_text: ctaText,
+  });
diff --git a/app/page.tsx b/app/page.tsx
index 09e17c6..b0ac155 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -16,6 +16,7 @@ import ConvertXIcon from './components/theme/Icon/convertXIcon';
 import GenieIcon from './components/theme/Icon/genieIcon';
 import DevUtilsIcon from './components/theme/Icon/devUtilsIcon';
 import { useTheme } from './contexts/themeContext';
+import { trackEvent, PAGE_TYPE, getRuntimePlatform } from './libs/analytics';
 
 const CATEGORY_GROUPS = [
   'Text Lab',
@@ -156,17 +157,25 @@ const Page = () => {
     }
   }, []);
 
-  const toggleFavorite = (e: React.MouseEvent, url: string) => {
+  const toggleFavorite = (e: React.MouseEvent, url: string, toolName?: string) => {
     e.preventDefault();
     e.stopPropagation();
     let updatedFavorites;
-    if (favorites.includes(url)) {
+    const wasFavorite = favorites.includes(url);
+    if (wasFavorite) {
       updatedFavorites = favorites.filter(fav => fav !== url);
     } else {
       updatedFavorites = [...favorites, url];
     }
     setFavorites(updatedFavorites);
 
+    trackEvent('dev_tool_favorite_click', {
+      page_type: PAGE_TYPE,
+      platform: getRuntimePlatform(),
+      tool_name: toolName,
+      favorite_status: wasFavorite ? 'removed' : 'added',
+    });
+
     try {
       localStorage.setItem('favoriteTools', JSON.stringify(updatedFavorites));
     } catch (error) {
@@ -491,13 +500,20 @@ const Page = () => {
                     key={index}
                     href={`${item?.url}`}
                     className={`bg-white/5 rounded-lg p-8 w-full ${DevelopmentToolsStyles.contentCardHoverEffect} ${DevelopmentToolsStyles.toolCard} group md:min-h-[160px] relative`}
+                    onClick={() =>
+                      trackEvent('dev_tool_card_click', {
+                        page_type: PAGE_TYPE,
+                        platform: getRuntimePlatform(),
+                        tool_name: item?.title,
+                      })
+                    }
                   >
                     <div className="flex justify-between items-start gap-2">
                       <h3 className="text-lg font-semibold pr-6">
                         {item?.title}
                       </h3>
                       <button
-                        onClick={e => toggleFavorite(e, item?.url)}
+                        onClick={e => toggleFavorite(e, item?.url, item?.title)}
                         className="absolute right-4 top-4 text-white/30 hover:text-yellow-400 transition-colors z-10"
                         title={
                           favorites.includes(item?.url)