<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Advertising Campaign Performance Dashboard</title> <script src="https://cdn.tailwindcss.com"></script> <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> <style> .fade-in { animation: fadeIn 0.5s ease-in-out; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .card-hover:hover { transform: translateY(-5px); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); } .highlight { background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(236,253,245,1) 50%, rgba(255,255,255,0) 100%); border-left: 4px solid #10b981; } </style> </head> <body class="bg-gray-50"> <div class="container mx-auto px-4 py-8"> <header class="mb-10"> <h1 class="text-3xl md:text-4xl font-bold text-gray-800 mb-2">Advertising Campaign Performance</h1> <p class="text-gray-600">Comprehensive analysis of ad performance metrics across multiple campaigns</p> <div class="mt-4 flex flex-wrap gap-2"> <span class="px-3 py-1 bg-emerald-100 text-emerald-800 rounded-full text-sm">1072 Results (Top)</span> <span class="px-3 py-1 bg-blue-100 text-blue-800 rounded-full text-sm">$88,291 Spend (Max)</span> <span class="px-3 py-1 bg-purple-100 text-purple-800 rounded-full text-sm">1.85M Reach (Max)</span> </div> </header> <div class="grid grid-cols-1 lg:grid-cols-3 gap-6 mb-10"> <!-- Summary Cards --> <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 card-hover transition-all fade-in"> <div class="flex items-center justify-between mb-4"> <h3 class="font-semibold text-gray-700">Total Results</h3> <div class="p-2 bg-blue-50 rounded-lg"> <i class="fas fa-bullseye text-blue-500"></i> </div> </div> <p class="text-3xl font-bold text-gray-800 mb-2">6,236</p> <p class="text-sm text-gray-500">Across all campaigns</p> </div> <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 card-hover transition-all fade-in"> <div class="flex items-center justify-between mb-4"> <h3 class="font-semibold text-gray-700">Total Spend</h3> <div class="p-2 bg-green-50 rounded-lg"> <i class="fas fa-dollar-sign text-green-500"></i> </div> </div> <p class="text-3xl font-bold text-gray-800 mb-2">$422,164</p> <p class="text-sm text-gray-500">Average $67.69 per result</p> </div> <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 card-hover transition-all fade-in"> <div class="flex items-center justify-between mb-4"> <h3 class="font-semibold text-gray-700">Total Reach</h3> <div class="p-2 bg-purple-50 rounded-lg"> <i class="fas fa-users text-purple-500"></i> </div> </div> <p class="text-3xl font-bold text-gray-800 mb-2">5.24M</p> <p class="text-sm text-gray-500">Impressions across campaigns</p> </div> </div> <div class="grid grid-cols-1 lg:grid-cols-2 gap-8 mb-10"> <!-- Main Chart --> <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 fade-in"> <div class="flex justify-between items-center mb-6"> <h2 class="text-xl font-semibold text-gray-800">Results vs. Spend by Campaign</h2> <div class="flex space-x-2"> <button class="px-3 py-1 text-sm bg-gray-100 rounded-md">Results</button> <button class="px-3 py-1 text-sm bg-gray-100 rounded-md">Spend</button> </div> </div> <canvas id="resultsSpendChart" height="300"></canvas> <div class="mt-4 text-sm text-gray-600"> <p><span class="font-medium">Key Insight:</span> "Neurostar Brain v Brain" delivers the highest results (1072) but at a higher cost per result ($82.36). "Did You Know" campaign shows excellent efficiency with 379 results at just $52.15 per result.</p> </div> </div> <!-- Efficiency Chart --> <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 fade-in"> <div class="flex justify-between items-center mb-6"> <h2 class="text-xl font-semibold text-gray-800">Cost per Result Efficiency</h2> <div class="flex space-x-2"> <button class="px-3 py-1 text-sm bg-gray-100 rounded-md">CPR</button> <button class="px-3 py-1 text-sm bg-gray-100 rounded-md">Reach</button> </div> </div> <canvas id="efficiencyChart" height="300"></canvas> <div class="mt-4 text-sm text-gray-600"> <p><span class="font-medium">Key Insight:</span> "Did You Know" and "Meds" campaigns show the best cost efficiency at ~$52 and $68 per result respectively. Some UGC variants perform poorly with CPR over $100.</p> </div> </div> </div> <!-- Data Table with Analysis --> <div class="bg-white rounded-xl shadow-sm border border-gray-100 overflow-hidden mb-10 fade-in"> <div class="px-6 py-4 border-b border-gray-100"> <h2 class="text-xl font-semibold text-gray-800">Detailed Campaign Performance</h2> <p class="text-sm text-gray-500">Sorted by Results (descending)</p> </div> <div class="overflow-x-auto"> <table class="min-w-full divide-y divide-gray-200"> <thead class="bg-gray-50"> <tr> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Ad Name</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Results</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Reach</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">CPR ($)</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Spend ($)</th> <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Analysis</th> </tr> </thead> <tbody class="bg-white divide-y divide-gray-200"> <!-- Top Performers --> <tr class="highlight"> <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">Neurostar Brain v Brain</td> <td class="px-6 py-4 whitespace-nowrap text-gray-900 font-bold">1,072</td> <td class="px-6 py-4 whitespace-nowrap text-gray-500">1,850,280</td> <td class="px-6 py-4 whitespace-nowrap text-gray-500">82.36</td> <td class="px-6 py-4 whitespace-nowrap text-gray-900 font-bold">88,291</td> <td class="px-6 py-4 text-gray-500 text-sm">Highest results but premium cost. Excellent reach.</td> </tr> <tr> <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">Meds</td> <td class="px-6 py-4 whitespace-nowrap text-gray-900">513</td> <td class="px-6 py-4 whitespace-nowrap text-gray-500">305,812</td> <td class="px-6 py-4 whitespace-nowrap text-gray-500">68.17</td> <td class="px-6 py-4 whitespace-nowrap text-gray-900">34,972</td> <td class="px-6 py-4 text-gray-500 text-sm">Cost-efficient performer. Strong ROI.</td> </tr> <tr> <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">TMS 3-2</td> <td class="px-6 py-4 whitespace-nowrap text-gray-900">487</td> <td class="px-6 py-4 whitespace-nowrap text-gray-500">263,376</td> <td class="px-6 py-4 whitespace-nowrap text-gray-500">59.70</td> <td class="px-6 py-4 whitespace-nowrap text-gray-900">29,075</td> <td class="px-6 py-4 text-gray-500 text-sm">Excellent efficiency. Consider scaling.</td> </tr> <tr> <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">Did You Know</td> <td class="px-6 py-4 whitespace-nowrap text-gray-900">379</td> <td class="px-6 py-4 whitespace-nowrap text-gray-500">329,292</td> <td class="px-6 py-4 whitespace-nowrap text-gray-500">52.15</td> <td class="px-6 py-4 whitespace-nowrap text-gray-900">19,763</td> <td class="px-6 py-4 text-gray-500 text-sm">Best CPR efficiency. Highly recommended.</td> </tr> <tr> <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">UGCG</td> <td class="px-6 py-4 whitespace-nowrap text-gray-900">445</td> <td class="px-6 py-4 whitespace-nowrap text-gray-500">225,843</td> <td class="px-6 py-4 whitespace-nowrap text-gray-500">46.76</td> <td class="px-6 py-4 whitespace-nowrap text-gray-900">20,808</td> <td class="px-6 py-4 text-gray-500 text-sm">User-generated content performing well.</td> </tr> <!-- Mid Performers --> <tr> <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">Spravato - Learn More</td> <td class="px-6 py-4 whitespace-nowrap text-gray-900">678</td> <td class="px-6 py-4 whitespace-nowrap text-gray-500">431,265</td> <td class="px-6 py-4 whitespace-nowrap text-gray-500">66.10</td> <td class="px-6 py-4 whitespace-nowrap text-gray-900">44,816</td> <td class="px-6 py-4 text-gray-500 text-sm">Good results but higher spend.</td> </tr> <tr> <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">Neurostar Testimonial Video</td> <td class="px-6 py-4 whitespace-nowrap text-gray-900">621</td> <td class="px-6 py-4 whitespace-nowrap text-gray-500">458,284</td> <td class="px-6 py-4 whitespace-nowrap text-gray-500">44.96</td> <td class="px-6 py-4 whitespace-nowrap text-gray-900">27,919</td> <td class="px-6 py-4 text-gray-500 text-sm">Testimonials working well at good CPR.</td> </tr> <!-- Bottom Performers --> <tr class="bg-red-50"> <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">UGC A40 (multiple)</td> <td class="px-6 py-4 whitespace-nowrap text-gray-900">2-49</td> <td class="px-6 py-4 whitespace-nowrap text-gray-500">1,660-26,165</td> <td class="px-6 py-4 whitespace-nowrap text-gray-500">58.80-254.45</td> <td class="px-6 py-4 whitespace-nowrap text-gray-900">95-5,629</td> <td class="px-6 py-4 text-gray-500 text-sm">Inconsistent performance. Needs review.</td> </tr> <tr class="bg-red-50"> <td class="px-6 py-4 whitespace-nowrap font-medium text-gray-900">Reminder Variant</td> <td class="px-6 py-4 whitespace-nowrap text-gray-900">1-147</td> <td class="px-6 py-4 whitespace-nowrap text-gray-500">140-39,450</td> <td class="px-6 py-4 whitespace-nowrap text-gray-500">35.16-138.91</td> <td class="px-6 py-4 whitespace-nowrap text-gray-900">35-12,112</td> <td class="px-6 py-4 text-gray-500 text-sm">Highly variable. Some versions ineffective.</td> </tr> </tbody> </table> </div> </div> <!-- Key Takeaways --> <div class="bg-white p-6 rounded-xl shadow-sm border border-gray-100 mb-10 fade-in"> <h2 class="text-xl font-semibold text-gray-800 mb-4">Strategic Recommendations</h2> <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> <div class="p-4 bg-blue-50 rounded-lg"> <div class="flex items-center mb-2"> <div class="p-2 bg-blue-100 rounded-full mr-3"> <i class="fas fa-thumbs-up text-blue-500"></i> </div> <h3 class="font-medium text-blue-800">Top Performers</h3> </div> <ul class="text-sm text-gray-700 space-y-2 pl-2"> <li class="flex items-start"> <span class="text-blue-500 mr-2">•</span> <span>Scale "Did You Know" and "Meds" campaigns - excellent cost efficiency</span> </li> <li class="flex items-start"> <span class="text-blue-500 mr-2">•</span> <span>Continue "Neurostar Brain v Brain" for maximum results despite higher CPR</span> </li> <li class="flex items-start"> <span class="text-blue-500 mr-2">•</span> <span>Expand UGCG format - performs well at $46.76 CPR</span> </li> </ul> </div> <div class="p-4 bg-red-50 rounded-lg"> <div class="flex items-center mb-2"> <div class="p-2 bg-red-100 rounded-full mr-3"> <i class="fas fa-exclamation-triangle text-red-500"></i> </div> <h3 class="font-medium text-red-800">Underperformers</h3> </div> <ul class="text-sm text-gray-700 space-y-2 pl-2"> <li class="flex items-start"> <span class="text-red-500 mr-2">•</span> <span>Review or pause UGC A40 variants - inconsistent and often poor performance</span> </li> <li class="flex items-start"> <span class="text-red-500 mr-2">•</span> <span>Optimize Reminder Variant - some versions work (35.16 CPR) while others don't</span> </li> <li class="flex items-start"> <span class="text-red-500 mr-2">•</span> <span>Investigate why some Spravato versions have CPR over $120</span> </li> </ul> </div> <div class="p-4 bg-green-50 rounded-lg"> <div class="flex items-center mb-2"> <div class="p-2 bg-green-100 rounded-full mr-3"> <i class="fas fa-lightbulb text-green-500"></i> </div> <h3 class="font-medium text-green-800">Opportunities</h3> </div> <ul class="text-sm text-gray-700 space-y-2 pl-2"> <li class="flex items-start"> <span class="text-green-500 mr-2">•</span> <span>Apply learnings from "Did You Know" to other campaigns</span> </li> <li class="flex items-start"> <span class="text-green-500 mr-2">•</span> <span>Test more testimonial content - performs well at $44.96 CPR</span> </li> <li class="flex items-start"> <span class="text-green-500 mr-2">•</span> <span>Develop more content in the style of top-performing UGCG</span> </li> </ul> </div> <div class="p-4 bg-yellow-50 rounded-lg"> <div class="flex items-center mb-2"> <div class="p-2 bg-yellow-100 rounded-full mr-3"> <i class="fas fa-chart-line text-yellow-500"></i> </div> <h3 class="font-medium text-yellow-800">Budget Allocation</h3> </div> <ul class="text-sm text-gray-700 space-y-2 pl-2"> <li class="flex items-start"> <span class="text-yellow-500 mr-2">•</span> <span>Shift budget from underperforming UGC A40 to efficient campaigns</span> </li> <li class="flex items-start"> <span class="text-yellow-500 mr-2">•</span> <span>Consider increasing spend on "TMS 3-2" ($59.70 CPR) and "UGCG"</span> </li> <li class="flex items-start"> <span class="text-yellow-500 mr-2">•</span> <span>Maintain "Neurostar Brain v Brain" for reach despite higher CPR</span> </li> </ul> </div> </div> </div> </div> <script> // Results vs Spend Chart const resultsSpendCtx = document.getElementById('resultsSpendChart').getContext('2d'); const resultsSpendChart = new Chart(resultsSpendCtx, { type: 'bar', data: { labels: ['Neurostar Brain', 'Meds', 'TMS 3-2', 'Did You Know', 'UGCG', 'Spravato', 'Neurostar Testimonial'], datasets: [ { label: 'Results', data: [1072, 513, 487, 379, 445, 678, 621], backgroundColor: 'rgba(59, 130, 246, 0.7)', borderColor: 'rgba(59, 130, 246, 1)', borderWidth: 1 }, { label: 'Spend ($)', data: [88291, 34972, 29075, 19763, 20808, 44816, 27919], backgroundColor: 'rgba(16, 185, 129, 0.7)', borderColor: 'rgba(16, 185, 129, 1)', borderWidth: 1, type: 'line', yAxisID: 'y1' } ] }, options: { responsive: true, plugins: { legend: { position: 'top', }, tooltip: { callbacks: { label: function(context) { let label = context.dataset.label || ''; if (label) { label += ': '; } if (context.datasetIndex === 0) { label += context.raw.toLocaleString() + ' results'; } else { label += '$' + context.raw.toLocaleString(); } return label; } } } }, scales: { y: { beginAtZero: true, title: { display: true, text: 'Results' } }, y1: { position: 'right', beginAtZero: true, title: { display: true, text: 'Spend ($)' }, grid: { drawOnChartArea: false } } } } }); // Efficiency Chart const efficiencyCtx = document.getElementById('efficiencyChart').getContext('2d'); const efficiencyChart = new Chart(efficiencyCtx, { type: 'bar', data: { labels: ['Did You Know', 'Meds', 'UGCG', 'Neurostar Testimonial', 'TMS 3-2', 'Spravato', 'Neurostar Brain'], datasets: [ { label: 'Cost per Result ($)', data: [52.15, 68.17, 46.76, 44.96, 59.70, 66.10, 82.36], backgroundColor: 'rgba(124, 58, 237, 0.7)', borderColor: 'rgba(124, 58, 237, 1)', borderWidth: 1 }, { label: 'Reach (thousands)', data: [329, 305, 225, 458, 263, 431, 1850], backgroundColor: 'rgba(245, 158, 11, 0.7)', borderColor: 'rgba(245, 158, 11, 1)', borderWidth: 1, type: 'line', yAxisID: 'y1' } ] }, options: { responsive: true, plugins: { legend: { position: 'top', }, tooltip: { callbacks: { label: function(context) { let label = context.dataset.label || ''; if (label) { label += ': '; } if (context.datasetIndex === 0) { label += '$' + context.raw.toFixed(2); } else { label += (context.raw / 1000).toFixed(0) + 'k'; } return label; } } } }, scales: { y: { beginAtZero: true, title: { display: true, text: 'Cost per Result ($)' } }, y1: { position: 'right', beginAtZero: true, title: { display: true, text: 'Reach (thousands)' }, grid: { drawOnChartArea: false }, ticks: { callback: function(value) { return value / 1000 + 'k'; } } } } } }); </script> </body> </html>