[dyad] Adding a tracking tab to show tracking tools - wrote 4 file(s)

2026-01-21 08:05:43 +01:00
parent 8c68562830
commit f51d90d9cc
4 changed files with 212 additions and 1 deletions
--- a/src/components/tracking-display.tsx
+++ b/src/components/tracking-display.tsx
@@ -0,0 +1,122 @@
+"use client";
+
+import type { DetectedTracker } from "@/app/actions";
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+import {
+  BarChart3,
+  MousePointerClick,
+  Target,
+  Users,
+  Database,
+  Code,
+  Eye,
+} from "lucide-react";
+
+interface TrackingDisplayProps {
+  trackers: DetectedTracker[];
+}
+
+const trackerInfo: {
+  [key: string]: { icon: React.ElementType; description: string };
+} = {
+  "Google Analytics": {
+    icon: BarChart3,
+    description: "Web analytics service that tracks and reports website traffic.",
+  },
+  "Google Tag Manager": {
+    icon: Code,
+    description:
+      "Tag management system to easily deploy and manage marketing tags.",
+  },
+  "Facebook Pixel": {
+    icon: Target,
+    description:
+      "Analytics tool to measure the effectiveness of advertising by understanding actions people take on a website.",
+  },
+  Hotjar: {
+    icon: MousePointerClick,
+    description:
+      "Behavior analytics tool that reveals the online behavior and voice of users.",
+  },
+  HubSpot: {
+    icon: Users,
+    description: "Inbound marketing, sales, and service software.",
+  },
+  Segment: {
+    icon: Database,
+    description:
+      "Customer data platform that collects, cleans, and controls customer data.",
+  },
+  Mixpanel: {
+    icon: BarChart3,
+    description:
+      "Product analytics tool for tracking user interactions with web and mobile applications.",
+  },
+  "Vercel Analytics": {
+    icon: BarChart3,
+    description: "Privacy-friendly analytics for websites deployed on Vercel.",
+  },
+  Plausible: {
+    icon: BarChart3,
+    description:
+      "A simple, lightweight and privacy-friendly web analytics tool.",
+  },
+  "Microsoft Clarity": {
+    icon: Eye,
+    description:
+      "A free user behavior analytics tool that helps you understand how users are interacting with your website.",
+  },
+  Default: {
+    icon: Code,
+    description: "A detected tracking or analytics tool.",
+  },
+};
+
+export function TrackingDisplay({ trackers }: TrackingDisplayProps) {
+  return (
+    <Card className="w-full shadow-lg rounded-lg">
+      <CardHeader>
+        <CardTitle>Tracking Analysis</CardTitle>
+        <CardDescription>
+          Tracking and analytics tools detected on the page.
+        </CardDescription>
+      </CardHeader>
+      <CardContent>
+        {trackers && trackers.length > 0 ? (
+          <div className="space-y-4">
+            {trackers.map((tracker, index) => {
+              const info = trackerInfo[tracker.name] || trackerInfo["Default"];
+              const Icon = info.icon;
+              return (
+                <div
+                  key={index}
+                  className="flex items-start gap-4 p-4 border rounded-lg bg-muted/50"
+                >
+                  <div className="flex h-10 w-10 flex-shrink-0 items-center justify-center rounded-lg bg-primary text-primary-foreground">
+                    <Icon className="h-6 w-6" />
+                  </div>
+                  <div>
+                    <h4 className="font-semibold text-lg">{tracker.name}</h4>
+                    <p className="text-sm text-muted-foreground">
+                      {info.description}
+                    </p>
+                  </div>
+                </div>
+              );
+            })}
+          </div>
+        ) : (
+          <div className="text-center py-8 text-muted-foreground">
+            <p>No specific tracking tools detected.</p>
+          </div>
+        )}
+      </CardContent>
+    </Card>
+  );
+}