Scroll Signals

Automatically fire events when visitors reach key sections or scroll milestones.

Scroll Signals let you trigger Fusionaly events as visitors explore your page, no custom JavaScript required. Use simple data attributes to mark the sections and scroll milestones you care about, or tap into the JavaScript API when you need full control.

Heads-up: Each scroll signal emits additional custom events. Heavy use can noticeably increase event volume and database storage. Instrument only the sections that deliver clear value.

Track sections with data attributes

Add data-fusionaly-scroll-section to any element. Fusionaly observes the element and emits a uniquely named event (for example scroll:section:pricing) the first time it is at least 50 % visible. The suffix is derived from the section value so each signal has its own event key.

<section
  id="pricing"
  data-fusionaly-scroll-section="pricing"
  data-fusionaly-scroll-event="scroll:section"
  data-fusionaly-scroll-threshold="60"
  data-fusionaly-scroll-metadata-plan="lifetime"
>
  …
</section>

data-fusionaly-scroll-section — required; becomes the section value in the event metadata and the suffix for the event key.
data-fusionaly-scroll-event — optional base event key (defaults to scroll:section). The SDK appends the section slug, producing keys such as scroll:section:pricing.
data-fusionaly-scroll-threshold — optional visibility threshold (either 0.6 or 60 for 60 % of the element).
data-fusionaly-scroll-metadata-* — optional metadata fields (e.g. data-fusionaly-scroll-metadata-plan="annual").

The event payload looks like:

{
  "section": "pricing",
  "plan": "lifetime"
}

Track scroll depth without code

Add data-fusionaly-track-scroll-depth to the <body> (or any long-form wrapper) to emit events as visitors reach certain depths. Each milestone produces an event with the percentage in the key—for example, scroll:depth:75.

<body
  data-fusionaly-track-scroll-depth="25,50,75,100"
  data-fusionaly-track-scroll-depth-event="scroll:depth"
  data-fusionaly-track-scroll-depth-metadata-page="landing"
>

Provide comma- or space-separated thresholds. Values > 1 are treated as percentages; decimals like 0.4 become 40 %.
Default thresholds are 25, 50, 75, 100 if none are supplied.
Metadata attributes work the same as with sections (data-fusionaly-track-scroll-depth-metadata-*). The emitted events use the threshold value as a suffix—e.g. scroll:depth:50.

Event payload example:

{
  "percentage": 75,
  "page": "landing"
}

Programmatic API

Prefer JavaScript? The SDK now exposes helpers for full control.

// Track a specific section (emits scroll:section:hero)
Fusionaly.trackScrollSection("#hero", {
  section: "hero",
  eventName: "scroll:section",
  threshold: 0.5, // or 50
  metadata: { variant: "blue" }
});

// Track custom depth milestones (events such as scroll:depth:40)
const stopTracking = Fusionaly.trackScrollDepth([20, 40, 80], {
  eventName: "scroll:depth",
  metadata: { page: "pricing" }
});
// stopTracking(); // Call later if you need to remove the listeners.

Pass a selector or a DOM element to trackScrollSection.
threshold accepts either a ratio (0.5) or a percentage (50).
trackScrollDepth returns a cleanup function in case you need to detach the listeners manually.

Configure defaults globally

Prefer to manage everything from configuration? Set the defaults before loading the SDK:

};
</script>

<script defer src="https://your-domain.com/y/api/v1/sdk.js"></script>

- `scrollDepthThresholds` — global fallback when no attribute or API thresholds are provided.
- `scrollDepthEventKey` — base event key for depth milestones (final events look like `scroll:depth:75`).
- `scrollSectionEventKey` — base event key for section views (final events look like `scroll:section:pricing`).
- `scrollSectionThreshold` — default visibility threshold (ratio or percentage).

## Debugging tips

- Enable `window.Fusionaly.config.debug = true` to view console logs for scroll events.
- Share a route in the [Fusionaly dashboard](https://fusionaly.com/) and look for the generated events (e.g. `scroll:section:pricing`, `scroll:depth:50`).
- Need to track dynamically injected content? Call `Fusionaly.setupScrollTrackingFromAttributes()` after your markup renders.

Scroll Signals

Track sections with data attributes

Track scroll depth without code

Programmatic API

Configure defaults globally

Getting Started

Features

Advanced

Integrations