Scroll Tracking Demo Page

This page demonstrates scroll tracking functionality. Scroll down to see how different sections are tracked when they enter the viewport.

How it works: Elements with the data-lp-scroll-track attribute will send a scroll_seen event when they become visible. Each element only sends the event once per page load.

↓ Scroll down to see tracked sections ↓

Hero Section TRACKED

This section is being tracked! When it enters the viewport, a scroll_seen event is sent with the value "hero-section".

The tracking attribute on this section is: data-lp-scroll-track="hero-section"
Seen: 0 times

Keep scrolling...

Features Section TRACKED

This section has the tracking attribute data-lp-scroll-track="features" and an id of features-section.

✅ Automatic viewport detection
✅ Works with dynamically added elements
✅ Uses modern IntersectionObserver API
✅ Falls back to scroll listener for older browsers

Seen: 0 times

Customer Testimonial TRACKED

"This tracking library is amazing! It helped us understand exactly how users interact with our content."

— Happy Customer

Tracking value: data-lp-scroll-track="testimonial-1" Seen: 0 times

Almost there...

Call to Action TRACKED

Ready to get started? Sign up now!

Tracking value: data-lp-scroll-track="cta-signup" Seen: 0 times

One more section...

Pricing Plans TRACKED

This is our pricing section. When users scroll to see pricing, we can track that engagement!

Starter

$29/mo

Basic features
10 tracked elements
Email support

Pro

$99/mo

All features
Unlimited elements
Priority support

Tracking value: data-lp-scroll-track="pricing-table"
Seen: 0 times

End of Page

If you scrolled through all sections, 5 scroll_seen events should have been sent to the backend.

Open your browser's Network tab to see the events being sent to /events-system