@mparticle/web-sdk 3.26.0 → 3.27.0

package/dist/types/src/buttonTracking/buttonDescription.d.ts

@@ -1,6 +1,6 @@
 export type ButtonElementKind = 'button' | 'input' | 'role' | 'wallet' | 'link';
 export type LinkType = 'same_page' | 'internal' | 'outbound' | 'download';
-export type ButtonLabelSource = 'labelledby' | 'aria' | 'text' | 'alt' | 'title' | 'value' | 'none';
+export type ButtonLabelSource = 'labelledby' | 'aria' | 'text' | 'alt' | 'title' | 'value' | 'heading' | 'none';
 export interface IButtonClick {
     label?: string;
     labelSource: ButtonLabelSource;
@@ -11,12 +11,15 @@ export interface IButtonClick {
     testId?: string;
     controls?: string;
     form?: string;
+    group?: string;
     element: ButtonElementKind;
     type: string;
     linkType?: LinkType;
     linkDomain?: string;
+    linkPath?: string;
     fileExtension?: string;
     checked?: boolean;
+    pick?: true;
 }
 export declare function isLinkClick(click: IButtonClick): boolean;
 export declare function describeButtonClick(control: Element, path?: Array<EventTarget | null>): IButtonClick | undefined;

package/dist/types/src/buttonTracking/controls.d.ts

@@ -9,5 +9,6 @@ export declare function isWalletElement(element: Element): boolean;
 export declare function isQuietIntentControl(control: Element, isVendorWallet: boolean, isCart?: boolean): boolean;
 export declare function isWalletNamedControl(element: Element): boolean;
 export declare function isExcludedPath(path: Array<EventTarget | null>): boolean;
-export declare function findControl(path: Array<EventTarget | null>, included?: boolean): Element | undefined;
+export declare function findControl(path: Array<EventTarget | null>, included?: boolean, limit?: number): Element | undefined;
+export declare function findRoleControl(path: Array<EventTarget | null>, limit: number): Element | undefined;
 export declare function isUnsafeTextSource(element: Element, own?: Element): boolean;

package/dist/types/src/buttonTracking/labelMasking.d.ts

@@ -1,2 +1,3 @@
 export declare const MAX_RAW_LABEL_LENGTH = 128;
 export declare function maskLabel(raw: string | null | undefined): string | undefined;
+export declare function maskNumbers(text: string): string | undefined;

package/dist/types/src/pageUrl.d.ts

@@ -2,6 +2,7 @@ import { valueof } from './utils';
 export declare const UrlMode: {
     readonly Path: "path";
     readonly Full: "full";
+    readonly Report: "report";
 };
 export type UrlMode = valueof<typeof UrlMode>;
 export declare const EXCLUDED_URL_QUERY_PARAMS: string[];

package/dist/types/src/pathMasking.d.ts

@@ -0,0 +1,7 @@
+export declare const LEFTOVER_ESCAPE: RegExp;
+export declare function hidesNextSegment(route: string): boolean;
+export declare function decodeFully(text: string): string | undefined;
+export declare function routeSegment(segments: string[], i: number): string;
+export declare function isTokenSegment(segment: string): boolean;
+export declare function pagePath(pathname: string): string;
+export declare function pageUrlPath(pathname: string): string;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@mparticle/web-sdk",
-    "version": "3.26.0",
+    "version": "3.27.0",
     "description": "mParticle core SDK for web applications",
     "license": "Apache-2.0",
     "keywords": [

package/src/buttonTracking/buttonClickEvent.ts

@@ -5,6 +5,7 @@ import KitFilterHelper from '../kitFilterHelper';
 import { BaseEvent, SDKEvent } from '../sdkRuntimeModels';
 import { EventType, MessageType } from '../types';
 import { IButtonClick } from './buttonDescription';
+import { pagePath } from '../pathMasking';
 
 // Marks an automatically logged button click, like `is_auto_page_view`.
 export const AUTO_BUTTON_ATTRIBUTE = 'is_auto_button_click';
@@ -27,7 +28,7 @@ const clickAttributes = (
         label_source: click.labelSource,
         element: click.element,
         type: click.type,
-        path: pathname,
+        path: pagePath(pathname),
         hostname: window.location.hostname,
     };
     // Optional fields are left out when the control has no safe value for them.
@@ -40,8 +41,10 @@ const clickAttributes = (
         test_id: click.testId,
         controls: click.controls,
         form: click.form,
+        group: click.group,
         link_type: click.linkType,
         link_domain: click.linkDomain,
+        link_path: click.linkPath,
         file_extension: click.fileExtension,
     };
     for (const key of Object.keys(optional)) {
@@ -72,8 +75,9 @@ export const buildButtonClickEvent = (
 
 // One custom event per click on a link that leaves the page. Typed Other, not
 // Navigation, so no kit reads it as a page change. A plain link to another page
-// of the site goes without its text, which can name the shopper ("Hi, Jane");
-// a button or wallet acting as a link keeps its name.
+// of the site goes without its text, which can name the shopper ("Hi, Jane"), and
+// with its destination path instead; a button or wallet acting as a link keeps
+// its name.
 export const buildLinkClickEvent = (
     click: IButtonClick,
     pathname: string
@@ -114,8 +118,10 @@ const CLICK_ATTRIBUTES = [
     'test_id',
     'controls',
     'form',
+    'group',
     'link_type',
     'link_domain',
+    'link_path',
     'file_extension',
     'checked',
 ];

package/src/buttonTracking/buttonDescription.ts

@@ -1,12 +1,20 @@
 import { isFunction } from '../utils';
 import {
+    CONTROL_SELECTOR,
     hasComposedAncestor,
     isUnsafeTextSource,
     isWalletElement,
     nameWords,
     someComposedAncestor,
 } from './controls';
-import { maskLabel, MAX_RAW_LABEL_LENGTH } from './labelMasking';
+import { maskLabel, maskNumbers, MAX_RAW_LABEL_LENGTH } from './labelMasking';
+import {
+    decodeFully,
+    hidesNextSegment,
+    isTokenSegment,
+    LEFTOVER_ESCAPE,
+    routeSegment,
+} from '../pathMasking';
 
 // Describes a clicked button for auto button tracking: its masked name, icon,
 // hand-written identifiers and kind. Never reads form field values.
@@ -25,6 +33,7 @@ export type ButtonLabelSource =
     | 'alt'
     | 'title'
     | 'value'
+    | 'heading'
     | 'none';
 
 export interface IButtonClick {
@@ -37,12 +46,16 @@ export interface IButtonClick {
     testId?: string;
     controls?: string;
     form?: string;
+    group?: string;
     element: ButtonElementKind;
     type: string;
     linkType?: LinkType;
     linkDomain?: string;
+    linkPath?: string;
     fileExtension?: string;
     checked?: boolean;
+    // A pick among options or tabs, which waits for the batch interval.
+    pick?: true;
 }
 
 function elementKind(control: Element): ButtonElementKind {
@@ -53,7 +66,13 @@ function elementKind(control: Element): ButtonElementKind {
     if (tag === 'button' || tag === 'input') {
         return tag;
     }
-    return control.matches('a[href]:not([role="button"])') ? 'link' : 'role';
+    // A link run by script reads as a link, as an anchor does, so whoever reads
+    // the click treats it the same.
+    return control.matches(
+        'a[href]:not([role="button"]), [role~="link"]:not([role~="button"])'
+    )
+        ? 'link'
+        : 'role';
 }
 
 const NOT_RENDERED =
@@ -253,7 +272,7 @@ function accessibleName(
     } else if (readable && isShown(control)) {
         const text = renderedText(control);
         if (text === undefined) {
-            return { source: 'none' };
+            return headingName(control) || { source: 'none' };
         }
         if (text) {
             return { raw: text, source: 'text' };
@@ -263,6 +282,12 @@ function accessibleName(
             return { raw: alt, source: 'alt' };
         }
     }
+    if (!(control instanceof HTMLInputElement) && isShown(control)) {
+        const heading = headingName(control);
+        if (heading) {
+            return heading;
+        }
+    }
     const title = nonBlank(control.getAttribute('title'));
     if (title) {
         return { raw: title, source: 'title' };
@@ -270,6 +295,33 @@ function accessibleName(
     return { source: 'none' };
 }
 
+// A card whose text runs too long to keep, or has too many parts to read, is
+// named by its first heading, as a product or menu card usually is. Not a card
+// holding a form field, nor one that takes in slotted content or holds a
+// shadow root, whose fields the form field check can't see.
+function headingName(
+    control: Element
+): { raw: string; source: ButtonLabelSource } | undefined {
+    if (
+        isUnsafeTextSource(control) ||
+        control.shadowRoot ||
+        control.querySelector('slot') ||
+        // A custom element can hide fields in a closed shadow root, which
+        // nothing outside it can see.
+        control.tagName.indexOf('-') !== -1 ||
+        Array.from(control.querySelectorAll('*')).some(
+            element =>
+                !!element.shadowRoot || element.tagName.indexOf('-') !== -1
+        )
+    ) {
+        return undefined;
+    }
+    const text = textOf(
+        control.querySelector('h1, h2, h3, h4, h5, h6, [role="heading"]')
+    );
+    return text ? { raw: text, source: 'heading' } : undefined;
+}
+
 const ICON_CLASS = /^(?:fa|fas|far|fal|icon|bi|glyphicon|ti|mdi|ri|la|lucide|ion|feather|ph)-([a-z][a-z-]{1,31})$/;
 // Size, style and animation classes that share the icon prefixes.
 const ICON_MODIFIER = /^(?:solid|regular|light|thin|duotone|brands|sharp|fw|lg|xs|sm|xl|spin|pulse|border|inverse|stack|flip(?:-[a-z]+)?|rotate(?:-[a-z]+)?|pull-[a-z]+)$/;
@@ -331,6 +383,13 @@ function stableIdentifier(value: string | null): string | undefined {
         : undefined;
 }
 
+// A picker's input name, which names its question. Sites often end it with the
+// id of the product it belongs to (`color-swatches-48213907`); without that
+// number it still names the question.
+function questionName(value: string | null): string | undefined {
+    return stableIdentifier(value && value.trim().replace(/[-_][0-9]{4,}$/, ''));
+}
+
 const TEST_ID_ATTRIBUTES = [
     'data-testid',
     'data-test-id',
@@ -378,24 +437,79 @@ function formIdentifier(control: Element): string | undefined {
 
 // The browser's normalised type: a button defaults to 'submit' and an unknown
 // input type reads as 'text'. A native button or input reports its own type, a
-// wallet-named one included; any other control, such as a role button or a
-// vendor's wallet element, reads as 'button'.
+// wallet-named one included. A role control that isn't a button reads as its
+// role: 'radio', 'option', 'tab', 'link' and so on. Any other control, such as
+// a role button or a vendor's wallet element, reads as 'button'.
+const CONTROL_ROLES = [
+    'radio',
+    'menuitemradio',
+    'checkbox',
+    'menuitemcheckbox',
+    'switch',
+    'option',
+    'tab',
+    'link',
+];
+
 function controlType(control: Element): string {
     const tag = control.tagName.toLowerCase();
-    return tag === 'button' || tag === 'input'
-        ? (control as HTMLButtonElement | HTMLInputElement).type
-        : 'button';
+    if (tag === 'button' || tag === 'input') {
+        return (control as HTMLButtonElement | HTMLInputElement).type;
+    }
+    if (control.matches('[role~="button"]')) {
+        return 'button';
+    }
+    const roles = (control.getAttribute('role') || '').trim().split(/\s+/);
+    for (const role of roles) {
+        if (CONTROL_ROLES.indexOf(role) !== -1) {
+            return role;
+        }
+    }
+    return 'button';
 }
 
 interface ILinkDetails {
     type: LinkType;
     domain?: string;
+    path?: string;
     fileExtension?: string;
 }
 
+// The page a link to another page of the site opens: its decoded path alone,
+// since an id in a path can point at one shopper. A segment holding a token,
+// or following a route word that names a person or carries a code, goes as
+// `*`, and numbers in any script are masked as in labels. Dropped when it
+// holds an @, `;` or `=` (session ids and matrix parameters), is too long to
+// be a route, or the browser can't mask every script's digits.
+function linkPath(link: HTMLAnchorElement): string | undefined {
+    // Each segment decodes on its own, so a literal `%` in one never stops the
+    // next from decoding.
+    const decoded = link.pathname.split('/').map(decodeFully);
+    if (decoded.some(segment => segment === undefined)) {
+        return undefined;
+    }
+    const path = decoded.join('/');
+    if (
+        path.length > MAX_RAW_LABEL_LENGTH ||
+        /[@;=]/.test(path) ||
+        LEFTOVER_ESCAPE.test(path)
+    ) {
+        return undefined;
+    }
+    const segments = path.split('/');
+    const masked = segments.map((segment, i) =>
+        isTokenSegment(segment) ||
+        (i > 0 && segment && hidesNextSegment(routeSegment(segments, i)))
+            ? '*'
+            : segment
+    );
+    return maskNumbers(masked.join('/'));
+}
+
 // Reads the link's own resolved URL parts, never its full href: only the hostname of
-// a link that leaves the site and the extension of a file it downloads travel.
-// mailto:, tel: and other schemes give undefined.
+// a link that leaves the site, the path of one to another page of the site and the
+// extension of a file it downloads travel. mailto:, tel: and other schemes give
+// undefined.
 function describeLink(link: Element): ILinkDetails | undefined {
     const href = (link.getAttribute('href') || '').trim();
     if (!href || href.charAt(0) === '#') {
@@ -429,7 +543,7 @@ function describeLink(link: Element): ILinkDetails | undefined {
     return link.pathname === window.location.pathname &&
         link.search === window.location.search
         ? { type: 'same_page' }
-        : { type: 'internal' };
+        : { type: 'internal', path: linkPath(link) };
 }
 
 // Whether a described click is on a link that leaves the page, logged as a link
@@ -442,7 +556,7 @@ export function isLinkClick(click: IButtonClick): boolean {
 // fallbacks, so any of its tokens counts.
 const CHOICE =
     'input[type="checkbox"], input[type="radio"], [role~="checkbox"], [role~="radio"], ' +
-    '[role~="switch"], [role~="menuitemcheckbox"], [role~="menuitemradio"]';
+    '[role~="switch"], [role~="menuitemcheckbox"], [role~="menuitemradio"], [role~="option"]';
 const RADIO_ROLE = '[role~="radio"], [role~="menuitemradio"]';
 
 function boxOf(element: Element): Element | null {
@@ -512,43 +626,231 @@ export function describeButtonClick(
     // radio's id, test id and the panel it opens name the option picked, so
     // only the name of its input, the question, goes with it. A wrapper's own
     // name, or a role radio's, can name the option instead.
-    const radio = isRadio(choice);
+    // An option of a list box, like a radio, names the answer picked.
+    const radio =
+        isRadio(choice) || (!!choice && choice.matches('[role~="option"]'));
     const named = !radio
         ? control
-        : choice instanceof HTMLInputElement
+        : choice instanceof HTMLInputElement &&
+          !choice.matches('[role~="option"]')
         ? choice
         : null;
-    const name = choice ? undefined : accessibleName(control);
+    // A link run by script has no address to say where it goes, so it goes
+    // without its text, as a plain link to another page of the site does: the
+    // text can name the shopper ("Hi, Jane").
+    // A native button keeps its name whatever its role, as it always has.
+    const textless =
+        !!choice ||
+        (!link &&
+            element !== 'wallet' &&
+            control.matches('[role~="link"]') &&
+            !control.matches(CONTROL_SELECTOR));
+    const name = textless ? undefined : accessibleName(control);
     const label = name ? maskLabel(name.raw) : undefined;
     return {
         label,
         labelSource: label ? name.source : 'none',
         // Kept on its own as well: it often says more than the visible text,
         // such as which item a remove button removes.
-        ariaLabel: choice
+        ariaLabel: textless
             ? undefined
             : maskLabel(control.getAttribute('aria-label')),
         icon: choice ? undefined : iconHint(control),
         elementId: radio
             ? undefined
             : stableIdentifier(control.getAttribute('id')),
-        elementName: stableIdentifier(named && named.getAttribute('name')),
+        elementName: (choice ? questionName : stableIdentifier)(
+            named && named.getAttribute('name')
+        ),
         testId: radio
             ? undefined
             : firstIdentifier(control, TEST_ID_ATTRIBUTES),
         controls: radio ? undefined : controlsIdentifier(control),
         form: formIdentifier(control),
+        group: choice ? groupName(choice) : undefined,
         element,
         type: controlType(control),
         linkType: link ? link.type : undefined,
         linkDomain: link ? link.domain : undefined,
+        linkPath: link ? link.path : undefined,
         fileExtension: link ? link.fileExtension : undefined,
         // The box as the click left it: the browser toggles it before the click
         // reaches listeners, and puts it back if the click is cancelled.
         checked: box ? box.checked : undefined,
+        pick: choice || control.matches('[role~="tab"]') ? true : undefined,
     };
 }
 
+// The question a picker answers, from the group around it: the group's
+// aria-label, aria-labelledby or legend, masked like a label and cut at its
+// first colon, since a legend can repeat the pick ("Color: Navy"). Never the
+// option's own text, which is the shopper's answer.
+const NAMED_GROUP = '[role="radiogroup"], [role="listbox"], [role="group"], fieldset';
+// A control such as the button that opens a list box shows the option picked.
+const NOT_A_QUESTION =
+    CHOICE +
+    ', ' +
+    CONTROL_SELECTOR +
+    ', a[href], input, select, textarea, slot, [aria-haspopup], [role~="button"], ' +
+    '[role~="link"], [role~="tab"], [role~="combobox"]';
+
+const OPTION_KINDS = [
+    'radio',
+    'menuitemradio',
+    'checkbox',
+    'menuitemcheckbox',
+    'switch',
+    'option',
+];
+
+function optionKind(option: Element): string | undefined {
+    if (option instanceof HTMLInputElement) {
+        return option.type;
+    }
+    const roles = (option.getAttribute('role') || '').trim().split(/\s+/);
+    return roles.filter(role => OPTION_KINDS.indexOf(role) !== -1)[0];
+}
+
+// Whether two options answer the same question. A native box shares its
+// question only with a box of the same name in the same form, as the browser
+// groups radios, so separate shipping and billing radios ask two.
+function sameQuestion(option: Element, choice: Element): boolean {
+    if (!(choice instanceof HTMLInputElement)) {
+        // A role option answers only within its own radio group or list box.
+        const container = '[role="radiogroup"], [role="listbox"]';
+        return (
+            !(option instanceof HTMLInputElement) &&
+            optionKind(option) === optionKind(choice) &&
+            option.closest(container) === choice.closest(container)
+        );
+    }
+    const name = choice.getAttribute('name');
+    return (
+        option instanceof HTMLInputElement &&
+        option.type === choice.type &&
+        !!name &&
+        option.getAttribute('name') === name &&
+        option.form === choice.form
+    );
+}
+
+// Whether a group offers another answer to the question picked: a shown option
+// to the same question that isn't part of the one picked. A card around one
+// address radio and a "make default" checkbox, or around a role radio and the
+// hidden input behind it, offers none.
+function holdsOptions(group: Element, choice: Element): boolean {
+    const options = group.querySelectorAll(CHOICE);
+    for (let i = 0; i < options.length; i++) {
+        const option = options[i];
+        if (
+            !option.contains(choice) &&
+            !choice.contains(option) &&
+            sameQuestion(option, choice) &&
+            isShown(option, group) &&
+            isVisible(option) &&
+            // A fully transparent option, as a native input behind a styled
+            // one often is, shows the shopper no second answer.
+            !someComposedAncestor(
+                option,
+                node => window.getComputedStyle(node).opacity === '0',
+                group
+            )
+        ) {
+            return true;
+        }
+    }
+    return false;
+}
+
+// The elements an option is named by: those its aria-labelledby points at and
+// a native box's labels.
+function optionLabels(option: Element, root: Document | ShadowRoot): Element[] {
+    const labels: Element[] =
+        option instanceof HTMLInputElement && option.labels
+            ? Array.from(option.labels)
+            : [];
+    (option.getAttribute('aria-labelledby') || '')
+        .trim()
+        .split(/\s+/)
+        .forEach(ref => {
+            const target =
+                ref && root.getElementById ? root.getElementById(ref) : null;
+            if (target) {
+                labels.push(target);
+            }
+        });
+    return labels;
+}
+
+// The group asking the question a pick answers. A role radio's is its
+// radiogroup and an option's its list box; a role toggle, such as a switch,
+// stands alone. A native box's is the nearest group offering other answers,
+// since a group around one option, such as a saved address card, can be
+// named by that option.
+function questionGroup(choice: Element): Element | null {
+    if (!(choice instanceof HTMLInputElement)) {
+        const container = choice.matches('[role~="option"]')
+            ? choice.closest('[role="listbox"]')
+            : choice.matches('[role~="radio"]')
+            ? choice.closest('[role="radiogroup"]')
+            : null;
+        return container && holdsOptions(container, choice) ? container : null;
+    }
+    let group = choice.closest(NAMED_GROUP);
+    while (group && !holdsOptions(group, choice)) {
+        group = group.parentElement
+            ? group.parentElement.closest(NAMED_GROUP)
+            : null;
+    }
+    return group;
+}
+
+function groupName(choice: Element): string | undefined {
+    const group = questionGroup(choice);
+    if (!group) {
+        return undefined;
+    }
+    let raw = nonBlank(group.getAttribute('aria-label'));
+    if (!raw) {
+        const ids = group.getAttribute('aria-labelledby');
+        const legend =
+            group.tagName === 'FIELDSET'
+                ? Array.from(group.children).filter(
+                      child => child.tagName === 'LEGEND'
+                  )[0]
+                : undefined;
+        const root = (isFunction(group.getRootNode)
+            ? group.getRootNode()
+            : document) as Document | ShadowRoot;
+        const source = ids
+            ? root.getElementById
+                ? root.getElementById(ids.trim().split(/\s+/)[0])
+                : null
+            : legend || null;
+        // A label that is, holds or sits in an option or a control, or in an
+        // option's label, would name the answer.
+        const holder = source ? source.closest('label') : null;
+        // Nor one that holds, or sits in, what an option of the group names
+        // itself by.
+        const labelsOption =
+            !!source &&
+            Array.from(group.querySelectorAll(CHOICE)).some(option =>
+                optionLabels(option, root).some(
+                    label => source.contains(label) || label.contains(source)
+                )
+            );
+        raw =
+            source &&
+            !labelsOption &&
+            !hasComposedAncestor(source, NOT_A_QUESTION) &&
+            !source.querySelector(NOT_A_QUESTION) &&
+            !(holder && (holder.control || holder.querySelector(CHOICE)))
+                ? textOf(source)
+                : undefined;
+    }
+    return raw ? maskLabel(raw.split(':')[0]) : undefined;
+}
+
 // A question about payment, read from the names its author gave it, so
 // "checkout[payment_gateway]", "paymentMethod" and "tender_type" all count and
 // "payee" does not. A radio's input name is its question; its group or

package/src/buttonTracking/buttonTracker.ts

@@ -16,7 +16,7 @@ import {
     classifyPaymentFrame,
     PaymentFrameFamily,
 } from './checkoutIntent';
-import { findControl, isExcludedPath } from './controls';
+import { findControl, findRoleControl, isExcludedPath } from './controls';
 
 // State lives on `window`, like APV, so a re-executed bundle never doubles the
 // listeners. Inspect `window.__mpBtn__` in a console to see if one is live.
@@ -26,7 +26,9 @@ const THROTTLE_MS = 2000;
 const SUBMIT_AFTER_COMMIT_CLICK_MS = 1000;
 // Apple Pay must begin inside the tap's own handler, so the tap is this recent.
 const APPLE_PAY_AFTER_CLICK_MS = 1000;
-const PATH_LIMIT = 12;
+// How far up from the clicked element a control is looked for. Checkout intent
+// keeps findControl's own 12; logging looks further, past deep product cards.
+const PATH_LIMIT = 20;
 // A ceiling, not a dedupe: a held Enter key or browser automation fires a
 // trusted click per repeat, and each one is forwarded to every kit.
 const PAGE_EVENT_LIMIT = 100;
@@ -411,12 +413,18 @@ export class ButtonTracker {
                 : [];
             const excluded = isExcludedPath(path);
             const control = excluded ? undefined : findControl(path, true);
-            if (control) {
+            const logged =
+                control ||
+                (excluded
+                    ? undefined
+                    : findControl(path, true, PATH_LIMIT) ||
+                      findRoleControl(path, PATH_LIMIT));
+            if (logged) {
                 // With links alone, only an anchor can be logged.
                 click =
                     logsEvents &&
-                    (this.logButtons || control.matches('a[href]'))
-                        ? describeButtonClick(control, path)
+                    (this.logButtons || logged.matches('a[href]'))
+                        ? describeButtonClick(logged, path)
                         : undefined;
                 if (click) {
                     asLink = this.logLinks && isLinkClick(click);
@@ -428,15 +436,17 @@ export class ButtonTracker {
                         !asLink &&
                         !(
                             click.linkType === 'internal' &&
-                            control.matches('a[href]:not([role="button"])')
+                            logged.matches('a[href]:not([role="button"])')
                         );
                     if (!asLink && !asButton) {
                         click = undefined;
                     }
                 }
                 if (click && click.checked !== undefined) {
-                    box = control as HTMLInputElement;
+                    box = logged as HTMLInputElement;
                 }
+            }
+            if (control) {
                 // Checkout intent is only worked out when the kit can use it.
                 const intent = signalsKit
                     ? classifyIntent(control, pathname)
@@ -546,11 +556,12 @@ export class ButtonTracker {
         );
         // Only a click waiting for the batch interval is sent early: a held
         // one goes out when released, and with batching off it already has.
-        // A checkbox or radio waits for the batch, since choosing an option
-        // doesn't leave the page the way a confirm click can.
+        // A pick, such as a checkbox, a radio or a tab, waits for the batch,
+        // since choosing an option doesn't leave the page the way a confirm
+        // click can.
         if (
             !this.leaving &&
-            click.checked === undefined &&
+            !click.pick &&
             this.queuedForUpload() > queued
         ) {
             this.uploadNow();