@drevops/axel 0.0.0-stage → 0.1.1

package/build/axel.drupal.gtm.js

@@ -0,0 +1,415 @@
+(() => {
+  // src/core/dom.js
+  var PARAM_PREFIX = "data-axel-param-";
+  var CONTACT_PROTOCOLS = ["mailto:", "tel:", "sms:"];
+  function listen(type, handler) {
+    document.addEventListener(type, handler, true);
+    return () => document.removeEventListener(type, handler, true);
+  }
+  function getText(node) {
+    if (node.nodeType === Node.TEXT_NODE) {
+      return node.textContent;
+    }
+    if (node.nodeType !== Node.ELEMENT_NODE || node.getAttribute("aria-hidden") === "true" || node.matches("select, textarea")) {
+      return "";
+    }
+    return [...node.childNodes].map(getText).join("");
+  }
+  function getLabel(element) {
+    const isButton = element instanceof HTMLInputElement && ["submit", "button", "reset"].includes(element.type);
+    const value = isButton ? element.value : getText(element);
+    return value.replace(/\s+/g, " ").trim() || element.getAttribute("aria-label") || element.getAttribute("title") || "";
+  }
+  function collectParams(element) {
+    const params = {};
+    for (let node = element; node; node = node.parentElement) {
+      [...node.attributes].filter((attribute) => attribute.name.startsWith(PARAM_PREFIX)).forEach((attribute) => {
+        const name = attribute.name.slice(PARAM_PREFIX.length).replace(/-/g, "_");
+        if (params[name] === void 0) {
+          params[name] = attribute.value;
+        }
+      });
+    }
+    return params;
+  }
+  function isSkipped(element) {
+    return element.closest("[data-axel-skip]") !== null;
+  }
+  function resolveUrl(element, attribute, fullUrl = false) {
+    let url;
+    try {
+      url = new URL(element.getAttribute(attribute), element.baseURI);
+    } catch (e) {
+      return void 0;
+    }
+    if (fullUrl) {
+      return url.href;
+    }
+    if (CONTACT_PROTOCOLS.includes(url.protocol)) {
+      return url.protocol;
+    }
+    url.search = "";
+    return url.href;
+  }
+  function formParams(form, fullUrl = false) {
+    const params = { form_name: form.getAttribute("data-axel-form") };
+    const id = form.getAttribute("id");
+    if (id) {
+      params.form_id = id;
+    }
+    const destination = form instanceof HTMLFormElement && form.hasAttribute("action") ? resolveUrl(form, "action", fullUrl) : void 0;
+    if (destination !== void 0) {
+      params.form_destination = destination;
+    }
+    return params;
+  }
+
+  // src/core/event-types/click.js
+  function findTitle(element, scope, selector) {
+    return [...scope.querySelectorAll(selector)].filter((title) => title.compareDocumentPosition(element) & Node.DOCUMENT_POSITION_FOLLOWING && !title.contains(element) && !isSkipped(title)).pop();
+  }
+  function getGroupTitle(element, kind, selectors) {
+    const group = element.closest(`[data-axel-${kind}]`);
+    if (!group) {
+      return void 0;
+    }
+    const scopeSelector = group.getAttribute(`data-axel-${kind}-scope`);
+    const scope = scopeSelector && group.closest(scopeSelector) || group;
+    for (const selector of selectors) {
+      const title = findTitle(element, scope, selector);
+      if (title) {
+        return getLabel(title);
+      }
+    }
+    return "";
+  }
+  function getSubmitDestination(element, fullUrl) {
+    if (element.type !== "submit" || !element.form) {
+      return void 0;
+    }
+    if (element.hasAttribute("formaction")) {
+      return resolveUrl(element, "formaction", fullUrl);
+    }
+    return element.form.hasAttribute("action") ? resolveUrl(element.form, "action", fullUrl) : void 0;
+  }
+  function click(axel) {
+    const track = (event) => {
+      const element = event.target instanceof Element ? event.target.closest(axel.settings.clickSelector) : null;
+      if (!element || isSkipped(element)) {
+        return;
+      }
+      const enrolled = element.closest("[data-axel-event]");
+      if (!enrolled) {
+        return;
+      }
+      const isLink = element instanceof HTMLAnchorElement;
+      const params = { link_text: getLabel(element), click_type: isLink ? "link" : "button" };
+      const { fullUrls } = axel.settings;
+      const linkUrl = isLink ? resolveUrl(element, "href", fullUrls) : getSubmitDestination(element, fullUrls);
+      if (linkUrl !== void 0) {
+        params.link_url = linkUrl;
+      }
+      const groupTitle = getGroupTitle(element, "group", ["[data-axel-group-title]", axel.settings.groupTitleSelector]);
+      if (groupTitle !== void 0) {
+        params.group_title = groupTitle;
+      }
+      const subgroupTitle = getGroupTitle(element, "subgroup", ["[data-axel-subgroup-title]"]);
+      if (subgroupTitle !== void 0) {
+        params.subgroup_title = subgroupTitle;
+      }
+      axel.track(enrolled.getAttribute("data-axel-event"), element, params);
+    };
+    const removers = [
+      listen("click", track),
+      // A middle click opens a link in a new tab and fires only 'auxclick'.
+      listen("auxclick", (event) => event.button === 1 && track(event))
+    ];
+    return () => removers.forEach((remove) => remove());
+  }
+
+  // src/core/event-types/field-complete.js
+  function getFieldLabel(field) {
+    var _a, _b;
+    const legend = ["checkbox", "radio"].includes(field.type) ? (_a = field.closest("fieldset")) == null ? void 0 : _a.querySelector(":scope > legend") : null;
+    const label = legend || (field.type === "radio" ? null : (_b = field.labels) == null ? void 0 : _b[0]);
+    return (label ? getText(label).replace(/\s+/g, " ").trim() : "") || field.getAttribute("aria-label") || "";
+  }
+  function fieldComplete(axel) {
+    return listen("change", (event) => {
+      const field = event.target;
+      const form = field instanceof Element ? field.closest("[data-axel-form]") : null;
+      if (!form || isSkipped(field)) {
+        return;
+      }
+      const params = formParams(form, axel.settings.fullUrls);
+      if (field.name) {
+        params.field_name = field.name;
+      }
+      params.field_label = getFieldLabel(field);
+      axel.track("field_complete", field, params);
+    });
+  }
+
+  // src/core/event-types/form-start.js
+  function formStart(axel) {
+    const started = /* @__PURE__ */ new WeakSet();
+    return listen("focusin", (event) => {
+      const form = event.target instanceof Element ? event.target.closest("[data-axel-form]") : null;
+      if (!form || started.has(form) || isSkipped(event.target)) {
+        return;
+      }
+      started.add(form);
+      axel.track("form_start", form, formParams(form, axel.settings.fullUrls));
+    });
+  }
+
+  // src/core/event-types/form-submit.js
+  var MARKER = "[data-axel-form-submitted]";
+  function formSubmit(axel) {
+    const seen = /* @__PURE__ */ new WeakSet();
+    const report = (marker) => {
+      if (seen.has(marker) || isSkipped(marker)) {
+        return;
+      }
+      seen.add(marker);
+      axel.track("form_submit", marker, { form_name: marker.getAttribute("data-axel-form-submitted") });
+    };
+    const scan = (root) => {
+      var _a;
+      if ((_a = root.matches) == null ? void 0 : _a.call(root, MARKER)) {
+        report(root);
+      }
+      root.querySelectorAll(MARKER).forEach(report);
+    };
+    const observer = new MutationObserver((records) => {
+      records.forEach((record) => record.addedNodes.forEach((node) => node instanceof Element && scan(node)));
+    });
+    observer.observe(document, { childList: true, subtree: true });
+    scan(document);
+    return () => observer.disconnect();
+  }
+
+  // src/core/core.js
+  var TYPES = {
+    click,
+    form_start: formStart,
+    field_complete: fieldComplete,
+    form_submit: formSubmit
+  };
+  var DEFAULT_SETTINGS = {
+    // Event types to track, as keys of TYPES.
+    types: ["click"],
+    // An object with send(name, params, context) and an optional
+    // validate(name, params), or a function used as send().
+    adapter: null,
+    // Static parameters added to every event, overridden by all others.
+    properties: {},
+    // Elements whose clicks are tracked.
+    clickSelector: 'a[href], button, input[type="submit"], input[type="button"], input[type="reset"]',
+    // Headings that title a data-axel-group when it has no marker.
+    groupTitleSelector: "h2, h3, h4",
+    // Functions named by data-axel-collector, as name => function.
+    collectors: {},
+    // Keep query strings and contact addresses in link_url and form_destination.
+    fullUrls: false,
+    debugHash: "#axel-debug",
+    debugStorageKey: "axelDebug",
+    // Used by the standalone integration only.
+    autoInit: true
+  };
+  var Axel = class {
+    /**
+     * @param {object} settings - Overrides for DEFAULT_SETTINGS.
+     */
+    constructor(settings = {}) {
+      var _a;
+      this.settings = { ...DEFAULT_SETTINGS, ...settings };
+      const { adapter } = this.settings;
+      this.adapter = typeof adapter === "function" ? { send: adapter } : adapter;
+      if (typeof ((_a = this.adapter) == null ? void 0 : _a.send) !== "function") {
+        throw new Error("The analytics adapter must be a function or an object with a send() function.");
+      }
+      this.settings.types.forEach((type) => {
+        if (!Object.keys(TYPES).includes(type)) {
+          throw new Error(`Unknown analytics event type "${type}".`);
+        }
+      });
+      Object.entries(this.settings.collectors).forEach(([name, collector]) => {
+        if (typeof collector !== "function") {
+          throw new Error(`The analytics collector "${name}" must be a function.`);
+        }
+      });
+      this.cleanups = null;
+    }
+    /**
+     * Start tracking the configured event types.
+     *
+     * Calling it again on an initialized instance does nothing.
+     *
+     * @return {Axel} The instance.
+     */
+    init() {
+      if (!this.cleanups) {
+        this.cleanups = this.settings.types.map((type) => TYPES[type](this));
+      }
+      return this;
+    }
+    /**
+     * Stop tracking. The instance can be initialized again afterwards.
+     */
+    destroy() {
+      var _a;
+      (_a = this.cleanups) == null ? void 0 : _a.forEach((cleanup) => cleanup());
+      this.cleanups = null;
+      if (shared === this) {
+        shared = null;
+      }
+    }
+    /**
+     * Send an event with the parameters of the element and its ancestors.
+     *
+     * @param {string}  name    - The event name.
+     * @param {Element} element - The element the event is about.
+     * @param {object}  derived - Parameters derived from the element, which
+     *   'data-axel-param-*' attributes override.
+     */
+    track(name, element, derived = {}) {
+      const params = { ...derived, ...collectParams(element) };
+      this.send(name, { ...params, ...this.collect(name, params, element) });
+    }
+    /**
+     * Run the collector named by the closest 'data-axel-collector'.
+     *
+     * A failing collector adds nothing, so the event is still sent.
+     *
+     * @param {string}  name    - The event name.
+     * @param {object}  params  - The event parameters, passed as a copy.
+     * @param {Element} element - The element the event is about.
+     * @return {object} The parameters the collector returns.
+     */
+    collect(name, params, element) {
+      const source = element.closest("[data-axel-collector]");
+      if (!source) {
+        return {};
+      }
+      const collectorName = source.getAttribute("data-axel-collector");
+      try {
+        if (!Object.hasOwn(this.settings.collectors, collectorName)) {
+          throw new Error(`Unknown analytics collector "${collectorName}".`);
+        }
+        const collected = this.settings.collectors[collectorName](name, { ...params }, { element, source });
+        if (collected === void 0 || collected === null) {
+          return {};
+        }
+        if (typeof collected !== "object" || Array.isArray(collected)) {
+          throw new Error(`The analytics collector "${collectorName}" must return an object.`);
+        }
+        return collected;
+      } catch (error) {
+        console.error(`[axel] ${error.message}`);
+        return {};
+      }
+    }
+    /**
+     * Send a 'form_submit' event for a submission the server has confirmed.
+     *
+     * @param {string} formName - The form name.
+     * @param {object} params   - Additional parameters.
+     */
+    formSubmitted(formName, params = {}) {
+      this.send("form_submit", { form_name: formName, ...params });
+    }
+    /**
+     * Send an event to the adapter.
+     *
+     * @param {string} name   - The event name.
+     * @param {object} params - The event parameters.
+     */
+    send(name, params) {
+      var _a, _b;
+      const event = { ...this.settings.properties, ...params };
+      const debug = this.isDebug();
+      if (debug) {
+        console.log("[axel]", name, event);
+        (((_b = (_a = this.adapter).validate) == null ? void 0 : _b.call(_a, name, event)) || []).forEach((warning) => console.warn(`[axel] ${name}: ${warning}`));
+      }
+      this.adapter.send(name, event, { debug, settings: this.settings });
+    }
+    /**
+     * Check whether events are logged for debugging.
+     *
+     * The debug hash turns logging on until the browser tab closes, so it holds
+     * on the pages that clicks open.
+     *
+     * @return {boolean} TRUE if debugging.
+     */
+    isDebug() {
+      const { debugHash, debugStorageKey } = this.settings;
+      const requested = window.location.hash === debugHash;
+      try {
+        if (requested) {
+          window.sessionStorage.setItem(debugStorageKey, "1");
+        }
+        return requested || window.sessionStorage.getItem(debugStorageKey) === "1";
+      } catch (e) {
+        return requested;
+      }
+    }
+  };
+  var shared = null;
+  function init(settings = {}) {
+    shared = shared || new Axel(settings);
+    return shared.init();
+  }
+
+  // src/integrations/drupal.js
+  function start(adapter) {
+    window.Axel = Axel;
+    window.Drupal.behaviors.axel = {
+      // Listeners are delegated to the document and init() is idempotent, so
+      // every attach after the first, including AJAX ones, is a no-op.
+      attach() {
+        const settings = window.drupalSettings.axel;
+        const collectors = { ...window.axelCollectors, ...settings == null ? void 0 : settings.collectors };
+        window.axel = init({ ...settings, collectors, adapter: adapter || window.axelAdapter });
+      }
+    };
+  }
+
+  // src/adapters/ga4.js
+  var LIMITS = {
+    eventName: 40,
+    params: 25,
+    paramValue: 100
+  };
+  function withDebugMode(params, debug) {
+    return debug ? { ...params, debug_mode: true } : params;
+  }
+  function validate(name, params) {
+    const warnings = [];
+    if (name.length > LIMITS.eventName) {
+      warnings.push(`event name is longer than ${LIMITS.eventName} characters.`);
+    }
+    if (Object.keys(params).length > LIMITS.params) {
+      warnings.push(`more than ${LIMITS.params} parameters.`);
+    }
+    Object.entries(params).filter(([, value]) => String(value).length > LIMITS.paramValue).forEach(([key]) => warnings.push(`"${key}" is longer than ${LIMITS.paramValue} characters.`));
+    return warnings;
+  }
+  function getDataLayer(settings) {
+    const name = settings.dataLayerName || "dataLayer";
+    window[name] = window[name] || [];
+    return window[name];
+  }
+
+  // src/adapters/gtm.js
+  var gtm = {
+    send(name, params, { debug, settings }) {
+      getDataLayer(settings).push({ ...withDebugMode(params, debug), event: name });
+    },
+    validate
+  };
+
+  // axel.drupal.gtm.js
+  start(gtm);
+})();

