Back to Projects
Case Study

Building a Product View
on Datadog

The ideation, development, and refinement of an internal product analytics dashboard.

Datadog gives you raw RUM and a wall of widgets. What product and leadership needed was one place that showed our products as products—who's searching, where they're stuck, and whether demos turned into real use. So we built a product view on top of the same data.

We started with native Datadog dashboards: North Star Overview, Weekly Overview. They assumed more instrumentation than we had. In November 2025 we audited what RUM actually contained, retired the legacy dashboards, and shipped a minimal "Current Signals" dashboard that only showed what we could observe. Then we took the same idea offline: a Node script (build-live-report.mjs) that runs the search, audit, usage, and post-demo scripts, bakes the JSON into HTML, and writes reports/live-dashboard.html. One command, one static snapshot.

What made it shareable was moving that pipeline into a Netlify function. Every request runs the same fetchers, renders the same HTML, and serves it. No build step, no static site—just a serverless function (netlify/functions/dashboard.mjs) and a redirect so the whole site is the dashboard. We added cookie-based password protection, a five-minute cache so we don't hammer the Datadog API, and a Refresh button so stakeholders can pull fresh data on demand.

Refinements followed: product tabs, a link to the Datadog overview for drill-down. In parallel we built a full Next.js analytics app with date ranges, workflow filters, and user lists—deployed to its own Netlify site for deeper analysis. Two artifacts, one story: product metrics that start from what we actually observe.

Timeline

Ideation
North Star metrics & single product view
Problem definition
North Star framework and RUM as source of truth. Product and leadership needed one place to see our products as products, not raw widgets. The goal: answer "who's using it" and "what are they doing" without clicking through Datadog.
Datadog API connection & RUM audit
Technical foundation
Connected via DATADOG_API_KEY, DATADOG_APP_KEY, DD_SITE stored in ops/datadog.env. Audited what we could reliably chart with npm run datadog:audit-rum. Found gaps between what we wanted and what was instrumented.
Development
Native Datadog dashboards (retired)
North Star Overview, Weekly Overview
Created North Star Overview and Weekly Overview in Datadog. They assumed more instrumentation than we had. Later retired and replaced with a minimal, signal-only approach.
Minimal "Current Signals" dashboard
Nov 2025 • Only what's observed
Widgets: WAU, Activation, actions over time, users by workflow, build adoption, show selections, device breakdown. Created with npm run datadog:create-minimal. Philosophy: show only what the data supports.
Modular fetcher scripts
Search, audit, usage, adoption gaps
search-patterns-report.mjs, rum-usage-by-browser-device.mjs, audit-rum-vs-dictionary.mjs, adoption-gaps.mjs. Each script queries Datadog and returns structured JSON.
Static Live Report
build-live-report.mjs → HTML snapshot
One command: npm run datadog:live-report. Runs all fetchers, bakes JSON into HTML, writes reports/live-dashboard.html. Open in browser for an instant snapshot—no server needed.
Netlify serverless dashboard
dashboard.mjs • All routes → function
netlify.toml redirects all routes to /.netlify/functions/dashboard. Function imports fetchers, runs them server-side, returns full HTML. No build step, no static site—just a function.
Refinement
Auth, cache, refresh
Password protection • 5-min cache • Refresh button
Cookie-based login (password in function or env). In-memory cache (5-min TTL) avoids hammering Datadog. Refresh button reloads page so function re-runs and returns fresh HTML on demand.
Product tabs
One dashboard, multiple product views
Tabbed UI: separate views for different products (search, audit, usage, adoption metrics). Link to native Datadog dashboard for deeper drill-down.
Next.js Analytics Dashboard
Date range • Workflow filter • User list • CSV export
Full app at prototyping-lab/analytics-dashboard/. Deployed to a dedicated Netlify site. Date range picker, workflow filter, user list with CSV export. For deeper analysis; the Live Dashboard stays the single-page standup view.

How to Run It

1

Static snapshot (local)

Run once, open in browser. No server needed.

source ops/datadog.env
npm run datadog:live-report
open reports/live-dashboard.html
2

Deploy to Netlify

Connect repo, set env vars, deploy. All routes go to the function.

netlify link
# Set DATADOG_API_KEY, DATADOG_APP_KEY, DD_SITE in Netlify UI
netlify deploy --prod
3

Key npm scripts

From repo root:

datadog:live-report      # Build HTML snapshot
datadog:create-minimal   # Create Datadog dashboard
datadog:audit-rum        # Audit RUM coverage
datadog:rum-usage        # Browser/device breakdown
4

Next.js app (optional)

Full analytics with filters and exports.

cd prototyping-lab/analytics-dashboard
cp .env.example .env.local  # Add keys
npm install && npm run dev