@antelopejs/dms-marketing 0.3.3 → 0.4.1

package/static/snapshot.js

@@ -11,9 +11,12 @@
  * Privacy, unconditionally: no form value, hidden input, script, event
  * handler or framed document leaves the page. `contenteditable` text is
  * masked, as is everything under `data-dms-marketing-mask` (or the
- * `dms-marketing-mask` class); `data-dms-marketing-block` (or the
- * `dms-marketing-block` class) replaces an element with an empty box of its
- * size. `maskText` masks every text node.
+ * `dms-marketing-mask` class) — text, the attributes that carry text
+ * (title, alt, labels, placeholders, data-*) and the path of its links;
+ * `data-dms-marketing-block` (or the `dms-marketing-block` class) replaces
+ * an element with an empty box of its size. `maskText` masks every text
+ * node and text attribute of the page; data-* and link paths stay, since
+ * styles select on them.
  */
 (() => {
   const CONFIG_GLOBAL = "__dmsMarketingSnapshotConfig";
@@ -81,6 +84,17 @@
     "background",
   ]);
   const LINK_TAGS = new Set(["a", "area"]);
+  /** Attributes that carry text a visitor could read, masked with it. */
+  const TEXT_ATTRIBUTES = new Set([
+    "title",
+    "alt",
+    "label",
+    "placeholder",
+    "aria-label",
+    "aria-description",
+    "aria-placeholder",
+    "aria-valuetext",
+  ]);
   const OPAQUE_URL_PATTERN = /^(#|data:|blob:|about:)/i;
   const SCRIPT_URL_PATTERN = /^javascript:/i;
   const CSS_URL_PATTERN = /url\(\s*(['"]?)([^'")]*)\1\s*\)/g;
@@ -93,10 +107,12 @@
   }
 
   const config = readGlobal(CONFIG_GLOBAL);
+  const maskAllText = config?.maskText === true;
   const context = readGlobal(CONTEXT_GLOBAL);
   if (
     !config ||
     !context ||
+    typeof config.token !== "string" ||
     typeof context.endpoint !== "string" ||
     window.top !== window
   ) {
@@ -144,10 +160,14 @@
   }
 
   /** Links keep their target, never a query or fragment: tokens and
-   * addresses ride there, and nothing in the backdrop is clickable. */
-  function withoutQuery(url) {
+   * addresses ride there, and nothing in the backdrop is clickable. A masked
+   * link keeps its origin alone — a profile path names its person. */
+  function withoutQuery(url, masked) {
     try {
       const parsed = new URL(url);
+      if (masked) {
+        return `${parsed.origin}/`;
+      }
       parsed.search = "";
       parsed.hash = "";
       return parsed.href;
@@ -269,7 +289,7 @@
     return element.dataset.src || current || value;
   }
 
-  function serializeAttributes(element) {
+  function serializeAttributes(element, masked) {
     const tag = element.localName;
     let out = "";
     for (const attribute of element.attributes) {
@@ -278,6 +298,14 @@
       if (name.startsWith("on") || DROPPED_ATTRIBUTES.has(name)) {
         continue;
       }
+      if (
+        ((masked || maskAllText) && TEXT_ATTRIBUTES.has(name)) ||
+        (masked &&
+          name.startsWith("data-") &&
+          !name.startsWith(`data-${MASK_MARKER}`))
+      ) {
+        value = maskText(value);
+      }
       if (name === "value" && (tag === "input" || tag === "textarea")) {
         continue;
       }
@@ -309,7 +337,7 @@
         if (absolute === null) {
           continue;
         }
-        value = LINK_TAGS.has(tag) ? withoutQuery(absolute) : absolute;
+        value = LINK_TAGS.has(tag) ? withoutQuery(absolute, masked) : absolute;
       }
       out += ` ${name}="${escapeAttribute(value)}"`;
     }
@@ -334,7 +362,7 @@
     return `<${tag}${attributes} style="${size};overflow:hidden"></${tag}>`;
   }
 
-  function serializeCanvas(element) {
+  function serializeCanvas(element, masked) {
     let dataUrl = "";
     try {
       dataUrl = element.toDataURL();
@@ -342,9 +370,9 @@
       // Tainted by cross-origin drawing: the box stays, the pixels do not.
     }
     if (dataUrl && dataUrl.length <= MAX_CANVAS_DATA_URL_LENGTH) {
-      return `<img${serializeAttributes(element)} src="${dataUrl}">`;
+      return `<img${serializeAttributes(element, masked)} src="${dataUrl}">`;
     }
-    return `<canvas${serializeAttributes(element)}></canvas>`;
+    return `<canvas${serializeAttributes(element, masked)}></canvas>`;
   }
 
   function serializeChildren(node, masked) {
@@ -353,7 +381,8 @@
       if (child.nodeType === Node.ELEMENT_NODE) {
         out += serializeElement(child, masked);
       } else if (child.nodeType === Node.TEXT_NODE) {
-        const text = masked ? maskText(child.data) : child.data;
+        const text =
+          masked || maskAllText ? maskText(child.data) : child.data;
         out += escapeText(text);
       }
     }
@@ -377,12 +406,12 @@
     if (isMarked(element, BLOCK_MARKER)) {
       return serializeBlocked(element);
     }
-    if (tag === "canvas") {
-      return serializeCanvas(element);
-    }
     const mask =
       masked || isMarked(element, MASK_MARKER) || element.isContentEditable;
-    let out = `<${tag}${serializeAttributes(element)}>`;
+    if (tag === "canvas") {
+      return serializeCanvas(element, mask);
+    }
+    let out = `<${tag}${serializeAttributes(element, mask)}>`;
     if (VOID_TAGS.has(tag)) {
       return out;
     }
@@ -403,7 +432,7 @@
   }
 
   function serializeDocument() {
-    return `<!DOCTYPE html>${serializeElement(document.documentElement, config.maskText === true)}`;
+    return `<!DOCTYPE html>${serializeElement(document.documentElement, false)}`;
   }
 
   // --- Timing ---------------------------------------------------------------
@@ -466,6 +495,7 @@
     const root = document.documentElement;
     const page = {
       website: context.website,
+      token: config.token,
       url: (location.origin + location.pathname + location.search).slice(
         0,
         MAX_URL_LENGTH,

package/static/tracker.js

@@ -8,7 +8,7 @@
  * Optional attributes:
  *   data-host-url        override the collect origin (defaults to the script origin)
  *   data-heatmap-sample  0-1 click/scroll sampling rate; overrides the module setting
- *   data-do-not-track    "false" to ignore the browser DNT signal
+ *   data-do-not-track    "false" to ignore the browser DNT and GPC signals
  *
  * Cookieless by design: no identifier is generated or stored client-side —
  * the backend derives an anonymous visitor hash per request. Payload shape
@@ -36,12 +36,17 @@
   const CONFIG_GLOBAL = "__dmsMarketingTrackerConfig";
   /** Global the capture script (snapshot.js) reads its page context from. */
   const SNAPSHOT_CONTEXT_GLOBAL = "__dmsMarketingSnapshotContext";
+  /** Set by the first tracker that starts collecting on the page. */
+  const INSTALLED_GLOBAL = "__dmsMarketingInstalled";
 
   const DEFAULT_SAMPLE_RATE = 0.1;
   const FLUSH_INTERVAL_MS = 5000;
   const MAX_BATCH = 25;
-  /** Mirrors the backend MAX_URL_LENGTH: a longer field fails validation. */
+  /** Mirror the backend caps (MAX_URL_LENGTH, MAX_TITLE_LENGTH,
+   * MAX_EVENT_NAME_LENGTH): cut here, nothing is lost to validation. */
   const MAX_URL_LENGTH = 500;
+  const MAX_TITLE_LENGTH = 200;
+  const MAX_EVENT_NAME_LENGTH = 50;
   const MAX_SELECTOR_LENGTH = 120;
   const SELECTOR_DEPTH = 3;
   const COORDINATE_PRECISION = 4;
@@ -51,6 +56,11 @@
   const SNAPSHOT_DELAY_MS = 3000;
   /** SPA navigations may ask again, this many times per page load. */
   const MAX_SNAPSHOTS_PER_LOAD = 3;
+  /** After a SPA navigation, time for the new view to render before its
+   * unscrolled depth is measured. */
+  const SCROLL_MEASURE_DELAY_MS = 1000;
+  /** Where a keyboard-activated click is anchored inside its element. */
+  const ELEMENT_CENTER = 0.5;
 
   // --- Public API -----------------------------------------------------------
 
@@ -72,11 +82,6 @@
 
   // --- Configuration --------------------------------------------------------
 
-  const script = document.currentScript;
-  if (!script) {
-    return;
-  }
-
   /** Read once and removed: the injected settings are not a page-facing API. */
   function servedConfig() {
     const injected = window[CONFIG_GLOBAL];
@@ -84,6 +89,21 @@
     return injected && typeof injected === "object" ? injected : {};
   }
 
+  const config = servedConfig();
+
+  // Collection paused (Settings): the page API without the collection, so
+  // `variation()` answers the control. A page already running the tracker
+  // keeps it.
+  if (config.paused === true) {
+    window.dmsMarketing = window.dmsMarketing || NOOP_API;
+    return;
+  }
+
+  const script = document.currentScript;
+  if (!script) {
+    return;
+  }
+
   function firstFiniteNumber(values) {
     return values.find((value) => Number.isFinite(value));
   }
@@ -98,16 +118,27 @@
     return Math.min(Math.max(rate, 0), 1);
   }
 
-  const config = servedConfig();
   const websiteId = script.getAttribute("data-website-id");
   if (!websiteId) {
     publishApi();
     return;
   }
 
+  // A tag included twice (theme and tag manager) would count everything twice.
+  if (window[INSTALLED_GLOBAL]) {
+    console.warn("[dms-marketing] tracker included twice; ignoring the copy.");
+    return;
+  }
+  window[INSTALLED_GLOBAL] = true;
+
+  /** Global Privacy Control is the opt-out signal browsers ship now that DNT
+   * is deprecated; both are honoured alike. */
   const respectDnt = script.getAttribute("data-do-not-track") !== "false";
-  const dntEnabled = navigator.doNotTrack === "1" || window.doNotTrack === "1";
-  if (respectDnt && dntEnabled) {
+  const optedOut =
+    navigator.doNotTrack === "1" ||
+    window.doNotTrack === "1" ||
+    navigator.globalPrivacyControl === true;
+  if (respectDnt && optedOut) {
     publishApi();
     return;
   }
@@ -135,7 +166,7 @@
   const base = () => ({
     url: currentUrl(),
     referrer: document.referrer.slice(0, MAX_URL_LENGTH) || undefined,
-    title: document.title || undefined,
+    title: document.title.slice(0, MAX_TITLE_LENGTH) || undefined,
     screen: `${screen.width}x${screen.height}`,
     language: navigator.language || undefined,
     at: Date.now(),
@@ -179,7 +210,8 @@
    * navigation rewrites `location` before the depth of the page being left
    * is flushed. */
   let scrolledUrl = null;
-  let maxScrollDepth = 0;
+  /** -1 until the page has been measured once. */
+  let maxScrollDepth = -1;
 
   function trackPageview() {
     if (location.pathname === lastPath) {
@@ -188,17 +220,34 @@
     flushScrollDepth();
     lastPath = location.pathname;
     scrolledUrl = currentUrl();
-    maxScrollDepth = 0;
-    enqueue(Object.assign(base(), { kind: "pageview" }));
+    maxScrollDepth = -1;
+    // The rate it applies, for the server's "recorded on N % of page loads":
+    // counting scroll events against pageviews undercounts the views left
+    // before their depth is sent.
+    enqueue(
+      Object.assign(base(), { kind: "pageview", data: { sample: sampleRate } }),
+    );
+    scheduleScrollMeasure();
     scheduleSnapshot();
   }
 
-  const originalPushState = history.pushState;
-  history.pushState = function pushState(...args) {
-    originalPushState.apply(this, args);
-    trackPageview();
-  };
+  /** pushState and replaceState (a client-side redirect lands on a page
+   * too); a same-path call — a query or hash update — is no navigation. */
+  for (const method of ["pushState", "replaceState"]) {
+    const original = history[method];
+    history[method] = function navigate(...args) {
+      original.apply(this, args);
+      trackPageview();
+    };
+  }
   window.addEventListener("popstate", trackPageview);
+  // A page restored from the back/forward cache runs no script again.
+  window.addEventListener("pageshow", (event) => {
+    if (event.persisted) {
+      lastPath = null;
+      trackPageview();
+    }
+  });
 
   // --- Scroll depth (max reached per page, flushed on leave) ----------------
 
@@ -215,19 +264,30 @@
     );
   }
 
-  window.addEventListener(
-    "scroll",
-    () => {
-      const depth = currentScrollDepth();
-      if (depth > maxScrollDepth) {
-        maxScrollDepth = depth;
-      }
-    },
-    { passive: true },
-  );
+  function measureScrollDepth() {
+    const depth = currentScrollDepth();
+    if (depth > maxScrollDepth) {
+      maxScrollDepth = depth;
+    }
+  }
+
+  window.addEventListener("scroll", measureScrollDepth, { passive: true });
+
+  /**
+   * Every sampled view reports a depth, scrolled or not: what shows without
+   * scrolling is reached too (all of a page shorter than the window), and a
+   * view that never scrolls belongs in the denominator.
+   */
+  function scheduleScrollMeasure() {
+    if (document.readyState === "complete") {
+      setTimeout(measureScrollDepth, SCROLL_MEASURE_DELAY_MS);
+      return;
+    }
+    window.addEventListener("load", measureScrollDepth, { once: true });
+  }
 
   function flushScrollDepth() {
-    if (!heatmapSampled || maxScrollDepth <= 0) {
+    if (!heatmapSampled || maxScrollDepth < 0) {
       return;
     }
     enqueue(
@@ -237,7 +297,7 @@
         data: { depth: maxScrollDepth },
       }),
     );
-    maxScrollDepth = 0;
+    maxScrollDepth = -1;
   }
 
   // --- Click capture (sampled, viewport-normalized) -------------------------
@@ -257,19 +317,16 @@
     return parts.join(">").slice(0, MAX_SELECTOR_LENGTH);
   }
 
-  function normalized(value, total) {
-    if (total <= 0) {
-      return 0;
-    }
-    return Number(Math.min(value / total, 1).toFixed(COORDINATE_PRECISION));
-  }
-
   function rounded(value) {
     return Number(
       Math.min(Math.max(value, 0), 1).toFixed(COORDINATE_PRECISION),
     );
   }
 
+  function normalized(value, total) {
+    return total <= 0 ? 0 : rounded(value / total);
+  }
+
   /**
    * Where the click landed inside the element it hit, so the point survives
    * being read back at another window size. Document fractions do not: they
@@ -284,7 +341,7 @@
    * several elements, and the embedder resolving it would otherwise land on
    * whichever comes first in the document.
    */
-  function elementAnchor(target, event) {
+  function elementAnchor(target, point) {
     if (target === document.body || target === document.documentElement) {
       return null;
     }
@@ -310,16 +367,37 @@
     }
     return {
       selector: selector,
-      ox: rounded((event.clientX - box.left) / box.width),
-      oy: rounded((event.clientY - box.top) / box.height),
+      ox: rounded((point.clientX - box.left) / box.width),
+      oy: rounded((point.clientY - box.top) / box.height),
       nth: nth,
     };
   }
 
+  /**
+   * Where the click happened. A click from the keyboard (Enter, Space) has no
+   * pointer — detail 0, coordinates 0,0 — and is placed at the centre of the
+   * element it activated instead of the window's corner.
+   */
+  function clickPoint(target, event) {
+    if (event.detail !== 0 || event.clientX !== 0 || event.clientY !== 0) {
+      return event;
+    }
+    const box = target.getBoundingClientRect();
+    const clientX = box.left + box.width * ELEMENT_CENTER;
+    const clientY = box.top + box.height * ELEMENT_CENTER;
+    return {
+      clientX: clientX,
+      clientY: clientY,
+      pageX: clientX + scrollX,
+      pageY: clientY + scrollY,
+    };
+  }
+
   document.addEventListener(
     "click",
     (event) => {
-      if (!heatmapSampled) {
+      // Script-dispatched clicks (element.click()) are no visitor's.
+      if (!heatmapSampled || !event.isTrusted) {
         return;
       }
       const target = event.target;
@@ -327,18 +405,19 @@
         return;
       }
       const doc = document.documentElement;
+      const point = clickPoint(target, event);
       enqueue(
         Object.assign(base(), {
           kind: "click",
           data: Object.assign(
             {
-              x: normalized(event.clientX, innerWidth),
-              y: normalized(event.clientY, innerHeight),
-              dx: normalized(event.pageX, doc.scrollWidth),
-              dy: normalized(event.pageY, doc.scrollHeight),
+              x: normalized(point.clientX, innerWidth),
+              y: normalized(point.clientY, innerHeight),
+              dx: normalized(point.pageX, doc.scrollWidth),
+              dy: normalized(point.pageY, doc.scrollHeight),
               selector: shortSelector(target),
             },
-            elementAnchor(target, event),
+            elementAnchor(target, point),
           ),
         }),
       );
@@ -369,6 +448,9 @@
       return;
     }
     snapshotsRequested++;
+    // The upload is only accepted for the page the visit's last pageview
+    // named: that pageview must be on its way before the capture is.
+    flush();
     const path = location.pathname;
     window[SNAPSHOT_CONTEXT_GLOBAL] = {
       website: websiteId,
@@ -466,7 +548,16 @@
 
   publishApi({
     track(name, data) {
-      enqueue(Object.assign(base(), { kind: "custom", name, data }));
+      enqueue(
+        Object.assign(base(), {
+          kind: "custom",
+          name:
+            typeof name === "string"
+              ? name.slice(0, MAX_EVENT_NAME_LENGTH)
+              : name,
+          data,
+        }),
+      );
     },
     /** Assigned variation of a running experiment, or null. Reports the
      * exposure, so only call it where the variation is actually applied. */

package/dist/pages/campaigns/page.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"page.js","sourceRoot":"","sources":["../../../src/pages/campaigns/page.ts"],"names":[],"mappings":";;;;;;;;;AAAA,kEAAwE;AACxE,oEAAuE;AACvE,yDAA8E;AAC9E,iDAAwD;AASjD,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,IAAA,qBAAc,EACxD,WAAW,EACX;IACE,WAAW,EAAE,iCAAiC;IAC9C,WAAW,EAAE,uCAAuC;IACpD,IAAI,EAAE,gBAAgB;IACtB,MAAM,EAAE,+BAAmB;IAC3B,KAAK,EAAE,CAAC;CACT,EACD,IAAA,uBAAa,EAAC,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CACnC;IACC,MAAM,CAAC,OAAO,GAAG,IAAA,wBAAe,EAAC,2BAA2B,CAAC,CAAC;;AAXnD,wDAAsB;iCAAtB,sBAAsB;IADlC,IAAA,mBAAY,GAAE;GACF,sBAAsB,CAYlC"}