Track scroll depth

Scroll depth

Scroll depth needs no setup. The main script records how far down each page a visitor scrolled and sends it with signals it already sends, so it adds no requests and uses none of your monthly events.

• Top Pages shows each page's average depth and the share of views that reached 25, 50, 75 and 100% of the page.
• Journeys shows the depth of every page a visitor saw.

Pages that fit on one screen are not measured. To turn scroll depth off, add data-scroll-depth="false" to the script tag.

Section views

To know whether visitors actually saw a section, such as your pricing table, add data-calmstats-scroll with an event name. The event is sent the first time the element is seen on a page:

HTML
<section data-calmstats-scroll="viewed_pricing">
  ...
</section>

Section views are custom events: use them in goals and funnels like any other, and see them in Journeys.

Threshold and delay

HTML
<div data-calmstats-scroll="read_testimonials"
     data-calmstats-scroll-threshold="0.7"
     data-calmstats-scroll-delay="2000">
  ...
</div>

• data-calmstats-scroll-threshold (0.1 to 1, default 0.5) is how much of the element must be visible, or how much of the screen it must fill when it is taller than the screen.
• data-calmstats-scroll-delay is how long, in milliseconds, it must stay in view.

Sections added after the page loads, and pages in single-page apps, are handled. data-fast-scroll attributes from DataFast work unchanged.