package/build/axel.drupal.gtm.min.js

@@ -0,0 +1 @@
+(()=>{var E="data-axel-param-",P=["mailto:","tel:","sms:"];function l(t,e){return document.addEventListener(t,e,!0),()=>document.removeEventListener(t,e,!0)}function m(t){return t.nodeType===Node.TEXT_NODE?t.textContent:t.nodeType!==Node.ELEMENT_NODE||t.getAttribute("aria-hidden")==="true"||t.matches("select, textarea")?"":[...t.childNodes].map(m).join("")}function g(t){return(t instanceof HTMLInputElement&&["submit","button","reset"].includes(t.type)?t.value:m(t)).replace(/\s+/g," ").trim()||t.getAttribute("aria-label")||t.getAttribute("title")||""}function S(t){let e={};for(let n=t;n;n=n.parentElement)[...n.attributes].filter(r=>r.name.startsWith(E)).forEach(r=>{let o=r.name.slice(E.length).replace(/-/g,"_");e[o]===void 0&&(e[o]=r.value)});return e}function c(t){return t.closest("[data-axel-skip]")!==null}function f(t,e,n=!1){let r;try{r=new URL(t.getAttribute(e),t.baseURI)}catch(o){return}return n?r.href:P.includes(r.protocol)?r.protocol:(r.search="",r.href)}function h(t,e=!1){let n={form_name:t.getAttribute("data-axel-form")},r=t.getAttribute("id");r&&(n.form_id=r);let o=t instanceof HTMLFormElement&&t.hasAttribute("action")?f(t,"action",e):void 0;return o!==void 0&&(n.form_destination=o),n}function j(t,e,n){return[...e.querySelectorAll(n)].filter(r=>r.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING&&!r.contains(t)&&!c(r)).pop()}function T(t,e,n){let r=t.closest(`[data-axel-${e}]`);if(!r)return;let o=r.getAttribute(`data-axel-${e}-scope`),s=o&&r.closest(o)||r;for(let i of n){let a=j(t,s,i);if(a)return g(a)}return""}function C(t,e){if(!(t.type!=="submit"||!t.form))return t.hasAttribute("formaction")?f(t,"formaction",e):t.form.hasAttribute("action")?f(t.form,"action",e):void 0}function _(t){let e=r=>{let o=r.target instanceof Element?r.target.closest(t.settings.clickSelector):null;if(!o||c(o))return;let s=o.closest("[data-axel-event]");if(!s)return;let i=o instanceof HTMLAnchorElement,a={link_text:g(o),click_type:i?"link":"button"},{fullUrls:b}=t.settings,x=i?f(o,"href",b):C(o,b);x!==void 0&&(a.link_url=x);let w=T(o,"group",["[data-axel-group-title]",t.settings.groupTitleSelector]);w!==void 0&&(a.group_title=w);let y=T(o,"subgroup",["[data-axel-subgroup-title]"]);y!==void 0&&(a.subgroup_title=y),t.track(s.getAttribute("data-axel-event"),o,a)},n=[l("click",e),l("auxclick",r=>r.button===1&&e(r))];return()=>n.forEach(r=>r())}function R(t){var r,o;let n=(["checkbox","radio"].includes(t.type)?(r=t.closest("fieldset"))==null?void 0:r.querySelector(":scope > legend"):null)||(t.type==="radio"?null:(o=t.labels)==null?void 0:o[0]);return(n?m(n).replace(/\s+/g," ").trim():"")||t.getAttribute("aria-label")||""}function k(t){return l("change",e=>{let n=e.target,r=n instanceof Element?n.closest("[data-axel-form]"):null;if(!r||c(n))return;let o=h(r,t.settings.fullUrls);n.name&&(o.field_name=n.name),o.field_label=R(n),t.track("field_complete",n,o)})}function A(t){let e=new WeakSet;return l("focusin",n=>{let r=n.target instanceof Element?n.target.closest("[data-axel-form]"):null;!r||e.has(r)||c(n.target)||(e.add(r),t.track("form_start",r,h(r,t.settings.fullUrls)))})}var v="[data-axel-form-submitted]";function L(t){let e=new WeakSet,n=s=>{e.has(s)||c(s)||(e.add(s),t.track("form_submit",s,{form_name:s.getAttribute("data-axel-form-submitted")}))},r=s=>{var i;(i=s.matches)!=null&&i.call(s,v)&&n(s),s.querySelectorAll(v).forEach(n)},o=new MutationObserver(s=>{s.forEach(i=>i.addedNodes.forEach(a=>a instanceof Element&&r(a)))});return o.observe(document,{childList:!0,subtree:!0}),r(document),()=>o.disconnect()}var N={click:_,form_start:A,field_complete:k,form_submit:L},F={types:["click"],adapter:null,properties:{},clickSelector:'a[href], button, input[type="submit"], input[type="button"], input[type="reset"]',groupTitleSelector:"h2, h3, h4",collectors:{},fullUrls:!1,debugHash:"#axel-debug",debugStorageKey:"axelDebug",autoInit:!0},p=class{constructor(e={}){var r;this.settings={...F,...e};let{adapter:n}=this.settings;if(this.adapter=typeof n=="function"?{send:n}:n,typeof((r=this.adapter)==null?void 0:r.send)!="function")throw new Error("The analytics adapter must be a function or an object with a send() function.");this.settings.types.forEach(o=>{if(!Object.keys(N).includes(o))throw new Error(`Unknown analytics event type "${o}".`)}),Object.entries(this.settings.collectors).forEach(([o,s])=>{if(typeof s!="function")throw new Error(`The analytics collector "${o}" must be a function.`)}),this.cleanups=null}init(){return this.cleanups||(this.cleanups=this.settings.types.map(e=>N[e](this))),this}destroy(){var e;(e=this.cleanups)==null||e.forEach(n=>n()),this.cleanups=null,d===this&&(d=null)}track(e,n,r={}){let o={...r,...S(n)};this.send(e,{...o,...this.collect(e,o,n)})}collect(e,n,r){let o=r.closest("[data-axel-collector]");if(!o)return{};let s=o.getAttribute("data-axel-collector");try{if(!Object.hasOwn(this.settings.collectors,s))throw new Error(`Unknown analytics collector "${s}".`);let i=this.settings.collectors[s](e,{...n},{element:r,source:o});if(i==null)return{};if(typeof i!="object"||Array.isArray(i))throw new Error(`The analytics collector "${s}" must return an object.`);return i}catch(i){return console.error(`[axel] ${i.message}`),{}}}formSubmitted(e,n={}){this.send("form_submit",{form_name:e,...n})}send(e,n){var s,i;let r={...this.settings.properties,...n},o=this.isDebug();o&&(console.log("[axel]",e,r),(((i=(s=this.adapter).validate)==null?void 0:i.call(s,e,r))||[]).forEach(a=>console.warn(`[axel] ${e}: ${a}`))),this.adapter.send(e,r,{debug:o,settings:this.settings})}isDebug(){let{debugHash:e,debugStorageKey:n}=this.settings,r=window.location.hash===e;try{return r&&window.sessionStorage.setItem(n,"1"),r||window.sessionStorage.getItem(n)==="1"}catch(o){return r}}},d=null;function O(t={}){return d=d||new p(t),d.init()}function D(t){window.Axel=p,window.Drupal.behaviors.axel={attach(){let e=window.drupalSettings.axel,n={...window.axelCollectors,...e==null?void 0:e.collectors};window.axel=O({...e,collectors:n,adapter:t||window.axelAdapter})}}}var u={eventName:40,params:25,paramValue:100};function $(t,e){return e?{...t,debug_mode:!0}:t}function I(t,e){let n=[];return t.length>u.eventName&&n.push(`event name is longer than ${u.eventName} characters.`),Object.keys(e).length>u.params&&n.push(`more than ${u.params} parameters.`),Object.entries(e).filter(([,r])=>String(r).length>u.paramValue).forEach(([r])=>n.push(`"${r}" is longer than ${u.paramValue} characters.`)),n}function U(t){let e=t.dataLayerName||"dataLayer";return window[e]=window[e]||[],window[e]}var M={send(t,e,{debug:n,settings:r}){U(r).push({...$(e,n),event:t})},validate:I};D(M);})();