Journey map
How do I see the exact path a user took through my app? Open any session and switch to the Journey Map tab. Every screen and milestone appears as a node; every navigation transition is an edge. Back-navigation is shown as a dashed amber line with a count - making detours and dead ends immediately visible.
The journey map visualises a single user session as an interactive node graph - showing every screen and milestone as a node, connected by the actual transitions the user made.
Reading the graph
Node types
| Node style | What it represents |
|---|---|
| Indigo fill, brand border | A funnel milestone (OnRamp.step() event) |
| White fill, gray border | A screen navigation event |
Each node shows a count badge in the top-right corner - the number of times that screen or milestone was visited within this session.
Edge types
| Edge style | What it represents |
|---|---|
| Gray arrow | Forward navigation |
| Amber dashed + ×N pill | Back-navigation (user returned to a previous screen N times) |
Back-edges are especially useful for spotting confusion - a user bouncing back and forth between two screens often signals unclear UI or a missing step.
Playback
The playback bar at the bottom lets you step through the session chronologically:
- Pause / Play - control the animated pulse that travels along the path
- Speed - 0.5×, 1×, or 2× playback speed
The travelling pulse highlights the active edge as the session progresses.
Switching between timeline and map
Both views show the same session data. Switch between them using the Timeline and Journey Map tabs at the top of the user card.
- Timeline - good for reading exact timestamps, seeing all event properties, spotting time gaps
- Journey Map - good for understanding navigation patterns and back-tracking
The journey map requires navigation tracking to be set up. If you have not added the navigation adapter, only milestone nodes will appear. See React Native SDK for setup.