Quickstart 3: Tiny Shop Funnels

This quickstart builds two images from the ouo11y source

Funnels are newer than the images this guide was verified with (rum-api and grafana 0.4.0), so the stack page builds rum-api and Grafana from a clone of the ouo11y repository. That repository is private for now: without read access to it you cannot finish this quickstart. The first page, the plain shop, works for anyone. The collector image on ghcr.io is private too. Email hello@ouo11y.com for access.

rum-api 0.5.0 and grafana 0.5.0 have since been released with funnels. This guide has not been re-run against them yet; until it is, the commands below are the verified ones.

A small shop: an Express API and a React app with five pages. Its page views and three custom events make a funnel: home, a product page, add to cart, checkout, order paid. A script drives 50 real browser sessions through the shop, each one following a persona that stops at a known place. You build the funnel in Grafana, read where shoppers drop and how long each step takes, and open the replay of a session that gave up at checkout.

Plan on about 40 minutes, most of it waiting for installs and the first image build. You need Node 24 or newer and Docker Desktop.

⬇ Download the finished files (tiny-shop-funnels.zip)

What you build

Traffic

generate-sessions50 headless Chromium sessions
8 personas

drives

Your apps

Web app :5173React · @ouo11y/browser
navigation · add_to_cart · order_paid

API :5001Express · OpenTelemetry Node SDK

OTLP

Edge

ouo-collector:4318 OTLP · :4319 replay

Storage

Lokipage views · custom events

Tempotraces

rum-apifunnels · sessions · replays

View

Grafana :3000ouo11y RUM → Funnels

The browser SDK turns every page change into a navigation event and every rum.addEvent into a custom event. Loki stores both; rum-api counts them per session.

At the end you read this funnel in Grafana. Click a hatched drop-off to see who stopped there.

1. 1Pageis/
   100%45 sessions
2. −8 stopped after step 1
   2Pagestarts with/products/
   82.2%37 sessions82.2% of previous step
3. −9 stopped after step 2
   3Eventadd_to_cart
   62.2%28 sessions75.7% of previous step
4. −8 stopped after step 3
   4Pageis/checkout
   44.4%20 sessions71.4% of previous step
5. −10 stopped after step 4steepest fall
   5Eventorder_paid
   22.2%10 sessions50% of previous step

The funnel the 50 generated sessions make. Checkout to paid is the steepest fall.

The pages

1. The plain shop: an API and a five-page React shop, no telemetry.
2. The stack: collector, Tempo, Loki, rum-api and Grafana, one service at a time.
3. Instrument: traces from the API, page steps and event steps from the shop.
4. Fifty shoppers: the session generator and the answer it prints.
5. Build and read the funnel: the five steps in Grafana, and what each number means.
6. Drop-off to replay: the sessions that stopped, their replays, clean-up and fixes.

Already have the files?

The download above is the finished folder. With it you can skip the typing, but not the stack page: rum-api and Grafana are still built from your clone, so set OUO11Y_REPO as it shows. Each page says which terminal and folder a command runs in.