Datadog RUM Pizza Builder

Fragment-based view tracking

Each time this wizard changes location.hash, the RUM SDK records a new View event — no page reload needed. The SDK detects hash changes automatically and starts a fresh view with its own load time, action count, and frustration signal tracking.

In RUM › Explorer, set the event type to Views and group by @view.url_hash to see per-step engagement. Each hash is a named wizard step:

You can also correlate view events with error events on the same hash to understand whether a drop-off was caused by a page problem or the user simply leaving.

source:browser service:datadog-rum-pizza-builder @type:view
| stats count() by @view.url_hash

Conversion funnel by action

In RUM › Explorer, set the scope to Sessions and switch the visualization to Funnel. Each funnel step can be a View or an Action.

For this wizard, the most meaningful action-based funnel tracks the three key events across the full flow:

Step 1  Action: click on Start Building
Step 2  Action: click on See My Pizza
Step 3  Action: pizza_order_submitted

This matches exactly what Datadog shows — sessions that clicked Start Building, then reached the final step, then successfully fired the custom submission action. The drop-off between steps tells you where users abandoned and how many made it through end-to-end.

To investigate a drop-off step, click into it and review individual sessions — session replays will show whether an error blocked the user or they simply left.

Custom metrics from actions

When a user reaches the results screen, this app fires a custom RUM Action with the full order as context attributes:

DD_RUM.addAction('pizza_order_submitted', {
  pizza_order: {
    crust:    "Hand-Tossed",
    sauce:    "BBQ",
    cheese:   "Mozzarella",
    toppings: "Pepperoni",
    size:     "Large (16 in)"
  }
})

In RUM › Generate Metrics, create a count metric from this action. The metric used in the Results dashboard is:

Event type:  Action
Filter:      @action.target.name:pizza_order_submitted
Metric name: rum.pizza_order.submissions
Group by:    @context.pizza_order.crust
             @context.pizza_order.sauce
             @context.pizza_order.cheese
             @context.pizza_order.toppings
             @context.pizza_order.size
             @geo.country
             @geo.country_iso_code

The @geo.country dimension comes from RUM's automatic geo-enrichment — resolved from the user's IP and attached to every event for free.

At submission, the app also calls DD_RUM.setUser() with a generated name, email, and a deterministic ID hashed from those values. This lets you filter all sessions for a given fictional user via @usr.id, @usr.name, or @usr.email in the Explorer — simulating a returning customer.

The Results tab shows the metric broken down using toplist, timeseries, sunburst, and geomap widgets, each filterable via dashboard template variables.

Synthetic tests & error budget

A Datadog Browser Synthetic test runs against this app on a schedule, simulating the full wizard from start to finish. Option order is randomized per run so "always click first" produces varied data.

On ~20% of runs, a simulated JS error is injected at a random step, blocking completion and producing intentional funnel drop-off for training purposes. Each session is tagged with @context.synthetic.will_fail and @context.synthetic.intended_fail_step so you can filter intentional failures in the Explorer. The error surfaces as @error.source:console — captured automatically from console.error() with no custom instrumentation.

An SLO tracks completion rate over a rolling window:

SLO type:   Monitor-based
Target:     99% uptime (1% error budget)
Window:     7-day rolling

The Results dashboard includes an SLO widget. A breach beyond the simulated noise level signals a real problem — investigate in the RUM funnel and session replays.

🍕

Ready to build your pizza?

Choose your crust, sauce, cheese, toppings, and size — we'll handle the rest.

Choose your crust

🥨

Thin & Crispy

Light and snappy

🫓

Hand-Tossed

Classic and chewy

🍞

Deep Dish

Thick and doughy

🌾

Gluten-Free

Light rice crust

Pick your sauce

🍅

Classic Tomato

Rich marinara

🧄

White Garlic

Creamy alfredo

🔥

BBQ

Smoky and sweet

🌿

Pesto

Fresh basil blend

Select your cheese

🧀

Mozzarella

The OG melt

🫕

Four Cheese

Mozz, provolone, parmesan, romano

🌱

Vegan

Cashew-based

🚫

No Cheese

Sauce only

Add your toppings

🍖

Pepperoni

A classic

🍄

Mushrooms

Earthy and savory

🫑

Bell Peppers

Crisp and sweet

🌶️

Jalapeños

Bring the heat

Choose your size

🤏

Personal

6" · 4 slices

✋

Medium

12" · 8 slices

🙌

Large

16" · 10 slices

🎉

XL Party

20" · 12 slices

🎉 Your Pizza Order

Here's what you built:

Datadog RUM events

time	type	path / name	hash / payload
Waiting for events…