@xenia-martech/sdk-js 1.2.0-dev.3 → 1.2.0-dev.5

package/dist/client/index.cjs

@@ -1090,17 +1090,22 @@ function parseDataAttribute(value) {
   return { eventId, interactionType };
 }
 function readSlotMeta(el) {
-  const contentKey = el.getAttribute("data-xenia-content-key");
-  if (!contentKey) return null;
-  const contentEntryId = el.getAttribute("data-xenia-content-entry-id");
-  const baseEntryId = el.getAttribute("data-xenia-base-entry-id");
-  const personalized = el.getAttribute("data-xenia-personalized");
-  return {
-    contentKey,
-    contentEntryId: contentEntryId ?? void 0,
-    baseEntryId: baseEntryId ?? void 0,
-    personalized: personalized == null ? void 0 : personalized === "true"
-  };
+  const attr = (name) => el.getAttribute(`data-xenia-${name}`) ?? void 0;
+  const contentKey = attr("content-key");
+  const contentEntryId = attr("content-entry-id");
+  if (!contentKey && !contentEntryId) return null;
+  const personalized = attr("personalized");
+  const meta2 = {};
+  const slot = attr("slot");
+  if (slot) meta2.slot = slot;
+  if (contentKey) meta2.contentKey = contentKey;
+  if (contentEntryId) meta2.contentEntryId = contentEntryId;
+  const baseEntryId = attr("base-entry-id");
+  if (baseEntryId) meta2.baseEntryId = baseEntryId;
+  if (personalized != null) meta2.personalized = personalized === "true";
+  const bucket = attr("bucket");
+  if (bucket) meta2.bucket = bucket;
+  return meta2;
 }
 var AutoTracker = class {
   opts;
@@ -1161,8 +1166,12 @@ var AutoTracker = class {
       if (this.opts.fireSlot) {
         const slot = target.closest("[data-xenia-slot]");
         if (slot) {
-          const meta = readSlotMeta(slot);
-          if (meta && !this.throttled(slot)) this.opts.fireSlot("click", meta);
+          const meta2 = readSlotMeta(slot);
+          const found = target.closest("a, button");
+          const control = found && slot.contains(found) ? found : null;
+          if (!control && this.opts.slotClicks === "controls") return;
+          const label = control ? (control.textContent ?? "").trim().slice(0, 60) : "";
+          if (meta2 && !this.throttled(slot)) this.opts.fireSlot("click", label ? { ...meta2, label } : meta2);
         }
       }
     };
@@ -1170,24 +1179,24 @@ var AutoTracker = class {
   }
   observeSlot(el) {
     if (!this.opts.fireSlot || this.slotObservers.has(el)) return;
-    const meta = readSlotMeta(el);
-    if (!meta) return;
+    const meta2 = readSlotMeta(el);
+    if (!meta2) return;
     const fireSlot = this.opts.fireSlot;
     const { threshold, rootMargin } = this.opts.viewport;
     const observer = new IntersectionObserver(
       (entries) => {
         for (const entry of entries) {
-          if (!entry.isIntersecting) continue;
-          if (this.slotImpressed.has(el)) continue;
+          const inView = entry.isIntersecting && (entry.intersectionRatio >= threshold || entry.intersectionRect.height >= window.innerHeight / 2);
+          if (!inView || this.slotImpressed.has(el)) continue;
           this.slotImpressed.add(el);
-          fireSlot("impression", meta);
+          fireSlot("impression", meta2);
           observer.disconnect();
           this.slotObservers.delete(el);
         }
       },
-      { threshold, rootMargin }
+      { threshold: [.../* @__PURE__ */ new Set([0.1, 0.25, threshold])].sort(), rootMargin }
     );
-    observer.observe(el);
+    observer.observe(boxOf(el));
     this.slotObservers.set(el, observer);
   }
   observeViewport(el, eventId) {
@@ -1241,6 +1250,235 @@ var AutoTracker = class {
     this.mutationObserver.observe(document.body, { childList: true, subtree: true });
   }
 };
+function boxOf(el) {
+  if (typeof getComputedStyle !== "function") return el;
+  return getComputedStyle(el).display === "contents" ? el.firstElementChild ?? el : el;
+}
+
+// src/edge/trail.ts
+var MAX_TRAIL = 8;
+var TRAIL_MAX_AGE_S = 30 * 60;
+function trailCookieName(prefix = DEFAULT_PREFIX) {
+  return `${prefix}_trail`;
+}
+var decode = (v) => {
+  try {
+    return decodeURIComponent(v);
+  } catch {
+    return v;
+  }
+};
+function readTrail(value) {
+  if (!value) return [];
+  try {
+    const parsed = JSON.parse(decode(value));
+    if (!Array.isArray(parsed)) return [];
+    return parsed.filter((t) => Array.isArray(t) && typeof t[0] === "string" && typeof t[1] === "number").slice(0, MAX_TRAIL).map(
+      ([path, at, seconds]) => typeof seconds === "number" && seconds >= 0 && seconds <= 86400 ? { path, at, seconds } : { path, at }
+    );
+  } catch {
+    return [];
+  }
+}
+function withView(trail, path, now = Date.now()) {
+  if (trail[0]?.path === path) return trail;
+  const earlier = trail.find((t) => t.path === path);
+  return [{ path, at: earlier?.at ?? now }, ...trail.filter((t) => t.path !== path)].slice(0, MAX_TRAIL);
+}
+function trailCookieValue(trail) {
+  return JSON.stringify(
+    trail.slice(0, MAX_TRAIL).map((t) => t.seconds === void 0 ? [t.path, t.at] : [t.path, t.at, t.seconds])
+  );
+}
+
+// src/client/page-tracking.ts
+var SETTLE_MS = 3e3;
+var POLL_MS = 50;
+var MIN_VISIT_MS = 250;
+var listeners = /* @__PURE__ */ new Set();
+var restore = null;
+function watchNavigation(listener) {
+  listeners.add(listener);
+  if (!restore) {
+    const { pushState, replaceState } = history;
+    const notify = () => listeners.forEach((l) => {
+      try {
+        l();
+      } catch {
+      }
+    });
+    const ownPush = function(...args) {
+      pushState.apply(this, args);
+      notify();
+    };
+    const ownReplace = function(...args) {
+      replaceState.apply(this, args);
+      notify();
+    };
+    history.pushState = ownPush;
+    history.replaceState = ownReplace;
+    window.addEventListener("popstate", notify);
+    restore = () => {
+      if (history.pushState !== ownPush || history.replaceState !== ownReplace) return false;
+      history.pushState = pushState;
+      history.replaceState = replaceState;
+      window.removeEventListener("popstate", notify);
+      return true;
+    };
+  }
+  return () => {
+    listeners.delete(listener);
+    if (!listeners.size && restore?.()) restore = null;
+  };
+}
+var meta = (name) => document.querySelector(`meta[name="${name}"]`)?.content || void 0;
+function startPageTracking(client, opts) {
+  let path = location.pathname;
+  let lastTitle = null;
+  let timer;
+  let view = { path, since: visibleNow(), sent: false };
+  function visibleNow() {
+    return document.visibilityState === "visible" ? Date.now() : null;
+  }
+  function sendView() {
+    clearTimeout(timer);
+    const started = Date.now();
+    const tick = () => {
+      const settled = document.title !== "" && document.title !== lastTitle;
+      if (!settled && Date.now() - started < SETTLE_MS) {
+        timer = setTimeout(tick, POLL_MS);
+        return;
+      }
+      const params = new URLSearchParams(location.search);
+      const searchTerm = (params.get("utm_term") ?? params.get("q") ?? "").slice(0, 120);
+      const category = meta("xenia-category");
+      lastTitle = document.title;
+      client.track("pageView", {
+        title: (meta("xenia-title") ?? document.title).slice(0, 160),
+        ...searchTerm ? { searchTerm } : {},
+        ...category ? { category } : {}
+      });
+    };
+    timer = setTimeout(tick, 0);
+  }
+  function leave() {
+    if (view.sent || view.since === null || Date.now() - view.since < MIN_VISIT_MS) return;
+    view.sent = true;
+    client.track("page_leave", { path: view.path, durationMs: Date.now() - view.since });
+  }
+  const onNavigate = () => {
+    if (location.pathname === path) return;
+    if (opts.pageLeave) leave();
+    path = location.pathname;
+    view = { path, since: visibleNow(), sent: false };
+    if (opts.pageViews) sendView();
+  };
+  const onVisibility = () => {
+    if (document.visibilityState === "hidden") leave();
+    else if (view.since === null) view.since = Date.now();
+  };
+  const unwatch = watchNavigation(onNavigate);
+  if (opts.pageLeave) document.addEventListener("visibilitychange", onVisibility);
+  if (opts.pageViews) sendView();
+  return () => {
+    clearTimeout(timer);
+    unwatch();
+    document.removeEventListener("visibilitychange", onVisibility);
+  };
+}
+
+// src/client/engagement.ts
+var rootOf = (opt, fallback) => typeof opt === "object" && opt.root || fallback;
+function readCookie(name) {
+  return document.cookie.match(new RegExp(`(?:^|;\\s*)${name}=([^;]*)`))?.[1];
+}
+function writeCookie(name, value) {
+  try {
+    document.cookie = `${name}=${encodeURIComponent(value)}; path=/; max-age=${TRAIL_MAX_AGE_S}; samesite=lax`;
+  } catch {
+  }
+}
+function sectionOf(link) {
+  if (!link || link.origin !== location.origin) return void 0;
+  return link.pathname.split("/").filter(Boolean)[0];
+}
+function cardImage(target, root) {
+  let el = target;
+  for (let depth = 0; el && depth < 5 && el !== root; depth++, el = el.parentElement) {
+    const imgs = [...el.querySelectorAll("img")].filter((i) => i.alt.trim());
+    if (!imgs.length) continue;
+    return new Set(imgs.map((i) => i.alt.trim())).size === 1 ? imgs[0] : null;
+  }
+  return null;
+}
+function startEngagement(client, opts) {
+  const trailName = trailCookieName(opts.prefix);
+  const clicksName = `${opts.prefix}_clicks`;
+  const visibleNow = () => document.visibilityState === "visible" ? Date.now() : null;
+  let current = { path: location.pathname, since: visibleNow(), stamped: false };
+  const stamp = () => {
+    if (current.stamped || !opts.trail || !opts.analyticsAllowed() || current.since === null) return;
+    current.stamped = true;
+    const seconds = Math.round((Date.now() - current.since) / 100) / 10;
+    const trail = readTrail(readCookie(trailName));
+    const i = trail.findIndex((t) => t.path === current.path);
+    if (i < 0) return;
+    trail[i] = { ...trail[i], seconds };
+    writeCookie(trailName, trailCookieValue(trail));
+  };
+  const onNavigate = () => {
+    if (location.pathname === current.path) return;
+    stamp();
+    current = { path: location.pathname, since: visibleNow(), stamped: false };
+    if (!opts.trail || !opts.analyticsAllowed()) return;
+    const trail = readTrail(readCookie(trailName));
+    const next = withView(trail, current.path);
+    if (next !== trail) writeCookie(trailName, trailCookieValue(next));
+  };
+  const onVisible = () => {
+    if (document.visibilityState === "visible" && current.since === null) current.since = Date.now();
+  };
+  const onLeaveClick = (e) => {
+    const link = e.target?.closest?.("a[href]");
+    if (link && link.origin === location.origin && link.pathname !== location.pathname) stamp();
+  };
+  const bump = () => {
+    if (!opts.analyticsAllowed()) return;
+    writeCookie(clicksName, String((Number(readCookie(clicksName)) || 0) + 1));
+  };
+  const navRoot = rootOf(opts.navClicks, "header");
+  const contentRoot = rootOf(opts.contentClicks, "main");
+  const onClick = (e) => {
+    const target = e.target;
+    if (!target?.closest) return;
+    const nav = opts.navClicks ? target.closest(`${navRoot} a[href]`) : null;
+    if (nav) {
+      const category2 = sectionOf(nav);
+      if (!category2) return;
+      client.track("nav_click", { category: category2, label: (nav.textContent ?? "").trim().slice(0, 60) });
+      bump();
+      return;
+    }
+    const root = opts.contentClicks ? target.closest(contentRoot) : null;
+    if (!root) return;
+    const img = target.closest("img") ?? cardImage(target, root);
+    const label = (img?.alt ?? "").trim().slice(0, 160);
+    if (!label) return;
+    const category = sectionOf(target.closest("a[href]"));
+    client.track("content_click", category ? { label, category } : { label });
+    bump();
+  };
+  const unwatch = watchNavigation(onNavigate);
+  window.addEventListener("click", onLeaveClick, { capture: true });
+  document.addEventListener("visibilitychange", onVisible);
+  if (opts.contentClicks || opts.navClicks) document.addEventListener("click", onClick, { capture: true });
+  return () => {
+    unwatch();
+    window.removeEventListener("click", onLeaveClick, { capture: true });
+    document.removeEventListener("visibilitychange", onVisible);
+    document.removeEventListener("click", onClick, { capture: true });
+  };
+}
 
 // src/server/cookies.ts
 function parseCookies(header) {
@@ -1251,7 +1489,12 @@ function parseCookies(header) {
     if (idx === -1) continue;
     const key = part.slice(0, idx).trim();
     const value = part.slice(idx + 1).trim();
-    if (key) out[key] = decodeURIComponent(value);
+    if (!key) continue;
+    try {
+      out[key] = decodeURIComponent(value);
+    } catch {
+      out[key] = value;
+    }
   }
   return out;
 }
@@ -1325,6 +1568,14 @@ var Identity = class {
     const storageKey = this.key("device_id");
     try {
       const cached = localStorage.getItem(storageKey);
+      const fromServer = this.cookie?.authoritative ? this.readVisitorCookie() : null;
+      const effective = localStorage.getItem(this.key("visitor_id")) ?? cached;
+      if (cached && fromServer && fromServer !== effective) {
+        this.deviceId = fromServer;
+        localStorage.setItem(storageKey, fromServer);
+        if (localStorage.getItem(this.key("visitor_id"))) localStorage.setItem(this.key("visitor_id"), fromServer);
+        return fromServer;
+      }
       if (cached) {
         this.deviceId = cached;
         this.writeVisitorCookie(this.getVisitorId() ?? cached);
@@ -1504,7 +1755,7 @@ function resolveCookieConfig(opt) {
   const o = opt === true ? {} : opt;
   const sameSite = o.sameSite ?? "Lax";
   const secure = sameSite === "None" ? true : o.secure ?? false;
-  return { sameSite, secure, maxAgeDays: o.maxAgeDays ?? 365, domain: o.domain };
+  return { sameSite, secure, maxAgeDays: o.maxAgeDays ?? 365, domain: o.domain, authoritative: o.authoritative ?? false };
 }
 
 // src/client/widgets/form.ts
@@ -2188,6 +2439,8 @@ var XeniaClient = class {
   renderer;
   analyticsQueue;
   tracker = null;
+  stopPageTracking = null;
+  stopEngagement = null;
   /** The in-flight (or finished) boot; shared so concurrent `init()` calls start one tracker. */
   booting = null;
   /** Bumped by `destroy()`, so a boot still waiting on the device id knows to stop. */
@@ -2239,17 +2492,21 @@ var XeniaClient = class {
           rootMargin: this.options.viewport?.rootMargin,
           triggerOnce: this.options.viewport?.triggerOnce ?? true
         },
+        slotClicks: this.options.slotClicks,
         // Declarative `data-xenia` elements fire journey triggers (immediate).
         fire: (eventId, interaction) => this.track(eventId, { interactionType: interaction }, { trigger: true }),
         // `[data-xenia-slot]` elements fire analytics-only personalization events.
-        fireSlot: (interaction, meta) => {
+        fireSlot: (interaction, meta2) => {
           this.track(
             "customEvent",
             {
               customEventName: interaction === "impression" ? "personalization_impression" : "personalization_click",
-              contentKey: meta.contentKey,
-              contentEntryId: meta.contentEntryId ?? null,
-              baseEntryId: meta.baseEntryId ?? null
+              ...meta2.contentKey ? { contentKey: meta2.contentKey } : {},
+              contentEntryId: meta2.contentEntryId ?? null,
+              baseEntryId: meta2.baseEntryId ?? null,
+              ...meta2.bucket ? { bucket: meta2.bucket } : {},
+              ...meta2.slot ? { slot: meta2.slot } : {},
+              ...meta2.label ? { label: meta2.label } : {}
             },
             { trigger: false }
           );
@@ -2257,11 +2514,32 @@ var XeniaClient = class {
       });
       this.tracker.start();
     }
+    const { pageViews = false, pageLeave = false } = this.options;
+    if (pageViews || pageLeave) {
+      this.stopPageTracking = startPageTracking({ track: (name, props) => this.track(name, props) }, { pageViews, pageLeave });
+    }
+    const { trail = false, contentClicks = false, navClicks = false } = this.options;
+    if (trail || contentClicks || navClicks) {
+      this.stopEngagement = startEngagement(
+        { track: (name, props) => this.track(name, props) },
+        {
+          trail,
+          contentClicks,
+          navClicks,
+          prefix: this.options.prefix ?? "xenia",
+          analyticsAllowed: () => this.analyticsAllowed() && !this.dntBlocked()
+        }
+      );
+    }
   }
   /** Tear down listeners, observers, and injected UI. */
   destroy() {
     this.tracker?.stop();
     this.tracker = null;
+    this.stopPageTracking?.();
+    this.stopPageTracking = null;
+    this.stopEngagement?.();
+    this.stopEngagement = null;
     this.renderer.destroy();
     this.analyticsQueue.stop();
     this.booting = null;