@luigisbox/luma 0.1.0 → 0.2.0

package/src/main.ts

@@ -21,10 +21,11 @@ import type { T } from './core/i18n';
 import { failures, holdCss, MAX_FAILURES, painted, reserveCss } from './core/hold';
 import { hostStyle, LISTINGS, loadConfig, loadTranslations, widgetFiles, type IntegrationFiles } from './core/integration';
 import type { Templates } from './core/templates';
-import { plpAccepts, searchAccepts } from './core/routes';
+import { plpAccepts, searchAccepts, searchReadQuery } from './core/routes';
 import { clearEarlyRules, earlyHold, plpRule, searchRule, writeEarlyRules, type EarlyRoute } from './core/early-rules';
 import { askChallenge, storedToken } from './api/token-key';
 import { loadDictionary } from './core/locales';
+import { keepDl } from './core/kept';
 import './core/boot-state'; // the page's state at boot, for lbx-place's reconciler
 import { onFlush, schedule } from './core/scheduler';
 import { onUrlChange, startSensing } from './core/sense';
@@ -153,11 +154,19 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
     askChallenge(g); // while the minting code loads
     import('./api/token').then((m) => m.warmToken(g)).catch((e) => reportError('token', e));
   };
-  const idle = () => (typeof requestIdleCallback === 'function' ? requestIdleCallback(warm, { timeout: 2000 }) : setTimeout(warm, 200));
-  if (document.readyState === 'complete') idle();
-  else addEventListener('load', idle, { once: true });
+  const afterLoad = (f: () => void) => {
+    const idle = () => (typeof requestIdleCallback === 'function' ? requestIdleCallback(f, { timeout: 2000 }) : setTimeout(f, 200));
+    if (document.readyState === 'complete') idle();
+    else addEventListener('load', idle, { once: true });
+  };
+  afterLoad(warm);
   startSensing();
 
+  // Analytics starts once the page has loaded, or with the first widget (its
+  // setup then listens before a tile is clicked). Set up at the end of boot.
+  let analyticsWanted = false;
+  let startAnalytics = () => void (analyticsWanted = true);
+
   // --- lazy widget loading: code + templates + styles + dictionaries in parallel
   const locale = g.locale ?? 'en';
   const loaded = new Map<string, Promise<Loaded>>();
@@ -165,6 +174,7 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
     if (loaded.has(id)) return loaded.get(id)!;
     mark(`load ${id}`);
     warm();
