Reader interactions

See what a publisher would record

Every viewer on this page tells the page what its reader does: where they look, which channels they switch, which frame they stop on, and how long the figure is on screen. The table is this page listening. Use the viewers and watch it fill.

Click a row for the full event. The events stay in your browser: every request in the Network tab goes to this site or to the data bucket.

1. A plain element

Drag, zoom, and set the contrast with the slider under the channel dot.

2. The MyST widget, inside a shadow root

The same data inverted on white, rendered the way a Curvenote article renders it. Its events reach the page all the same.

3. A time-lapse that plays on its own

Autoplay, and the pause while this figure is scrolled away, are the viewer's own doing, so they stay out of the table. Press Pause, then Play, or drag the time slider, and those rows appear.

Listening on your own page

This is the whole listener. Send e.detail wherever your own tracking goes. Give each viewer an id, as this page does, and every event says which figure it came from. Every field is in the embedding guide.

document.addEventListener('fn-viewer:interaction', (e) => {
  yourTracker.send(e.detail);
});