Scroll Signals (Deprecated)

Legacy scroll tracking attributes — use data-fusionaly-event-name instead

Section Tracking (Recommended)

Add data-fusionaly-event-name to any non-interactive element. Fusionaly fires the event when the visitor scrolls it into view:

<section data-fusionaly-event-name="pricing_viewed">...</section>
<div data-fusionaly-event-name="testimonials_seen">...</div>

The event fires when 50% of the element is visible in the viewport. Each signal fires once per page load.

Works with metadata too:

<section data-fusionaly-event-name="pricing_viewed"
         data-fusionaly-metadata-plan="lifetime">
  ...
</section>

Instrument only the sections that matter — each one emits an event.

JavaScript API

For dynamic content or custom thresholds:

Fusionaly.trackScrollSection("#hero", {
  section: "hero",
  threshold: 0.5,
  metadata: { variant: "blue" }
});

// Scroll depth milestones (fires scroll:depth:25, scroll:depth:50, etc.)
const stop = Fusionaly.trackScrollDepth([25, 50, 75, 100], {
  metadata: { page: "pricing" }
});
// stop() to remove listeners

Legacy Attributes (Deprecated)

The following attributes still work but are deprecated. Use data-fusionaly-event-name instead.

<!-- Deprecated: old section tracking -->
<section data-fusionaly-scroll-section="pricing">...</section>

<!-- Deprecated: old depth tracking (use JS API instead) -->
<body data-fusionaly-track-scroll-depth="25,50,75,100">

Old attribute	Replacement
`data-fusionaly-scroll-section`	`data-fusionaly-event-name`
`data-fusionaly-scroll-event`	Not needed — event name is the attribute value
`data-fusionaly-scroll-threshold`	Use JS API for custom thresholds
`data-fusionaly-scroll-metadata-*`	`data-fusionaly-metadata-*`
`data-fusionaly-track-scroll-depth`	`Fusionaly.trackScrollDepth()` JS API

Scroll Signals (Deprecated)

Section Tracking (Recommended)

JavaScript API

Legacy Attributes (Deprecated)

Getting Started

Features

Administration

Technical

Integrations