@tracelog/capture-web 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -18,6 +18,18 @@ patch, and neither requires reading your code.
 Entries after 1.0.0 are drafted from the commits that touched this package and
 edited before release.
 
+## [1.3.0](https://github.com/nacorga/tracelog-sdk/compare/capture-web@1.2.0...capture-web@1.3.0) (2026-09-27)
+
+
+* **capture-web:** Synchronize tracelog-sdk versions
+
+## [1.2.0](https://github.com/nacorga/tracelog-sdk/compare/capture-web@1.1.0...capture-web@1.2.0) (2026-09-22)
+
+
+### Added
+
+* **capture-web:** read Meta's form and report its beacon as unread ([bd78f98](https://github.com/nacorga/tracelog-sdk/commit/bd78f98a9c478b863399d9e86090b31a906743c5))
+
 ## [1.1.0](https://github.com/nacorga/tracelog-sdk/compare/capture-web@1.0.0...capture-web@1.1.0) (2026-09-21)
 
 

package/README.md

@@ -22,13 +22,13 @@ as they are served.
 <!-- x-release-please-start-version -->
 
 ```bash
-npm install --save-exact @tracelog/capture-web@1.1.0
+npm install --save-exact @tracelog/capture-web@1.3.0
 ```
 
 Without a build step, the same runtime as a script tag:
 
 ```html
-<script src="https://cdn.tracelog.io/v/1.1.0/tracelog.js"></script>
+<script src="https://cdn.tracelog.io/v/1.3.0/tracelog.js"></script>
 ```
 
 <!-- x-release-please-end -->
@@ -91,8 +91,11 @@ inside the conversion path, attached to the step where they happened.
 
 Beside each conversion, which GA4, Meta and Google Ads tags the page requested
 just before and after it — the tag's kind, its id and, for Meta, the event —
-read from the browser's own record of the page's requests. Nothing else of
-those requests is kept. A conversion is held ten seconds so those requests can
+read from the browser's own record of the page's requests and, for the one
+Meta request that record leaves out, from the two fields of the form Meta's
+script adds to the page that name the pixel and the event. Nothing else of
+those requests is kept. A Meta request whose pixel the page does not show is
+reported as Meta, unread. A conversion is held ten seconds so those requests can
 be seen, sent at once when the page is hidden — its report then says whether it
 was cut short — and never held in verification mode. Context keys beginning
 with `__tl.` are TraceLog's and are removed.

package/dist/tracelog.esm.js

@@ -7,6 +7,7 @@ const MAX_TAG_SIGHTINGS = 16;
 const TAG_SIGHTINGS_CONTEXT_KEY = "__tl.tags";
 const TAG_ID_PATTERNS = {"ga4":"^G-[A-Z0-9]{4,15}$","meta":"^[0-9]{6,20}$","google_ads":"^AW-[0-9]{6,15}(?:/[A-Za-z0-9_-]{1,64})?$"};
 const TAG_EVENT_PATTERN = "^[A-Za-z0-9_]{1,64}$";
+const tagSightingKinds = ["ga4","meta","google_ads"];
 const CONSENT_KEY = "__tl.c";
 const SESSION_KEY = "__tl.s";
 const ACTIVITY_KEY = "__tl.a";
