<!DOCTYPE html>
<html lang="en" class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>TASØ Hospitality | CRO Strategy Infographic</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
<style>
/* --- Base CSS & Tailwind Pre-generated Classes --- */
:root {
--bg: #0D0D0D; --card: #1A1A1A; --card-secondary: #2A2A2A; --text-primary: #F4F4F4; --text-secondary: #999999; --accent: #CFB983; --accent-light: #E5D5A8; --accent-darker: #A8955F; --border: #3E3E5C; --secondary-button: #3E3E5C; --secondary-button-hover: #6969A9;
}
*,::before,::after { box-sizing: border-box; border-width: 0; border-style: solid; border-color: #e5e7eb }
html { line-height: 1.5; -webkit-text-size-adjust: 100%; -moz-tab-size: 4; -o-tab-size: 4; tab-size: 4; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; font-feature-settings: normal; font-variation-settings: normal }
body { margin: 0; line-height: inherit; font-family: 'Inter', sans-serif; background-color: var(--bg); color: var(--text-primary); }
h1,h2,h3,h4,h5,h6 { font-size: inherit; font-weight: inherit }
a { color: inherit; text-decoration: inherit }
button,input,optgroup,select,textarea { font-family: inherit; font-feature-settings: inherit; font-variation-settings: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; color: inherit; margin: 0; padding: 0 }
button,select { text-transform: none }
button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; background-color: transparent; background-image: none }
img,svg,video,canvas,audio,iframe,embed,object { display: block; vertical-align: middle }
img, video { max-width: 100%; height: auto }
.container { width: 100% }
@media (min-width: 640px) { .container { max-width: 640px } }
@media (min-width: 768px) { .container { max-width: 768px } }
@media (min-width: 1024px) { .container { max-width: 1024px } }
@media (min-width: 1280px) { .container { max-width: 1280px } }
@media (min-width: 1536px) { .container { max-width: 1536px } }
.scroll-smooth { scroll-behavior: smooth }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale }
.block { display: block }
.flex { display: flex }
.grid { display: grid }
.hidden { display: none }
.h-auto { height: auto }
.w-full { width: 100% }
.items-center { align-items: center }
.items-start { align-items: flex-start }
.justify-between { justify-content: space-between }
.space-y-2 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(0.5rem * var(--tw-space-y-reverse)) }
.space-y-4 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(1rem * var(--tw-space-y-reverse)) }
.space-y-20 > :not([hidden]) ~ :not([hidden]) { --tw-space-y-reverse: 0; margin-top: calc(5rem * calc(1 - var(--tw-space-y-reverse))); margin-bottom: calc(5rem * var(--tw-space-y-reverse)) }
.gap-6 { gap: 1.5rem }
.gap-8 { gap: 2rem }
.gap-12 { gap: 3rem }
.rounded-md { border-radius: .375rem }
.rounded-lg { border-radius: .5rem }
.rounded-xl { border-radius: .75rem }
.border { border-width: 1px }
.border-t { border-top-width: 1px }
.p-4 { padding: 1rem }
.p-6 { padding: 1.5rem }
.p-8 { padding: 2rem }
.px-4 { padding-left: 1rem; padding-right: 1rem }
.py-12 { padding-top: 3rem; padding-bottom: 3rem }
.py-16 { padding-top: 4rem; padding-bottom: 4rem }
.pb-4 { padding-bottom: 1rem }
.pt-12 { padding-top: 3rem }
.text-center { text-align: center }
.text-left { text-align: left }
.font-extrabold { font-weight: 800 }
.font-bold { font-weight: 700 }
.font-semibold { font-weight: 600 }
.text-xs { font-size: .75rem; line-height: 1rem }
.text-sm { font-size: .875rem; line-height: 1.25rem }
.text-lg { font-size: 1.125rem; line-height: 1.75rem }
.text-xl { font-size: 1.25rem; line-height: 1.75rem }
.text-2xl { font-size: 1.5rem; line-height: 2rem }
.text-3xl { font-size: 1.875rem; line-height: 2.25rem }
.text-4xl { font-size: 2.25rem; line-height: 2.5rem }
.tracking-tighter { letter-spacing: -.05em }
.text-red-500 { --tw-text-opacity: 1; color: rgb(239 68 68 / var(--tw-text-opacity)) }
.text-white { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)) }
.shadow-lg { --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1); --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color); box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) }
.mx-auto { margin-left: auto; margin-right: auto }
.mt-2 { margin-top: .5rem }
.mt-3 { margin-top: .75rem }
.mt-4 { margin-top: 1rem }
.mt-6 { margin-top: 1.5rem }
.mt-8 { margin-top: 2rem }
.mt-16 { margin-top: 4rem }
.mb-8 { margin-bottom: 2rem }
.mr-2 { margin-right: .5rem }
.max-w-2xl { max-width: 42rem }
.max-w-4xl { max-width: 56rem }
.grid-cols-1 { grid-template-columns: repeat(1,minmax(0,1fr)) }
.list-decimal { list-style-type: decimal }
.list-disc { list-style-type: disc }
.list-inside { list-style-position: inside }
.w-full { width: 100% }
@media (min-width: 640px) {
.sm\:px-6 { padding-left: 1.5rem; padding-right: 1.5rem }
.sm\:grid-cols-3 { grid-template-columns: repeat(3,minmax(0,1fr)) }
}
@media (min-width: 768px) {
.md\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) }
.md\:p-12 { padding: 3rem }
.md\:py-24 { padding-top: 6rem; padding-bottom: 6rem }
.md\:text-xl { font-size: 1.25rem; line-height: 1.75rem }
.md\:text-6xl { font-size: 3.75rem; line-height: 1 }
}
@media (min-width: 1024px) {
.lg\:px-8 { padding-left: 2rem; padding-right: 2rem }
.lg\:grid-cols-2 { grid-template-columns: repeat(2,minmax(0,1fr)) }
.lg\:gap-16 { gap: 4rem }
}
/* --- Custom App CSS --- */
.chart-container { position: relative; width: 100%; max-width: 500px; margin-left: auto; margin-right: auto; height: 350px; max-height: 400px; }
@media (max-width: 768px) { .chart-container { height: 300px; } }
.kpi-box { background-color: var(--card); border: 1px solid var(--border); border-radius: 0.75rem; padding: 1.5rem; text-align: center; box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1); }
.section-heading { font-weight: 800; font-size: 2.25rem; line-height: 2.5rem; letter-spacing: -0.025em; color: var(--text-primary); }
.section-subheading { margin-top: 1rem; font-size: 1.125rem; line-height: 1.75rem; color: var(--text-secondary); max-width: 48rem; margin-left: auto; margin-right: auto; }
.accordion-content { max-height: 0; overflow: hidden; transition: max-height 0.5s ease-in-out; }
</style>
</head>
<body class="antialiased">
<main class="container mx-auto px-4 sm:px-6 lg:px-8">
<section id="hero" class="text-center py-16 md:py-24">
<h1 class="text-4xl md:text-6xl font-extrabold tracking-tighter text-white">
<span class="block" style="color: var(--text-primary);">CRO Strategy to</span>
<span class="block" style="color: var(--accent);">Lower CPL & Boost Conversions</span>
</h1>
<p class="mt-6 max-w-2xl mx-auto text-lg md:text-xl" style="color: var(--text-secondary);">
An analysis of the TASØ Hospitality lead generation funnel, diagnosing key performance barriers and outlining a data-driven action plan to improve the conversion efficiency of high-intent traffic.
</p>
</section>
<section id="diagnosis" class="py-16 md:py-24 border-t" style="border-color: var(--border);">
<div class="text-center">
<h2 class="section-heading">The Diagnosis: A Tale of Two Funnels</h2>
<p class="section-subheading">
The data reveals a critical disconnect. While the ad campaigns are successfully capturing the attention of the target audience at a reasonable cost, the landing page is failing to convert that high-intent attention into qualified leads efficiently. This section breaks down that disconnect.
</p>
</div>
<div class="mt-16 grid grid-cols-1 lg:grid-cols-2 gap-12 lg:gap-16 items-start">
<div class="p-8 rounded-xl shadow-lg" style="background-color: var(--card); border: 1px solid var(--border);">
<h3 class="text-2xl font-bold text-center" style="color: var(--accent-light);">✅ Ads Are Performing</h3>
<p class="text-center mt-2" style="color: var(--text-secondary);">Ad metrics like CTR and CPM meet or exceed industry benchmarks, proving the creative and targeting are effective.</p>
<div class="chart-container mt-6">
<canvas id="adPerformanceChart"></canvas>
</div>
<p class="text-xs text-center mt-4" style="color: var(--text-secondary);">This chart compares TASØ's Facebook ad performance against real estate investment benchmarks. The higher CTR and competitive CPM indicate the ads are successfully driving qualified clicks.</p>
</div>
<div class="p-8 rounded-xl shadow-lg" style="background-color: var(--card); border: 1px solid var(--border);">
<h3 class="text-2xl font-bold text-center text-red-500">❌ The Landing Page is Leaking</h3>
<p class="text-center mt-2" style="color: var(--text-secondary);">Conversion rates for high-intent traffic (MOF/BOF) are low, pointing to on-page issues as the primary problem.</p>
<div class="chart-container mt-6">
<canvas id="cvrChart"></canvas>
</div>
<p class="text-xs text-center mt-4" style="color: var(--text-secondary);">This chart shows a significant drop-off for retargeting (MOF) traffic. A CVR below 1% for this warm audience is a clear signal that the page isn't resonating, which is the core issue driving up CPL.</p>
</div>
</div>
</section>
<section id="barriers" class="py-16 md:py-24 border-t" style="border-color: var(--border);">
<div class="text-center">
<h2 class="section-heading">Deconstructing the "Why": Key Barriers</h2>
<p class="section-subheading">
Two core issues on the landing page create friction and a "Trust Deficit" for potential investors, causing the performance drop-off after the click. Understanding these is key to crafting the right solution.
</p>
</div>
<div class="mt-16 grid grid-cols-1 md:grid-cols-2 gap-12">
<div class="kpi-box">
<h3 class="text-2xl font-bold" style="color: var(--text-primary);">Barrier #1: Stats vs. Story</h3>
<p class="mt-3" style="color: var(--text-secondary);">For a high-consideration decision like a six-figure investment, data points are not enough; investors need a compelling narrative. The current page presents stats but fails to provide the story and proof behind them. Key information that builds trust, like the "Proven Revenue Model" or the rationale for investing in Central America, is either buried or entirely absent.</p>
<div class="mt-6 text-left p-4 rounded-lg" style="background-color: var(--card-secondary); border: 1px solid var(--border);">
<p class="font-semibold" style="color: var(--text-primary);">Above the Fold (What Users See):</p>
<p class="text-sm" style="color: var(--accent);">📈 High-level stats & KPI boxes</p>
<p class="font-semibold mt-4" style="color: var(--text-primary);">Below the Fold (What Users Miss):</p>
<p class="text-sm text-red-500">💡 The "Proven Revenue Model" narrative</p>
<p class="text-sm text-red-500">🌎 The "Why Central America?" story</p>
</div>
</div>
<div class="kpi-box">
<h3 class="text-2xl font-bold" style="color: var(--text-primary);">Barrier #2: The Blunt Instrument</h3>
<p class="mt-3" style="color: var(--text-secondary);">The lead form's current design acts as a binary dead end. Around 40% of all users who start the form are disqualified at the "accredited investor" question, and that click value is lost entirely. The strategy must move beyond a simple filter to capture value from every interaction.</p>
<div class="mt-6 text-left p-4 rounded-lg" style="background-color: var(--card-secondary); border: 1px solid var(--border);">
<p class="font-semibold" style="color: var(--text-primary);">Current Form Logic:</p>
<div class="mt-2 space-y-2">
<div class="flex items-center"><span class="font-bold mr-2" style="color: var(--accent-light);">IF YES ➔</span><span style="color: var(--text-primary);"> Full Form (Qualified Lead)</span></div>
<div class="flex items-center"><span class="font-bold mr-2 text-red-500">IF NO ➔</span><span style="color: var(--text-primary);"> Form Ends (Lost Value & Wasted Ad Spend)</span></div>
</div>
</div>
</div>
</div>
<div class="mt-16 pt-12 border-t" style="border-color: var(--border);">
<h3 class="text-2xl font-bold text-center" style="color: var(--text-primary);">Supporting Data: Heatmaps</h3>
<p class="text-center mt-2 mb-8" style="color: var(--text-secondary);">Explore the user behavior data that reveals these barriers.</p>
<div class="max-w-4xl mx-auto space-y-4">
<div class="accordion-item" style="background-color: var(--card); border: 1px solid var(--border); border-radius: 0.5rem;">
<button class="accordion-button w-full p-4 text-left font-semibold text-lg flex justify-between items-center" style="color: var(--accent-light);">
<span>Scroll Heat Map</span>
<span class="accordion-icon text-2xl" style="color: var(--accent);">+</span>
</button>
<div class="accordion-content px-4 pb-4">
<img src="./heatmap-scroll.png" alt="Scroll Heatmap" class="w-full h-auto rounded-md">
<p class="text-sm mt-2" style="color: var(--text-secondary);">The bright red at the top shows nearly 100% of users see the hero section, but it quickly fades to blue, indicating a massive drop-off in scrolling. Most users never see the content in the bottom half of the page.</p>
</div>
</div>
<div class="accordion-item" style="background-color: var(--card); border: 1px solid var(--border); border-radius: 0.5rem;">
<button class="accordion-button w-full p-4 text-left font-semibold text-lg flex justify-between items-center" style="color: var(--accent-light);">
<span>Cursor Movement Heat Map</span>
<span class="accordion-icon text-2xl" style="color: var(--accent);">+</span>
</button>
<div class="accordion-content px-4 pb-4">
<img src="./heatmap-cursor.png" alt="Cursor Movement Heatmap" class="w-full h-auto rounded-md">
<p class="text-sm mt-2" style="color: var(--text-secondary);">Cursor movement is concentrated on the hero image, the headline, and the property carousel. This shows what users are interested in, but also reveals a lack of engagement with the key selling points below.</p>
</div>
</div>
<div class="accordion-item" style="background-color: var(--card); border: 1px solid var(--border); border-radius: 0.5rem;">
<button class="accordion-button w-full p-4 text-left font-semibold text-lg flex justify-between items-center" style="color: var(--accent-light);">
<span>Click Heat Map</span>
<span class="accordion-icon text-2xl" style="color: var(--accent);">+</span>
</button>
<div class="accordion-content px-4 pb-4">
<img src="./heatmap-click.png" alt="Click Heatmap" class="w-full h-auto rounded-md">
<p class="text-sm mt-2" style="color: var(--text-secondary);">The most intense clicks are on the main CTA and the property carousel arrows. The faint clicks on the stat boxes indicate user confusion, as they expect these elements to be interactive but they are not.</p>
</div>
</div>
</div>
</div>
</section>
<section id="action-plan" class="py-16 md:py-24 border-t" style="border-color: var(--border);">
<div class="text-center">
<h2 class="section-heading">The Action Plan: A Three-Part Solution</h2>
<p class="section-subheading">
This is a prioritized set of recommendations designed to fix the key barriers, lower Cost Per Lead, and maximize the value of every click through strategic testing and implementation.
</p>
</div>
<div class="mt-16 space-y-20">
<div class="p-8 md:p-12 rounded-xl shadow-lg" style="background-color: var(--card); border: 1px solid var(--border);">
<h3 class="text-3xl font-bold" style="color: var(--accent);">Priority #1: A/B Test a New "Investor-First" Layout</h3>
<p class="mt-4 text-lg" style="color: var(--text-secondary);">The highest-impact action is to test a redesigned landing page that prioritizes the investment story, builds trust, and guides the user logically towards conversion. This variant introduces crucial narrative elements and humanizes the brand.</p>
<div class="mt-8 grid grid-cols-1 lg:grid-cols-2 gap-8">
<div class="rounded-lg p-6" style="border: 2px solid var(--border);">
<h4 class="text-xl font-bold text-center" style="color: var(--text-secondary);">Control (Current Layout)</h4>
<ul class="mt-4 space-y-2 list-decimal list-inside" style="color: var(--text-secondary);">
<li>Hero Section</li>
<li class="font-semibold" style="color: red;">KPI Stat Boxes</li>
<li class="font-semibold" style="color: red;">Property Carousel</li>
<li>Mission Statement</li>
<li class="font-semibold" style="color: red;">Selling Points (Buried)</li>
</ul>
</div>
<div class="rounded-lg p-6" style="border: 2px solid var(--accent); background-color: rgba(207, 185, 131, 0.05);">
<h4 class="text-xl font-bold text-center" style="color: var(--accent-light);">Variant (Recommended Test)</h4>
<ul class="mt-4 space-y-2 list-decimal list-inside" style="color: var(--text-primary);">
<li>Hero Section</li>
<li class="font-semibold" style="color: var(--accent-light);">Key Selling Points (Elevated)</li>
<li class="font-semibold" style="color: var(--accent-light);">NEW: Founder Video (to build trust)</li>
<li class="font-semibold" style="color: var(--accent-light);">NEW: "Why Central America?" Section</li>
<li class="font-semibold" style="color: var(--accent-light);">NEW: Social Proof & Awards</li>
<li>Property Carousel (De-prioritized)</li>
</ul>
</div>
</div>
</div>
<div class="p-8 md:p-12 rounded-xl shadow-lg" style="background-color: var(--card); border: 1px solid var(--border);">
<h3 class="text-3xl font-bold" style="color: var(--accent);">Priority #2: Implement Intelligent Form Filtering</h3>
<p class="mt-4 text-lg" style="color: var(--text-secondary);">Transform the "blunt instrument" into a smart value-capture tool. The new strategy is to capture essential contact information *first*, ensuring no lead is lost. Then, use conditional logic to segment users and provide a valuable next step for everyone, not just accredited investors.</p>
<div class="mt-8">
<h4 class="text-xl font-bold text-center" style="color: var(--text-primary);">Proposed Multi-Path Form Logic</h4>
<div class="mt-6 grid grid-cols-1 sm:grid-cols-3 gap-6 text-center">
<div class="p-6 rounded-lg" style="background-color: var(--card-secondary); border: 1px solid var(--border);">
<p class="font-bold" style="color: var(--accent-light);">Path A: Qualified</p>
<p class="mt-2 text-sm" style="color: var(--text-secondary);">User answers "Yes" to being accredited after providing contact info and is flagged as a high-priority lead for immediate follow-up.</p>
</div>
<div class="p-6 rounded-lg" style="background-color: var(--card-secondary); border: 1px solid var(--border);">
<p class="font-bold" style="color: var(--accent);">Path B: Nurture</p>
<p class="mt-2 text-sm" style="color: var(--text-secondary);">User answers "No" and is automatically added to a specific email list for future, non-accredited investment opportunities.</p>
</div>
<div class="p-6 rounded-lg" style="background-color: var(--card-secondary); border: 1px solid var(--border);">
<p class="font-bold" style="color: var(--accent-darker);">Path C: Referral</p>
<p class="mt-2 text-sm" style="color: var(--text-secondary);">(A/B Test) User answers "No" and is presented with a referral offer, turning a non-qualified lead into a potential source of new leads.</p>
</div>
</div>
</div>
</div>
<div class="p-8 md:p-12 rounded-xl shadow-lg" style="background-color: var(--card); border: 1px solid var(--border);">
<h3 class="text-3xl font-bold" style="color: var(--accent);">Priority #3: Refine Ad Strategy</h3>
<p class="mt-4 text-lg" style="color: var(--text-secondary);">With the landing page optimized, shift the Google Ads budget from broad PMax campaigns to more precise, high-intent campaign types. This allows for greater control and leverages insights from existing campaign data for more efficient targeting.</p>
<div class="mt-8 grid grid-cols-1 md:grid-cols-2 gap-8">
<div>
<h4 class="text-xl font-bold" style="color: var(--text-primary);">Google Search Campaigns</h4>
<p class="mt-2" style="color: var(--text-secondary);">Target hyper-specific keywords that signal active investment interest. Use top-performing search terms from the existing PMax campaign as a starting point to ensure efficiency from day one.</p>
<ul class="mt-3 text-sm list-disc list-inside" style="color: var(--text-secondary);">
<li>"accredited investor real estate fund"</li>
<li>"invest in panama hospitality"</li>
<li>"boutique hotel investment opportunities"</li>
</ul>
</div>
<div>
<h4 class="text-xl font-bold" style="color: var(--text-primary);">YouTube Ad Campaigns</h4>
<p class="mt-2" style="color: var(--text-secondary);">Use a founder-led video to build a direct, personal connection with potential investors. Target users Google identifies as actively researching investment services to maximize relevance and impact.</p>
<ul class="mt-3 text-sm list-disc list-inside" style="color: var(--text-secondary);">
<li>In-Market: "Investment Services"</li>
<li>In-Market: "Commercial Real Estate"</li>
<li>Interest: "Travel to Central America"</li>
</ul>
</div>
</div>
</div>
</div>
</section>
</main>
<footer class="text-center py-12 mt-16 border-t" style="border-color: var(--border);">
<p style="color: var(--text-secondary);">TASØ Hospitality | CRO Strategy Infographic</p>
</footer>
<script>
document.addEventListener('DOMContentLoaded', function() {
const houseOfGrowthPalette = {
accent: 'rgba(207, 185, 131, 0.8)',
accentBorder: '#CFB983',
neutral: '#2A2A2A',
neutralBorder: '#3E3E5C',
};
const chartDefaultColor = '#999999';
Chart.defaults.color = chartDefaultColor;
Chart.defaults.borderColor = '#3E3E5C';
// --- Chart 1: Ad Performance (with safety check) ---
const adPerformanceCanvas = document.getElementById('adPerformanceChart');
if (adPerformanceCanvas) {
const adPerformanceCtx = adPerformanceCanvas.getContext('2d');
new Chart(adPerformanceCtx, {
type: 'bar',
data: {
labels: [['Facebook Ad', 'CTR'], ['Facebook Ad', 'CPM']],
datasets: [{
label: 'TASØ Campaign',
data: [1.64, 17.99],
backgroundColor: houseOfGrowthPalette.accent,
borderColor: houseOfGrowthPalette.accentBorder,
borderWidth: 2
}, {
label: 'Industry Benchmark',
data: [1.15, 20.00],
backgroundColor: houseOfGrowthPalette.neutral,
borderColor: houseOfGrowthPalette.neutralBorder,
borderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
grid: { color: '#3E3E5C' },
ticks: {
color: chartDefaultColor,
callback: function(value, index, ticks) {
// Using the tick's label to determine format
const label = this.getLabelForValue(value);
if (typeof label === 'string' && label.includes('CPM')) {
return '$' + value;
}
return value + '%';
}
}
},
x: {
grid: { display: false },
ticks: { color: chartDefaultColor }
}
},
plugins: {
legend: { position: 'bottom', labels: { color: chartDefaultColor } },
tooltip: {
titleColor: '#F4F4F4',
bodyColor: '#E5D5A8',
backgroundColor: '#1A1A1A',
borderColor: '#3E3E5C',
borderWidth: 1,
callbacks: {
title: function(tooltipItems) {
const item = tooltipItems[0];
let label = item.chart.data.labels[item.dataIndex];
return Array.isArray(label) ? label.join(' ') : label;
},
label: function(context) {
let label = context.dataset.label || '';
if (label) { label += ': '; }
const rawLabel = context.chart.data.labels[context.dataIndex];
if (Array.isArray(rawLabel) && rawLabel.join(' ').includes('CPM')) {
label += '$' + context.parsed.y.toFixed(2);
} else {
label += context.parsed.y.toFixed(2) + '%';
}
return label;
}
}
}
}
}
});
}
// --- Chart 2: CVR (with safety check) ---
const cvrCanvas = document.getElementById('cvrChart');
if (cvrCanvas) {
const cvrCtx = cvrCanvas.getContext('2d');
new Chart(cvrCtx, {
type: 'bar',
data: {
labels: ['MOF (Retargeting)', 'BOF (Lead Gen)', ['Direct &', 'Organic']],
datasets: [{
label: 'Conversion Rate',
data: [0.92, 3.51, 4.05],
backgroundColor: [
'rgba(239, 68, 68, 0.8)',
'rgba(245, 158, 11, 0.8)',
'rgba(34, 197, 94, 0.8)'
],
borderColor: [
'#EF4444',
'#F59E0B',
'#22C55E'
],
borderWidth: 2
}]
},
options: {
responsive: true,
maintainAspectRatio: false,
scales: {
y: {
beginAtZero: true,
grid: { color: '#3E3E5C' },
ticks: {
color: chartDefaultColor,
callback: function(value) { return value + '%'; }
}
},
x: {
grid: { display: false },
ticks: { color: chartDefaultColor }
}
},
plugins: {
legend: { display: false },
tooltip: {
titleColor: '#F4F4F4',
bodyColor: '#E5D5A8',
backgroundColor: '#1A1A1A',
borderColor: '#3E3E5C',
borderWidth: 1,
callbacks: {
title: function(tooltipItems) {
const item = tooltipItems[0];
let label = item.chart.data.labels[item.dataIndex];
if (Array.isArray(label)) {
return label.join(' ');
} else {
return label;
}
},
label: function(context) {
return 'CVR: ' + context.parsed.y.toFixed(2) + '%';
}
}
}
}
}
});
}
// --- Accordion Logic (No changes needed, but included for completeness) ---
const accordionItems = document.querySelectorAll('.accordion-item');
accordionItems.forEach(item => {
const button = item.querySelector('.accordion-button');
const content = item.querySelector('.accordion-content');
const icon = item.querySelector('.accordion-icon');
if (button && content && icon) {
button.addEventListener('click', () => {
const isExpanded = content.style.maxHeight && content.style.maxHeight !== '0px';
accordionItems.forEach(otherItem => {
if (otherItem !== item) {
otherItem.querySelector('.accordion-content').style.maxHeight = '0px';
otherItem.querySelector('.accordion-icon').textContent = '+';
}
});
if (isExpanded) {
content.style.maxHeight = '0px';
icon.textContent = '+';
} else {
content.style.maxHeight = content.scrollHeight + 'px';
icon.textContent = '−';
}
});
}
});
});
</script>
</body>
</html>