@affiliateo/web 2.2.0 → 2.3.0

package/README.md

@@ -171,7 +171,11 @@ attributes become metadata (kebab-case → snake_case, up to 10 params).
 </section>
 ```
 
-Fires once when the section becomes 50%+ visible. Great for landing pages
+Fires once when 10% of the section enters the viewport (combined with a
+small bottom-edge rootMargin so it doesn't fire on sections barely peeking
+up from the bottom of the screen). The lower threshold catches tall
+sections like pricing pages with comparison tables that would otherwise
+top out under 50% intersection and never fire. Great for landing pages
 where you want to know which sections convert.
 
 ### Goal naming rules

package/dist/provider.js

@@ -331,6 +331,23 @@ export function AffiliateoProvider({ campaignId, apiUrl, children, }) {
         // the viewport. Use IntersectionObserver (cheap, off the scroll hot
         // path) and unobserve after the first fire so the same element can't
         // double-count if the user scrolls back up.
+        //
+        // Threshold: 0.1 (was 0.5). 50% visibility is unreachable for tall
+        // sections — a 1600px pricing section in an 800px viewport tops out
+        // at ~50% intersection ratio, so the observer's threshold was either
+        // a bare miss (section maxes at 49%) or a brittle hit. Funnel steps
+        // tied to those sections silently dropped from every merchant's
+        // conversion count without anyone noticing the section was even
+        // being rendered. 0.1 fires when 10% of the section is visible,
+        // which on a typical laptop is "the user has scrolled enough that
+        // the section is meaningfully on screen" without firing on sections
+        // that barely peek up from the bottom edge.
+        //
+        // rootMargin: trim the bottom 10% of the viewport from the trigger
+        // zone so a section creeping up from the very bottom of the screen
+        // doesn't fire instantly. The user has to scroll enough that the
+        // section is starting to settle into the main visible area, which
+        // matches a human's intuitive sense of "I've reached that section."
         const scrollFired = new WeakSet();
         let scrollObserver = null;
         let scrollMo = null;
@@ -347,7 +364,7 @@ export function AffiliateoProvider({ campaignId, apiUrl, children, }) {
                         track(goal);
                     scrollObserver?.unobserve(entry.target);
                 }
-            }, { threshold: 0.5 });
+            }, { threshold: 0.1, rootMargin: '0px 0px -10% 0px' });
             // Observe everything that exists at mount time.
             document.querySelectorAll('[data-affiliateo-scroll]').forEach((el) => {
                 scrollObserver?.observe(el);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@affiliateo/web",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "Affiliateo web SDK — affiliate attribution and tracking for web apps",
   "main": "dist/index.js",
   "module": "dist/index.js",