Section Tracking

Track which sections visitors actually see. 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 Does It Fire?

The event fires when 50% of the element is visible in the viewport. Each event fires once per page load — scrolling past and back won’t fire it again.

The SDK uses IntersectionObserver under the hood.

Adding Metadata

Works the same as buttons, links, and forms:

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

What Counts as Non-Interactive?

The SDK tracks data-fusionaly-event-name differently based on 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>, it’s scroll tracking. On a <button>, it’s click tracking. The SDK decides based on element type.

Use Cases

• “Did they see the pricing section?” — data-fusionaly-event-name="pricing_seen"
• “Did they scroll to the CTA?” — data-fusionaly-event-name="cta_reached"
• “Did they read the testimonials?” — 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 sections that matter. Each one emits an event.
• Use descriptive event names. pricing_viewed is better than section_1.
• For dynamic content, call Fusionaly.setupScrollTrackingFromAttributes() after rendering new elements.