|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Digital Marketing KPIs Calculator</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6e8efb 0%, #a777e3 100%); |
|
|
} |
|
|
.card-hover:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04); |
|
|
} |
|
|
.transition-all { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.kpi-card { |
|
|
background: rgba(255, 255, 255, 0.9); |
|
|
backdrop-filter: blur(10px); |
|
|
} |
|
|
.result-card { |
|
|
background: rgba(255, 255, 255, 0.95); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
input[type="range"]::-webkit-slider-thumb { |
|
|
-webkit-appearance: none; |
|
|
appearance: none; |
|
|
width: 20px; |
|
|
height: 20px; |
|
|
border-radius: 50%; |
|
|
background: #6e8efb; |
|
|
cursor: pointer; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="min-h-screen gradient-bg font-sans"> |
|
|
<div class="container mx-auto px-4 py-12"> |
|
|
<div class="max-w-4xl mx-auto"> |
|
|
|
|
|
<div class="text-center mb-12"> |
|
|
<h1 class="text-4xl font-bold text-white mb-3">Digital Marketing KPIs Calculator</h1> |
|
|
<p class="text-xl text-white opacity-90">Measure and optimize your marketing performance with key metrics</p> |
|
|
<div class="mt-6"> |
|
|
<span class="inline-block bg-white bg-opacity-20 text-white px-4 py-2 rounded-full text-sm font-medium">Essential Metrics for Marketers</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-white rounded-xl shadow-xl overflow-hidden transition-all card-hover"> |
|
|
<div class="p-6 md:p-8"> |
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center"> |
|
|
<i class="fas fa-chart-line text-blue-500 mr-3"></i> Campaign Inputs |
|
|
</h2> |
|
|
|
|
|
<div class="space-y-5"> |
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Campaign Budget ($)</label> |
|
|
<div class="relative"> |
|
|
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">$</span> |
|
|
<input type="number" id="budget" class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="1000" min="0"> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Impressions</label> |
|
|
<input type="number" id="impressions" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="10000" min="0"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Clicks</label> |
|
|
<input type="number" id="clicks" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="500" min="0"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Conversions</label> |
|
|
<input type="number" id="conversions" class="w-full px-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="50" min="0"> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Revenue Generated ($)</label> |
|
|
<div class="relative"> |
|
|
<span class="absolute inset-y-0 left-0 flex items-center pl-3 text-gray-500">$</span> |
|
|
<input type="number" id="revenue" class="w-full pl-8 pr-3 py-2 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500" placeholder="2500" min="0"> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h2 class="text-2xl font-semibold text-gray-800 mb-6 flex items-center"> |
|
|
<i class="fas fa-sliders-h text-purple-500 mr-3"></i> Adjust Parameters |
|
|
</h2> |
|
|
|
|
|
<div class="space-y-5"> |
|
|
|
|
|
<div> |
|
|
<label for="targetCTR" class="block text-sm font-medium text-gray-700 mb-2">Target Click-Through Rate (CTR)</label> |
|
|
<input type="range" id="targetCTR" min="0" max="20" step="0.1" value="5" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> |
|
|
<div class="flex justify-between text-xs text-gray-600 mt-1"> |
|
|
<span>0%</span> |
|
|
<span id="targetCTRValue">5%</span> |
|
|
<span>20%</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="targetConversionRate" class="block text-sm font-medium text-gray-700 mb-2">Target Conversion Rate</label> |
|
|
<input type="range" id="targetConversionRate" min="0" max="50" step="0.5" value="10" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> |
|
|
<div class="flex justify-between text-xs text-gray-600 mt-1"> |
|
|
<span>0%</span> |
|
|
<span id="targetConversionRateValue">10%</span> |
|
|
<span>50%</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="targetCPA" class="block text-sm font-medium text-gray-700 mb-2">Target Cost Per Acquisition (CPA) ($)</label> |
|
|
<input type="range" id="targetCPA" min="0" max="100" step="1" value="20" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> |
|
|
<div class="flex justify-between text-xs text-gray-600 mt-1"> |
|
|
<span>$0</span> |
|
|
<span id="targetCPAValue">$20</span> |
|
|
<span>$100</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<label for="targetROAS" class="block text-sm font-medium text-gray-700 mb-2">Target Return on Ad Spend (ROAS)</label> |
|
|
<input type="range" id="targetROAS" min="0" max="10" step="0.1" value="2" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> |
|
|
<div class="flex justify-between text-xs text-gray-600 mt-1"> |
|
|
<span>0x</span> |
|
|
<span id="targetROASValue">2x</span> |
|
|
<span>10x</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8"> |
|
|
<button id="calculateBtn" class="w-full gradient-bg text-white py-3 px-4 rounded-md font-medium hover:opacity-90 transition-all focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 flex items-center justify-center"> |
|
|
<i class="fas fa-calculator mr-2"></i> Calculate KPIs |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="results" class="mt-8 hidden"> |
|
|
<h2 class="text-2xl font-semibold text-white mb-6 flex items-center"> |
|
|
<i class="fas fa-chart-pie text-yellow-300 mr-3"></i> Performance Metrics |
|
|
</h2> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-4"> |
|
|
|
|
|
<div class="kpi-card rounded-xl p-5 transition-all card-hover"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="p-2 rounded-full bg-blue-100 text-blue-600 mr-3"> |
|
|
<i class="fas fa-mouse-pointer"></i> |
|
|
</div> |
|
|
<h3 class="font-medium text-gray-700">CTR</h3> |
|
|
</div> |
|
|
<p class="text-3xl font-bold text-gray-800" id="ctrResult">0%</p> |
|
|
<div class="mt-2 flex items-center" id="ctrStatus"> |
|
|
<span class="text-sm text-gray-600">vs. target: 5%</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="kpi-card rounded-xl p-5 transition-all card-hover"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="p-2 rounded-full bg-purple-100 text-purple-600 mr-3"> |
|
|
<i class="fas fa-exchange-alt"></i> |
|
|
</div> |
|
|
<h3 class="font-medium text-gray-700">Conversion Rate</h3> |
|
|
</div> |
|
|
<p class="text-3xl font-bold text-gray-800" id="conversionRateResult">0%</p> |
|
|
<div class="mt-2 flex items-center" id="conversionRateStatus"> |
|
|
<span class="text-sm text-gray-600">vs. target: 10%</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="kpi-card rounded-xl p-5 transition-all card-hover"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="p-2 rounded-full bg-green-100 text-green-600 mr-3"> |
|
|
<i class="fas fa-dollar-sign"></i> |
|
|
</div> |
|
|
<h3 class="font-medium text-gray-700">CPA</h3> |
|
|
</div> |
|
|
<p class="text-3xl font-bold text-gray-800" id="cpaResult">$0</p> |
|
|
<div class="mt-2 flex items-center" id="cpaStatus"> |
|
|
<span class="text-sm text-gray-600">vs. target: $20</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="kpi-card rounded-xl p-5 transition-all card-hover"> |
|
|
<div class="flex items-center mb-3"> |
|
|
<div class="p-2 rounded-full bg-yellow-100 text-yellow-600 mr-3"> |
|
|
<i class="fas fa-undo"></i> |
|
|
</div> |
|
|
<h3 class="font-medium text-gray-700">ROAS</h3> |
|
|
</div> |
|
|
<p class="text-3xl font-bold text-gray-800" id="roasResult">0x</p> |
|
|
<div class="mt-2 flex items-center" id="roasStatus"> |
|
|
<span class="text-sm text-gray-600">vs. target: 2x</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6 result-card rounded-xl p-6 transition-all card-hover"> |
|
|
<h3 class="text-lg font-semibold text-gray-800 mb-4 flex items-center"> |
|
|
<i class="fas fa-info-circle text-blue-500 mr-2"></i> Detailed Performance Analysis |
|
|
</h3> |
|
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
|
|
|
|
|
<div> |
|
|
<div class="mb-4"> |
|
|
<h4 class="font-medium text-gray-700 mb-2">CPM (Cost Per 1000 Impressions)</h4> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-2xl font-bold text-gray-800" id="cpmResult">$0</span> |
|
|
<span class="text-sm text-gray-600 ml-2">per 1,000 impressions</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<h4 class="font-medium text-gray-700 mb-2">CPC (Cost Per Click)</h4> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-2xl font-bold text-gray-800" id="cpcResult">$0</span> |
|
|
<span class="text-sm text-gray-600 ml-2">per click</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-medium text-gray-700 mb-2">Profit</h4> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-2xl font-bold text-gray-800" id="profitResult">$0</span> |
|
|
<span class="text-sm text-gray-600 ml-2">(Revenue - Budget)</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<div class="mb-4"> |
|
|
<h4 class="font-medium text-gray-700 mb-2">Conversion Value Per Click</h4> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-2xl font-bold text-gray-800" id="cvpcResult">$0</span> |
|
|
<span class="text-sm text-gray-600 ml-2">per click</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<h4 class="font-medium text-gray-700 mb-2">Average Order Value</h4> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-2xl font-bold text-gray-800" id="aovResult">$0</span> |
|
|
<span class="text-sm text-gray-600 ml-2">per conversion</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div> |
|
|
<h4 class="font-medium text-gray-700 mb-2">Profit Margin</h4> |
|
|
<div class="flex items-center"> |
|
|
<span class="text-2xl font-bold text-gray-800" id="marginResult">0%</span> |
|
|
<span class="text-sm text-gray-600 ml-2">(Profit / Revenue)</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-6 pt-4 border-t border-gray-200"> |
|
|
<h4 class="font-medium text-gray-700 mb-3 flex items-center"> |
|
|
<i class="fas fa-star text-yellow-400 mr-2"></i> Performance Summary |
|
|
</h4> |
|
|
<p class="text-gray-700" id="performanceSummary"> |
|
|
Enter your campaign data and click "Calculate KPIs" to see your performance analysis. |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
document.getElementById('targetCTR').addEventListener('input', function() { |
|
|
document.getElementById('targetCTRValue').textContent = this.value + '%'; |
|
|
}); |
|
|
|
|
|
document.getElementById('targetConversionRate').addEventListener('input', function() { |
|
|
document.getElementById('targetConversionRateValue').textContent = this.value + '%'; |
|
|
}); |
|
|
|
|
|
document.getElementById('targetCPA').addEventListener('input', function() { |
|
|
document.getElementById('targetCPAValue').textContent = '$' + this.value; |
|
|
}); |
|
|
|
|
|
document.getElementById('targetROAS').addEventListener('input', function() { |
|
|
document.getElementById('targetROASValue').textContent = this.value + 'x'; |
|
|
}); |
|
|
|
|
|
|
|
|
document.getElementById('calculateBtn').addEventListener('click', function() { |
|
|
|
|
|
const budget = parseFloat(document.getElementById('budget').value) || 0; |
|
|
const impressions = parseFloat(document.getElementById('impressions').value) || 0; |
|
|
const clicks = parseFloat(document.getElementById('clicks').value) || 0; |
|
|
const conversions = parseFloat(document.getElementById('conversions').value) || 0; |
|
|
const revenue = parseFloat(document.getElementById('revenue').value) || 0; |
|
|
|
|
|
|
|
|
const targetCTR = parseFloat(document.getElementById('targetCTR').value) || 0; |
|
|
const targetConversionRate = parseFloat(document.getElementById('targetConversionRate').value) || 0; |
|
|
const targetCPA = parseFloat(document.getElementById('targetCPA').value) || 0; |
|
|
const targetROAS = parseFloat(document.getElementById('targetROAS').value) || 0; |
|
|
|
|
|
|
|
|
const ctr = clicks > 0 ? (clicks / impressions * 100) : 0; |
|
|
const conversionRate = clicks > 0 ? (conversions / clicks * 100) : 0; |
|
|
const cpa = conversions > 0 ? (budget / conversions) : 0; |
|
|
const roas = budget > 0 ? (revenue / budget) : 0; |
|
|
const cpm = impressions > 0 ? (budget / impressions * 1000) : 0; |
|
|
const cpc = clicks > 0 ? (budget / clicks) : 0; |
|
|
const profit = revenue - budget; |
|
|
const cvpc = clicks > 0 ? (revenue / clicks) : 0; |
|
|
const aov = conversions > 0 ? (revenue / conversions) : 0; |
|
|
const margin = revenue > 0 ? (profit / revenue * 100) : 0; |
|
|
|
|
|
|
|
|
document.getElementById('ctrResult').textContent = ctr.toFixed(2) + '%'; |
|
|
document.getElementById('conversionRateResult').textContent = conversionRate.toFixed(2) + '%'; |
|
|
document.getElementById('cpaResult').textContent = '$' + cpa.toFixed(2); |
|
|
document.getElementById('roasResult').textContent = roas.toFixed(2) + 'x'; |
|
|
document.getElementById('cpmResult').textContent = '$' + cpm.toFixed(2); |
|
|
document.getElementById('cpcResult').textContent = '$' + cpc.toFixed(2); |
|
|
document.getElementById('profitResult').textContent = '$' + profit.toFixed(2); |
|
|
document.getElementById('cvpcResult').textContent = '$' + cvpc.toFixed(2); |
|
|
document.getElementById('aovResult').textContent = '$' + aov.toFixed(2); |
|
|
document.getElementById('marginResult').textContent = margin.toFixed(2) + '%'; |
|
|
|
|
|
|
|
|
document.getElementById('ctrStatus').innerHTML = getComparisonHTML(ctr, targetCTR, '%'); |
|
|
document.getElementById('conversionRateStatus').innerHTML = getComparisonHTML(conversionRate, targetConversionRate, '%'); |
|
|
document.getElementById('cpaStatus').innerHTML = getComparisonHTML(cpa, targetCPA, '$', true); |
|
|
document.getElementById('roasStatus').innerHTML = getComparisonHTML(roas, targetROAS, 'x'); |
|
|
|
|
|
|
|
|
let summary = ''; |
|
|
|
|
|
if (budget === 0 || impressions === 0 || clicks === 0) { |
|
|
summary = 'Please enter valid campaign data to get a meaningful analysis.'; |
|
|
} else { |
|
|
summary = `Your campaign achieved a CTR of ${ctr.toFixed(2)}% `; |
|
|
|
|
|
if (ctr > targetCTR) { |
|
|
summary += `which is <span class="font-semibold text-green-600">above</span> your target of ${targetCTR}%. `; |
|
|
} else if (ctr < targetCTR) { |
|
|
summary += `which is <span class="font-semibold text-red-600">below</span> your target of ${targetCTR}%. `; |
|
|
} else { |
|
|
summary += `which <span class="font-semibold text-blue-600">meets</span> your target of ${targetCTR}%. `; |
|
|
} |
|
|
|
|
|
summary += `The conversion rate was ${conversionRate.toFixed(2)}% `; |
|
|
|
|
|
if (conversionRate > targetConversionRate) { |
|
|
summary += `(<span class="font-semibold text-green-600">exceeding</span> your ${targetConversionRate}% target). `; |
|
|
} else if (conversionRate < targetConversionRate) { |
|
|
summary += `(<span class="font-semibold text-red-600">missing</span> your ${targetConversionRate}% target). `; |
|
|
} else { |
|
|
summary += `(<span class="font-semibold text-blue-600">meeting</span> your target). `; |
|
|
} |
|
|
|
|
|
summary += `Your CPA was $${cpa.toFixed(2)} `; |
|
|
|
|
|
if (cpa < targetCPA) { |
|
|
summary += `which is <span class="font-semibold text-green-600">better</span> than your $${targetCPA} target. `; |
|
|
} else if (cpa > targetCPA) { |
|
|
summary += `which is <span class="font-semibold text-red-600">worse</span> than your $${targetCPA} target. `; |
|
|
} else { |
|
|
summary += `which <span class="font-semibold text-blue-600">matches</span> your target. `; |
|
|
} |
|
|
|
|
|
summary += `ROAS of ${roas.toFixed(2)}x means you generated $${roas.toFixed(2)} for every $1 spent. `; |
|
|
|
|
|
if (roas > targetROAS) { |
|
|
summary += `This <span class="font-semibold text-green-600">exceeds</span> your target of ${targetROAS}x. `; |
|
|
} else if (roas < targetROAS) { |
|
|
summary += `This <span class="font-semibold text-red-600">falls short</span> of your ${targetROAS}x target. `; |
|
|
} else { |
|
|
summary += `This <span class="font-semibold text-blue-600">meets</span> your target. `; |
|
|
} |
|
|
|
|
|
if (profit > 0) { |
|
|
summary += `Overall, the campaign was <span class="font-semibold text-green-600">profitable</span>, generating $${profit.toFixed(2)} in profit.`; |
|
|
} else if (profit < 0) { |
|
|
summary += `Overall, the campaign resulted in a <span class="font-semibold text-red-600">loss</span> of $${Math.abs(profit).toFixed(2)}.`; |
|
|
} else { |
|
|
summary += `The campaign <span class="font-semibold text-blue-600">broke even</span>, with no profit or loss.`; |
|
|
} |
|
|
} |
|
|
|
|
|
document.getElementById('performanceSummary').innerHTML = summary; |
|
|
|
|
|
|
|
|
document.getElementById('results').classList.remove('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
function getComparisonHTML(actual, target, suffix = '', reverse = false) { |
|
|
let icon, color; |
|
|
|
|
|
if ((!reverse && actual > target) || (reverse && actual < target)) { |
|
|
icon = 'fa-arrow-up'; |
|
|
color = 'text-green-600'; |
|
|
} else if ((!reverse && actual < target) || (reverse && actual > target)) { |
|
|
icon = 'fa-arrow-down'; |
|
|
color = 'text-red-600'; |
|
|
} else { |
|
|
icon = 'fa-equals'; |
|
|
color = 'text-blue-600'; |
|
|
} |
|
|
|
|
|
return ` |
|
|
<i class="fas ${icon} ${color} mr-1"></i> |
|
|
<span class="text-sm ${color}">vs. target: ${target}${suffix}</span> |
|
|
`; |
|
|
} |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=masood181/masood181" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
