@buildinams/core 0.3.1 → 0.4.0

package/dist/tracking/dom/index.js

@@ -0,0 +1,1196 @@
+import { createListeners } from '../../chunk-M3HNM5HC.js';
+import { shape } from '../../chunk-G2BKC4BU.js';
+import { shallowEqual } from '../../chunk-LL3VTFNY.js';
+import { IS_DEVELOPMENT } from '../../chunk-GQVN2ECX.js';
+
+// src/tracking/dom/roles.ts
+var ROLE = "data-track";
+var roleSelector = (role) => `[${ROLE}~="${role}"]`;
+var hasRole = (element, role) => !!element.getAttribute(ROLE)?.split(/\s+/).includes(role);
+
+// src/tracking/dom/attributes.ts
+var toKebabCase = (name) => name.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+var toCamelCase = (name) => name.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+var toName = (field) => `${ROLE}-${toKebabCase(field)}`;
+var toField = (name) => toCamelCase(name.slice(ROLE.length + 1));
+var getField = (element, field) => element.getAttribute(toName(field)) || void 0;
+var BUILT_IN_FIELDS = {
+  "page-view": ["url", "title", "pageType"],
+  click: ["id"],
+  location: ["name"],
+  video: ["title"],
+  form: ["id"],
+  scroll: ["id"]
+};
+var isBuiltIn = (type, field) => !!BUILT_IN_FIELDS[type]?.includes(field);
+var getCustomFields = (element, type) => {
+  const prefix = `${ROLE}-${type}-`;
+  const fields = {};
+  for (const { name, value } of element.attributes) {
+    if (name.startsWith(prefix) && value) {
+      fields[toField(`${ROLE}-${name.slice(prefix.length)}`)] = value;
+    }
+  }
+  return fields;
+};
+var toFieldAttributes = (type, data) => Object.fromEntries(
+  Object.entries(data).flatMap(
+    ([field, value]) => typeof value === "string" ? [[toName(isBuiltIn(type, field) ? field : `${type}-${field}`), value]] : []
+  )
+);
+
+// src/tracking/dom/auto-track.ts
+var AUTO = [
+  roleSelector("auto-links"),
+  roleSelector("auto-forms"),
+  roleSelector("auto-none")
+].join(", ");
+var isAutoTracked = (element, kind) => !!element.closest(AUTO)?.matches(roleSelector(`auto-${kind}`));
+
+// src/tracking/dom/plugin.ts
+var PLUGIN_ORDER = [
+  "pageViews",
+  "ecommerce",
+  "clicks",
+  "videos",
+  "forms",
+  "scroll"
+];
+var definePlugin = (definition) => definition;
+var toDefinition = (domPlugin) => domPlugin;
+
+// src/tracking/dom/shared.ts
+var CLICK = roleSelector("click");
+var INTERACTIVE = `a[href], button, [role="button"], ${CLICK}`;
+var MAX_TEXT_LENGTH = 100;
+var MAX_RAW_TEXT_LENGTH = MAX_TEXT_LENGTH * 10;
+var interactions = /* @__PURE__ */ new WeakMap();
+var getInteraction = (event) => {
+  if (interactions.has(event)) return interactions.get(event);
+  const interaction = (
+    // Middle clicks only arrive as `auxclick`.
+    (event.type !== "auxclick" || event.button === 1) && event.target instanceof Element ? event.target.closest(INTERACTIVE) : null
+  );
+  interactions.set(event, interaction);
+  return interaction;
+};
+var getPage = () => window.location.pathname + window.location.search;
+var isRendered = (element) => {
+  if (typeof element.checkVisibility === "function") {
+    return element.checkVisibility();
+  }
+  for (let node = element; node; node = node.parentElement) {
+    if (getComputedStyle(node).display === "none") return false;
+  }
+  return true;
+};
+var getLabelledBy = (element) => {
+  const ids = element.getAttribute("aria-labelledby")?.split(/\s+/);
+  if (!ids) return null;
+  return ids.map((id) => element.ownerDocument.getElementById(id)?.textContent).join(" ");
+};
+var collapseWhitespace = (text) => text.replace(/\s+/g, " ").trim();
+var getText = (element) => {
+  const raw = element.getAttribute("aria-label") ?? getLabelledBy(element) ?? element.textContent ?? "";
+  let text = collapseWhitespace(raw.slice(0, MAX_RAW_TEXT_LENGTH));
+  if (text.length < MAX_TEXT_LENGTH && raw.length > MAX_RAW_TEXT_LENGTH) {
+    text = collapseWhitespace(raw);
+  }
+  return text.slice(0, MAX_TEXT_LENGTH) || void 0;
+};
+
+// src/tracking/dom/clicks.ts
+var LOCATION = roleSelector("location");
+var getLocation = (element) => {
+  const area = element.closest(LOCATION);
+  if (!area) return void 0;
+  return getField(area, "name") || (area.parentElement ? getLocation(area.parentElement) : void 0);
+};
+var clicks = () => definePlugin({
+  name: "clicks",
+  events: { clicked: "A tracked link or button was clicked." },
+  install: ({ emit }) => {
+    const onClick = (event) => {
+      const element = getInteraction(event);
+      if (!element) return;
+      const isLink = element instanceof HTMLAnchorElement;
+      if (!element.matches(CLICK) && !(isLink && isAutoTracked(element, "links"))) {
+        return;
+      }
+      emit(
+        "clicked",
+        {
+          ...getCustomFields(element, "click"),
+          elementType: isLink ? "link" : "button",
+          elementId: getField(element, "id") || element.id || void 0,
+          text: getText(element),
+          url: isLink ? element.href : void 0,
+          outbound: isLink && element.protocol.startsWith("http") ? element.origin !== window.location.origin : void 0,
+          location: getLocation(element)
+        },
+        element
+      );
+    };
+    return {
+      listeners: [
+        ["click", onClick],
+        ["auxclick", onClick]
+      ]
+    };
+  }
+});
+
+// src/tracking/dom/attach.ts
+var TRACK_ROLES = /* @__PURE__ */ new Set([
+  "view-item",
+  "quick-view",
+  "list",
+  "item",
+  "promotion"
+]);
+var DATA = Symbol.for("@buildinams/core/tracking/dom");
+var listeners = /* @__PURE__ */ new Set();
+var onTrackData = (listener) => {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+};
+var getStored = (element, role) => hasRole(element, role) ? element[DATA]?.get(role) : void 0;
+var readStored = (element, role) => {
+  const stored = getStored(element, role);
+  if (stored) stored.read = true;
+  return stored;
+};
+var resolve = (stored) => {
+  stored.resolved ??= {
+    value: typeof stored.value === "function" ? stored.value() : stored.value
+  };
+  return stored.resolved.value;
+};
+var getKey = (stored) => stored.key ??= JSON.stringify(resolve(stored));
+var isLazy = (stored) => typeof stored.value === "function";
+var isSame = (current, next) => {
+  if (isLazy(current) && !current.read) return false;
+  if (!isLazy(current) && !isLazy(next) && shallowEqual(current.value, next.value)) {
+    return true;
+  }
+  try {
+    return getKey(current) === getKey(next);
+  } catch {
+    return false;
+  }
+};
+var setTrackData = (element, role, value, toId) => {
+  const holder = element;
+  const data = holder[DATA] ??= /* @__PURE__ */ new Map();
+  const current = data.get(role);
+  if (value === void 0) {
+    if (!current) return;
+    data.delete(role);
+  } else if (current?.value === value) {
+    return;
+  } else {
+    const next = { value, toId };
+    if (current && !current.read && isLazy(next)) {
+      data.set(role, next);
+      return;
+    }
+    if (current && isSame(current, next)) return;
+    data.set(role, next);
+  }
+  listeners.forEach((listener) => listener(element, role));
+};
+var getTrackData = (element, role) => {
+  const stored = readStored(element, role);
+  return stored && resolve(stored);
+};
+var hasTrackData = (element, role) => !!getStored(element, role);
+var getTrackKey = (element, role) => {
+  const stored = readStored(element, role);
+  return stored ? getKey(stored) : "";
+};
+var getTrackId = (element, role) => {
+  const stored = readStored(element, role);
+  if (!stored) return "";
+  if (stored.id === void 0) {
+    const toId = stored.toId;
+    try {
+      stored.id = toId ? toId(resolve(stored)) : getTrackKey(element, role);
+    } catch (error) {
+      console.error("[analytics] ecommerce id", error);
+      stored.id = getTrackKey(element, role);
+    }
+  }
+  return stored.id;
+};
+
+// src/tracking/dom/track.ts
+var getTypes = (element) => element.getAttribute(ROLE)?.split(/\s+/).filter(Boolean) ?? [];
+var setTypes = (element, types) => {
+  if (types.length > 0) element.setAttribute(ROLE, types.join(" "));
+  else element.removeAttribute(ROLE);
+};
+var toTrackProps = (spec, idFor) => {
+  const types = [];
+  const fields = {};
+  const data = [];
+  for (const [key, value] of Object.entries(spec)) {
+    const type = toKebabCase(key);
+    if (TRACK_ROLES.has(type)) {
+      data.push([type, value]);
+      if (value !== void 0) types.push(type);
+    } else if (type === "auto") {
+      if (value === false) types.push("auto-none");
+      else if (value !== void 0) {
+        for (const kind of [value].flat()) types.push(`auto-${kind}`);
+      }
+    } else if (value !== void 0 && value !== false) {
+      types.push(type);
+      Object.assign(
+        fields,
+        toFieldAttributes(type, value === true ? {} : value)
+      );
+    }
+  }
+  const props = {
+    ...fields,
+    ...types.length > 0 && { [ROLE]: types.join(" ") }
+  };
+  if (data.length === 0) return props;
+  return {
+    ...props,
+    // Also adds or removes the types, for an element rendered without spreading the props.
+    ref: (element) => {
+      if (!element) return;
+      for (const [role, value] of data) {
+        const current = getTypes(element);
+        if (value === void 0) {
+          if (current.includes(role)) {
+            setTypes(
+              element,
+              current.filter((type) => type !== role)
+            );
+          }
+          setTrackData(element, role, void 0);
+        } else {
+          setTrackData(element, role, value, idFor(role));
+          if (!current.includes(role)) setTypes(element, [...current, role]);
+        }
+      }
+    }
+  };
+};
+
+// src/tracking/dom/create-dom-watcher.ts
+var elementsIn = (node, selector) => node instanceof Element ? [
+  ...node.matches(selector) ? [node] : [],
+  ...node.querySelectorAll(selector)
+] : [];
+var roots = /* @__PURE__ */ new WeakMap();
+var notify = (state, mutations) => {
+  if (mutations.length === 0) return;
+  const found = mutations.map((mutation) => {
+    if (mutation.type !== "childList" || !state.selector) return void 0;
+    const added = [...mutation.addedNodes].flatMap(
+      (node) => elementsIn(node, state.selector)
+    );
+    const removed = [...mutation.removedNodes].flatMap(
+      (node) => elementsIn(node, state.selector)
+    );
+    return added.length > 0 || removed.length > 0 ? { added, removed } : void 0;
+  });
+  for (const instance of state.ordered) {
+    if (!instance.changed) continue;
+    const { selector, attributes = [] } = instance;
+    const changes = mutations.flatMap((mutation, index) => {
+      if (mutation.type === "attributes") {
+        return attributes.includes(mutation.attributeName) ? [
+          {
+            type: "attribute",
+            element: mutation.target,
+            attribute: mutation.attributeName
+          }
+        ] : [];
+      }
+      const children = found[index];
+      if (!selector || !children) return [];
+      const matches = (element) => element.matches(selector);
+      const added = children.added.filter(matches);
+      const removed = children.removed.filter(matches);
+      return added.length > 0 || removed.length > 0 ? [{ type: "children", added, removed }] : [];
+    });
+    if (changes.length > 0) instance.changed(changes);
+  }
+};
+var notifyData = (state) => {
+  if (state.data.size === 0) return;
+  const changed = [...state.data];
+  state.data.clear();
+  for (const instance of state.ordered) {
+    const { data: roles = [] } = instance;
+    if (!instance.changed || roles.length === 0) continue;
+    const changes = changed.flatMap(
+      ([element, elementRoles]) => !element.isConnected ? [] : [...elementRoles].filter((role) => roles.includes(role)).map((role) => ({ type: "data", element, role }))
+    );
+    if (changes.length > 0) instance.changed(changes);
+  }
+};
+var release = (state) => {
+  const held = state.held;
+  state.held = [];
+  held.forEach((deliver) => deliver());
+};
+var takeChanges = (state) => {
+  notify(state, state.observer.takeRecords());
+  notifyData(state);
+};
+var createState = (root) => {
+  const state = {
+    instances: /* @__PURE__ */ new Map(),
+    ordered: [],
+    selector: "",
+    observer: new MutationObserver((mutations) => notify(state, mutations)),
+    handlers: /* @__PURE__ */ new Map(),
+    dispatchers: /* @__PURE__ */ new Map(),
+    data: /* @__PURE__ */ new Map(),
+    held: [],
+    // After the task's other data, as React sets children's refs before their parents': an item handled straight away
+    // would miss its list's data.
+    stopData: onTrackData((element, role) => {
+      if (!root.contains(element)) return;
+      if (state.data.size === 0) queueMicrotask(() => takeChanges(state));
+      const roles = state.data.get(element) ?? /* @__PURE__ */ new Set();
+      state.data.set(element, roles.add(role));
+    })
+  };
+  roots.set(root, state);
+  return state;
+};
+var configure = (root, state) => {
+  state.ordered = PLUGIN_ORDER.flatMap((name) => {
+    const instance = state.instances.get(name);
+    return instance ? [instance] : [];
+  });
+  state.selector = state.ordered.flatMap(({ selector }) => selector ? [selector] : []).join(", ");
+  const attributes = [
+    ...new Set(state.ordered.flatMap(({ attributes: attributes2 = [] }) => attributes2))
+  ];
+  state.observer.disconnect();
+  if (state.selector || attributes.length > 0) {
+    state.observer.observe(root, {
+      childList: !!state.selector,
+      subtree: true,
+      ...attributes.length > 0 && {
+        attributes: true,
+        attributeFilter: attributes
+      }
+    });
+  }
+  state.handlers = /* @__PURE__ */ new Map();
+  for (const { listeners: listeners2 = [] } of state.ordered) {
+    for (const [type, listener] of listeners2) {
+      state.handlers.set(type, [...state.handlers.get(type) ?? [], listener]);
+    }
+  }
+  for (const [type, dispatcher] of state.dispatchers) {
+    if (state.handlers.has(type)) continue;
+    root.removeEventListener(type, dispatcher, true);
+    state.dispatchers.delete(type);
+  }
+  for (const type of state.handlers.keys()) {
+    if (state.dispatchers.has(type)) continue;
+    const dispatcher = (event) => state.handlers.get(type)?.forEach((handler) => handler(event));
+    root.addEventListener(type, dispatcher, true);
+    state.dispatchers.set(type, dispatcher);
+  }
+  if (state.instances.size === 0) {
+    state.stopData();
+    roots.delete(root);
+  }
+};
+var remove = (state, name) => {
+  const instance = state.instances.get(name);
+  if (!instance) return;
+  state.instances.delete(name);
+  instance.stop?.();
+};
+var createDomWatcher = (plugins, { root: rootOption } = {}) => {
+  const definitions = plugins.map(toDefinition);
+  const toId = [...definitions].reverse().find(({ name }) => name === "ecommerce")?.toId;
+  const idFor = (type) => type === "list" || type === "promotion" ? void 0 : toId;
+  let running;
+  const isCurrent = ({ state, installed }) => [...installed].some(
+    ([name, instance]) => state.instances.get(name) === instance
+  );
+  const eachInstance = (method) => {
+    if (!running || !isCurrent(running)) return;
+    const { state } = running;
+    takeChanges(state);
+    state.ordered.forEach((instance) => instance[method]?.());
+  };
+  let isStarting = false;
+  const start = () => {
+    const root = rootOption ?? document;
+    const state = roots.get(root) ?? createState(root);
+    takeChanges(state);
+    isStarting = true;
+    const context = {
+      emit: (name, payload, element) => {
+        for (const instance of state.ordered) {
+          try {
+            instance.beforeEmit?.();
+          } catch (error) {
+            console.error("[analytics] beforeEmit", error);
+          }
+        }
+        const event = element ? { name, payload, element } : { name, payload };
+        if (isStarting) {
+          state.held.push(() => listeners2.emit(event));
+          return;
+        }
+        release(state);
+        listeners2.emit(event);
+      },
+      root,
+      takeChanges: () => takeChanges(state),
+      newPage: () => state.ordered.forEach((instance) => instance.newPage?.())
+    };
+    const installed = /* @__PURE__ */ new Map();
+    for (const { name, install } of definitions) {
+      remove(state, name);
+      const instance = install(context);
+      state.instances.set(name, instance);
+      installed.set(name, instance);
+    }
+    configure(root, state);
+    const rootElement = root instanceof Document ? root.documentElement : root;
+    for (const name of PLUGIN_ORDER) {
+      const instance = installed.get(name);
+      if (!instance?.selector || !instance.changed) continue;
+      instance.changed([
+        {
+          type: "children",
+          added: elementsIn(rootElement, instance.selector),
+          removed: []
+        }
+      ]);
+    }
+    isStarting = false;
+    running = { root, state, installed };
+    queueMicrotask(() => release(state));
+  };
+  const listeners2 = createListeners({
+    start: () => {
+      try {
+        start();
+      } finally {
+        isStarting = false;
+      }
+    },
+    stop: () => {
+      if (!running) return;
+      const { root, state, installed } = running;
+      running = void 0;
+      takeChanges(state);
+      release(state);
+      for (const [name, instance] of installed) {
+        if (state.instances.get(name) === instance) remove(state, name);
+      }
+      configure(root, state);
+    }
+  });
+  return {
+    track: ((spec) => toTrackProps(spec, idFor)),
+    subscribe: listeners2.subscribe,
+    events: Object.fromEntries(
+      definitions.flatMap(
+        ({ events }) => Object.entries(events).map(([name, description]) => [
+          name,
+          { description, payload: shape() }
+        ])
+      )
+    ),
+    newPage: () => eachInstance("newPage"),
+    flush: () => eachInstance("flush")
+  };
+};
+
+// src/tracking/dom/ecommerce.ts
+var PROMOTION = roleSelector("promotion");
+var QUICK_VIEW = roleSelector("quick-view");
+var VIEW_ITEM = `${roleSelector("view-item")}, ${QUICK_VIEW}`;
+var ITEM_LIST = roleSelector("list");
+var ITEM = roleSelector("item");
+var ROLES = ["promotion", "view-item", "quick-view", "item", "list"];
+var MAX_BATCH_SIZE = 30;
+var MISSING_DATA_DELAY = 2e3;
+var URL_CHANGE_DELAY = 100;
+var OBSERVED = `${PROMOTION}, ${ITEM}, ${VIEW_ITEM}`;
+var LINE_HEIGHT = 1e-3;
+var MAX_STORED_PLACEMENTS = 50;
+var getListElement = (itemElement) => itemElement.parentElement?.closest(ITEM_LIST) ?? null;
+var getFeaturedIn = (itemElement, listElement) => {
+  const promotionElement = itemElement.closest(PROMOTION);
+  return promotionElement && !(listElement && promotionElement.contains(listElement)) ? promotionElement : null;
+};
+var definedFields = (fields) => Object.fromEntries(
+  Object.entries(fields).filter(([, value]) => value !== void 0)
+);
+var toLines = (threshold) => {
+  const lines = threshold <= 0.5 ? [[threshold, threshold]] : [
+    [1 - threshold, threshold],
+    [threshold, 1 - threshold]
+  ];
+  return lines.map(
+    ([top, bottom]) => top + bottom >= 1 ? [top - LINE_HEIGHT / 2, bottom - LINE_HEIGHT / 2] : [top, bottom]
+  );
+};
+var toMargin = (share) => `${-Math.round(share * 1e4) / 100}%`;
+var isItem = (element) => element.matches(ITEM);
+var isPlacement = (entry) => {
+  if (!Array.isArray(entry) || typeof entry[0] !== "string") return false;
+  const placement = entry[1];
+  if (typeof placement !== "object" || placement === null || Array.isArray(placement)) {
+    return false;
+  }
+  const { index } = placement;
+  return index === void 0 || typeof index === "number";
+};
+var readPlacements = (key) => {
+  try {
+    const value = sessionStorage.getItem(key);
+    const entries = value ? JSON.parse(value) : [];
+    return new Map(
+      Array.isArray(entries) ? entries.filter(isPlacement).slice(-MAX_STORED_PLACEMENTS) : []
+    );
+  } catch {
+    return /* @__PURE__ */ new Map();
+  }
+};
+var writePlacements = (key, placements) => {
+  try {
+    sessionStorage.setItem(key, JSON.stringify([...placements]));
+  } catch {
+  }
+};
+var ecommerce = ({
+  id,
+  threshold = 0.5,
+  batchDelay = 500,
+  storageKey = "analytics-placements"
+} = {}) => definePlugin({
+  name: "ecommerce",
+  events: {
+    itemViewed: "A product was viewed on its page or in a quick view, placed where it was last selected.",
+    itemSelected: "A product in a list was clicked.",
+    itemsViewed: "Products in a list came into view, batched per list.",
+    promotionViewed: "A promotion came into view.",
+    promotionSelected: "A promotion was clicked."
+  },
+  toId: id,
+  install: (context) => {
+    const { takeChanges: takeChanges2 } = context;
+    let isTrackingViews = false;
+    const emit = (key, occurrence) => {
+      const wasTracking = isTrackingViews;
+      isTrackingViews = key === "itemsViewed" || key === "promotionViewed";
+      try {
+        context.emit(key, occurrence);
+      } finally {
+        isTrackingViews = wasTracking;
+      }
+    };
+    const checked = /* @__PURE__ */ new WeakSet();
+    const warnWithoutData = (element, type) => {
+      if (!IS_DEVELOPMENT || checked.has(element)) return;
+      checked.add(element);
+      setTimeout(() => {
+        if (element.isConnected && hasRole(element, type) && !hasTrackData(element, type)) {
+          console.warn(
+            `[analytics] data-track="${type}" has no data. Set the ref from track({ ${toCamelCase(type)} }) on it.`,
+            element
+          );
+        }
+      }, MISSING_DATA_DELAY);
+    };
+    const viewed = /* @__PURE__ */ new Set();
+    let viewedPage;
+    const visible = /* @__PURE__ */ new Set();
+    const pending = /* @__PURE__ */ new Map();
+    let timeout;
+    const flushViews = () => {
+      clearTimeout(timeout);
+      timeout = void 0;
+      const views = [...pending.values()];
+      pending.clear();
+      for (const view2 of views) {
+        if ("promotion" in view2) {
+          emit("promotionViewed", view2);
+        } else {
+          emit("itemsViewed", definedFields(view2));
+        }
+      }
+    };
+    const scheduleFlush = () => {
+      timeout ??= setTimeout(flushViews, batchDelay);
+    };
+    const viewedOnPage = () => {
+      if (viewedPage !== getPage()) {
+        viewed.clear();
+        viewedPage = getPage();
+      }
+      return viewed;
+    };
+    const isNewView = (key) => {
+      if (viewedOnPage().has(key)) return false;
+      viewed.add(key);
+      return true;
+    };
+    const selectedFrom = readPlacements(storageKey);
+    const setSelectedFrom = (product, placement) => {
+      selectedFrom.delete(product);
+      selectedFrom.set(product, placement);
+      for (const oldest of selectedFrom.keys()) {
+        if (selectedFrom.size <= MAX_STORED_PLACEMENTS) break;
+        selectedFrom.delete(oldest);
+      }
+      writePlacements(storageKey, selectedFrom);
+    };
+    let indexes = /* @__PURE__ */ new WeakMap();
+    const getIndex = (listElement, itemElement) => {
+      let positions = indexes.get(listElement);
+      if (!positions) {
+        positions = /* @__PURE__ */ new Map();
+        for (const other of listElement.querySelectorAll(ITEM)) {
+          if (getListElement(other) === listElement) {
+            positions.set(other, positions.size);
+          }
+        }
+        indexes.set(listElement, positions);
+      }
+      return positions.get(itemElement) ?? -1;
+    };
+    const toItem = (element, listElement = getListElement(element)) => {
+      const item = getTrackData(element, "item");
+      if (!item) {
+        warnWithoutData(element, "item");
+        return void 0;
+      }
+      const list = listElement && getTrackData(listElement, "list") || void 0;
+      if (listElement && !list) warnWithoutData(listElement, "list");
+      const promotionElement = element.closest(PROMOTION);
+      const promotion = promotionElement && getTrackData(promotionElement, "promotion") || void 0;
+      return {
+        list,
+        featuredIn: getFeaturedIn(element, listElement),
+        placed: definedFields({
+          item,
+          index: listElement ? getIndex(listElement, element) : void 0,
+          promotion
+        })
+      };
+    };
+    const shownItems = /* @__PURE__ */ new WeakMap();
+    const trackViewItem = (element) => {
+      const isQuickView = element.matches(QUICK_VIEW);
+      const type = isQuickView ? "quick-view" : "view-item";
+      const item = getTrackData(element, type);
+      if (!item) {
+        warnWithoutData(element, type);
+        return;
+      }
+      const product = getTrackId(element, type);
+      if (isQuickView) {
+        const key = `${getPage()}${product}`;
+        if (shownItems.get(element) === key) return;
+        shownItems.set(element, key);
+      } else if (!isNewView(`${VIEW_ITEM}${product}`)) {
+        return;
+      }
+      emit("itemViewed", { ...selectedFrom.get(product), item });
+    };
+    const viewItem = (element) => {
+      const listElement = getListElement(element);
+      if (getFeaturedIn(element, listElement)) return;
+      const key = `${ITEM}${listElement ? getTrackKey(listElement, "list") : ""}${getTrackId(element, "item")}`;
+      if (viewedOnPage().has(key)) return;
+      const resolved = toItem(element, listElement);
+      if (!resolved) return;
+      viewed.add(key);
+      const { list, placed } = resolved;
+      const batch = pending.get(listElement);
+      if (batch && !("promotion" in batch)) {
+        batch.items.push(placed);
+        if (batch.items.length >= MAX_BATCH_SIZE) flushViews();
+      } else {
+        pending.set(listElement, { list, items: [placed] });
+      }
+      scheduleFlush();
+    };
+    const view = (element) => {
+      if (!element.isConnected) return;
+      if (element.matches(VIEW_ITEM)) trackViewItem(element);
+      if (element.matches(ITEM)) viewItem(element);
+      const key = `${PROMOTION}${getTrackKey(element, "promotion")}`;
+      if (!element.matches(PROMOTION) || viewedOnPage().has(key)) return;
+      const promotion = getTrackData(element, "promotion");
+      if (!promotion) {
+        warnWithoutData(element, "promotion");
+        return;
+      }
+      viewed.add(key);
+      const items = [...element.querySelectorAll(ITEM)].flatMap(
+        (itemElement) => {
+          const listElement = getListElement(itemElement);
+          if (getFeaturedIn(itemElement, listElement) !== element) return [];
+          if (listElement && !hasTrackData(listElement, "list")) {
+            warnWithoutData(listElement, "list");
+          }
+          const item = getTrackData(itemElement, "item");
+          if (!item) warnWithoutData(itemElement, "item");
+          return item ? [item] : [];
+        }
+      );
+      const promotionView = { promotion, items };
+      pending.set(promotionView, promotionView);
+      scheduleFlush();
+    };
+    const onClick = (event) => {
+      const element = getInteraction(event);
+      if (!element) return;
+      takeChanges2();
+      const promotionElement = element.closest(PROMOTION);
+      const promotion = promotionElement && getTrackData(promotionElement, "promotion");
+      const itemElement = element.closest(ITEM);
+      const resolved = itemElement && toItem(itemElement);
+      const isFeatured = !!resolved?.featuredIn;
+      const isInPromotedList = !!resolved && !isFeatured && !!promotionElement?.contains(itemElement);
+      if (promotion) view(promotionElement);
+      if (resolved) view(itemElement);
+      if (promotion && !isInPromotedList) {
+        emit(
+          "promotionSelected",
+          definedFields({
+            promotion,
+            item: isFeatured ? resolved.placed.item : void 0
+          })
+        );
+      }
+      if (!resolved) return;
+      const { list, placed } = resolved;
+      setSelectedFrom(
+        getTrackId(itemElement, "item"),
+        definedFields({
+          list,
+          index: placed.index,
+          promotion: placed.promotion
+        })
+      );
+      if (!isFeatured) {
+        emit("itemSelected", definedFields({ list, ...placed }));
+      }
+    };
+    const setInView = (target, isInView) => {
+      if (isInView && visible.has(target)) return;
+      if (isInView && isRendered(target)) {
+        visible.add(target);
+        view(target);
+      } else {
+        visible.delete(target);
+        shownItems.delete(target);
+      }
+    };
+    const reports = /* @__PURE__ */ new WeakMap();
+    const report = (target, update) => {
+      const state = reports.get(target);
+      if (!state) return;
+      update(state);
+      if (state.ratio === void 0 || state.lines.includes(void 0))
+        return;
+      setInView(target, state.ratio || state.lines.every(Boolean));
+    };
+    const ratioObserver = new IntersectionObserver(
+      (entries) => {
+        for (const { target, isIntersecting, intersectionRatio } of entries) {
+          report(target, (state) => {
+            state.ratio = isIntersecting && intersectionRatio >= threshold;
+          });
+        }
+      },
+      { threshold }
+    );
+    const lineObservers = toLines(threshold).map(
+      ([top, bottom], index) => new IntersectionObserver(
+        (entries) => {
+          for (const { target, isIntersecting } of entries) {
+            report(target, (state) => {
+              state.lines[index] = isIntersecting;
+            });
+          }
+        },
+        {
+          // The document, not the implicit root, as that ignores the margin in a cross-origin iframe.
+          root: document,
+          rootMargin: `${toMargin(top)} 0px ${toMargin(bottom)} 0px`
+        }
+      )
+    );
+    const observe = (element) => {
+      reports.set(element, { lines: lineObservers.map(() => void 0) });
+      ratioObserver.observe(element);
+      lineObservers.forEach((observer) => observer.observe(element));
+    };
+    const unobserve = (element) => {
+      reports.delete(element);
+      ratioObserver.unobserve(element);
+      lineObservers.forEach((observer) => observer.unobserve(element));
+    };
+    let observedPath = window.location.pathname;
+    let hasPageViews = false;
+    const observeAnew = () => {
+      observedPath = window.location.pathname;
+      flushViews();
+      visible.forEach((element) => {
+        unobserve(element);
+        observe(element);
+      });
+      visible.clear();
+    };
+    const onHide = () => {
+      if (document.visibilityState === "hidden") flushViews();
+    };
+    window.addEventListener("pagehide", flushViews);
+    document.addEventListener("visibilitychange", onHide);
+    let urlChange;
+    const onUrlChange = () => {
+      clearTimeout(urlChange);
+      urlChange = setTimeout(() => {
+        visible.forEach((element) => {
+          if (element.isConnected) trackViewItem(element);
+        });
+      }, URL_CHANGE_DELAY);
+    };
+    const navigation = window.navigation;
+    navigation?.addEventListener("currententrychange", onUrlChange);
+    window.addEventListener("popstate", onUrlChange);
+    const dataChanged = (element) => {
+      const wasVisible = visible.has(element);
+      unobserve(element);
+      visible.delete(element);
+      if (!hasTrackData(element, "view-item") && !hasTrackData(element, "quick-view")) {
+        shownItems.delete(element);
+      }
+      if (!element.matches(OBSERVED)) return;
+      observe(element);
+      if (wasVisible) {
+        visible.add(element);
+        view(element);
+      }
+    };
+    return {
+      selector: OBSERVED,
+      attributes: [ROLE],
+      data: ROLES,
+      listeners: [
+        ["click", onClick],
+        ["auxclick", onClick]
+      ],
+      // So pending views come before any interaction or page view. Without page views, a new path means the router
+      // shows a page the project tracks itself.
+      beforeEmit: () => {
+        if (isTrackingViews) return;
+        if (hasPageViews || window.location.pathname === observedPath) {
+          flushViews();
+        } else {
+          observeAnew();
+        }
+      },
+      newPage: () => {
+        hasPageViews = true;
+        observeAnew();
+      },
+      flush: flushViews,
+      changed: (changes) => {
+        const movesItems = changes.some(
+          (change) => change.type === "children" ? change.added.some(isItem) || change.removed.some(isItem) : change.type === "attribute" || change.role === "item" || change.role === "list"
+        );
+        if (movesItems) indexes = /* @__PURE__ */ new WeakMap();
+        for (const change of changes) {
+          if (change.type === "children") {
+            change.removed.forEach((element) => {
+              unobserve(element);
+              visible.delete(element);
+              shownItems.delete(element);
+            });
+            change.added.forEach(observe);
+            continue;
+          }
+          dataChanged(change.element);
+        }
+      },
+      stop: () => {
+        flushViews();
+        window.removeEventListener("pagehide", flushViews);
+        document.removeEventListener("visibilitychange", onHide);
+        navigation?.removeEventListener("currententrychange", onUrlChange);
+        window.removeEventListener("popstate", onUrlChange);
+        clearTimeout(urlChange);
+        ratioObserver.disconnect();
+        lineObservers.forEach((observer) => observer.disconnect());
+      }
+    };
+  }
+});
+
+// src/tracking/dom/forms.ts
+var FORM = roleSelector("form");
+var isTracked = (form) => form.matches(FORM) || isAutoTracked(form, "forms");
+var toForm = (form) => {
+  const action = form.getAttribute("action");
+  return {
+    ...getCustomFields(form, "form"),
+    formId: getField(form, "id") || form.getAttribute("id") || void 0,
+    formName: form.getAttribute("name") || void 0,
+    formDestination: action ? new URL(action, window.location.href).href : window.location.href
+  };
+};
+var forms = () => definePlugin({
+  name: "forms",
+  events: {
+    formStarted: "A tracked form was first interacted with on this page.",
+    formSubmitted: "A tracked form was submitted."
+  },
+  install: ({ emit }) => {
+    const seenForms = /* @__PURE__ */ new WeakMap();
+    const onFormInput = (event) => {
+      if (!(event.target instanceof Element)) return;
+      const form = event.target instanceof HTMLFormElement ? event.target : event.target.closest("form");
+      if (!form || seenForms.get(form) === getPage()) return;
+      seenForms.set(form, getPage());
+      if (isTracked(form)) {
+        emit("formStarted", toForm(form), form);
+      }
+    };
+    const onSubmit = (event) => {
+      const form = event.target;
+      if (!(form instanceof HTMLFormElement && isTracked(form))) {
+        return;
+      }
+      const { submitter } = event;
+      emit(
+        "formSubmitted",
+        {
+          ...toForm(form),
+          formSubmitText: submitter ? getText(submitter) : void 0
+        },
+        form
+      );
+    };
+    return {
+      listeners: [
+        ["input", onFormInput],
+        ["change", onFormInput],
+        ["submit", onSubmit]
+      ]
+    };
+  }
+});
+
+// src/tracking/dom/page-views.ts
+var PAGE_VIEW = roleSelector("page-view");
+var PAGE_FIELDS = ["url", "title", "pageType"];
+var pageViews = () => definePlugin({
+  name: "pageViews",
+  events: {
+    pageViewed: "A page was shown: on load, after a client-side navigation, and when a hidden page is shown again."
+  },
+  install: ({ emit, newPage }) => {
+    let lastPageView;
+    const trackPageView = (element) => {
+      if (lastPageView === getPage() || !element.matches(PAGE_VIEW)) return;
+      if (!isRendered(element)) return;
+      lastPageView = getPage();
+      newPage();
+      emit(
+        "pageViewed",
+        {
+          ...getCustomFields(element, "page-view"),
+          ...Object.fromEntries(
+            PAGE_FIELDS.flatMap((field) => {
+              const value = getField(element, field);
+              return value ? [[field, value]] : [];
+            })
+          )
+        },
+        element
+      );
+    };
+    const resizes = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(
+      (entries) => entries.forEach(({ target }) => trackPageView(target))
+    );
+    return {
+      selector: PAGE_VIEW,
+      attributes: [ROLE, `${ROLE}-page-type`, `${ROLE}-url`, `${ROLE}-title`],
+      changed: (changes) => {
+        for (const change of changes) {
+          if (change.type === "children") {
+            change.removed.forEach((element) => resizes?.unobserve(element));
+            change.added.forEach((element) => {
+              resizes?.observe(element);
+              trackPageView(element);
+            });
+          } else if (change.type === "attribute") {
+            if (change.element.matches(PAGE_VIEW)) {
+              resizes?.observe(change.element);
+            }
+            trackPageView(change.element);
+          }
+        }
+      },
+      stop: () => resizes?.disconnect()
+    };
+  }
+});
+
+// src/tracking/dom/scroll.ts
+var SCROLL = roleSelector("scroll");
+var getPercent = (element) => {
+  const { top, height } = element.getBoundingClientRect();
+  if (height === 0 || !isRendered(element)) return 0;
+  const percent = (window.innerHeight - top) / height * 100;
+  return Math.min(Math.max(percent, 0), 100);
+};
+var scroll = ({
+  thresholds = [25, 50, 75, 90]
+} = {}) => definePlugin({
+  name: "scroll",
+  events: {
+    scrolled: "A tracked element was scrolled through to a threshold, once per page."
+  },
+  install: ({ emit }) => {
+    const ascending = [...thresholds].sort((a, b) => a - b);
+    const elements = /* @__PURE__ */ new Set();
+    const reached = /* @__PURE__ */ new WeakMap();
+    let frame;
+    const check = () => {
+      frame = void 0;
+      const page = getPage();
+      for (const element of elements) {
+        const percent = getPercent(element);
+        let state = reached.get(element);
+        if (state?.page !== page) {
+          state = { page, percents: /* @__PURE__ */ new Set() };
+          reached.set(element, state);
+        }
+        for (const threshold of ascending) {
+          if (percent < threshold || state.percents.has(threshold)) continue;
+          state.percents.add(threshold);
+          emit(
+            "scrolled",
+            {
+              ...getCustomFields(element, "scroll"),
+              percentScrolled: threshold,
+              elementId: getField(element, "id") || element.id || void 0
+            },
+            element
+          );
+        }
+      }
+    };
+    const onScroll = () => {
+      if (elements.size > 0) frame ??= requestAnimationFrame(check);
+    };
+    window.addEventListener("scroll", onScroll, {
+      capture: true,
+      passive: true
+    });
+    return {
+      selector: SCROLL,
+      attributes: [ROLE],
+      changed: (changes) => {
+        for (const change of changes) {
+          if (change.type === "children") {
+            change.removed.forEach((element) => elements.delete(element));
+            change.added.forEach((element) => elements.add(element));
+          } else if (change.type === "attribute") {
+            if (change.element.matches(SCROLL)) elements.add(change.element);
+            else elements.delete(change.element);
+          }
+        }
+      },
+      stop: () => {
+        window.removeEventListener("scroll", onScroll, { capture: true });
+        if (frame !== void 0) cancelAnimationFrame(frame);
+      }
+    };
+  }
+});
+
+// src/tracking/dom/videos.ts
+var VIDEO = roleSelector("video");
+var VIDEO_MILESTONES = [10, 25, 50, 75];
+var toSeconds = (seconds) => Number.isFinite(seconds) ? Math.round(seconds) : void 0;
+var toVideo = (video, container) => ({
+  ...getCustomFields(container, "video"),
+  videoTitle: getField(container, "title") || video.title || video.getAttribute("aria-label") || void 0,
+  videoUrl: video.currentSrc || void 0,
+  videoProvider: "html5",
+  videoDuration: toSeconds(video.duration),
+  videoCurrentTime: toSeconds(video.currentTime)
+});
+var videos = () => definePlugin({
+  name: "videos",
+  events: {
+    videoStarted: "A tracked video started playing.",
+    videoProgressed: "A tracked video passed 10, 25, 50 or 75% of its duration.",
+    videoCompleted: "A tracked video played to its end."
+  },
+  install: ({ emit }) => {
+    const videos2 = /* @__PURE__ */ new WeakMap();
+    const onMedia = (event) => {
+      const target = event.target;
+      if (!(target instanceof HTMLVideoElement)) return;
+      if (event.type !== "play" && !videos2.has(target)) return;
+      const container = target.closest(VIDEO);
+      if (!container) return;
+      const reached = videos2.get(target);
+      if (event.type === "emptied") {
+        videos2.delete(target);
+      } else if (event.type === "play" && !reached) {
+        videos2.set(target, /* @__PURE__ */ new Set());
+        emit("videoStarted", toVideo(target, container), target);
+      } else if (event.type === "timeupdate" && reached && target.duration) {
+        const percent = target.currentTime / target.duration * 100;
+        for (const milestone of VIDEO_MILESTONES) {
+          if (percent < milestone || reached.has(milestone)) continue;
+          reached.add(milestone);
+          emit(
+            "videoProgressed",
+            { ...toVideo(target, container), videoPercent: milestone },
+            target
+          );
+        }
+      } else if (event.type === "ended" && reached) {
+        videos2.delete(target);
+        emit(
+          "videoCompleted",
+          { ...toVideo(target, container), videoPercent: 100 },
+          target
+        );
+      }
+    };
+    return {
+      listeners: [
+        ["play", onMedia],
+        ["timeupdate", onMedia],
+        ["ended", onMedia],
+        ["emptied", onMedia]
+      ]
+    };
+  }
+});
+
+export { clicks, createDomWatcher, ecommerce, forms, pageViews, scroll, videos };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map