@drevops/axel 0.0.0-stage → 0.1.1

package/build/axel.js

@@ -0,0 +1,376 @@
+(() => {
+  // 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/standalone.js
+  function start(adapter) {
+    const pageSettings = window.axelSettings;
+    const collectors = { ...window.axelCollectors, ...pageSettings == null ? void 0 : pageSettings.collectors };
+    const settings = { ...pageSettings, collectors, adapter: adapter || window.axelAdapter };
+    window.Axel = Axel;
+    window.axel = settings.autoInit === false ? new Axel(settings) : init(settings);
+  }
+
+  // axel.js
+  start();
+})();

package/build/axel.min.js

@@ -0,0 +1 @@
+(()=>{var E="data-axel-param-",U=["mailto:","tel:","sms:"];function l(t,r){return document.addEventListener(t,r,!0),()=>document.removeEventListener(t,r,!0)}function p(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(p).join("")}function g(t){return(t instanceof HTMLInputElement&&["submit","button","reset"].includes(t.type)?t.value:p(t)).replace(/\s+/g," ").trim()||t.getAttribute("aria-label")||t.getAttribute("title")||""}function y(t){let r={};for(let n=t;n;n=n.parentElement)[...n.attributes].filter(e=>e.name.startsWith(E)).forEach(e=>{let o=e.name.slice(E.length).replace(/-/g,"_");r[o]===void 0&&(r[o]=e.value)});return r}function a(t){return t.closest("[data-axel-skip]")!==null}function f(t,r,n=!1){let e;try{e=new URL(t.getAttribute(r),t.baseURI)}catch(o){return}return n?e.href:U.includes(e.protocol)?e.protocol:(e.search="",e.href)}function m(t,r=!1){let n={form_name:t.getAttribute("data-axel-form")},e=t.getAttribute("id");e&&(n.form_id=e);let o=t instanceof HTMLFormElement&&t.hasAttribute("action")?f(t,"action",r):void 0;return o!==void 0&&(n.form_destination=o),n}function I(t,r,n){return[...r.querySelectorAll(n)].filter(e=>e.compareDocumentPosition(t)&Node.DOCUMENT_POSITION_FOLLOWING&&!e.contains(t)&&!a(e)).pop()}function S(t,r,n){let e=t.closest(`[data-axel-${r}]`);if(!e)return;let o=e.getAttribute(`data-axel-${r}-scope`),s=o&&e.closest(o)||e;for(let i of n){let c=I(t,s,i);if(c)return g(c)}return""}function P(t,r){if(!(t.type!=="submit"||!t.form))return t.hasAttribute("formaction")?f(t,"formaction",r):t.form.hasAttribute("action")?f(t.form,"action",r):void 0}function T(t){let r=e=>{let o=e.target instanceof Element?e.target.closest(t.settings.clickSelector):null;if(!o||a(o))return;let s=o.closest("[data-axel-event]");if(!s)return;let i=o instanceof HTMLAnchorElement,c={link_text:g(o),click_type:i?"link":"button"},{fullUrls:h}=t.settings,b=i?f(o,"href",h):P(o,h);b!==void 0&&(c.link_url=b);let x=S(o,"group",["[data-axel-group-title]",t.settings.groupTitleSelector]);x!==void 0&&(c.group_title=x);let w=S(o,"subgroup",["[data-axel-subgroup-title]"]);w!==void 0&&(c.subgroup_title=w),t.track(s.getAttribute("data-axel-event"),o,c)},n=[l("click",r),l("auxclick",e=>e.button===1&&r(e))];return()=>n.forEach(e=>e())}function D(t){var e,o;let n=(["checkbox","radio"].includes(t.type)?(e=t.closest("fieldset"))==null?void 0:e.querySelector(":scope > legend"):null)||(t.type==="radio"?null:(o=t.labels)==null?void 0:o[0]);return(n?p(n).replace(/\s+/g," ").trim():"")||t.getAttribute("aria-label")||""}function _(t){return l("change",r=>{let n=r.target,e=n instanceof Element?n.closest("[data-axel-form]"):null;if(!e||a(n))return;let o=m(e,t.settings.fullUrls);n.name&&(o.field_name=n.name),o.field_label=D(n),t.track("field_complete",n,o)})}function k(t){let r=new WeakSet;return l("focusin",n=>{let e=n.target instanceof Element?n.target.closest("[data-axel-form]"):null;!e||r.has(e)||a(n.target)||(r.add(e),t.track("form_start",e,m(e,t.settings.fullUrls)))})}var A="[data-axel-form-submitted]";function L(t){let r=new WeakSet,n=s=>{r.has(s)||a(s)||(r.add(s),t.track("form_submit",s,{form_name:s.getAttribute("data-axel-form-submitted")}))},e=s=>{var i;(i=s.matches)!=null&&i.call(s,A)&&n(s),s.querySelectorAll(A).forEach(n)},o=new MutationObserver(s=>{s.forEach(i=>i.addedNodes.forEach(c=>c instanceof Element&&e(c)))});return o.observe(document,{childList:!0,subtree:!0}),e(document),()=>o.disconnect()}var O={click:T,form_start:k,field_complete:_,form_submit:L},$={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},u=class{constructor(r={}){var e;this.settings={...$,...r};let{adapter:n}=this.settings;if(this.adapter=typeof n=="function"?{send:n}:n,typeof((e=this.adapter)==null?void 0:e.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(O).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(r=>O[r](this))),this}destroy(){var r;(r=this.cleanups)==null||r.forEach(n=>n()),this.cleanups=null,d===this&&(d=null)}track(r,n,e={}){let o={...e,...y(n)};this.send(r,{...o,...this.collect(r,o,n)})}collect(r,n,e){let o=e.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](r,{...n},{element:e,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(r,n={}){this.send("form_submit",{form_name:r,...n})}send(r,n){var s,i;let e={...this.settings.properties,...n},o=this.isDebug();o&&(console.log("[axel]",r,e),(((i=(s=this.adapter).validate)==null?void 0:i.call(s,r,e))||[]).forEach(c=>console.warn(`[axel] ${r}: ${c}`))),this.adapter.send(r,e,{debug:o,settings:this.settings})}isDebug(){let{debugHash:r,debugStorageKey:n}=this.settings,e=window.location.hash===r;try{return e&&window.sessionStorage.setItem(n,"1"),e||window.sessionStorage.getItem(n)==="1"}catch(o){return e}}},d=null;function v(t={}){return d=d||new u(t),d.init()}function N(t){let r=window.axelSettings,n={...window.axelCollectors,...r==null?void 0:r.collectors},e={...r,collectors:n,adapter:t||window.axelAdapter};window.Axel=u,window.axel=e.autoInit===!1?new u(e):v(e)}N();})();

package/package.json

@@ -1,6 +1,68 @@
 {
-  "name": "@drevops/axel",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+    "name": "@drevops/axel",
+    "version": "0.1.1",
+    "description": "Turns clicks and form interactions on elements marked with data-axel-* attributes into analytics events.",
+    "license": "MIT",
+    "author": {
+        "name": "Alex Skrypnyk",
+        "email": "alex@drevops.com",
+        "url": "https://drevops.com"
+    },
+    "contributors": [],
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/drevops/axel.git"
+    },
+    "homepage": "https://github.com/drevops/axel#readme",
+    "bugs": "https://github.com/drevops/axel/issues",
+    "type": "module",
+    "main": "build/axel.esm.js",
+    "module": "build/axel.esm.js",
+    "exports": {
+        ".": "./build/axel.esm.js",
+        "./build/*": "./build/*"
+    },
+    "files": [
+        "build",
+        "src"
+    ],
+    "publishConfig": {
+        "access": "public"
+    },
+    "directories": {
+        "test": "tests"
+    },
+    "scripts": {
+        "build": "node scripts/build.js",
+        "lint": "eslint . && prettier --check \"src/**/*.js\" \"tests/**/*.js\" \"scripts/**/*.js\" \"*.js\"",
+        "lint-fix": "eslint --fix . && prettier --write \"src/**/*.js\" \"tests/**/*.js\" \"scripts/**/*.js\" \"*.js\"",
+        "pretest": "npm run build",
+        "test": "vitest run",
+        "pretest-coverage": "npm run build",
+        "test-coverage": "vitest run --coverage",
+        "pretest-functional": "npm run build",
+        "test-functional": "playwright test",
+        "reset": "rm -Rf node_modules build .logs"
+    },
+    "engines": {
+        "npm": ">=10",
+        "node": ">=22.12.0"
+    },
+    "devDependencies": {
+        "@eslint/js": "^10.0.1",
+        "@playwright/test": "^1.64.1",
+        "@vitest/coverage-v8": "^5.0.5",
+        "esbuild": "^0.28.2",
+        "eslint": "^10.13.0",
+        "eslint-config-prettier": "^10.1.8",
+        "fast-check": "^4.10.2",
+        "globals": "^17.13.0",
+        "jsdom": "^29.1.1",
+        "prettier": "^3.9.10",
+        "vitest": "^5.0.5"
+    },
+    "prettier": {
+        "singleQuote": true,
+        "printWidth": 160
+    }
+}

package/src/adapters/ga4.js

@@ -0,0 +1,60 @@
+/**
+ * @file
+ * Google Analytics 4 rules shared by the Google adapters.
+ */
+
+export const LIMITS = {
+  eventName: 40,
+  params: 25,
+  paramValue: 100,
+};
+
+/**
+ * Flag the parameters for GA4 DebugView in debug mode.
+ *
+ * @param {object}  params - The event parameters.
+ * @param {boolean} debug  - Whether debug mode is on.
+ * @return {object} The parameters, with 'debug_mode' in debug mode.
+ */
+export function withDebugMode(params, debug) {
+  return debug ? { ...params, debug_mode: true } : params;
+}
+
+/**
+ * Check an event against the GA4 collection limits.
+ *
+ * @param {string} name   - The event name.
+ * @param {object} params - The event parameters.
+ * @return {string[]} A warning per exceeded limit.
+ */
+export 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;
+}
+
+/**
+ * Get the data layer array, creating it when missing.
+ *
+ * @param {object} settings - The instance settings.
+ * @return {Array} The data layer.
+ */
+export function getDataLayer(settings) {
+  const name = settings.dataLayerName || 'dataLayer';
+
+  window[name] = window[name] || [];
+
+  return window[name];
+}

package/src/adapters/gtag.js

@@ -0,0 +1,27 @@
+/**
+ * @file
+ * Adapter that sends events through the Google tag.
+ */
+
+import { getDataLayer, validate, withDebugMode } from './ga4.js';
+
+export const gtag = {
+  send(name, params, { debug, settings }) {
+    const event = withDebugMode(params, debug);
+
+    if (typeof window.gtag === 'function') {
+      window.gtag('event', name, event);
+
+      return;
+    }
+
+    const dataLayer = getDataLayer(settings);
+
+    // The Google tag reads only arguments objects from the data layer, so the
+    // event is queued the way its own gtag() function does.
+    (function queue() {
+      dataLayer.push(arguments);
+    })('event', name, event);
+  },
+  validate,
+};

package/src/adapters/gtm.js

@@ -0,0 +1,13 @@
+/**
+ * @file
+ * Adapter that pushes events to the data layer for Google Tag Manager.
+ */
+
+import { getDataLayer, validate, withDebugMode } from './ga4.js';
+
+export const gtm = {
+  send(name, params, { debug, settings }) {
+    getDataLayer(settings).push({ ...withDebugMode(params, debug), event: name });
+  },
+  validate,
+};