Marketing Campaign ROI Tracker

Track marketing spend, funnel metrics, and return on investment in one browser dashboard.

Overview

Marketing teams need a clear view of which campaigns earn back their budget. This single-page app lists every campaign in an AG Grid table, logs new campaigns through an Alpine.js form, visualizes ROI and funnel performance with Chart.js, and exports portfolio summaries to Excel. Data persists in the browser via localStorage.

Key features

Campaign grid

• Sortable AG Grid with Campaign, Budget, Leads, Conversions, Revenue, ROI, and Status columns
• Color-coded ROI (green positive, red negative) and status badges (Active, Paused, Completed)
• Edit and Delete actions on each row

Log campaigns

• Alpine.js form to add or edit campaigns
• ROI auto-calculates as ((Revenue − Budget) / Budget) × 100 while you type budget and revenue

Charts

• Bar chart: ROI % by campaign
• Grouped bar chart: Leads vs Conversions per campaign
• Charts refresh when status filters change; axis colors adapt in dark mode

Import & export

• Export Excel workbook with Campaigns and Summary sheets
• Import campaigns from Excel (.xlsx, .xls, .csv) using the same column layout

Filters

• Status dropdown filters Active, Paused, or Completed campaigns
• Grid, charts, and summary KPIs all respect the active filter

Summary dashboard

• Total budget and total revenue across visible campaigns
• Average ROI, total conversions, and lead-to-conversion rate

Theme & persistence

• Dark mode toggle with remembered preference
• Campaign data saved to localStorage across reloads

Data & persistence

Sample campaigns load on first visit. Edits, additions, and imports overwrite stored data in `localStorage`. Dark mode preference is stored separately. No server required.

Charts & reporting

Chart.js powers ROI and performance visuals. SheetJS (XLSX) handles Excel import and export, including a Summary sheet with portfolio totals.

Built with

Tailwind CSS, AG Grid Community, Alpine.js, Chart.js, and SheetJS — all loaded from CDN in a single HTML file.

Try the interactive walkthrough below. Click Walk through features and use Next / Back (or arrow keys) to explore every feature.