+    startAnalytics();
     const support = import('./core/support');
     const p = Promise.all([
       modules[kind]() as Promise<any>,
@@ -404,6 +414,8 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
   // boot where a popup one is configured (its trigger may fire on any page).
   const recos: Reco[] = [];
   const pages: ((u: URL) => boolean)[] = [];
+  /** Our recommenders by name, and the pages each runs on: where ours runs, the site's of that name is not tracked. */
+  const recoPages = new Map<string, (u: URL) => boolean>();
   for (const [name, rc] of Object.entries(config.recommenders ?? {})) {
     if (rc.disabled) continue;
     const id = `reco-${name}`;
@@ -417,6 +429,7 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
     recos.push({ id, rc, get: () => load('recommender', id, folders, rc, ['recommender']) });
     const re = !rc.confirm && rc.urlMatch ? setUp(id, () => new RegExp(rc.urlMatch!)) : null;
     pages.push(rc.confirm ? () => true : (u) => (rc.active ? rc.active(u) : !re || re.test(u.pathname)));
+    recoPages.set(name, pages[pages.length - 1]);
   }
   if (recos.length) {
     let asked = false;
@@ -439,5 +452,42 @@ function boot(config: LumaConfigType, files: IntegrationFiles) {
     onFlush(() => recent() && check());
   }
 
+  // --- analytics (src/analytics, lbx-analytics): where the integration has an
+  // _analytics.ts (nothing is sent that it does not say), every page once it
+  // has loaded or with the first widget (its chains on our tiles listen then).
+  // Without one, `analytics: false`: our tiles queue nothing (core/tiles.ts).
+  if (!Object.keys(files.analytics ?? {}).length) g.analytics = false;
+  if (g.analytics !== false) {
+    const here = () => new URL(location.href);
+    const readQ = search ? searchReadQuery(search) : null;
+    const owns = (s: string) => {
+      if (s === 'autocomplete') return !!(ac && !ac.disabled && g.inputSelector);
+      if (s === 'search') return routes.some((r) => r.kind === 'search' && r.accepts(here()));
+      const reco = s.startsWith('recommender:') ? recoPages.get(s.slice(12)) : undefined;
+      return !!reco && !!setUp(`${s} active`, () => reco(here()));
+    };
+    const visit = (u: URL) => {
+      const r = routes.find((x) => x.accepts(u));
+      return !r ? null : r.kind === 'plp' ? `plp:${u.origin}${u.pathname}` : `search:${u.origin}${u.pathname}?${readQ?.(u) ?? ''}`;
+    };
+    let started = false;
+    /** Analytics listens (the setup has run). Until then, a page left keeps its dataLayer pushes for the next one's (core/kept.ts), up to `kept`. */
+    let live = false;
+    let kept = 0;
+    addEventListener('pagehide', () => {
+      if (!live && !(document as any).prerendering) kept = keepDl(g.dataLayer ?? 'dataLayer', kept);
+    });
+    startAnalytics = () => {
+      if (started) return;
+      started = true;
+      import('./analytics/start')
+        .then((m) => m.start({ config, files: files.analytics ?? {}, owns, visit, onUrlChange, kept: () => kept }))
+        .then(() => (live = true))
+        .catch((e) => reportError('analytics', e));
+    };
+    if (analyticsWanted) startAnalytics();
+    else afterLoad(() => startAnalytics());
+  }
+
   schedule();
 }

package/src/types.ts

@@ -94,6 +94,24 @@ export interface GlobalConfigType {
   /** Set in _init.ts: templates read them as r.c.<name>. Defaults: title, url, image, price. */
   computedAttributes?: Record<string, (r: Result) => unknown>;
   translations?: Translations;
+  /**
+   * `false`: no analytics at all, whatever `_analytics.ts` says (README
+   * "Analytics": what is sent is that file's).
+   */
+  analytics?: false;
+  /**
+   * The site's dataLayer, for analytics' `dl()` (default `dataLayer`): here,
+   * not in `_analytics.ts`, because the entry keeps its pushes for the next
+   * page when the visitor leaves before analytics has run.
+   */
+  dataLayer?: string;
+  /**
+   * Puts a product in the site's cart (`_init.ts`, or `_global/_widget.ts`:
+   * only widgets call it): what a click on `[data-lbx-cart]` in one of our
+   * tiles runs (announced to analytics first: `lumaCarts()`). `count`: the
+   * attribute's value (default 1).
+   */
+  addToCart?: (r: Result, o: { count: number; el: HTMLElement; event: MouseEvent }) => unknown;
 }
 
 /**

package/src/widgets/autocomplete/index.ts

@@ -27,6 +27,7 @@ import { cspNonce, setCss } from '../../core/styles';
 import type { WidgetContext } from '../../main';
 import type { AutocompleteConfigType, AutocompleteScope, Result } from '../../types';
 import css from './style-autocomplete.css?raw';
+import { picked } from '../../core/tiles';
 
 export const templates = byName(import.meta.glob('./template-*.ts', { eager: true, import: 'default' }));
 
@@ -274,6 +275,13 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     const intoMirror = (e: Event) => sheet && e.composedPath()[0] === mirror;
     box.addEventListener('pointerdown', (e) => e.pointerType !== 'touch' && !intoMirror(e) && e.preventDefault());
     box.addEventListener('mousedown', (e) => !intoMirror(e) && e.preventDefault());
+    // A middle click opens a suggestion in a new tab (no choose()): a click too (core/tiles.ts).
+    box.addEventListener('auxclick', (e) => {
+      if ((e as MouseEvent).button !== 1) return;
+      const a = (e.composedPath()[0] as Element | null)?.closest?.('a[href]') as HTMLAnchorElement | null;
+      const i = a ? items.findIndex((r) => r.type !== 'query' && !!r.c.url && new URL(r.c.url, location.href).href === a.href) : -1;
+      if (i >= 0) track(i);
+    });
     // "Show all products" has focus (Tab from the input): Shift+Tab goes back
     // to the input, Escape closes and goes back, Tab moves on as from the
     // input (focus put back on it, the browser's own Tab then leaves it: the
@@ -1123,12 +1131,24 @@ export const start = (ctx: WidgetContext<AutocompleteConfigType>) => {
     if (notCancelled && i.form) i.form.requestSubmit();
   };
 
+  /**
+   * A suggestion followed (a click on it, core/tiles.ts). Not a
+   * query suggestion (the search it starts is the API's), nor a "No results"
+   * link of the configuration: the fallback strip's products are clicks.
+   */
+  const track = (i: number) => {
+    const r = items[i];
+    const kind = (r as any)?.__empty;
+    if (r && r.type !== 'query' && (!kind || kind === 'fallback')) picked(r, i, 'lbx_autocomplete', ctx.global);
+  };
+
   function choose(idx: number) {
     const r = items[idx];
     if (!r) return;
     if (r.type === 'query') submitViaHost(plain(r.c.title));
     else if (safeUrl(r.c.url)) {
       const url = safeUrl(r.c.url);
+      track(idx);
       hook('onSelect', ac.onSelect, (r as any).__empty ? null : r);
       leave('select', () => location.assign(url));
     }

package/src/widgets/listing/element.ts

@@ -38,6 +38,7 @@ import type { Page } from '../../api';
 import { atWidth, CV_CSS, DIM_MS, LOADING_CSS, listingData, ssrStateId, viewport, type ListingView, type SsrState } from './view';
 import { dropStash, readStash, writeStash, type Stash } from './stash';
 import { keepViewport, leavingLink, nearEnd, preconnectImages, restoreScroll, scrollSpot } from './instant';
+import { watch } from '../../core/tiles';
 
 /** A re-render answered within DIM_MS (no dim shown) fades its list in from this opacity, over FADE_MS. */
 const FADE_FROM = 0.6;
@@ -392,6 +393,8 @@ export const startListing = async (ctx: WidgetContext<ListingConfig>, tk: Takeov
       if (!this.hasAttribute('aria-label')) this.setAttribute('aria-label', t('label'));
       if (!this.hasAttribute('tabindex')) this.tabIndex = -1;
       this.unsub = onUrlChange(() => this.resync());
+      // Product clicks and add-to-carts on our tiles: the framework's, never a template's (core/tiles.ts).
+      watch(this, { list: `lbx_${route.id}`, global: ctx.global, results: () => this.last?.hits.map(ctx.result) ?? [] });
       this.addEventListener('click', this.onClick);
       this.addEventListener('keydown', this.onKey);
       this.addEventListener('focusout', this.onFocusOut);

package/src/widgets/recommender/index.ts

@@ -18,7 +18,8 @@ import { onUrlChange } from '../../core/sense';
 import { setCss } from '../../core/styles';
 import { settleImages } from '../../core/support';
 import type { WidgetContext } from '../../main';
-import type { RecommenderConfigType } from '../../types';
+import type { RecommenderConfigType, Result } from '../../types';
+import { watch } from '../../core/tiles';
 
 export { default as css } from './style-recommender.css?raw';
 export const templates = byName(import.meta.glob('./template-*.ts', { eager: true, import: 'default' }));
@@ -52,6 +53,9 @@ const fetchHits = (ctx: Ctx, items: string[], signal?: AbortSignal) => {
   return signal ? untilAborted(p, signal) : p;
 };
 
+/** Our list, for its tiles' clicks and add-to-carts (core/tiles.ts). */
+const listOf = (ctx: Ctx) => ({ list: `lbx_reco_${ctx.id.slice(5)}`, global: ctx.global });
+
 const applyStyles = (ctx: Ctx) => {
   ctx.styles.forEach((c, i) => setCss(`itg:${ctx.id}:${i}`, c));
   useContrast();
@@ -67,6 +71,8 @@ interface State {
   tried: string | null;
   failures: number;
   retryAt: number;
+  /** What the tiles show (analytics: a click's result). */
+  results: Result[];
 }
 
 /** Retry a failed widget after 2, 4, 8, 16 s, then only when its inputs change. */
@@ -90,7 +96,8 @@ const load = (ctx: Ctx, el: HTMLElement, s: State, items: string[], key: string)
   fetchHits(ctx, items, ctl.signal)
     .then((hits) => {
       if (ctl.signal.aborted) return;
-      s.v.render('recommender-box-default', { ...ctx.helpers, results: hits.map(ctx.result) });
+      s.results = hits.map(ctx.result);
+      s.v.render('recommender-box-default', { ...ctx.helpers, results: s.results });
       settleImages(el, ctx.global.images?.fade !== false);
       el.style.minHeight = '';
       el.dataset.state = hits.length ? 'ready' : 'empty';
@@ -115,8 +122,9 @@ const load = (ctx: Ctx, el: HTMLElement, s: State, items: string[], key: string)
 /** Called by the entry once the placeholder is near the viewport. */
 export const attach = (ctx: Ctx, el: HTMLElement) => {
   applyStyles(ctx);
-  const s: State = { near: true, key: null, v: view(el, ctx.templates), tried: null, failures: 0, retryAt: 0 };
+  const s: State = { near: true, key: null, v: view(el, ctx.templates), tried: null, failures: 0, retryAt: 0, results: [] };
   attached.set(el, { ctx, s });
+  watch(el, { ...listOf(ctx), results: () => s.results });
   io.observe(el);
   sync();
 };
@@ -180,6 +188,7 @@ let pop: HTMLElement | null = null;
 let popView: ReturnType<typeof view> | null = null;
 let isOpen = false;
 let popCtl: AbortController | null = null;
+let popResults: Result[] = [];
 
 const close = () => {
   popCtl?.abort();
@@ -217,6 +226,7 @@ export const openPopup = (ctx: Ctx, item: string, near: DOMRect, notice?: Elemen
         // A modal library may set pointer-events: none on body, which inherits.
         pop.style.pointerEvents = 'auto';
         popView = view(pop, ctx.templates);
+        watch(pop, { ...listOf(ctx), results: () => popResults });
         // Dismissal: close button, Escape, a press outside, or leaving the page.
         addEventListener('keydown', (e) => isOpen && e.key === 'Escape' && close(), true);
         addEventListener('pointerdown', (e) => isOpen && !pop!.contains(e.target as Node) && close(), true);
@@ -231,7 +241,8 @@ export const openPopup = (ctx: Ctx, item: string, near: DOMRect, notice?: Elemen
         isOpen = false;
       }
       pop.setAttribute('aria-label', ctx.t('title'));
-      popView!.render('recommender-popup', { ...ctx.helpers, results: hits.map(ctx.result), close });
+      popResults = hits.map(ctx.result);
+      popView!.render('recommender-popup', { ...ctx.helpers, results: popResults, close });
       settleImages(pop, ctx.global.images?.fade !== false);
       pop.querySelector('[data-lbx-list]')?.scrollTo(0, 0);
       // Just below the host's notice, right-aligned with it.