Scroll Tracking

Basic Scroll Tracking

Add the two-bucks-scroll attribute to any element:

<div two-bucks-scroll="hero_section_viewed">
  <h1>Welcome to Our Site</h1>
</div>

When 50% of the element is visible in the viewport, the event "hero_section_viewed" will be tracked.

Threshold Configuration

Control when the event fires using two-bucks-scroll-threshold:

<!-- Fire when 25% visible -->
<div 
  two-bucks-scroll="cta_viewed"
  two-bucks-scroll-threshold="0.25">
  Call to Action
</div>

<!-- Fire when 100% visible (fully scrolled into view) -->
<div 
  two-bucks-scroll="footer_viewed"
  two-bucks-scroll-threshold="1.0">
  Footer Content
</div>

Delay Configuration

Add a delay before tracking using two-bucks-scroll-delay:

<div 
  two-bucks-scroll="ad_viewed"
  two-bucks-scroll-delay="2000">
  Advertisement
</div>

This waits 2 seconds (2000ms) after the element becomes visible before tracking. Useful for ensuring users actually viewed the content.

With Custom Properties

Add additional data using two-bucks-scroll-* attributes:

<div 
  two-bucks-scroll="article_section_viewed"
  two-bucks-scroll-article-id="123"
  two-bucks-scroll-section="introduction">
  Article Introduction
</div>

Automatic Properties

Scroll tracking automatically includes:

• scroll_percentage: How far down the page the user has scrolled (0-100)
• threshold: The threshold value used
• delay: The delay value used (in milliseconds)

Use Cases

<article>
  <div two-bucks-scroll="article_started" two-bucks-scroll-threshold="0.1">
    <h1>Article Title</h1>
  </div>
  
  <div two-bucks-scroll="article_middle" two-bucks-scroll-threshold="0.5">
    <p>Middle content...</p>
  </div>
  
  <div two-bucks-scroll="article_completed" two-bucks-scroll-threshold="1.0">
    <p>Conclusion...</p>
  </div>
</article>

<div 
  two-bucks-scroll="image_loaded"
  two-bucks-scroll-delay="500"
  two-bucks-scroll-image-id="hero-1">
  <img src="hero.jpg" loading="lazy" />
</div>