betterbugs · dev-betterbugs · Sep 1, 2026 · Aug 14, 2026 · Aug 31, 2026 · Aug 31, 2026
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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