@noirtrack/sdk 0.2.0 → 0.2.1

package/CHANGELOG.md

@@ -2,11 +2,17 @@
 
 All notable changes to `@noirtrack/sdk` are documented here. This project follows semantic versioning (while pre-1.0, a minor bump may include breaking changes).
 
+## 0.2.1
+
+### Fixed
+
+- **Scroll goals on tall sections.** `data-noir-scroll-threshold` is the fraction of the *element* visible at once, so a section taller than the viewport could never reach it and the goal never fired. The effective threshold is now capped to what's reachable for the element's height, so a tall section fires once it has essentially filled the screen. Short elements are unaffected. The same fix ships in the hosted snippet.
+
 ## 0.2.0
 
 ### Changed
 
-- **Breaking (web client):** `block` is now a boolean. Turn on the Traffic Filter with `createClient({ block: true })` instead of `block: 'redirect' | 'overlay'`. Whether it monitors or blocks, and how a block looks (redirect or overlay), are now set per site in Firewall settings, with no code change. If you passed `block: 'redirect'` or `block: 'overlay'`, change it to `block: true`.
+- **Breaking (web client):** `block` is now a boolean. Turn on the firewall with `createClient({ block: true })` instead of `block: 'redirect' | 'overlay'`. Whether it monitors or blocks, and how a block looks (redirect or overlay), are now set per site in Firewall settings, with no code change. If you passed `block: 'redirect'` or `block: 'overlay'`, change it to `block: true`.
 
 ### Added
 

package/README.md

@@ -26,7 +26,7 @@ noir.identify('user_123', { email });
 noir.revenue({ checkoutId: 'cs_test_123' });
 ```
 
-Pageviews and route changes are automatic. Events are batched and sent with `sendBeacon`. Set `cookieless: true` for a no-cookie mode, or `block: true` to turn on the Traffic Filter. Whether it monitors or blocks, and how a block looks (redirect or overlay), are set in your Firewall settings, with no code change. Safe to import in SSR (it does nothing without a window). Also: `view(path?)`, `reset()`, `flush()`, `links.decorate(url)`.
+Pageviews and route changes are automatic. Events are batched and sent with `sendBeacon`. Set `cookieless: true` for a no-cookie mode, or `block: true` to turn on the firewall. Whether it monitors or blocks, and how a block looks (redirect or overlay), are set in your Firewall settings, with no code change. Safe to import in SSR (it does nothing without a window). Also: `view(path?)`, `reset()`, `flush()`, `links.decorate(url)`.
 
 ## React Native
 
@@ -95,7 +95,7 @@ The guards resolve the visitor IP from `CF-Connecting-IP`, `True-Client-IP`, the
 | `timeoutMs`                               | `800`                  | all      | Abort a call after this, then fail open.                |
 | `autoPageviews`                           | `true`                 | web      | Capture initial + SPA pageviews.                        |
 | `cookieless`                              | `false`                | web      | No cookies; ids in sessionStorage.                      |
-| `block`                                   | `false`                | web      | Turn on the Traffic Filter (Monitor/Block set in dashboard). |
+| `block`                                   | `false`                | web      | Turn on the firewall (Monitor/Block set in dashboard). |
 | `flushIntervalMs` / `maxQueueSize`        | `5000` / `10`          | web, RN  | Batch flush tuning.                                     |
 | `storage`                                 | in-memory              | RN       | Async store (pass AsyncStorage).                        |
 | `onBlock` / `blockStatus` / `blockedPage` | `block` / `403` / none | adapters | Block handling.                                         |

package/dist/web.d.ts

@@ -11,8 +11,8 @@ export interface WebClientOptions {
     cookieless?: boolean;
     /** Track on localhost too (off by default, like the hosted script). */
     allowLocalhost?: boolean;
-    /** Turn on the Traffic Filter on the first view. Whether it monitors or blocks, and how a block
-     *  looks (redirect or overlay), are set per site in Firewall settings. Off by default. */
+    /** Turn on the firewall on the first view. Whether it monitors or blocks, and how a block looks
+     *  (redirect or overlay), are set per site in Firewall settings. Off by default. */
     block?: boolean;
     /** Optional redirect target if none is set in Firewall settings. */
     blockedPage?: string;

package/dist/web.js

@@ -70,6 +70,11 @@ function initDeclarativeGoals(fire) {
     }, true);
     if (!('IntersectionObserver' in window))
         return;
+    // Granular thresholds so the callback runs across the whole scroll range; the actual trigger is
+    // computed live per element (see below), so we can't rely on a single fixed threshold.
+    const STEPS = [];
+    for (let s = 0; s <= 1.0001; s += 0.05)
+        STEPS.push(Math.round(s * 100) / 100);
     const observed = new WeakSet();
     const observeScroll = (el) => {
         if (observed.has(el))
@@ -78,15 +83,25 @@ function initDeclarativeGoals(fire) {
         const name = el.getAttribute('data-noir-scroll');
         if (!name)
             return;
-        let threshold = parseFloat(el.getAttribute('data-noir-scroll-threshold') ?? '');
-        if (!(threshold > 0 && threshold <= 1))
-            threshold = 0.5;
+        let requested = parseFloat(el.getAttribute('data-noir-scroll-threshold') ?? '');
+        if (!(requested > 0 && requested <= 1))
+            requested = 0.5;
         const delay = parseInt(el.getAttribute('data-noir-scroll-delay') ?? '', 10) || 0;
         const obs = new IntersectionObserver((entries) => {
             for (const entry of entries) {
-                if (entry.isIntersecting && entry.intersectionRatio >= threshold) {
+                if (!entry.isIntersecting)
+                    continue;
+                // A section taller than the viewport can never expose `requested` of itself at once —
+                // the most ever visible is viewportHeight/elementHeight. Compare against that reachable
+                // max (×0.9) so a tall element still fires once it has essentially filled the screen,
+                // instead of never firing. Short elements keep their requested threshold. // why
+                const elHeight = entry.boundingClientRect.height;
+                const viewport = entry.rootBounds?.height || window.innerHeight || 0;
+                const reachable = elHeight > 0 && viewport > 0 ? (viewport / elHeight) * 0.9 : 1;
+                const effective = Math.min(requested, reachable);
+                if (entry.intersectionRatio >= effective) {
                     obs.disconnect(); // once per element per page
-                    const meta = { scroll_percentage: scrollPercent(), threshold };
+                    const meta = { scroll_percentage: scrollPercent(), threshold: requested };
                     if (delay > 0)
                         setTimeout(() => fire(name, meta), delay);
                     else
@@ -94,7 +109,7 @@ function initDeclarativeGoals(fire) {
                     return;
                 }
             }
-        }, { threshold });
+        }, { threshold: STEPS });
         obs.observe(el);
     };
     const scan = () => document.querySelectorAll('[data-noir-scroll]').forEach(observeScroll);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@noirtrack/sdk",
-    "version": "0.2.0",
+    "version": "0.2.1",
     "description": "NoirTrack server SDK. Block bots and bad traffic before your app renders, and record goals, revenue, and identify from your backend with one secret key. Framework-agnostic core plus Next.js, Express, and fetch/edge adapters.",
     "homepage": "https://noirtrack.com/docs",
     "bugs": {