Scroll goals

Fire a goal when a section of the page scrolls into view, with thresholds and delays.

Fire a goal when something scrolls into view

Add data-trakily-scroll with a goal name to any element. The goal is sent once, the first time at least half of the element is visible.

<section id="pricing" data-trakily-scroll="saw_pricing">
  …
</section>

Threshold, delay and properties

Attribute	Default	What it does
`data-trakily-scroll-threshold`	0.5	How much of the element must be visible, from 0 to 1. Use 0 for “any part of it”, 1 for “all of it”.
`data-trakily-scroll-delay`	0	Milliseconds to wait after the element becomes visible before sending.
`data-trakily-scroll-<name>`	–	Any other attribute with this prefix becomes a property (dashes become underscores).

Attribute: data-trakily-scroll-threshold
Default: 0.5
What it does: How much of the element must be visible, from 0 to 1. Use 0 for “any part of it”, 1 for “all of it”.

Attribute: data-trakily-scroll-delay
Default: 0
What it does: Milliseconds to wait after the element becomes visible before sending.

Attribute: data-trakily-scroll-<name>
Default: –
What it does: Any other attribute with this prefix becomes a property (dashes become underscores).

<div
  data-trakily-scroll="read_article"
  data-trakily-scroll-threshold="1"
  data-trakily-scroll-delay="2000"
  data-trakily-scroll-article="pricing-guide"
></div>
<!-- After the element is fully visible, waits 2s, then sends
     read_article with { article: "pricing-guide", threshold: "1" } -->

The threshold used is always added as a threshold property. The usual property limits apply.

How it behaves

Each element fires once per page load. Scrolling back up and down again doesn't send it again.
Elements added later (for example by your single-page app) are picked up automatically.
The delay counts from when the element first becomes visible; the goal is sent even if the visitor scrolls away during the delay.
A common pattern is an empty marker <div> at the end of an article to measure read-through.