@momentumcms/plugins-analytics 0.2.0 → 0.4.0

package/lib/client/tracker.js

@@ -0,0 +1,523 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __esm = (fn, res) => function __init() {
+  return fn && (res = (0, fn[__getOwnPropNames(fn)[0]])(fn = 0)), res;
+};
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+
+// libs/plugins/analytics/src/lib/client/block-tracker.ts
+var block_tracker_exports = {};
+__export(block_tracker_exports, {
+  attachBlockTracking: () => attachBlockTracking
+});
+function attachBlockTracking(tracker, container) {
+  if (typeof document === "undefined" || !document.body) {
+    return () => {
+    };
+  }
+  const root = container ?? document.body;
+  const impressionsSeen = /* @__PURE__ */ new Set();
+  const hoverCooldowns = /* @__PURE__ */ new Map();
+  const HOVER_COOLDOWN_MS = 5e3;
+  let observer = null;
+  function handleIntersection(entries) {
+    for (const entry of entries) {
+      if (!entry.isIntersecting)
+        continue;
+      if (!(entry.target instanceof HTMLElement))
+        continue;
+      const el = entry.target;
+      const blockType = el.dataset["blockType"];
+      const blockIndex = el.dataset["blockIndex"];
+      if (!blockType)
+        continue;
+      const key = `${blockType}:${blockIndex ?? "?"}`;
+      if (impressionsSeen.has(key))
+        continue;
+      impressionsSeen.add(key);
+      tracker.track("block_impression", {
+        blockType,
+        blockIndex: blockIndex ? Number(blockIndex) : void 0
+      });
+    }
+  }
+  observer = new IntersectionObserver(handleIntersection, {
+    threshold: 0.5
+  });
+  const tracked = Array.from(root.querySelectorAll("[data-block-track]"));
+  for (const el of tracked) {
+    const trackValue = el.dataset["blockTrack"] ?? "";
+    if (trackValue.includes("impressions")) {
+      observer.observe(el);
+    }
+  }
+  function handleHover(event) {
+    const target = event.target;
+    if (!(target instanceof HTMLElement))
+      return;
+    const blockEl = target.closest("[data-block-track]");
+    if (!blockEl)
+      return;
+    const trackValue = blockEl.dataset["blockTrack"] ?? "";
+    if (!trackValue.includes("hover"))
+      return;
+    const blockType = blockEl.dataset["blockType"];
+    const blockIndex = blockEl.dataset["blockIndex"];
+    if (!blockType)
+      return;
+    const key = `${blockType}:${blockIndex ?? "?"}`;
+    const now = Date.now();
+    const lastFired = hoverCooldowns.get(key);
+    if (lastFired !== void 0 && now - lastFired < HOVER_COOLDOWN_MS)
+      return;
+    hoverCooldowns.set(key, now);
+    tracker.track("block_hover", {
+      blockType,
+      blockIndex: blockIndex ? Number(blockIndex) : void 0
+    });
+  }
+  root.addEventListener("mouseenter", handleHover, true);
+  return () => {
+    observer?.disconnect();
+    observer = null;
+    root.removeEventListener("mouseenter", handleHover, true);
+    impressionsSeen.clear();
+    hoverCooldowns.clear();
+  };
+}
+var init_block_tracker = __esm({
+  "libs/plugins/analytics/src/lib/client/block-tracker.ts"() {
+    "use strict";
+  }
+});
+
+// libs/plugins/analytics/src/lib/utils/type-guards.ts
+function isRecord(val) {
+  return val != null && typeof val === "object" && !Array.isArray(val);
+}
+var init_type_guards = __esm({
+  "libs/plugins/analytics/src/lib/utils/type-guards.ts"() {
+    "use strict";
+  }
+});
+
+// libs/plugins/analytics/src/lib/utils/selector-security.ts
+function normalizeCssEscapes(selector) {
+  return selector.replace(
+    /\\([0-9a-fA-F]{1,6})\s?/g,
+    (_, hex) => String.fromCodePoint(parseInt(hex, 16))
+  ).replace(/\\([^0-9a-fA-F\n])/g, "$1");
+}
+function stripPseudoWrappers(selector) {
+  return selector.replace(/:(is|where|not|has|matches)\s*\(/gi, "(");
+}
+function isSelectorBlocked(selector) {
+  const normalized = stripPseudoWrappers(normalizeCssEscapes(selector));
+  return BLOCKED_SELECTOR_PATTERNS.some((pattern) => pattern.test(normalized));
+}
+var BLOCKED_SELECTOR_PATTERNS;
+var init_selector_security = __esm({
+  "libs/plugins/analytics/src/lib/utils/selector-security.ts"() {
+    "use strict";
+    BLOCKED_SELECTOR_PATTERNS = [
+      /type\s*=\s*["']?password/i,
+      /type\s*=\s*["']?hidden/i,
+      /autocomplete\s*=\s*["']?cc-/i,
+      /autocomplete\s*=\s*["']?current-password/i,
+      /autocomplete\s*=\s*["']?new-password/i
+    ];
+  }
+});
+
+// libs/plugins/analytics/src/lib/client/rule-engine.ts
+var rule_engine_exports = {};
+__export(rule_engine_exports, {
+  createRuleEngine: () => createRuleEngine,
+  matchUrlPattern: () => matchUrlPattern,
+  parseRulesResponse: () => parseRulesResponse
+});
+function matchUrlPattern(pattern, pathname) {
+  if (pattern === "*")
+    return true;
+  const escaped = pattern.replace(/[.+?^${}()|[\]\\]/g, "\\$&").replace(/\*\*/g, "\0GLOBSTAR\0").replace(/\*/g, "[^/]*").replace(/\0GLOBSTAR\0/g, ".*");
+  return new RegExp(`^${escaped}$`).test(pathname);
+}
+function parseRulesResponse(data) {
+  if (!isRecord(data) || !Array.isArray(data["rules"]))
+    return [];
+  const result = [];
+  for (const item of data["rules"]) {
+    if (!isRecord(item))
+      continue;
+    if (typeof item["selector"] !== "string" || typeof item["eventName"] !== "string")
+      continue;
+    if (isSelectorBlocked(item["selector"]))
+      continue;
+    result.push({
+      name: typeof item["name"] === "string" ? item["name"] : "",
+      selector: item["selector"],
+      eventType: typeof item["eventType"] === "string" ? item["eventType"] : "click",
+      eventName: item["eventName"],
+      urlPattern: typeof item["urlPattern"] === "string" ? item["urlPattern"] : "*",
+      properties: isRecord(item["properties"]) ? item["properties"] : {},
+      extractProperties: Array.isArray(item["extractProperties"]) ? item["extractProperties"] : void 0,
+      active: item["active"] === true,
+      rateLimit: typeof item["rateLimit"] === "number" ? item["rateLimit"] : void 0
+    });
+  }
+  return result;
+}
+function truncate(val, max) {
+  return val.length > max ? val.slice(0, max) : val;
+}
+function extractProperties(el, rule) {
+  const props = { ...rule.properties };
+  if (!Array.isArray(rule.extractProperties))
+    return props;
+  for (const raw of rule.extractProperties) {
+    if (!isRecord(raw))
+      continue;
+    const key = typeof raw["key"] === "string" ? raw["key"] : null;
+    const source = typeof raw["source"] === "string" ? raw["source"] : null;
+    if (!key || !source)
+      continue;
+    const rawMaxLen = typeof raw["maxLength"] === "number" ? raw["maxLength"] : MAX_EXTRACT_LENGTH;
+    const maxLen = Math.min(rawMaxLen, MAX_EXTRACT_LENGTH);
+    switch (source) {
+      case "text":
+        props[key] = truncate(el.textContent?.trim() ?? "", maxLen);
+        break;
+      case "attribute": {
+        const attr = typeof raw["attribute"] === "string" ? raw["attribute"] : "";
+        if (BLOCKED_ATTRIBUTES.has(attr.toLowerCase()))
+          break;
+        props[key] = truncate(el.getAttribute(attr) ?? "", maxLen);
+        break;
+      }
+      case "dataset": {
+        const dsKey = typeof raw["attribute"] === "string" ? raw["attribute"] : "";
+        props[key] = truncate(el.dataset[dsKey] ?? "", maxLen);
+        break;
+      }
+    }
+  }
+  return props;
+}
+function createRuleEngine(tracker, config = {}) {
+  const endpoint = config.endpoint ?? "/api/analytics/tracking-rules";
+  let rules = [];
+  let activeCleanups = [];
+  let running = false;
+  let navigationCleanup = null;
+  const rateLimits = /* @__PURE__ */ new Map();
+  function checkRateLimit(rule) {
+    if (!rule.rateLimit)
+      return true;
+    const now = Date.now();
+    const state = rateLimits.get(rule.eventName);
+    if (!state || now >= state.resetAt) {
+      rateLimits.set(rule.eventName, { count: 1, resetAt: now + 6e4 });
+      return true;
+    }
+    if (state.count >= rule.rateLimit)
+      return false;
+    state.count++;
+    return true;
+  }
+  function fireRule(rule, el) {
+    if (!checkRateLimit(rule))
+      return;
+    tracker.track(rule.eventName, extractProperties(el, rule));
+  }
+  function attachRulesForUrl(url) {
+    for (const cleanup of activeCleanups)
+      cleanup();
+    activeCleanups = [];
+    const pathname = url.startsWith("http") ? new URL(url).pathname : url;
+    const matching = rules.filter((r) => r.active && matchUrlPattern(r.urlPattern, pathname));
+    if (matching.length === 0)
+      return;
+    const delegatedTypes = [
+      { eventType: "click", domEvent: "click", capture: false },
+      { eventType: "submit", domEvent: "submit", capture: true },
+      { eventType: "hover", domEvent: "mouseenter", capture: true },
+      { eventType: "focus", domEvent: "focusin", capture: false }
+    ];
+    for (const { eventType, domEvent, capture } of delegatedTypes) {
+      const typeRules = matching.filter((r) => r.eventType === eventType);
+      if (typeRules.length === 0)
+        continue;
+      const handler = (e) => {
+        const target = e.target;
+        if (!(target instanceof HTMLElement))
+          return;
+        for (const rule of typeRules) {
+          try {
+            const matched = target.closest(rule.selector);
+            if (matched instanceof HTMLElement) {
+              fireRule(rule, matched);
+            }
+          } catch {
+          }
+        }
+      };
+      document.body.addEventListener(domEvent, handler, capture);
+      activeCleanups.push(() => document.body.removeEventListener(domEvent, handler, capture));
+    }
+    const scrollRules = matching.filter((r) => r.eventType === "scroll-into-view");
+    if (scrollRules.length > 0) {
+      const seen = /* @__PURE__ */ new Set();
+      const observer = new IntersectionObserver(
+        (entries) => {
+          for (const entry of entries) {
+            if (!entry.isIntersecting)
+              continue;
+            const el = entry.target;
+            if (!(el instanceof HTMLElement))
+              continue;
+            for (const rule of scrollRules) {
+              try {
+                if (!el.matches(rule.selector))
+                  continue;
+              } catch {
+                continue;
+              }
+              const key = `${rule.eventName}:${rule.selector}`;
+              if (seen.has(key))
+                continue;
+              seen.add(key);
+              fireRule(rule, el);
+              observer.unobserve(el);
+            }
+          }
+        },
+        { threshold: 0.5 }
+      );
+      for (const rule of scrollRules) {
+        try {
+          const elements = Array.from(document.querySelectorAll(rule.selector));
+          for (const el of elements)
+            observer.observe(el);
+        } catch {
+        }
+      }
+      activeCleanups.push(() => observer.disconnect());
+    }
+  }
+  function setupNavigationDetection() {
+    const cleanups = [];
+    const popstateHandler = () => {
+      if (running)
+        attachRulesForUrl(location.pathname);
+    };
+    window.addEventListener("popstate", popstateHandler);
+    cleanups.push(() => window.removeEventListener("popstate", popstateHandler));
+    const originalPushState = history.pushState.bind(history);
+    const originalReplaceState = history.replaceState.bind(history);
+    history.pushState = function(...args) {
+      originalPushState(...args);
+      if (running)
+        attachRulesForUrl(location.pathname);
+    };
+    history.replaceState = function(...args) {
+      originalReplaceState(...args);
+      if (running)
+        attachRulesForUrl(location.pathname);
+    };
+    cleanups.push(() => {
+      history.pushState = originalPushState;
+      history.replaceState = originalReplaceState;
+    });
+    return () => {
+      for (const fn of cleanups)
+        fn();
+    };
+  }
+  return {
+    async start() {
+      try {
+        const res = await fetch(endpoint);
+        if (!res.ok)
+          return;
+        const data = await res.json();
+        rules = parseRulesResponse(data);
+      } catch {
+        return;
+      }
+      if (rules.length === 0)
+        return;
+      running = true;
+      attachRulesForUrl(location.pathname);
+      navigationCleanup = setupNavigationDetection();
+    },
+    stop() {
+      running = false;
+      for (const cleanup of activeCleanups)
+        cleanup();
+      activeCleanups = [];
+      navigationCleanup?.();
+      navigationCleanup = null;
+      rateLimits.clear();
+    },
+    onNavigate(url) {
+      if (running)
+        attachRulesForUrl(url);
+    }
+  };
+}
+var BLOCKED_ATTRIBUTES, MAX_EXTRACT_LENGTH;
+var init_rule_engine = __esm({
+  "libs/plugins/analytics/src/lib/client/rule-engine.ts"() {
+    "use strict";
+    init_type_guards();
+    init_selector_security();
+    BLOCKED_ATTRIBUTES = /* @__PURE__ */ new Set(["value", "password", "autocomplete", "autofill"]);
+    MAX_EXTRACT_LENGTH = 200;
+  }
+});
+
+// libs/plugins/analytics/src/lib/client/tracker.ts
+function getVisitorId() {
+  if (typeof localStorage === "undefined")
+    return "server";
+  let visitorId = localStorage.getItem("_m_vid");
+  if (!visitorId) {
+    visitorId = generateId();
+    localStorage.setItem("_m_vid", visitorId);
+  }
+  return visitorId;
+}
+function getSessionId() {
+  if (typeof sessionStorage === "undefined")
+    return "server";
+  let sessionId = sessionStorage.getItem("_m_sid");
+  if (!sessionId) {
+    sessionId = generateId();
+    sessionStorage.setItem("_m_sid", sessionId);
+  }
+  return sessionId;
+}
+function generateId() {
+  return Date.now().toString(36) + Math.random().toString(36).slice(2, 10);
+}
+function onDomReady(fn) {
+  if (typeof document === "undefined")
+    return;
+  if (document.readyState === "loading") {
+    document.addEventListener("DOMContentLoaded", fn, { once: true });
+  } else {
+    fn();
+  }
+}
+function createTracker(config = {}) {
+  const endpoint = config.endpoint ?? "/api/analytics/collect";
+  const flushInterval = config.flushInterval ?? 5e3;
+  const buffer = [];
+  let userId;
+  let _timer = null;
+  const cleanups = [];
+  const visitorId = getVisitorId();
+  const sessionId = getSessionId();
+  function addEvent(event) {
+    buffer.push({
+      ...event,
+      sessionId,
+      visitorId
+    });
+  }
+  function flush() {
+    if (buffer.length === 0)
+      return;
+    const events = buffer.splice(0, buffer.length).map((e) => ({
+      ...e,
+      userId
+    }));
+    const body = JSON.stringify({ events });
+    if (typeof navigator !== "undefined" && navigator.sendBeacon) {
+      const blob = new Blob([body], { type: "application/json" });
+      navigator.sendBeacon(endpoint, blob);
+    } else if (typeof fetch !== "undefined") {
+      void fetch(endpoint, {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body,
+        keepalive: true
+      });
+    }
+  }
+  if (typeof setInterval !== "undefined") {
+    _timer = setInterval(flush, flushInterval);
+    cleanups.push(() => {
+      if (_timer)
+        clearInterval(_timer);
+      _timer = null;
+    });
+  }
+  if (typeof addEventListener !== "undefined") {
+    addEventListener("beforeunload", flush);
+    cleanups.push(() => removeEventListener("beforeunload", flush));
+  }
+  const tracker = {
+    pageView(properties) {
+      addEvent({
+        name: "page_view",
+        category: "page",
+        properties,
+        context: {
+          url: typeof location !== "undefined" ? location.href : void 0,
+          referrer: typeof document !== "undefined" ? document.referrer : void 0
+        }
+      });
+    },
+    track(name, properties) {
+      addEvent({
+        name,
+        category: "action",
+        properties,
+        context: {
+          url: typeof location !== "undefined" ? location.href : void 0
+        }
+      });
+    },
+    identify(id, traits) {
+      userId = id;
+      addEvent({
+        name: "identify",
+        category: "custom",
+        properties: traits
+      });
+    },
+    flush,
+    destroy() {
+      flush();
+      for (const fn of cleanups)
+        fn();
+      cleanups.length = 0;
+    }
+  };
+  if (config.blockTracking) {
+    onDomReady(() => {
+      void Promise.resolve().then(() => (init_block_tracker(), block_tracker_exports)).then((m) => {
+        const blockCleanup = m.attachBlockTracking(tracker);
+        cleanups.push(blockCleanup);
+      });
+    });
+  }
+  if (config.trackingRules) {
+    const rulesEndpoint = typeof config.trackingRules === "object" ? config.trackingRules.endpoint : void 0;
+    onDomReady(() => {
+      void Promise.resolve().then(() => (init_rule_engine(), rule_engine_exports)).then((m) => {
+        const engine = m.createRuleEngine(tracker, { endpoint: rulesEndpoint });
+        void engine.start();
+        cleanups.push(() => engine.stop());
+      });
+    });
+  }
+  return tracker;
+}
+export {
+  createTracker
+};