feat: Integrated Google Ads Generator feature
- Added GoogleAdsGenerator component with comprehensive keyword research and ad copy generation. - Updated Sidebar and Home page for navigation. - Added necessary UI components (Badge, Tabs) and dependencies. - Added custom animations for progress indicators.
This commit is contained in:
Gemini AI
871
components/GoogleAdsGenerator.tsx
Normal file
871
components/GoogleAdsGenerator.tsx
Normal file
@@ -0,0 +1,871 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useEffect, useCallback } from "react";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
|
||||
import useStore from "@/lib/store";
|
||||
import modelAdapter from "@/lib/services/adapter-instance";
|
||||
import {
|
||||
Search,
|
||||
Target,
|
||||
DollarSign,
|
||||
Globe,
|
||||
Calendar,
|
||||
Zap,
|
||||
BarChart3,
|
||||
Layers,
|
||||
ShieldCheck,
|
||||
Loader2,
|
||||
Copy,
|
||||
Download,
|
||||
ExternalLink,
|
||||
MousePointer2,
|
||||
CheckCircle2,
|
||||
AlertCircle,
|
||||
Megaphone,
|
||||
Briefcase,
|
||||
TrendingUp,
|
||||
X,
|
||||
Plus
|
||||
} from "lucide-react";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { GoogleAdsResult, GoogleAdsKeyword, GoogleAdCopy, GoogleAdsCampaign } from "@/types";
|
||||
|
||||
export default function GoogleAdsGenerator() {
|
||||
const {
|
||||
googleAdsResult,
|
||||
selectedProvider,
|
||||
selectedModels,
|
||||
availableModels,
|
||||
apiKeys,
|
||||
isProcessing,
|
||||
error,
|
||||
setGoogleAdsResult,
|
||||
setProcessing,
|
||||
setError,
|
||||
setAvailableModels,
|
||||
setSelectedModel,
|
||||
setSelectedProvider,
|
||||
} = useStore();
|
||||
|
||||
// Input states
|
||||
const [websiteUrl, setWebsiteUrl] = useState("");
|
||||
const [products, setProducts] = useState<string[]>([""]);
|
||||
const [targetAudience, setTargetAudience] = useState("");
|
||||
const [budgetMin, setBudgetMin] = useState("500");
|
||||
const [budgetMax, setBudgetMax] = useState("2000");
|
||||
const [currency, setCurrency] = useState("USD");
|
||||
const [duration, setDuration] = useState("30 days");
|
||||
const [industry, setIndustry] = useState("");
|
||||
|
||||
const [activeTab, setActiveTab] = useState("input");
|
||||
const [copied, setCopied] = useState<string | null>(null);
|
||||
|
||||
const selectedModel = selectedModels[selectedProvider];
|
||||
const models = availableModels[selectedProvider] || modelAdapter.getAvailableModels(selectedProvider);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof window !== "undefined") {
|
||||
loadAvailableModels();
|
||||
}
|
||||
}, [selectedProvider]);
|
||||
|
||||
const loadAvailableModels = async () => {
|
||||
const fallbackModels = modelAdapter.getAvailableModels(selectedProvider);
|
||||
setAvailableModels(selectedProvider, fallbackModels);
|
||||
|
||||
try {
|
||||
const result = await modelAdapter.listModels(selectedProvider);
|
||||
if (result.success && result.data) {
|
||||
setAvailableModels(selectedProvider, result.data[selectedProvider] || fallbackModels);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to load models:", error);
|
||||
}
|
||||
};
|
||||
|
||||
const addProduct = () => setProducts([...products, ""]);
|
||||
const removeProduct = (index: number) => {
|
||||
const newProducts = products.filter((_, i) => i !== index);
|
||||
setProducts(newProducts.length ? newProducts : [""]);
|
||||
};
|
||||
const updateProduct = (index: number, value: string) => {
|
||||
const newProducts = [...products];
|
||||
newProducts[index] = value;
|
||||
setProducts(newProducts);
|
||||
};
|
||||
|
||||
const validateUrl = (url: string) => {
|
||||
try {
|
||||
new URL(url.startsWith("http") ? url : `https://${url}`);
|
||||
return true;
|
||||
} catch (e) {
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleGenerate = async () => {
|
||||
if (!websiteUrl.trim()) {
|
||||
setError("Please enter a website URL");
|
||||
return;
|
||||
}
|
||||
if (!validateUrl(websiteUrl)) {
|
||||
setError("Please enter a valid URL");
|
||||
return;
|
||||
}
|
||||
const filteredProducts = products.filter(p => p.trim() !== "");
|
||||
if (filteredProducts.length === 0) {
|
||||
setError("Please add at least one product or service");
|
||||
return;
|
||||
}
|
||||
|
||||
const apiKey = apiKeys[selectedProvider];
|
||||
const isQwenOAuth = selectedProvider === "qwen" && modelAdapter.hasQwenAuth();
|
||||
|
||||
if (!isQwenOAuth && (!apiKey || !apiKey.trim())) {
|
||||
setError(`Please configure your ${selectedProvider.toUpperCase()} API key in Settings`);
|
||||
return;
|
||||
}
|
||||
|
||||
setProcessing(true);
|
||||
setError(null);
|
||||
setActiveTab("input");
|
||||
|
||||
try {
|
||||
const result = await modelAdapter.generateGoogleAds(websiteUrl, {
|
||||
productsServices: filteredProducts,
|
||||
targetAudience,
|
||||
budgetRange: { min: parseInt(budgetMin), max: parseInt(budgetMax), currency },
|
||||
campaignDuration: duration,
|
||||
industry,
|
||||
language: "English"
|
||||
}, selectedProvider, selectedModel);
|
||||
|
||||
if (result.success && result.data) {
|
||||
try {
|
||||
const parsedData = typeof result.data === 'string' ? JSON.parse(result.data) : result.data;
|
||||
const adsResult: GoogleAdsResult = {
|
||||
...parsedData,
|
||||
id: Math.random().toString(36).substr(2, 9),
|
||||
websiteUrl,
|
||||
productsServices: filteredProducts,
|
||||
generatedAt: new Date(),
|
||||
rawContent: typeof result.data === 'string' ? result.data : JSON.stringify(result.data, null, 2)
|
||||
};
|
||||
setGoogleAdsResult(adsResult);
|
||||
setActiveTab("keywords");
|
||||
} catch (e) {
|
||||
console.error("Failed to parse ads data:", e);
|
||||
setError("Failed to parse the generated ads content. Please try again.");
|
||||
}
|
||||
} else {
|
||||
setError(result.error || "Failed to generate Google Ads campaign");
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Ads Generation error:", err);
|
||||
setError(err instanceof Error ? err.message : "An error occurred");
|
||||
} finally {
|
||||
setProcessing(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCopy = async (text: string, id: string) => {
|
||||
await navigator.clipboard.writeText(text);
|
||||
setCopied(id);
|
||||
setTimeout(() => setCopied(null), 2000);
|
||||
};
|
||||
|
||||
const exportToCsv = () => {
|
||||
if (!googleAdsResult) return;
|
||||
|
||||
let csvContent = "data:text/csv;charset=utf-8,";
|
||||
csvContent += "Type,Category,Headline/Keyword,Description/Value,Details\n";
|
||||
|
||||
// Keywords
|
||||
googleAdsResult.keywords.primary.forEach(k => {
|
||||
csvContent += `Keyword,Primary,"${k.keyword}","${k.searchVolume || ''}","${k.competition || ''}"\n`;
|
||||
});
|
||||
googleAdsResult.keywords.longTail.forEach(k => {
|
||||
csvContent += `Keyword,Long-Tail,"${k.keyword}","${k.searchVolume || ''}","${k.competition || ''}"\n`;
|
||||
});
|
||||
googleAdsResult.keywords.negative.forEach(k => {
|
||||
csvContent += `Keyword,Negative,"${k.keyword}","",""\n`;
|
||||
});
|
||||
|
||||
// Ads
|
||||
googleAdsResult.adCopies.forEach((ad, i) => {
|
||||
ad.headlines.forEach((h, j) => {
|
||||
csvContent += `Ad Copy,Headline ${j + 1},"${h}","",""\n`;
|
||||
});
|
||||
ad.descriptions.forEach((d, j) => {
|
||||
csvContent += `Ad Copy,Description ${j + 1},"${d}","",""\n`;
|
||||
});
|
||||
});
|
||||
|
||||
const encodedUri = encodeURI(csvContent);
|
||||
const link = document.createElement("a");
|
||||
link.setAttribute("href", encodedUri);
|
||||
link.setAttribute("download", `google_ads_${googleAdsResult.id}.csv`);
|
||||
document.body.appendChild(link);
|
||||
link.click();
|
||||
document.body.removeChild(link);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="mx-auto max-w-7xl animate-in fade-in duration-500">
|
||||
<div className="mb-6 flex flex-col md:flex-row md:items-center justify-between gap-4">
|
||||
<div>
|
||||
<h1 className="text-3xl font-bold tracking-tight bg-gradient-to-r from-blue-600 to-indigo-600 bg-clip-text text-transparent flex items-center gap-3">
|
||||
<Megaphone className="h-8 w-8 text-blue-600" />
|
||||
Google Ads Gen
|
||||
<Badge variant="secondary" className="bg-blue-100 text-blue-700 border-blue-200">PRO</Badge>
|
||||
</h1>
|
||||
<p className="text-muted-foreground mt-1">
|
||||
Generate high-converting keywords, ad copy, and campaign structures with AI.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{googleAdsResult && (
|
||||
<div className="flex gap-2">
|
||||
<Button variant="outline" size="sm" onClick={exportToCsv} className="gap-2">
|
||||
<Download className="h-4 w-4" />
|
||||
Export CSV
|
||||
</Button>
|
||||
<Button variant="outline" size="sm" onClick={() => setGoogleAdsResult(null)} className="gap-2">
|
||||
<X className="h-4 w-4" />
|
||||
New Campaign
|
||||
</Button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="grid gap-6 grid-cols-1 lg:grid-cols-12">
|
||||
{/* Input Panel */}
|
||||
<div className={cn("lg:col-span-4 space-y-6", activeTab !== "input" && googleAdsResult && "hidden lg:block")}>
|
||||
<Card className="border-blue-100 shadow-sm overflow-hidden">
|
||||
<div className="h-1.5 bg-gradient-to-r from-blue-500 to-indigo-600" />
|
||||
<CardHeader>
|
||||
<CardTitle className="text-lg flex items-center gap-2">
|
||||
<Target className="h-5 w-5 text-blue-600" />
|
||||
Campaign Parameters
|
||||
</CardTitle>
|
||||
<CardDescription>
|
||||
Define your goals and target audience.
|
||||
</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-semibold flex items-center gap-2 text-foreground/80">
|
||||
<Globe className="h-4 w-4" />
|
||||
Website URL
|
||||
</label>
|
||||
<Input
|
||||
placeholder="e.g. https://www.your-business.com"
|
||||
value={websiteUrl}
|
||||
onChange={(e) => setWebsiteUrl(e.target.value)}
|
||||
className="bg-muted/30 focus-visible:ring-blue-500"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-sm font-semibold flex items-center gap-2 text-foreground/80">
|
||||
<Briefcase className="h-4 w-4" />
|
||||
Products or Services
|
||||
</label>
|
||||
<div className="space-y-2">
|
||||
{products.map((product, index) => (
|
||||
<div key={index} className="flex gap-2">
|
||||
<Input
|
||||
placeholder={`Service/Product ${index + 1}`}
|
||||
value={product}
|
||||
onChange={(e) => updateProduct(index, e.target.value)}
|
||||
className="bg-muted/30 focus-visible:ring-blue-500"
|
||||
/>
|
||||
{products.length > 1 && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon"
|
||||
onClick={() => removeProduct(index)}
|
||||
className="text-muted-foreground hover:text-destructive h-10 w-10"
|
||||
>
|
||||
<X className="h-4 w-4" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
))}
|
||||
<Button
|
||||
variant="outline"
|
||||
size="sm"
|
||||
onClick={addProduct}
|
||||
className="w-full border-dashed border-blue-200 text-blue-600 hover:bg-blue-50 hover:text-blue-700"
|
||||
>
|
||||
<Plus className="mr-2 h-4 w-4" />
|
||||
Add Another
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="p-3 bg-blue-50/50 rounded-lg border border-blue-100/50 space-y-3">
|
||||
<div className="flex items-center justify-between">
|
||||
<label className="text-sm font-semibold text-blue-800 flex items-center gap-2">
|
||||
<DollarSign className="h-4 w-4" />
|
||||
Monthly Budget
|
||||
</label>
|
||||
</div>
|
||||
<div className="flex gap-2 items-center">
|
||||
<div className="relative flex-1">
|
||||
<span className="absolute left-3 top-2.5 text-muted-foreground text-xs">$</span>
|
||||
<Input
|
||||
type="number"
|
||||
value={budgetMin}
|
||||
onChange={(e) => setBudgetMin(e.target.value)}
|
||||
className="pl-7 bg-white h-9 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<span className="text-muted-foreground">to</span>
|
||||
<div className="relative flex-1">
|
||||
<span className="absolute left-3 top-2.5 text-muted-foreground text-xs">$</span>
|
||||
<Input
|
||||
type="number"
|
||||
value={budgetMax}
|
||||
onChange={(e) => setBudgetMax(e.target.value)}
|
||||
className="pl-7 bg-white h-9 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
Industry
|
||||
</label>
|
||||
<Input
|
||||
placeholder="e.g. SaaS"
|
||||
value={industry}
|
||||
onChange={(e) => setIndustry(e.target.value)}
|
||||
className="h-9 text-sm"
|
||||
/>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
Duration
|
||||
</label>
|
||||
<Input
|
||||
placeholder="e.g. 30 days"
|
||||
value={duration}
|
||||
onChange={(e) => setDuration(e.target.value)}
|
||||
className="h-9 text-sm"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<label className="text-xs font-semibold text-muted-foreground uppercase tracking-wider">
|
||||
Target Audience
|
||||
</label>
|
||||
<Input
|
||||
placeholder="e.g. Small business owners in US"
|
||||
value={targetAudience}
|
||||
onChange={(e) => setTargetAudience(e.target.value)}
|
||||
className="h-9 text-sm"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="pt-4 border-t border-muted">
|
||||
<div className="flex flex-wrap gap-2 mb-4">
|
||||
{(["qwen", "ollama", "zai"] as const).map((provider) => (
|
||||
<Button
|
||||
key={provider}
|
||||
variant={selectedProvider === provider ? "default" : "outline"}
|
||||
size="sm"
|
||||
onClick={() => setSelectedProvider(provider)}
|
||||
className={cn(
|
||||
"capitalize h-8 px-3 text-xs",
|
||||
selectedProvider === provider ? "bg-blue-600 hover:bg-blue-700" : ""
|
||||
)}
|
||||
>
|
||||
{provider === "qwen" ? "Qwen" : provider === "ollama" ? "Ollama" : "Z.AI"}
|
||||
</Button>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<select
|
||||
value={selectedModel}
|
||||
onChange={(e) => setSelectedModel(selectedProvider, e.target.value)}
|
||||
className="w-full rounded-md border border-input bg-background px-3 py-2 text-xs mb-4"
|
||||
>
|
||||
{models.map((model) => (
|
||||
<option key={model} value={model}>
|
||||
{model}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
|
||||
{error && (
|
||||
<div className="rounded-md bg-destructive/10 p-3 text-xs text-destructive flex items-start gap-2 mb-4 animate-in slide-in-from-top-1 duration-300">
|
||||
<AlertCircle className="h-4 w-4 shrink-0 mt-0.5" />
|
||||
<span>{error}</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<Button
|
||||
onClick={handleGenerate}
|
||||
disabled={isProcessing || !websiteUrl}
|
||||
className="w-full h-11 bg-gradient-to-r from-blue-600 to-indigo-600 hover:from-blue-700 hover:to-indigo-700 font-semibold shadow-md shadow-blue-200 text-sm group"
|
||||
>
|
||||
{isProcessing ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Analyzing Website...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Zap className="mr-2 h-4 w-4 group-hover:fill-current transition-all" />
|
||||
Generate Google Ads Campaign
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<div className="rounded-xl border bg-gradient-to-br from-indigo-50 to-blue-50 p-5 border-blue-100 shadow-sm">
|
||||
<h4 className="font-bold text-blue-900 flex items-center gap-2 mb-3">
|
||||
<ShieldCheck className="h-5 w-5 text-indigo-600" />
|
||||
Quality Assurance
|
||||
</h4>
|
||||
<ul className="space-y-2.5">
|
||||
{[
|
||||
"Character limit enforcement",
|
||||
"Keyword relevance matching >85%",
|
||||
"Google Ads policy compliance",
|
||||
"Mobile optimization focus"
|
||||
].map((item, i) => (
|
||||
<li key={i} className="flex items-center gap-2 text-sm text-blue-800/80">
|
||||
<CheckCircle2 className="h-4 w-4 text-green-600 shrink-0" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Results Panel */}
|
||||
<div className="lg:col-span-8 flex flex-col h-full min-h-[600px]">
|
||||
{!googleAdsResult && !isProcessing && (
|
||||
<div className="flex-1 flex flex-col items-center justify-center border-2 border-dashed rounded-3xl bg-muted/20 p-12 text-center">
|
||||
<div className="w-20 h-20 bg-blue-100 rounded-full flex items-center justify-center mb-6">
|
||||
<Megaphone className="h-10 w-10 text-blue-600" />
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-foreground">Ready to Launch?</h3>
|
||||
<p className="text-muted-foreground max-w-sm mt-2 mb-6 text-sm">
|
||||
Enter your website URL and products on the left to generate keyword research, ad copy, and a full campaign structure.
|
||||
</p>
|
||||
<div className="flex gap-3">
|
||||
<Badge variant="outline" className="px-3 py-1 bg-white">15+ Years Domain Knowledge</Badge>
|
||||
<Badge variant="outline" className="px-3 py-1 bg-white">Quality Score Optimization</Badge>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{isProcessing && (
|
||||
<div className="flex-1 flex flex-col items-center justify-center p-12 text-center animate-pulse">
|
||||
<div className="relative mb-8">
|
||||
<div className="w-24 h-24 border-4 border-blue-100 rounded-full animate-spin" style={{ borderTopColor: 'rgb(37 99 235)' }} />
|
||||
<div className="absolute inset-0 flex items-center justify-center">
|
||||
<Search className="h-8 w-8 text-blue-600 animate-bounce" />
|
||||
</div>
|
||||
</div>
|
||||
<h3 className="text-xl font-bold text-foreground mb-2">Analyzing Domain Content</h3>
|
||||
<div className="max-w-md w-full bg-muted/40 rounded-full h-2 mb-4 overflow-hidden">
|
||||
<div className="bg-blue-600 h-full animate-progress-indeterminate w-[60%]" />
|
||||
</div>
|
||||
<p className="text-muted-foreground text-sm">
|
||||
Scanning {websiteUrl}, fetching search volumes, and drafting high-converting copy...
|
||||
</p>
|
||||
<div className="grid grid-cols-2 lg:grid-cols-4 gap-4 mt-12 w-full max-w-2xl px-4">
|
||||
{[
|
||||
{ label: "Keywords", delay: "0s" },
|
||||
{ label: "Ad Copy", delay: "0.2s" },
|
||||
{ label: "Targeting", delay: "0.4s" },
|
||||
{ label: "ROI Modeling", delay: "0.6s" }
|
||||
].map((item, i) => (
|
||||
<div key={i} className="flex flex-col items-center gap-2 animate-in fade-in slide-in-from-bottom-2 duration-700" style={{ animationDelay: item.delay }}>
|
||||
<div className="w-10 h-10 rounded-lg bg-blue-50 flex items-center justify-center">
|
||||
<Loader2 className="h-5 w-5 text-blue-500 animate-spin" />
|
||||
</div>
|
||||
<span className="text-xs font-medium text-muted-foreground">{item.label}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{googleAdsResult && (
|
||||
<Tabs value={activeTab} onValueChange={setActiveTab} className="flex-1 flex flex-col animate-in fade-in slide-in-from-right-4 duration-500">
|
||||
<div className="bg-muted/50 p-1.5 rounded-xl border mb-6 flex items-center justify-between">
|
||||
<TabsList className="bg-transparent border-0 gap-1">
|
||||
<TabsTrigger value="keywords" className="data-[state=active]:bg-white data-[state=active]:shadow-sm rounded-lg px-4 gap-2 text-sm h-9">
|
||||
<Search className="h-4 w-4 text-blue-600" />
|
||||
Keywords
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="creative" className="data-[state=active]:bg-white data-[state=active]:shadow-sm rounded-lg px-4 gap-2 text-sm h-9">
|
||||
<Megaphone className="h-4 w-4 text-pink-600" />
|
||||
Ad Templates
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="structure" className="data-[state=active]:bg-white data-[state=active]:shadow-sm rounded-lg px-4 gap-2 text-sm h-9">
|
||||
<Layers className="h-4 w-4 text-indigo-600" />
|
||||
Campaigns
|
||||
</TabsTrigger>
|
||||
<TabsTrigger value="implementation" className="data-[state=active]:bg-white data-[state=active]:shadow-sm rounded-lg px-4 gap-2 text-sm h-9">
|
||||
<Zap className="h-4 w-4 text-yellow-600" />
|
||||
Launch Guide
|
||||
</TabsTrigger>
|
||||
</TabsList>
|
||||
|
||||
{googleAdsResult.predictions && (
|
||||
<div className="hidden md:flex items-center gap-4 px-4 text-xs font-medium text-muted-foreground border-l border-muted-foreground/20">
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[10px] uppercase">Est. CTR</span>
|
||||
<span className="text-blue-600">{googleAdsResult.predictions.estimatedCtr}</span>
|
||||
</div>
|
||||
<div className="flex flex-col">
|
||||
<span className="text-[10px] uppercase">Conversions</span>
|
||||
<span className="text-blue-600">{googleAdsResult.predictions.estimatedConversions}</span>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className="flex-1 overflow-auto pr-1">
|
||||
<TabsContent value="keywords" className="m-0 space-y-6 animate-in slide-in-from-bottom-4 duration-500">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
<Card className="border-green-100 shadow-sm hover:shadow-md transition-shadow">
|
||||
<CardHeader className="bg-green-50/50 py-4 border-b border-green-50">
|
||||
<CardTitle className="text-base flex items-center justify-between">
|
||||
<span className="flex items-center gap-2">
|
||||
<TrendingUp className="h-5 w-5 text-green-600" />
|
||||
Primary Keywords
|
||||
</span>
|
||||
<Button variant="ghost" size="sm" onClick={() => handleCopy(googleAdsResult.keywords.primary.map(k => k.keyword).join('\n'), 'primary-keys')} className="h-7 px-2">
|
||||
{copied === 'primary-keys' ? <CheckCircle2 className="h-4 w-4 text-green-600" /> : <Copy className="h-4 w-4" />}
|
||||
</Button>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y text-sm">
|
||||
{googleAdsResult.keywords.primary.map((item, i) => (
|
||||
<div key={i} className="flex items-center justify-between p-3 hover:bg-muted/30 transition-colors group">
|
||||
<div className="flex flex-col">
|
||||
<span className="font-semibold text-foreground">{item.keyword}</span>
|
||||
<div className="flex gap-2 text-[10px] mt-0.5">
|
||||
<span className="text-muted-foreground">Vol: {item.searchVolume}</span>
|
||||
<span className="text-blue-600">CPC: {item.cpc}</span>
|
||||
</div>
|
||||
</div>
|
||||
<Badge variant="secondary" className={cn(
|
||||
"text-[10px] capitalize",
|
||||
item.competition === 'low' ? "bg-green-100 text-green-700" :
|
||||
item.competition === 'medium' ? "bg-yellow-100 text-yellow-700" : "bg-red-100 text-red-700"
|
||||
)}>
|
||||
{item.competition}
|
||||
</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
|
||||
<Card className="border-blue-100 shadow-sm hover:shadow-md transition-shadow">
|
||||
<CardHeader className="bg-blue-50/50 py-4 border-b border-blue-50">
|
||||
<CardTitle className="text-base flex items-center justify-between">
|
||||
<span className="flex items-center gap-2">
|
||||
<MousePointer2 className="h-5 w-5 text-blue-600" />
|
||||
Long-Tail Opportunities
|
||||
</span>
|
||||
<Button variant="ghost" size="sm" onClick={() => handleCopy(googleAdsResult.keywords.longTail.map(k => k.keyword).join('\n'), 'long-keys')} className="h-7 px-2">
|
||||
{copied === 'long-keys' ? <CheckCircle2 className="h-4 w-4 text-green-600" /> : <Copy className="h-4 w-4" />}
|
||||
</Button>
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="p-0">
|
||||
<div className="divide-y text-sm">
|
||||
{googleAdsResult.keywords.longTail.map((item, i) => (
|
||||
<div key={i} className="flex items-center justify-between p-3 hover:bg-muted/30 transition-colors">
|
||||
<div className="flex flex-col">
|
||||
<span className="font-semibold text-foreground">{item.keyword}</span>
|
||||
<span className="text-[10px] text-muted-foreground mt-0.5">High Performance Match: {item.difficultyScore}%</span>
|
||||
</div>
|
||||
<span className="text-[10px] font-bold text-blue-600">{item.cpc}</span>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</div>
|
||||
|
||||
<Card className="border-red-100 shadow-sm border-l-4 border-l-red-500">
|
||||
<CardHeader className="py-4">
|
||||
<CardTitle className="text-base flex items-center justify-between">
|
||||
<span className="flex items-center gap-2 text-red-700">
|
||||
<AlertCircle className="h-5 w-5" />
|
||||
Negative Keyword List (Add these to Campaigns)
|
||||
</span>
|
||||
<Button variant="ghost" size="sm" onClick={() => handleCopy(googleAdsResult.keywords.negative.map(k => k.keyword).join('\n'), 'neg-keys')} className="h-7 px-2 hover:bg-red-50">
|
||||
{copied === 'neg-keys' ? <CheckCircle2 className="h-4 w-4 text-green-600" /> : <Copy className="h-4 w-4 text-red-600" />}
|
||||
</Button>
|
||||
</CardTitle>
|
||||
<CardDescription>Exclude these terms to prevent wasted spend on irrelevant clicks.</CardDescription>
|
||||
</CardHeader>
|
||||
<CardContent>
|
||||
<div className="flex flex-wrap gap-2">
|
||||
{googleAdsResult.keywords.negative.map((item, i) => (
|
||||
<Badge key={i} variant="outline" className="bg-red-50 text-red-700 border-red-100 hover:bg-red-100 hover:text-red-800 transition-colors">
|
||||
{item.keyword}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="creative" className="m-0 space-y-6 animate-in slide-in-from-bottom-4 duration-500">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||||
{googleAdsResult.adCopies.map((ad, i) => (
|
||||
<Card key={i} className="border border-muted-foreground/10 overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300">
|
||||
<div className="bg-muted px-4 py-2 border-b flex items-center justify-between">
|
||||
<div className="flex items-center gap-2">
|
||||
<span className="w-2 h-2 rounded-full bg-blue-500" />
|
||||
<span className="text-[10px] font-bold uppercase tracking-wider text-muted-foreground">Ad Variation {i + 1} • {ad.campaignType}</span>
|
||||
</div>
|
||||
{ad.mobileOptimized && (
|
||||
<Badge className="bg-blue-100 text-blue-700 hover:bg-blue-100 border-none text-[9px] h-4">Mobile Ready</Badge>
|
||||
)}
|
||||
</div>
|
||||
<div className="p-5 space-y-4 bg-white">
|
||||
<div className="space-y-1">
|
||||
{ad.headlines.map((h, j) => (
|
||||
<div key={j} className="flex items-center justify-between group">
|
||||
<span className="text-blue-700 font-semibold text-base line-clamp-1">{h}</span>
|
||||
<Badge variant="outline" className="text-[9px] opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap">{h.length}/30</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
<div className="text-xs text-green-800 font-medium flex items-center gap-1">
|
||||
Ads • <span className="underline cursor-pointer">{ad.displayUrl}</span>
|
||||
</div>
|
||||
<div className="space-y-2">
|
||||
{ad.descriptions.map((d, j) => (
|
||||
<div key={j} className="flex items-start justify-between group">
|
||||
<p className="text-sm text-foreground/80 leading-relaxed pr-4">{d}</p>
|
||||
<Badge variant="outline" className="text-[9px] opacity-0 group-hover:opacity-100 transition-opacity whitespace-nowrap mt-1">{d.length}/90</Badge>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="pt-4 flex items-center justify-between border-t border-muted">
|
||||
<Button size="sm" variant="outline" className="h-8 text-xs bg-indigo-50 text-indigo-700 border-indigo-100 hover:bg-indigo-100">
|
||||
{ad.callToAction}
|
||||
</Button>
|
||||
<Button variant="ghost" size="sm" onClick={() => handleCopy(`${ad.headlines.join('\n')}\n\n${ad.descriptions.join('\n')}`, `ad-${i}`)} className="h-8 px-2 gap-2 text-xs">
|
||||
{copied === `ad-${i}` ? <CheckCircle2 className="h-3.5 w-3.5 text-green-600" /> : <Copy className="h-3.5 w-3.5" />}
|
||||
Copy Copy
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="rounded-2xl p-6 bg-gradient-to-r from-blue-600 to-indigo-700 text-white shadow-lg overflow-hidden relative">
|
||||
<div className="relative z-10 flex flex-col md:flex-row md:items-center justify-between gap-6">
|
||||
<div className="space-y-2">
|
||||
<h4 className="text-xl font-bold flex items-center gap-2">
|
||||
<Zap className="h-5 w-5 fill-yellow-400 text-yellow-400" />
|
||||
A/B Testing Recommendation
|
||||
</h4>
|
||||
<p className="text-blue-50 text-sm max-w-xl">
|
||||
Use dynamic keyword insertion for "Variation 1" and focus on emotion-based headlines for "Variation 2" to compare user engagement and CTR.
|
||||
</p>
|
||||
</div>
|
||||
<Button variant="secondary" className="bg-white text-blue-700 hover:bg-blue-50 font-bold whitespace-nowrap" onClick={() => setActiveTab("implementation")}>
|
||||
View Optimization Guide
|
||||
</Button>
|
||||
</div>
|
||||
<div className="absolute right-[-20px] top-[-20px] opacity-10 rotate-12">
|
||||
<Target className="w-48 h-48" />
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="structure" className="m-0 space-y-6 animate-in slide-in-from-bottom-4 duration-500">
|
||||
{googleAdsResult.campaigns.map((camp, i) => (
|
||||
<Card key={i} className="border-indigo-100 shadow-sm overflow-hidden">
|
||||
<CardHeader className="bg-indigo-50/50 flex flex-row items-center justify-between py-4 border-b border-indigo-50">
|
||||
<div className="space-y-1">
|
||||
<CardTitle className="text-lg text-indigo-900">{camp.name}</CardTitle>
|
||||
<CardDescription className="flex items-center gap-2">
|
||||
<Badge className="bg-indigo-600 hover:bg-indigo-600">{camp.type.toUpperCase()}</Badge>
|
||||
<span>Targeting: {camp.targeting.locations?.join(', ') || 'Global'}</span>
|
||||
</CardDescription>
|
||||
</div>
|
||||
<div className="text-right">
|
||||
<div className="text-xs font-semibold text-muted-foreground uppercase">Monthly Budget</div>
|
||||
<div className="text-xl font-bold text-indigo-700">{camp.budget.currency} {camp.budget.monthly}</div>
|
||||
<div className="text-[10px] text-muted-foreground italic">Approx. {camp.budget.currency}{camp.budget.daily}/day</div>
|
||||
</div>
|
||||
</CardHeader>
|
||||
<CardContent className="p-6">
|
||||
<h4 className="text-sm font-bold uppercase tracking-wider text-muted-foreground mb-4">Ad Group Organization</h4>
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
{camp.adGroups.map((group, j) => (
|
||||
<div key={j} className="p-4 rounded-xl border border-indigo-50 bg-white hover:border-indigo-200 transition-colors">
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<h5 className="font-bold text-indigo-900">{group.name}</h5>
|
||||
<Badge variant="outline" className="text-[9px] border-indigo-200 text-indigo-600 uppercase">{group.biddingStrategy}</Badge>
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground mb-3">{group.theme}</p>
|
||||
<div className="flex flex-wrap gap-1.5">
|
||||
{group.keywords.map((kw, k) => (
|
||||
<span key={k} className="text-[10px] bg-muted px-2 py-0.5 rounded-full text-foreground/70">{kw}</span>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="mt-8 grid grid-cols-2 md:grid-cols-4 gap-4 p-4 rounded-2xl bg-muted/30">
|
||||
<div className="space-y-1">
|
||||
<div className="text-[10px] font-bold text-muted-foreground uppercase">Target Locations</div>
|
||||
<div className="text-xs font-medium">{camp.targeting.locations?.join(', ') || 'All'}</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-[10px] font-bold text-muted-foreground uppercase">Devices</div>
|
||||
<div className="text-xs font-medium">{camp.targeting.devices?.join(', ') || 'All Devices'}</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-[10px] font-bold text-muted-foreground uppercase">Demographics</div>
|
||||
<div className="text-xs font-medium">{camp.targeting.demographics?.join(', ') || 'All Ages'}</div>
|
||||
</div>
|
||||
<div className="space-y-1">
|
||||
<div className="text-[10px] font-bold text-muted-foreground uppercase">Schedule</div>
|
||||
<div className="text-xs font-medium">{camp.targeting.schedule?.join(', ') || '24/7'}</div>
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="p-4 rounded-xl border border-yellow-100 bg-yellow-50/30">
|
||||
<h5 className="text-xs font-bold text-yellow-800 uppercase mb-2">Bidding Strategy</h5>
|
||||
<p className="text-xs text-yellow-900/70 leading-relaxed">
|
||||
We recommend <strong>Maximize Conversions</strong> with a target CPA to balance volume and ROI given your industry competition.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl border border-blue-100 bg-blue-50/30">
|
||||
<h5 className="text-xs font-bold text-blue-800 uppercase mb-2">Network Selection</h5>
|
||||
<p className="text-xs text-blue-900/70 leading-relaxed">
|
||||
Include <strong>Search Partners</strong> but disable Display Network for this campaign to ensure high search intent traffic.
|
||||
</p>
|
||||
</div>
|
||||
<div className="p-4 rounded-xl border border-indigo-100 bg-indigo-50/30">
|
||||
<h5 className="text-xs font-bold text-indigo-800 uppercase mb-2">Ad Assets</h5>
|
||||
<p className="text-xs text-indigo-900/70 leading-relaxed">
|
||||
Add <strong>Sitelinks, Callouts, and Image assets</strong> to improve your Ad Rank and Quality Score.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</TabsContent>
|
||||
|
||||
<TabsContent value="implementation" className="m-0 space-y-6 animate-in slide-in-from-bottom-4 duration-500">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
<div className="space-y-6">
|
||||
<h3 className="text-lg font-bold flex items-center gap-2">
|
||||
<span className="w-8 h-8 rounded-full bg-blue-600 text-white flex items-center justify-center text-sm">1</span>
|
||||
Launch Steps
|
||||
</h3>
|
||||
<div className="space-y-3">
|
||||
{googleAdsResult.implementation.setupSteps.map((step, i) => (
|
||||
<div key={i} className="flex gap-4 p-4 rounded-xl border bg-white shadow-sm group hover:border-blue-200 transition-all">
|
||||
<div className="text-2xl font-black text-muted-foreground/20 group-hover:text-blue-200 transition-colors uppercase italic">{i + 1}</div>
|
||||
<p className="text-sm font-medium pt-1 text-foreground/80">{step}</p>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-bold flex items-center gap-2">
|
||||
<span className="w-8 h-8 rounded-full bg-green-600 text-white flex items-center justify-center text-sm">2</span>
|
||||
Quality Score Hacks
|
||||
</h3>
|
||||
<div className="grid gap-3">
|
||||
{googleAdsResult.implementation.qualityScoreTips.map((tip, i) => (
|
||||
<div key={i} className="p-3 bg-green-50 text-green-800 text-xs rounded-lg border border-green-100/50 font-medium">
|
||||
{tip}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-4">
|
||||
<h3 className="text-lg font-bold flex items-center gap-2">
|
||||
<span className="w-8 h-8 rounded-full bg-indigo-600 text-white flex items-center justify-center text-sm">3</span>
|
||||
Tracking & Analytics
|
||||
</h3>
|
||||
<div className="p-5 rounded-xl border border-indigo-100 bg-white">
|
||||
<ul className="space-y-3">
|
||||
{googleAdsResult.implementation.trackingSetup.map((item, i) => (
|
||||
<li key={i} className="flex items-start gap-2 text-xs text-muted-foreground">
|
||||
<div className="mt-1 w-1.5 h-1.5 rounded-full bg-indigo-400 shrink-0" />
|
||||
{item}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
<Button className="w-full mt-6 bg-indigo-50 text-indigo-700 hover:bg-indigo-100 border-indigo-100 gap-2" variant="outline">
|
||||
<ExternalLink className="h-4 w-4" />
|
||||
Google Tag Manager Setup
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<Card className="bg-gradient-to-br from-indigo-900 to-indigo-950 border-0 shadow-2xl">
|
||||
<CardContent className="p-10 flex flex-col md:flex-row items-center gap-10">
|
||||
<div className="w-24 h-24 bg-white/10 rounded-2xl flex items-center justify-center backdrop-blur-sm border border-white/10 shrink-0">
|
||||
<TrendingUp className="h-12 w-12 text-blue-400" />
|
||||
</div>
|
||||
<div className="space-y-4 flex-1">
|
||||
<h4 className="text-2xl font-bold text-white">Scale Your Success</h4>
|
||||
<p className="text-blue-100 text-sm leading-relaxed max-w-2xl">
|
||||
Success in Google Ads is about iterative optimization. Use these initial settings to gather data for 14 days, then begin aggressive A/B testing on headlines and landing page consistency.
|
||||
</p>
|
||||
<div className="flex flex-wrap gap-4 pt-4">
|
||||
{googleAdsResult.implementation.optimizationTips.slice(0, 3).map((tip, i) => (
|
||||
<Badge key={i} variant="secondary" className="bg-white/10 text-blue-100 hover:bg-white/20 border-white/5 px-3 py-1 text-[10px] font-medium uppercase tracking-wider">
|
||||
{tip}
|
||||
</Badge>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
</TabsContent>
|
||||
</div>
|
||||
</Tabs>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user