100 lines
3.1 KiB
TypeScript
100 lines
3.1 KiB
TypeScript
"use client";
|
|
|
|
import type { TrackingTool } from "@/app/actions";
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from "@/components/ui/card";
|
|
import { CopyButton } from "./copy-button";
|
|
import { BarChart, Tag, Facebook, Activity, Wind } from "lucide-react";
|
|
|
|
interface TrackingDisplayProps {
|
|
tools: TrackingTool[];
|
|
}
|
|
|
|
const toolInfo: {
|
|
[key: string]: { icon: React.ElementType; description: string };
|
|
} = {
|
|
"Google Tag Manager": {
|
|
icon: Tag,
|
|
description: "A tag management system to deploy and update marketing tags.",
|
|
},
|
|
"Google Analytics (GA4)": {
|
|
icon: BarChart,
|
|
description: "The latest version of Google's web analytics service.",
|
|
},
|
|
"Google Analytics (Universal)": {
|
|
icon: BarChart,
|
|
description: "The previous generation of Google Analytics.",
|
|
},
|
|
"Facebook Pixel": {
|
|
icon: Facebook,
|
|
description: "An analytics tool to measure the effectiveness of advertising.",
|
|
},
|
|
Hotjar: {
|
|
icon: Wind,
|
|
description: "A tool for behavior analytics and user feedback.",
|
|
},
|
|
HubSpot: {
|
|
icon: Activity,
|
|
description: "An inbound marketing, sales, and service software.",
|
|
},
|
|
Default: {
|
|
icon: Activity,
|
|
description: "A detected tracking or analytics tool.",
|
|
},
|
|
};
|
|
|
|
export function TrackingDisplay({ tools }: TrackingDisplayProps) {
|
|
return (
|
|
<Card className="w-full shadow-lg rounded-lg">
|
|
<CardHeader>
|
|
<CardTitle>Tracking Analysis</CardTitle>
|
|
<CardDescription>
|
|
External analytics and marketing tools detected on the page.
|
|
</CardDescription>
|
|
</CardHeader>
|
|
<CardContent>
|
|
{tools && tools.length > 0 ? (
|
|
<div className="space-y-4">
|
|
{tools.map((tool, index) => {
|
|
const info = toolInfo[tool.name] || toolInfo["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 className="flex-grow">
|
|
<h4 className="font-semibold text-lg">{tool.name}</h4>
|
|
<p className="text-sm text-muted-foreground">
|
|
{info.description}
|
|
</p>
|
|
{tool.id && (
|
|
<div className="mt-2 flex items-center gap-2 p-2 bg-background rounded-md">
|
|
<span className="text-sm font-mono text-muted-foreground flex-grow break-all">
|
|
{tool.id}
|
|
</span>
|
|
<CopyButton textToCopy={tool.id} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
) : (
|
|
<div className="text-center py-8 text-muted-foreground">
|
|
<p>No external tracking tools detected.</p>
|
|
</div>
|
|
)}
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
} |