Scroll tracking

Track when visitors scroll to specific sections of your page. This helps you understand how far people read, which sections get attention, and where they drop off.

Basic usage

Add a data-attribu-scroll attribute to any HTML element. When the element scrolls into view, attribu.tech fires a custom event with the name you specify:

<section data-attribu-scroll="saw_pricing">
  <h2>Pricing</h2>
  <!-- pricing content -->
</section>

The event fires once per page load. If the visitor scrolls past the element and back up, it won't fire again.

Visibility threshold

By default, the event fires when any part of the element enters the viewport. Usedata-attribu-scroll-threshold to require a percentage of the element to be visible (0 to 1):

<!-- Fire when 50% of the element is visible -->
<div
  data-attribu-scroll="pricing_section_seen"
  data-attribu-scroll-threshold="0.5"
>
  ...
</div>

<!-- Fire when the entire element is visible -->
<div
  data-attribu-scroll="cta_fully_visible"
  data-attribu-scroll-threshold="1"
>
  ...
</div>

Delay before firing

Use data-attribu-scroll-delay to require the element to stay visible for a minimum duration (in milliseconds) before the event fires. This filters out fast scrollers who fly past a section:

<!-- Only fire if the section is visible for at least 2 seconds -->
<section
  data-attribu-scroll="read_features"
  data-attribu-scroll-threshold="0.3"
  data-attribu-scroll-delay="2000"
>
  <h2>Features</h2>
  <!-- feature content -->
</section>

Example: Landing page scroll depth funnel

Track how visitors engage with your landing page by measuring scroll depth to key sections. Combine scroll tracking with conversion funnels to see exactly where visitors drop off.

<main>
  <section id="hero">
    <h1>Welcome to our product</h1>
  </section>

  <section id="features" data-attribu-scroll="scroll_to_features">
    <h2>Features</h2>
  </section>

  <section id="pricing" data-attribu-scroll="scroll_to_pricing">
    <h2>Pricing</h2>
  </section>

  <section id="cta" data-attribu-scroll="scroll_to_cta">
    <h2>Ready to get started?</h2>
    <button data-attribu-goal="cta_clicked">Get Started</button>
  </section>
</main>

Then create a funnel with these steps:

1. Page visit: URL equals /
2. Goal: scroll_to_features
3. Goal: scroll_to_pricing
4. Goal: scroll_to_cta
5. Goal: cta_clicked

This funnel shows you exactly where visitors lose interest and which sections drive the most engagement.

How it works under the hood

The pixel uses the IntersectionObserver API with a shared observer instance for performance. Multiple scroll-tracked elements reuse the same observer rather than creating one per element. When an element meets the threshold and delay conditions, the observer disconnects it to prevent duplicate fires.

Scroll percentage

In addition to section-based scroll tracking, the pixel automatically records the maximum scroll percentage reached on each page. This data is included in pageview events and can be used to analyze overall page engagement.