Vanilla Breeze

analytics-panel

Self-serve view of analytics data stored on the device — shows what's been captured this session, with Pause and Clear controls.

Overview

The <analytics-panel> component lets visitors see exactly what Vanilla Breeze analytics has captured about their current browsing session — no hand-waving about "anonymous data". Users can pause collection for the session, clear stored data, or both.

The panel reads from sessionStorage (vb_sc, vb_q, vb_optout) — the same storage the analytics runtime writes to. No server round-trip, no identifier lookup.

Basic Usage

Place the element anywhere — dashboard, privacy page, settings section. The component self-renders on upgrade.

Compact Mode

Add compact for a tighter layout when embedding alongside other UI. The heading and action buttons reduce in size; data readouts stay legible.

Custom Title

Override the default Analytics data heading with title.

Events

The panel dispatches custom events when the user takes an action, so embedding pages can react (e.g. showing a confirmation toast, updating a status indicator).

EventWhen
analytics-panel:clearedAfter the user clears their session data
analytics-panel:optoutWhen the user pauses analytics for this tab
analytics-panel:optinWhen the user resumes analytics for this tab

How It Relates to Analytics.setConsent()

The panel's Pause analytics button writes vb_optout to sessionStorage, which the core runtime checks on every Analytics.track() call. The same flag can be set programmatically:

Privacy Boundaries

The panel shows only data the runtime has captured about this tab in this session:

  • Pages this session — a simple counter, no path history.
  • Max scroll depth — the furthest point reached on any page (0–100%).
  • Active reading time — milliseconds the tab was visible.
  • Queued events — count of component interactions waiting to flush.

The panel does not display or have access to server-side aggregates. There is no user identifier, no cross-tab history, and no cross-site correlation. Closing the tab clears everything automatically.

Accessibility

  • Status indicator is announced to assistive tech via role="status".
  • Actions are standard <button> elements — keyboard activatable.
  • The panel uses semantic landmarks: <header>, <section>, <footer>.
  • Data readout uses a <dl> so screen readers announce labels with their values.

See Also
↑