@@ -351,11 +352,13 @@ function createCaptureEngine(ports, acquisition) {
                 : (ports.sightings?.around(new Date(hold.at)) ?? null);
             if (event === undefined || answer === null)
                 continue;
+            const unread = ports.sightings?.unreadAround?.(new Date(hold.at)) ?? null;
             const report = {
                 complete: hold.whole &&
                     now - hold.at >= TAG_SIGHTING_AFTER_MS &&
                     answer.length <= MAX_TAG_SIGHTINGS,
                 sightings: answer.slice(0, MAX_TAG_SIGHTINGS),
+                ...(unread === null ? {} : { unread }),
             };
             const context = {
                 ...event.context,
@@ -630,12 +633,31 @@ const metaIdPattern = new RegExp(TAG_ID_PATTERNS.meta);
 const adsIdPattern = new RegExp(TAG_ID_PATTERNS.google_ads);
 const tagEventPattern = new RegExp(TAG_EVENT_PATTERN);
 const adsPathPattern = /^\/pagead\/(?:conversion|viewthroughconversion|1p-conversion)\/([0-9]{6,15})\/$/;
+function onMetaEndpoint(url) {
+    const host = url.hostname;
+    return ((host === "facebook.com" || host.endsWith(".facebook.com")) &&
+        (url.pathname === "/tr" || url.pathname === "/tr/"));
+}
+/** A request on Meta's endpoint whose pixel id does not fit is Meta, unread. */
+function metaMatch(id, event) {
+    return id !== null && metaIdPattern.test(id)
+        ? {
+            sighting: {
+                kind: "meta",
+                id,
+                event: event !== null && tagEventPattern.test(event) ? event : null,
+            },
+        }
+        : { unread: "meta" };
+}
 /**
  * The matching table ([spec/capture.md] § Tag sightings): GA4 and Google Ads
  * key on the path and the id, so a regional host and a first-party tagging
  * domain that keeps the path both match; Meta keys on its host as well. What
  * is answered is the tag's kind, its id and Meta's event — nothing else of
- * the URL, which carries the page address and the vendor's client id.
+ * the URL, which carries the page address and the vendor's client id. Meta's
+ * beacon leaves an entry named by its bare endpoint, which names no pixel:
+ * that is Meta, unread.
  */
 function matchTagRequest(url) {
     let parsed;
@@ -650,58 +672,143 @@ function matchTagRequest(url) {
     if (path.endsWith("/g/collect")) {
         const id = parameters.get("tid");
         return id !== null && ga4IdPattern.test(id)
-            ? { kind: "ga4", id, event: null }
+            ? { sighting: { kind: "ga4", id, event: null } }
             : null;
     }
-    const host = parsed.hostname;
-    if ((host === "facebook.com" || host.endsWith(".facebook.com")) &&
-        (path === "/tr" || path === "/tr/")) {
-        const id = parameters.get("id");
-        if (id === null || !metaIdPattern.test(id))
-            return null;
-        const event = parameters.get("ev");
-        return {
-            kind: "meta",
-            id,
-            event: event !== null && tagEventPattern.test(event) ? event : null,
-        };
+    if (onMetaEndpoint(parsed)) {
+        return metaMatch(parameters.get("id"), parameters.get("ev"));
     }
     const ads = adsPathPattern.exec(path);
     if (ads !== null) {
         const id = `AW-${ads[1]}`;
         const labelled = `${id}/${parameters.get("label") ?? ""}`;
         return {
-            kind: "google_ads",
-            id: adsIdPattern.test(labelled) ? labelled : id,
-            event: null,
+            sighting: {
+                kind: "google_ads",
+                id: adsIdPattern.test(labelled) ? labelled : id,
+                event: null,
+            },
         };
     }
     return null;
 }
+/**
+ * Meta's long request in Chrome: a form posted into a hidden frame, which
+ * leaves no Resource Timing entry ([spec/capture.md] § Tag sightings, _Meta's
+ * long request_). Two fields are asked for, the ones that name the pixel and
+ * the event, and nothing else of the form is read: its other fields carry the
+ * visitor's identifiers, hashed.
+ */
+function matchTagForm(form) {
+    let action;
+    try {
+        action = new URL(form.action);
+    }
+    catch {
+        return null;
+    }
+    if (!onMetaEndpoint(action))
+        return null;
+    const id = form.querySelector('input[name="id"]');
+    const event = form.querySelector('input[name="ev"]');
+    return metaMatch(id?.value ?? null, event?.value ?? null);
+}
 /**
  * The browser's own record of the page's requests, read through a buffered
- * `PerformanceObserver` once consent is granted and never before. Nothing is
+ * `PerformanceObserver` once consent is granted and never before — and, for
+ * the one request that record leaves out, the forms the page's body gains,
+ * read through a `MutationObserver` on the body's own children. Nothing is
  * wrapped, patched or replaced — no `fetch`, no beacon, no vendor's global —
  * because the runtime runs on somebody else's page and nothing it does may
  * change what another script sees.
  */
 function createTagSightingPort() {
     let observer;
+    let bodyObserver;
+    /**
+     * From when the body's children were watched, on the system clock: minus
+     * infinity when observation began before the body existed, and so saw every
+     * form a script added to it; undefined while no body observer runs — never
+     * created, still waiting for the body, or failed.
+     */
+    let watchedFrom;
     /** Ordered by `at`, oldest first; at most `TAG_SIGHTING_MEMORY`. */
     let matches = [];
+    function remember(match, at) {
+        if (match === null)
+            return;
+        let index = matches.length;
+        while (index > 0 && matches[index - 1].at > at)
+            index -= 1;
+        matches.splice(index, 0, { match, at });
+        if (matches.length > TAG_SIGHTING_MEMORY)
+            matches.shift();
+    }
     function record(entries) {
         for (const entry of entries) {
-            const sighting = matchTagRequest(entry.name);
-            if (sighting === null)
-                continue;
-            const match = { sighting, at: instantOfEntry(entry.startTime).getTime() };
-            let index = matches.length;
-            while (index > 0 && matches[index - 1].at > match.at)
-                index -= 1;
-            matches.splice(index, 0, match);
-            if (matches.length > TAG_SIGHTING_MEMORY)
-                matches.shift();
+            remember(matchTagRequest(entry.name), instantOfEntry(entry.startTime).getTime());
+        }
+    }
+    /**
+     * One observer, on the body's children and nothing below them. Before the
+     * body exists it watches the root's children for the body, and moves to it.
+     */
+    function watchBody() {
+        try {
+            const document = window.document;
+            let body = document.body;
+            const created = new window.MutationObserver((records) => {
+                try {
+                    for (const change of records) {
+                        const added = change.addedNodes;
+                        for (let index = 0; index < added.length; index += 1) {
+                            const node = added[index];
+                            if (change.target === body) {
+                                if (node.nodeName === "FORM") {
+                                    remember(matchTagForm(node), systemClock.now().getTime());
+                                }
+                            }
+                            else if (body === null && node.nodeName === "BODY") {
+                                body = node;
+                                created.disconnect();
+                                created.observe(node, { childList: true });
+                                watchedFrom = Number.NEGATIVE_INFINITY;
+                            }
+                        }
+                    }
+                }
+                catch {
+                    // Capture must never break the host page.
+                }
+            });
+            if (body === null) {
+                created.observe(document.documentElement, { childList: true });
+            }
+            else {
+                created.observe(body, { childList: true });
+                watchedFrom = systemClock.now().getTime();
+            }
+            bodyObserver = created;
         }
+        catch {
+            watchedFrom = undefined;
+        }
+    }
+    /** What was matched inside the window around `at`, or null. */
+    function within(at) {
+        if (observer === undefined)
+            return null;
+        // What the browser recorded and has not delivered yet: a page being
+        // hidden may not run the callback before the conversion leaves.
+        record(observer.takeRecords());
+        const from = at.getTime() - TAG_SIGHTING_BEFORE_MS;
+        const to = at.getTime() + TAG_SIGHTING_AFTER_MS;
+        if (matches.length >= TAG_SIGHTING_MEMORY && matches[0].at > from) {
+            return null;
+        }
+        return matches
+            .filter(({ at: started }) => started >= from && started <= to)
+            .map(({ match }) => match);
     }
     return {
         start() {
@@ -719,32 +826,31 @@ function createTagSightingPort() {
             }
             catch {
                 observer = undefined;
+                return;
             }
+            watchBody();
         },
         stop() {
             observer?.disconnect();
             observer = undefined;
+            bodyObserver?.disconnect();
+            bodyObserver = undefined;
+            watchedFrom = undefined;
             matches = [];
         },
         observing() {
             return observer !== undefined;
         },
         around(at) {
-            if (observer === undefined)
+            const found = within(at);
+            if (found === null)
                 return null;
-            // What the browser recorded and has not delivered yet: a page being
-            // hidden may not run the callback before the conversion leaves.
-            record(observer.takeRecords());
-            const from = at.getTime() - TAG_SIGHTING_BEFORE_MS;
-            const to = at.getTime() + TAG_SIGHTING_AFTER_MS;
-            if (matches.length >= TAG_SIGHTING_MEMORY && matches[0].at > from) {
-                return null;
-            }
             const seen = new Set();
             const sightings = [];
-            for (const { sighting, at: started } of matches) {
-                if (started < from || started > to)
+            for (const match of found) {
+                if (!("sighting" in match))
                     continue;
+                const { sighting } = match;
                 const key = `${sighting.kind} ${sighting.id} ${sighting.event ?? ""}`;
                 if (seen.has(key))
                     continue;
@@ -753,6 +859,15 @@ function createTagSightingPort() {
             }
             return sightings;
         },
+        unreadAround(at) {
+            const found = within(at);
+            if (found === null ||
+                watchedFrom === undefined ||
+                watchedFrom > at.getTime() - TAG_SIGHTING_BEFORE_MS) {
+                return null;
+            }
+            return tagSightingKinds.filter((kind) => found.some((match) => "unread" in match && match.unread === kind));
+        },
     };
 }
 const WEB_PUBLIC_KEY_PATTERN = /^tl_pk_[a-z2-7]{26}$/;

package/dist/tracelog.iife.js

@@ -8,6 +8,7 @@ const MAX_TAG_SIGHTINGS = 16;
 const TAG_SIGHTINGS_CONTEXT_KEY = "__tl.tags";
 const TAG_ID_PATTERNS = {"ga4":"^G-[A-Z0-9]{4,15}$","meta":"^[0-9]{6,20}$","google_ads":"^AW-[0-9]{6,15}(?:/[A-Za-z0-9_-]{1,64})?$"};
 const TAG_EVENT_PATTERN = "^[A-Za-z0-9_]{1,64}$";
+const tagSightingKinds = ["ga4","meta","google_ads"];
 const CONSENT_KEY = "__tl.c";
 const SESSION_KEY = "__tl.s";
 const ACTIVITY_KEY = "__tl.a";
@@ -352,11 +353,13 @@ function createCaptureEngine(ports, acquisition) {
                 : (ports.sightings?.around(new Date(hold.at)) ?? null);
             if (event === undefined || answer === null)
                 continue;
+            const unread = ports.sightings?.unreadAround?.(new Date(hold.at)) ?? null;
             const report = {
                 complete: hold.whole &&
                     now - hold.at >= TAG_SIGHTING_AFTER_MS &&
                     answer.length <= MAX_TAG_SIGHTINGS,
                 sightings: answer.slice(0, MAX_TAG_SIGHTINGS),
+                ...(unread === null ? {} : { unread }),
             };
             const context = {
                 ...event.context,
@@ -631,12 +634,31 @@ const metaIdPattern = new RegExp(TAG_ID_PATTERNS.meta);
 const adsIdPattern = new RegExp(TAG_ID_PATTERNS.google_ads);
 const tagEventPattern = new RegExp(TAG_EVENT_PATTERN);
 const adsPathPattern = /^\/pagead\/(?:conversion|viewthroughconversion|1p-conversion)\/([0-9]{6,15})\/$/;
+function onMetaEndpoint(url) {
+    const host = url.hostname;
+    return ((host === "facebook.com" || host.endsWith(".facebook.com")) &&
+        (url.pathname === "/tr" || url.pathname === "/tr/"));
+}
+/** A request on Meta's endpoint whose pixel id does not fit is Meta, unread. */
+function metaMatch(id, event) {
+    return id !== null && metaIdPattern.test(id)
+        ? {
+            sighting: {
+                kind: "meta",
+                id,
+                event: event !== null && tagEventPattern.test(event) ? event : null,
+            },
+        }
+        : { unread: "meta" };
+}
 /**
  * The matching table ([spec/capture.md] § Tag sightings): GA4 and Google Ads
  * key on the path and the id, so a regional host and a first-party tagging
  * domain that keeps the path both match; Meta keys on its host as well. What
  * is answered is the tag's kind, its id and Meta's event — nothing else of
- * the URL, which carries the page address and the vendor's client id.
+ * the URL, which carries the page address and the vendor's client id. Meta's
+ * beacon leaves an entry named by its bare endpoint, which names no pixel:
+ * that is Meta, unread.
  */
 function matchTagRequest(url) {
     let parsed;
@@ -651,58 +673,143 @@ function matchTagRequest(url) {
     if (path.endsWith("/g/collect")) {
         const id = parameters.get("tid");
         return id !== null && ga4IdPattern.test(id)
-            ? { kind: "ga4", id, event: null }
+            ? { sighting: { kind: "ga4", id, event: null } }
             : null;
     }
-    const host = parsed.hostname;
-    if ((host === "facebook.com" || host.endsWith(".facebook.com")) &&
-        (path === "/tr" || path === "/tr/")) {
-        const id = parameters.get("id");
-        if (id === null || !metaIdPattern.test(id))
-            return null;
-        const event = parameters.get("ev");
-        return {
-            kind: "meta",
-            id,
-            event: event !== null && tagEventPattern.test(event) ? event : null,
-        };
+    if (onMetaEndpoint(parsed)) {
+        return metaMatch(parameters.get("id"), parameters.get("ev"));
     }
     const ads = adsPathPattern.exec(path);
     if (ads !== null) {
         const id = `AW-${ads[1]}`;
         const labelled = `${id}/${parameters.get("label") ?? ""}`;
         return {
-            kind: "google_ads",
-            id: adsIdPattern.test(labelled) ? labelled : id,
-            event: null,
+            sighting: {
+                kind: "google_ads",
+                id: adsIdPattern.test(labelled) ? labelled : id,
+                event: null,
+            },
         };
     }
     return null;
 }
+/**
+ * Meta's long request in Chrome: a form posted into a hidden frame, which
+ * leaves no Resource Timing entry ([spec/capture.md] § Tag sightings, _Meta's
+ * long request_). Two fields are asked for, the ones that name the pixel and
+ * the event, and nothing else of the form is read: its other fields carry the
+ * visitor's identifiers, hashed.
+ */
+function matchTagForm(form) {
+    let action;
+    try {
+        action = new URL(form.action);
+    }
+    catch {
+        return null;
+    }
+    if (!onMetaEndpoint(action))
+        return null;
+    const id = form.querySelector('input[name="id"]');
+    const event = form.querySelector('input[name="ev"]');
+    return metaMatch(id?.value ?? null, event?.value ?? null);
+}
 /**
  * The browser's own record of the page's requests, read through a buffered
- * `PerformanceObserver` once consent is granted and never before. Nothing is
+ * `PerformanceObserver` once consent is granted and never before — and, for
+ * the one request that record leaves out, the forms the page's body gains,
+ * read through a `MutationObserver` on the body's own children. Nothing is
  * wrapped, patched or replaced — no `fetch`, no beacon, no vendor's global —
  * because the runtime runs on somebody else's page and nothing it does may
  * change what another script sees.
  */
 function createTagSightingPort() {
     let observer;
+    let bodyObserver;
+    /**
+     * From when the body's children were watched, on the system clock: minus
+     * infinity when observation began before the body existed, and so saw every
+     * form a script added to it; undefined while no body observer runs — never
+     * created, still waiting for the body, or failed.
+     */
+    let watchedFrom;
     /** Ordered by `at`, oldest first; at most `TAG_SIGHTING_MEMORY`. */
     let matches = [];
+    function remember(match, at) {
+        if (match === null)
+            return;
+        let index = matches.length;
+        while (index > 0 && matches[index - 1].at > at)
+            index -= 1;
+        matches.splice(index, 0, { match, at });
+        if (matches.length > TAG_SIGHTING_MEMORY)
+            matches.shift();
+    }
     function record(entries) {
         for (const entry of entries) {
-            const sighting = matchTagRequest(entry.name);
-            if (sighting === null)
-                continue;
-            const match = { sighting, at: instantOfEntry(entry.startTime).getTime() };
-            let index = matches.length;
-            while (index > 0 && matches[index - 1].at > match.at)
-                index -= 1;
-            matches.splice(index, 0, match);
-            if (matches.length > TAG_SIGHTING_MEMORY)
-                matches.shift();
+            remember(matchTagRequest(entry.name), instantOfEntry(entry.startTime).getTime());
+        }
+    }
+    /**
+     * One observer, on the body's children and nothing below them. Before the
+     * body exists it watches the root's children for the body, and moves to it.
+     */
+    function watchBody() {
+        try {
+            const document = window.document;
+            let body = document.body;
+            const created = new window.MutationObserver((records) => {
+                try {
+                    for (const change of records) {
+                        const added = change.addedNodes;
+                        for (let index = 0; index < added.length; index += 1) {
+                            const node = added[index];
+                            if (change.target === body) {
+                                if (node.nodeName === "FORM") {
+                                    remember(matchTagForm(node), systemClock.now().getTime());
+                                }
+                            }
+                            else if (body === null && node.nodeName === "BODY") {
+                                body = node;
+                                created.disconnect();
+                                created.observe(node, { childList: true });
+                                watchedFrom = Number.NEGATIVE_INFINITY;
+                            }
+                        }
+                    }
+                }
+                catch {
+                    // Capture must never break the host page.
+                }
+            });
+            if (body === null) {
+                created.observe(document.documentElement, { childList: true });
+            }
+            else {
+                created.observe(body, { childList: true });
+                watchedFrom = systemClock.now().getTime();
+            }
+            bodyObserver = created;
         }
+        catch {
+            watchedFrom = undefined;
+        }
+    }
+    /** What was matched inside the window around `at`, or null. */
+    function within(at) {
+        if (observer === undefined)
+            return null;
+        // What the browser recorded and has not delivered yet: a page being
+        // hidden may not run the callback before the conversion leaves.
+        record(observer.takeRecords());
+        const from = at.getTime() - TAG_SIGHTING_BEFORE_MS;
+        const to = at.getTime() + TAG_SIGHTING_AFTER_MS;
+        if (matches.length >= TAG_SIGHTING_MEMORY && matches[0].at > from) {
+            return null;
+        }
+        return matches
+            .filter(({ at: started }) => started >= from && started <= to)
+            .map(({ match }) => match);
     }
     return {
         start() {
@@ -720,32 +827,31 @@ function createTagSightingPort() {
             }
             catch {
                 observer = undefined;
+                return;
             }
+            watchBody();
         },
         stop() {
             observer?.disconnect();
             observer = undefined;
+            bodyObserver?.disconnect();
+            bodyObserver = undefined;
+            watchedFrom = undefined;
             matches = [];
         },
         observing() {
             return observer !== undefined;
         },
         around(at) {
-            if (observer === undefined)
+            const found = within(at);
+            if (found === null)
                 return null;
-            // What the browser recorded and has not delivered yet: a page being
-            // hidden may not run the callback before the conversion leaves.
-            record(observer.takeRecords());
-            const from = at.getTime() - TAG_SIGHTING_BEFORE_MS;
-            const to = at.getTime() + TAG_SIGHTING_AFTER_MS;
-            if (matches.length >= TAG_SIGHTING_MEMORY && matches[0].at > from) {
-                return null;
-            }
             const seen = new Set();
             const sightings = [];
-            for (const { sighting, at: started } of matches) {
-                if (started < from || started > to)
+            for (const match of found) {
+                if (!("sighting" in match))
                     continue;
+                const { sighting } = match;
                 const key = `${sighting.kind} ${sighting.id} ${sighting.event ?? ""}`;
                 if (seen.has(key))
                     continue;
@@ -754,6 +860,15 @@ function createTagSightingPort() {
             }
             return sightings;
         },
+        unreadAround(at) {
+            const found = within(at);
+            if (found === null ||
+                watchedFrom === undefined ||
+                watchedFrom > at.getTime() - TAG_SIGHTING_BEFORE_MS) {
+                return null;
+            }
+            return tagSightingKinds.filter((kind) => found.some((match) => "unread" in match && match.unread === kind));
+        },
     };
 }
 const WEB_PUBLIC_KEY_PATTERN = /^tl_pk_[a-z2-7]{26}$/;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tracelog/capture-web",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "description": "The TraceLog browser capture runtime: consent-first, pinned per version.",
   "keywords": [
     "conversion",
@@ -45,8 +45,8 @@
     "access": "public"
   },
   "devDependencies": {
-    "@tracelog/capture-core": "1.1.0",
-    "@tracelog/event-contract": "1.1.0"
+    "@tracelog/capture-core": "1.3.0",
+    "@tracelog/event-contract": "1.3.0"
   },
   "scripts": {
     "build": "tsc -p tsconfig.build.json && node build.mjs",