Back to Portfolio

CASE STUDY

How ad performance across 7 platforms and 2 markets became one view you can open in a meeting

An e-commerce beauty brand running ads on Meta, TikTok, Shopee, Google, and selling through Watsons needed a way to see blended performance without opening six different platforms. This dashboard reads directly from the automated reporting pipeline's output sheet and renders a clean side-by-side view for Singapore and Malaysia.

ReactGoogle Sheets APIViteSVG ChartsMeta + TikTok + ShopeeE-commerce
7
Platforms tracked (SG)
6
Platforms tracked (MY)
2
Markets in one view
30s
Auto-refresh interval
0
Platform logins to see all data
Auto
Watsons guard on blended ROAS

Live Demo Available

Populated with realistic but fictional data. No client information is exposed.

Open Demo Dashboard

THE PROBLEM

Comparing ad performance across platforms required opening each one separately and doing the math in your head

The automated reporting pipeline already wrote weekly ad data to a Google Sheet — Meta CPAS, TikTok GMV Video, TikTok GMV Live, Shopee Ads, Google Ads, and Watsons (revenue only). But the sheet was a data store, not a reporting tool. Getting a blended picture meant scrolling rows, summing columns, and mentally adjusting for the channels that have no ad spend.

The Watsons problem was the main one: Watsons generates revenue but has no ad budget. If included in blended ROAS as a denominator, it makes every other platform look better than it is. The fix had to be consistent and automatic — not something anyone had to remember to apply.

HOW IT WORKS

Reads the output sheet. Handles the edge cases. Renders instantly.

01

Reads directly from the reporting pipeline's output sheet

The automation that runs weekly already writes clean per-platform rows to a Google Sheet. This dashboard reads that same sheet via Sheets API — no duplicate data entry, no new pipeline needed.

02

Applies the Watsons guard on blended ROAS

Watsons spend is null (revenue only). The blended ROAS denominator only sums platforms where spend is non-null. Watsons revenue still counts in the numerator. This is the correct definition and it's enforced automatically.

03

Renders revenue mix as SVG donuts

Each market gets a donut showing what percentage of total revenue came from each platform. No charting library — native SVG so the layout is pixel-exact and the bundle stays minimal.

04

Renders ROAS bars per platform

Horizontal bars show ROAS relative to the highest-performing platform in that market. Color-coded: green for strong, amber for marginal, red for below break-even. Watsons rows show a dash instead of a bar.

05

Week navigation and 30-second auto-refresh

A dropdown navigates across the last 16 weeks of data. The dashboard auto-refreshes every 30 seconds — built to stay open during live campaign reviews and update as data comes in.

WHAT IT SHOWS

Side-by-side: SG and MY, every platform, one screen.

Revenue

Total weekly revenue per market with prior-week comparison

Ad Spend

Total spend across all platforms with active platform count

Blended ROAS

Computed correctly — Watsons excluded from denominator

Revenue Mix Donut

Per-platform revenue share as a percentage of market total

ROAS by Platform

Horizontal bar chart, sorted by performance

Platform Breakdown Table

Spend, revenue, and ROAS per row — sortable at a glance

STACK

React 18ViteGoogle Sheets API v4SVG (native charts)Vercel

No charting library. All donuts and ROAS bars are raw SVG. The Sheets API fetch is a single call — no backend, no auth layer, no database. Deployed as a static Vite build on Vercel. The demo mode swaps in fictional data via a URL param so the dashboard can be shared publicly without exposing any client data.

Running ads on multiple platforms and tired of the manual reconciliation?

If your team spends time every week pulling data from different ad platforms to get a blended number, I can build a live view on top of whatever reporting system you already have. One call is enough to scope it.

Book a Call