122 lines
3.4 KiB
TypeScript
122 lines
3.4 KiB
TypeScript
"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>
|
|
);
|
|
} |