Section Tracking

Track which sections visitors actually see. Use the same attribute as everything else. Add data-fusionaly-event-name to any non-interactive element:

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

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

When It Fires

The event fires when 50% of the element is visible in the viewport. Each event fires once per page load. If the visitor scrolls past and back, it does not fire again.

The SDK uses IntersectionObserver to do this.

Adding Metadata

This works the same way as buttons, links, and forms:

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

Non-Interactive Elements

The SDK tracks data-fusionaly-event-name differently, based on the element type:

Element	Trigger
<button>, <input type="submit">, [role="button"]	Click
<a>	Click
<form>	Submit
Everything else (<section>, <div>, <article>, etc.)	Scroll into view

If you put the attribute on a <div>, the SDK tracks a scroll. If you put it on a <button>, the SDK tracks a click. The SDK decides based on the element type.

Use Cases

• See if visitors reach the pricing section. Use data-fusionaly-event-name="pricing_seen".
• See if visitors scroll to the CTA. Use data-fusionaly-event-name="cta_reached".
• See if visitors read the testimonials. Use data-fusionaly-event-name="testimonials_viewed".

Custom Thresholds (JavaScript API)

The default 50% threshold works for most cases. If you need a custom threshold, use the JavaScript API:

Fusionaly.trackScrollSection("#hero", {
  section: "hero",
  threshold: 0.8, // 80% visible
  metadata: { variant: "blue" }
});

Tips

• Instrument only the sections that matter. Each one sends an event.
• Use descriptive event names. pricing_viewed is better than section_1.
• For dynamic content, call Fusionaly.setupScrollTrackingFromAttributes() after you render new elements.