scrollDepth

import { scrollDepth } from "@spoar/sdk/plugins";

import { createAnalytics } from "@spoar/sdk";
import { scrollDepth } from "@spoar/sdk/plugins";

export const analytics = createAnalytics({
  project: "example.com",
  key: "pk_...",
  endpoint: "/_ra",
  plugins: [scrollDepth()],
});

OptionsCopy Anchor Link

scrollDepth() takes no options.

SendsCopy Anchor Link

BehaviourCopy Anchor Link

• Depth is the scroll position divided by the scrollable height of the document, rounded to a whole percentage and capped at 100. A page shorter than the window counts as 100 on its first scroll event.
• The deepest value is sent when the next pageview happens or when the tab is hidden, then the count starts again from 0. A page with no scroll events sends nothing.
• The event is credited to the page that was scrolled, not the page navigated to.
• The scroll listener is passive.

In reportsCopy Anchor Link

The scroll_depth metric averages these events as a share of the page, from 0 to 1: breakdown/page?metrics=visitors,time_on_page,scroll_depth. A visitor's visits list the deepest scroll per page. scroll_depth events are not listed among a visit's actions.