@mparticle/web-sdk 3.21.0 → 3.23.0

package/src/buttonTracking/checkoutIntent.ts

@@ -1,8 +1,10 @@
 import {
     CONTROL_SELECTOR,
+    hasComposedAncestor,
+    isQuietIntentControl,
     isRoktElement,
     isUnsafeTextSource,
-    isWalletElement,
+    vendorButtonKind,
 } from './controls';
 
 // Classifies a click, submit or frame focus as checkout intent for the Rokt kit.
@@ -14,31 +16,48 @@ export type CheckoutIntentKind =
     | 'frame';
 
 const checkoutPath = /(?:^|\/)(?:checkouts?|payment|order|kasse|paiement|commander?|pago)(?:\/|$)/i;
-const exclusions = new RegExp(
+// English look-alikes are whole words; the other languages stay substring
+// matches, since several of them do not separate words with spaces.
+const englishExclusions = new RegExp(
+    '\\b(?:coupon|promo(?: code)?|newsletter|sign in|sign up|log in|login|add to (?:cart|bag|basket)|' +
+        'gift card balance|(?:add|apply|redeem|check|enter|use) (?:a |an |your )?gift card|pay later|' +
+        'interest free|as low as|learn more|prequalify|apply (?:now|for)|payment plan|available|accepted|' +
+        'we accept|set up|add money|reload|top up|add to (?:apple|google) wallet|connect|link your|unlink|' +
+        'remove|delete|edit|change|manage|use a different|switch)\\b|^pay in$|\\bpay in (?:installments|instalments)\\b'
+);
+const otherExclusions = new RegExp(
     [
-        'coupon|promo|newsletter|sign in|add to cart|gift card|pay later|pay in|payment plan|learn more',
         'gutschein|anmelden|warenkorb|bon cadeau|connexion|panier|cupón|iniciar sesión|carrito',
         'carrello|codice sconto|accedi|buono regalo|winkelwagen|kortingscode|inloggen|cadeaubon|achteraf betalen',
         'カート|クーポン|ログイン|会員登録|ギフト|後払い|メルマガ',
     ].join('|')
 );
-const commits = new RegExp(
-    '^(?:' +
-        [
-            '(?:place|submit|complete|confirm|finali[sz]e)(?!(?: [^ ]+){0,2} (?:another|new|next)(?: |$))(?: [^ ]+){0,2} (?:order|purchase|booking|reservation|payment|checkout)',
-            'pay(?: securely)?(?: now)?|confirm and pay|order and pay|order with obligation to pay',
-            '(?:jetzt )?(?:zahlungs|kosten)pflichtig (?:bestellen|buchen)|(?:jetzt )?bezahlen|kauf abschließen|bestellung abschließen',
-            'commander et payer|payer(?: maintenant)?|(?:confirmer|finaliser) (?:ma |la )?commande',
-            "valider et payer|confirmer et payer|commande avec obligation de paiement|finaliser l'achat",
-            '(?:realizar|confirmar|completar) (?:el |mi |la )?(?:pedido|compra|reserva)|finalizar (?:el |mi )?pedido|pagar(?: ahora)?',
-            'pedido con obligación de pago',
-            "(?:effettua|conferma|concludi|completa) (?:l'|il )?(?:ordine|acquisto)|ordine con obbligo di pagamento",
-            'paga(?: ora| adesso)?|ordina e paga',
-            '(?:nu )?betalen|bestellen en betalen|bestelling plaatsen|plaats bestelling|bestelling afronden',
-            'bestelling met betalingsverplichting',
-            '(?:この内容で|上記の?内容で)?ご?(?:注文|購入|予約|決済|お?支払い?)を?(?:確定|完了)(?:する)?',
-            '(?:この内容で|上記の?内容で)ご?(?:注文|購入|予約)する|ご?注文する|決済する|(?:今すぐ|を)?支払う',
-        ].join('|') +
+const englishCommits =
+    '(?:(?:agree|accept|review) and )?(?:place|submit|complete|confirm|finali[sz]e)' +
+    '(?!(?: [^ ]+){0,2} (?:another|new|next)(?: |$))(?! (?:[^ ]+ )?gift card)' +
+    '(?: [^ ]+){0,2} (?:order|purchase|booking|reservation|payment|checkout|transaction)' +
+    '(?: now| securely| and pay| (?:with|using) [^ ]+(?: [^ ]+)?)?(?: (?:total|subtotal|items?|tickets?))?' +
+    '|pay(?: securely)?(?: now)?|(?:confirm|agree|accept|submit|order|book) and pay' +
+    '|pay and place (?:my |your )?order|order with obligation to pay';
+const otherCommits = [
+    '(?:jetzt )?(?:zahlungs|kosten)pflichtig (?:bestellen|buchen)|(?:jetzt )?bezahlen|kauf abschließen|bestellung abschließen',
+    'commander et payer|payer(?: maintenant)?|(?:confirmer|finaliser) (?:ma |la )?commande',
+    "valider et payer|confirmer et payer|commande avec obligation de paiement|finaliser l'achat",
+    '(?:realizar|confirmar|completar) (?:el |mi |la )?(?:pedido|compra|reserva)|finalizar (?:el |mi )?pedido|pagar(?: ahora)?',
+    'pedido con obligación de pago',
+    "(?:effettua|conferma|concludi|completa) (?:l'|il )?(?:ordine|acquisto)|ordine con obbligo di pagamento",
+    'paga(?: ora| adesso)?|ordina e paga',
+    '(?:nu )?betalen|bestellen en betalen|bestelling plaatsen|plaats bestelling|bestelling afronden',
+    'bestelling met betalingsverplichting',
+    '(?:この内容で|上記の?内容で)?ご?(?:注文|購入|予約|決済|お?支払い?)を?(?:確定|完了)(?:する)?',
+    '(?:この内容で|上記の?内容で)ご?(?:注文|購入|予約)する|ご?注文する|決済する|(?:今すぐ|を)?支払う',
+].join('|');
+const commits = new RegExp('^(?:' + englishCommits + '|' + otherCommits + ')$');
+// A plain link is navigation, so in English only an order or purchase it
+// places, submits or completes counts as the confirm click.
+const linkCommits = new RegExp(
+    '^(?:(?:place|submit|complete)(?!(?: [^ ]+){0,2} (?:another|new|next)(?: |$))(?: [^ ]+){0,2} (?:order|purchase)|' +
+        otherCommits +
         ')$'
 );
 const routeGatedCommits = new RegExp(
@@ -48,7 +67,9 @@ const routeGatedCommits = new RegExp(
 const steps = new RegExp(
     '^(?:' +
         [
-            'checkout|check out|check-out|continue to payment|proceed to checkout',
+            "(?:let's |lets |go to |proceed to |secure )?(?:check ?out|checkout)(?: now| securely| as guest)?",
+            '(?:continue|proceed) to (?:payment|review|billing|shipping|delivery|order review)|review (?:my |your )?order',
+            'guest checkout|(?:pay|continue|check ?out) (?:with|by) (?:card|credit card|debit card|credit or debit card)',
             'zur kasse|zur kasse gehen|auschecken|weiter zur zahlung',
             'passer à la caisse|continuer vers le paiement|procéder au paiement',
             'ir a caja|continuar al pago|tramitar pedido',
@@ -58,43 +79,104 @@ const steps = new RegExp(
         ].join('|') +
         ')$'
 );
-const wallets = /^(?:apple pay|google pay|paypal|venmo|amazon pay|shop pay|klarna|afterpay|affirm)$/;
-// Exact HTTPS hosts of hosted wallet and payment frames.
-const frameHosts = new Set([
-    'www.paypal.com',
-    'www.sandbox.paypal.com',
+const WALLET_NAMES =
+    'apple pay|google pay|paypal|venmo|amazon pay|shop pay|klarna|afterpay|clearpay|cash app(?: pay)?|affirm|sezzle|samsung pay';
+const WALLET_VERBS =
+    'pay|buy|purchase|order|book|donate|subscribe|check ?out|checkout|express checkout|continue|proceed|' +
+    'complete purchase|place (?:my |your )?order';
+// "Pay with Klarna", "Buy with GPay", "Continue to PayPal".
+const walletPhrases = new RegExp(
+    '^(?:(?:' + WALLET_VERBS + ')(?: now| securely)? (?:with|using|via|through|by) (?:' + WALLET_NAMES +
+        ')(?: express(?: checkout)?| checkout)?|(?:continue|proceed|go) (?:to|with) (?:' + WALLET_NAMES + '))$'
+);
+// A wallet's own name on a button: "PayPal", "Klarna checkout", "Apple Pay logo".
+const walletBrands = new RegExp(
+    '^(?:' + WALLET_NAMES + ')(?: (?:checkout|check out|express(?: checkout)?|express pay|buy now|pay now|pay|now)' +
+        '| (?:logo|icon|mark|button)(?: (?:logo|icon|mark|button))*)?$'
+);
+// Exact HTTPS hosts of hosted wallet button frames.
+const walletFrameHosts = new Set([
     'pay.google.com',
     'applepay.cdn-apple.com',
-    'js.stripe.com',
-    'checkoutshopper-live.adyen.com',
     'payments.amazon.com',
     'pay.shopify.com',
 ]);
+// PayPal serves its buttons and its card fields and pay-later messages from
+// the same hosts; only the button frames are wallet taps.
+const paypalFrameHosts = new Set(['www.paypal.com', 'www.sandbox.paypal.com']);
+const PAYPAL_BUTTON_FRAME = /^\/smart\/(?:buttons|menu)(?:\/|$)/;
+// Stripe's quick-pay button frames; its other frames are card and form fields.
+const STRIPE_WALLET_FRAME = /\/elements-inner-(?:payment-request|express-checkout)-/;
+// Hosted card-entry and fingerprint frames: focus there is typing card details.
+const CARD_FRAME_DOMAINS = [
+    'adyen.com',
+    'braintreegateway.com',
+    'cybersource.com',
+    'squarecdn.com',
+    'checkout.com',
+];
 // Keep these classes ASCII-only in source bytes to avoid mojibake parse failures
 // when a host page forces non-UTF-8 decoding before JavaScript parse.
 const TYPOGRAPHIC_APOSTROPHES = /[\u2019\u2018]/g;
 const CURRENCY_AND_NUMBER_CHARS =
     /[0-9\uFF10-\uFF19$\u20AC\u00A3\u00A5\uFFE5\u20B9\u5186.,\uFF0C]/g;
+const BRACKETED = /\([^()]*\)|\[[^[\]]*\]|\uFF08[^\uFF08\uFF09]*\uFF09|\uFF3B[^\uFF3B\uFF3D]*\uFF3D|\u3010[^\u3010\u3011]*\u3011/g;
+// Spaces, punctuation, separators, arrows and symbols, CJK and full-width forms
+// included, plus emoji halves and variation selectors.
+const EDGE =
+    '[\\s!-/:-@\\[-`{-~\\u00A1-\\u00BF\\u00D7\\u00F7\\u2000-\\u206F\\u20A0-\\u20CF\\u2190-\\u2BFF' +
+    '\\u3000-\\u3003\\u3008-\\u3011\\u3014-\\u301F\\u30FB\\uD800-\\uDFFF\\uFE00-\\uFE0F' +
+    '\\uFF01-\\uFF0F\\uFF1A-\\uFF20\\uFF3B-\\uFF40\\uFF5B-\\uFF65]+';
+const EDGE_SYMBOLS = new RegExp('^' + EDGE + '|' + EDGE + '$', 'g');
 
 function getIntentRouteClass(pathname: string): 'checkout_path' | 'other' {
     return checkoutPath.test(pathname) ? 'checkout_path' : 'other';
 }
 
+const SEPARATORS = /[-_|·•]/g;
+const CURRENCY_CODES = /(?:^| )(?:usd|aud|cad|nzd|gbp|eur|chf|sgd|hkd|jpy|inr|mxn)(?= |$)|\b(?:a|au|ca|c|us|nz|hk|s)\$/g;
+const WALLET_ALIASES: Array<[RegExp, string]> = [
+    [/\bapplepay\b/g, 'apple pay'],
+    [/\bg ?pay\b/g, 'google pay'],
+    [/\bamazonpay\b/g, 'amazon pay'],
+    [/\bshoppay\b/g, 'shop pay'],
+    [/\bcashapp\b/g, 'cash app'],
+];
+// Labels longer than this are sentences: they neither match nor veto intent.
+const MAX_LABEL_WORDS = 8;
+
 function normalize(text: string | null | undefined): string | undefined {
     if (!text || text.length > 128) {
         return undefined;
     }
-    return text
+    let label = text
         .toLowerCase()
         .replace(TYPOGRAPHIC_APOSTROPHES, "'")
+        .replace(/[&+]/g, ' and ')
+        .replace(SEPARATORS, ' ')
+        .replace(CURRENCY_CODES, ' ')
         .replace(CURRENCY_AND_NUMBER_CHARS, '')
         .replace(/\s+/g, ' ')
         .trim();
+    WALLET_ALIASES.forEach(([alias, name]) => {
+        label = label.replace(alias, name);
+    });
+    return label.split(' ').length > MAX_LABEL_WORDS ? undefined : label;
+}
+
+// The label without bracketed asides or the separators and symbols left at its
+// edges, so "place order -" and "place order ( items)" both read "place order".
+function coreLabel(text: string): string {
+    const core = text
+        .replace(BRACKETED, ' ')
+        .replace(/\s+/g, ' ')
+        .replace(EDGE_SYMBOLS, '');
+    return core || text.replace(EDGE_SYMBOLS, '');
 }
 
 // Labels come from aria-label then visible text. Only submit and button inputs
-// have their value read, so a typed field value is never touched. Other text
-// follows the same rules as button descriptions.
+// have their value read, so a typed field value is never touched. A control
+// holding form fields or more than four children gives only its aria-label.
 function labelSources(element: Element): Array<string | null> {
     if (element instanceof HTMLInputElement) {
         const type = element.type;
@@ -107,7 +189,7 @@ function labelSources(element: Element): Array<string | null> {
         return [element.getAttribute('aria-label'), text];
     }
     if (element.children.length > 4 || isUnsafeTextSource(element)) {
-        return [];
+        return [element.getAttribute('aria-label')];
     }
     return [element.getAttribute('aria-label'), element.textContent];
 }
@@ -118,69 +200,120 @@ function labels(element: Element): string[] {
         .filter((label): label is string => !!label);
 }
 
-function classifyLabel(
-    text: string,
-    button: boolean,
-    pathname: string
-): Exclude<CheckoutIntentKind, 'frame'> | undefined {
-    if (
+// Which rule recognised the intent: a vendor's own markup, a phrase in the
+// label, a wallet's bare name, a hosted frame, or a form submitted after a
+// confirm click.
+export type CheckoutIntentSource = 'vendor' | 'label' | 'brand' | 'frame' | 'submit';
+
+export interface ICheckoutIntent {
+    kind: Exclude<CheckoutIntentKind, 'frame'>;
+    source: CheckoutIntentSource;
+}
+
+// "Buy now" and "Purchase" count only on a checkout route, and never on a plain
+// link, which is navigation.
+function isCommitLabel(text: string, isLink: boolean, pathname: string): boolean {
+    if (isLink) {
+        return linkCommits.test(text);
+    }
+    return (
         commits.test(text) ||
         (routeGatedCommits.test(text) &&
             getIntentRouteClass(pathname) === 'checkout_path')
-    ) {
-        return 'commit';
-    }
-    if (button && wallets.test(text)) {
-        return 'wallet';
-    }
-    if (steps.test(text)) {
-        return 'checkout_step';
-    }
-    return undefined;
+    );
 }
 
-// Classifies a clicked or submitting control found by findControl.
-export function classifyIntentControl(
+// Classifies a clicked or submitting control found by findControl, in order:
+// pickers, toggles and pay-later messages never count; a vendor's own wallet
+// button counts before any label rule; a confirm label on any source counts
+// before the look-alike exclusions veto; then wallet phrases and steps.
+export function classifyIntent(
     control: Element,
     pathname: string
-): Exclude<CheckoutIntentKind, 'frame'> | undefined {
-    const texts = labels(control);
-    if (texts.some(text => exclusions.test(text))) {
+): ICheckoutIntent | undefined {
+    const vendor = vendorButtonKind(control);
+    if (isQuietIntentControl(control, vendor === 'wallet') || vendor === 'none') {
         return undefined;
     }
-    let button = false;
-    if (!control.matches('a[href]')) {
-        button = control.matches(CONTROL_SELECTOR) || isWalletElement(control);
+    if (vendor) {
+        return { kind: vendor, source: 'vendor' };
     }
-    if (button && isWalletElement(control)) {
-        return 'wallet';
+    const texts = labels(control);
+    const cores = texts.map(coreLabel);
+    const isLink = control.matches('a[href]:not([role="button"])');
+    if (cores.some(text => isCommitLabel(text, isLink, pathname))) {
+        return { kind: 'commit', source: 'label' };
     }
-    for (const text of texts) {
-        const kind = classifyLabel(text, button, pathname);
-        if (kind) {
-            return kind;
+    if (
+        texts
+            .concat(cores)
+            .some(text => englishExclusions.test(text) || otherExclusions.test(text))
+    ) {
+        return undefined;
+    }
+    const isButton = !isLink && control.matches(CONTROL_SELECTOR);
+    for (const text of cores) {
+        if (isButton && walletPhrases.test(text)) {
+            return { kind: 'wallet', source: 'label' };
+        }
+        if (isButton && walletBrands.test(text)) {
+            return { kind: 'wallet', source: 'brand' };
+        }
+        if (steps.test(text)) {
+            return { kind: 'checkout_step', source: 'label' };
         }
     }
     return undefined;
 }
 
-// Focus moving into a visible hosted wallet or payment frame.
+export function classifyIntentControl(
+    control: Element,
+    pathname: string
+): Exclude<CheckoutIntentKind, 'frame'> | undefined {
+    const intent = classifyIntent(control, pathname);
+    return intent ? intent.kind : undefined;
+}
+
+// The host is the domain or one of its subdomains, never a look-alike suffix.
+function isOnDomain(host: string, domain: string): boolean {
+    return (
+        host === domain ||
+        (host.length > domain.length &&
+            host.slice(host.length - domain.length - 1) === '.' + domain)
+    );
+}
+
+// Focus moving into a visible hosted wallet button counts as a wallet click;
+// focus into hosted card fields or messages is only a frame.
 export function classifyIntentFrame(
     target: EventTarget | null,
     win: Window
-): 'frame' | undefined {
+): 'wallet' | 'frame' | undefined {
     if (
         win.document.visibilityState !== 'visible' ||
         !(target instanceof HTMLIFrameElement)
     ) {
         return undefined;
     }
-    if (isRoktElement(target)) {
+    if (
+        isRoktElement(target) ||
+        hasComposedAncestor(target, '[data-mp-no-track]')
+    ) {
         return undefined;
     }
     try {
         const url = new URL(target.src);
-        if (url.protocol === 'https:' && frameHosts.has(url.hostname)) {
+        const host = url.protocol === 'https:' ? url.hostname : '';
+        if (paypalFrameHosts.has(host)) {
+            return PAYPAL_BUTTON_FRAME.test(url.pathname) ? 'wallet' : 'frame';
+        }
+        if (walletFrameHosts.has(host)) {
+            return 'wallet';
+        }
+        if (host === 'js.stripe.com') {
+            return STRIPE_WALLET_FRAME.test(url.pathname) ? 'wallet' : 'frame';
+        }
+        if (CARD_FRAME_DOMAINS.some(domain => isOnDomain(host, domain))) {
             return 'frame';
         }
     } catch (e) {

package/src/buttonTracking/controls.ts

@@ -29,63 +29,166 @@ export function hasComposedAncestor(
     return false;
 }
 
+const ROKT_SELECTOR = '[data-core-type], #rokt-controller-frame';
+
+// A Rokt frame or script is served from a /wsdk/ path.
+function hasRoktSrc(element: Element): boolean {
+    const src = element.getAttribute('src');
+    if (!src) {
+        return false;
+    }
+    try {
+        return (
+            new URL(src, 'https://example.test').pathname.indexOf('/wsdk/') !==
+            -1
+        );
+    } catch (e) {
+        // An unparseable src is not a Rokt element.
+        return false;
+    }
+}
+
 // Rokt's own placements and frames never count as partner checkout controls.
 export function isRoktElement(element: Element): boolean {
-    if (
-        hasComposedAncestor(element, '[data-core-type], #rokt-controller-frame')
-    ) {
-        return true;
+    return hasComposedAncestor(element, ROKT_SELECTOR) || hasRoktSrc(element);
+}
+
+// Wallet and quick-pay buttons as their vendors render them: official custom
+// elements and documented classes, ids and attributes.
+const WALLET_SIGNATURE = [
+    'apple-pay-button',
+    '.apple-pay-button',
+    '.gpay-button',
+    '.gpay-card-info-container',
+    '#gpay-button-online-api-id',
+    'paypal-button',
+    'venmo-button',
+    'paypal-pay-later-button',
+    'paypal-credit-button',
+    'shop-pay-button',
+    'shop-pay-wallet-button',
+    'shopify-accelerated-checkout',
+    'shopify-accelerated-checkout-cart',
+    'shopify-apple-pay-button',
+    'shopify-google-pay-button',
+    'shopify-paypal-button',
+    'shopify-amazon-pay-button',
+    '.amazonpay-button-focusable',
+    '#AmazonPayButton',
+    '[data-amazon-pay-button]',
+    '[data-afterpay-entry-point]',
+].join(', ');
+// PayPal's card button opens a card form, so it is a step rather than a wallet.
+const CARD_FORM_BUTTON = 'paypal-basic-card-button';
+const VENDOR_BUTTON = WALLET_SIGNATURE + ', ' + CARD_FORM_BUTTON;
+// Apple's set-up and top-up buttons manage a wallet rather than pay with it.
+const NOT_A_PAYMENT = ['set-up', 'add-money', 'reload', 'top-up']
+    .map(type => 'apple-pay-button[type="' + type + '"]')
+    .join(', ');
+
+// What a vendor's own button markup says about a control. Only the control or
+// the shadow host that owns it counts, so a merchant wrapper reusing a vendor
+// class never turns its children into wallet buttons.
+export function vendorButtonKind(
+    control: Element
+): 'wallet' | 'checkout_step' | 'none' | undefined {
+    let host: Element | null = control.matches(VENDOR_BUTTON) ? control : null;
+    if (!host) {
+        const root = isFunction(control.getRootNode)
+            ? (control.getRootNode() as ShadowRoot)
+            : null;
+        host = root && root.host && root.host.matches(VENDOR_BUTTON)
+            ? root.host
+            : null;
     }
-    const src = element.getAttribute('src');
-    if (src) {
-        try {
-            if (
-                new URL(src, 'https://example.test').pathname.indexOf(
-                    '/wsdk/'
-                ) !== -1
-            ) {
-                return true;
-            }
-        } catch (e) {
-            // An unparseable src is not a Rokt element.
-        }
+    if (!host) {
+        return undefined;
     }
-    return false;
+    if (host.matches(NOT_A_PAYMENT)) {
+        return 'none';
+    }
+    return host.matches(CARD_FORM_BUTTON) ? 'checkout_step' : 'wallet';
 }
 
 export function isWalletElement(element: Element): boolean {
-    return element.matches(
-        'apple-pay-button, shop-pay-button, .gpay-button, #AmazonPayButton, [data-amazon-pay-button]'
-    );
+    return vendorButtonKind(element) === 'wallet';
 }
 
+// Pickers and toggles choose a payment method or open a panel; they never pay.
+const PICKER =
+    'input[type="radio"], input[type="checkbox"], label, [role="radio"], [role="tab"], [role="option"], ' +
+    '[role="checkbox"], [role="switch"], [role="menuitemradio"], [role="menuitemcheckbox"], [aria-checked], [aria-selected]';
+const PICKER_GROUP = '[role="radiogroup"], [role="tablist"], [role="listbox"]';
+// Pay-later and financing messages link to details rather than pay.
+const MESSAGING =
+    'klarna-placement, afterpay-placement, square-placement, .affirm-as-low-as, .affirm-site-modal, ' +
+    '.affirm-product-modal, [data-pp-message]';
+
+// A control that is still logged as a click but never counts as checkout intent.
+export function isQuietIntentControl(
+    control: Element,
+    isVendorWallet: boolean
+): boolean {
+    if (control.matches(PICKER)) {
+        return true;
+    }
+    if (hasComposedAncestor(control, PICKER_GROUP)) {
+        return true;
+    }
+    if (
+        !isVendorWallet &&
+        (control.hasAttribute('aria-expanded') ||
+            control.hasAttribute('aria-pressed'))
+    ) {
+        return true;
+    }
+    return hasComposedAncestor(control, MESSAGING);
+}
+
+// A checkbox or radio is a control of its own only when no button or link
+// around it takes the click, so a tappable row keeps its own name.
+const OPTION_INPUT = 'input[type="checkbox"], input[type="radio"]';
+
 // Walks at most 12 entries of an event's composed path for the nearest control.
-// Rokt elements, disabled controls and anything under data-mp-no-track are skipped.
+// One composed walk from the target rules out Rokt elements and anything under
+// data-mp-no-track; disabled controls are skipped.
 export function findControl(
     path: Array<EventTarget | null>
 ): Element | undefined {
+    const entries = path.slice(0, 12);
+    let first: Element | undefined;
+    for (const target of entries) {
+        if (target instanceof Element) {
+            first = target;
+            break;
+        }
+    }
+    if (
+        !first ||
+        hasComposedAncestor(first, ROKT_SELECTOR + ', [data-mp-no-track]')
+    ) {
+        return undefined;
+    }
     let control: Element | undefined;
-    for (const target of path.slice(0, 12)) {
+    let option: Element | undefined;
+    for (const target of entries) {
         if (!(target instanceof Element)) {
             continue;
         }
-        if (isRoktElement(target) || target.matches('[data-mp-no-track]')) {
+        if (hasRoktSrc(target)) {
             return undefined;
         }
         if (
             !control &&
-            (target.matches(CONTROL_SELECTOR + ', a[href]') ||
-                isWalletElement(target))
+            target.matches(CONTROL_SELECTOR + ', a[href], ' + VENDOR_BUTTON)
         ) {
             control = target;
+        } else if (!control && !option && target.matches(OPTION_INPUT)) {
+            option = target;
         }
     }
-    if (
-        !control ||
-        isRoktElement(control) ||
-        hasComposedAncestor(control, '[data-mp-no-track]') ||
-        control.matches(':disabled, [aria-disabled="true"]')
-    ) {
+    control = control || option;
+    if (!control || control.matches(':disabled, [aria-disabled="true"]')) {
         return undefined;
     }
     return control;
@@ -109,3 +212,18 @@ export function isUnsafeTextSource(element: Element): boolean {
         )
     );
 }
+
+// A label around a checkbox or radio holds no typed text, so only the other
+// fields rule its text out.
+export function isUnsafeLabelSource(label: Element): boolean {
+    return (
+        !!label.querySelector(
+            'input:not([type="checkbox"]):not([type="radio"]), select, textarea, [data-mp-no-track], ' +
+                EDITABLE
+        ) ||
+        hasComposedAncestor(
+            label,
+            'select, datalist, textarea, [data-mp-no-track], ' + EDITABLE
+        )
+    );
+}

package/src/mp-instance.ts

@@ -45,7 +45,7 @@ import { removeExpiredIdentityCacheDates, hasExplicitIdentifier } from './identi
 import IntegrationCapture, { isIntegrationCaptureEnabled } from './integrationCapture';
 import { IPreInit, processReadyQueue } from './pre-init-utils';
 import { BaseEvent, MParticleWebSDK, SDKHelpersApi } from './sdkRuntimeModels';
-import { Dictionary, SDKEventAttrs } from '@mparticle/web-sdk';
+import { Dictionary, MPID, SDKEventAttrs } from '@mparticle/web-sdk';
 import { IIdentity } from './identity.interfaces';
 import { IEvents } from './events.interfaces';
 import { IECommerce } from './ecommerce.interfaces';
@@ -1424,12 +1424,8 @@ function completeSDKInitialization(apiKey, config, mpInstance) {
         if (roktConfig) {
             const accountId = roktConfig.settings?.accountId;
             mpInstance._Store.setRoktAccountId(accountId);
-            const { userAttributeFilters } = roktConfig;
-            const roktFilteredUser = filteredMparticleUser(
-                currentUserMPID,
-                { userAttributeFilters },
-                mpInstance
-            );
+            const createRoktFilteredUser = (mpid: MPID) =>
+                filteredMparticleUser(mpid, roktConfig, mpInstance, kitBlocker);
             const roktOptions: IRoktOptions = {
                 sandbox: config?.isDevelopmentMode,
                 launcherOptions: config?.launcherOptions,
@@ -1438,7 +1434,7 @@ function completeSDKInitialization(apiKey, config, mpInstance) {
             // https://go.mparticle.com/work/SQDSDKS-7339
             mpInstance._RoktManager.init(
                 roktConfig,
-                roktFilteredUser,
+                createRoktFilteredUser(currentUserMPID),
                 mpInstance.Identity,
                 mpInstance._Store,
                 mpInstance.Logger,
@@ -1447,6 +1443,7 @@ function completeSDKInitialization(apiKey, config, mpInstance) {
                 mpInstance._ErrorReportingDispatcher,
                 mpInstance._LoggingDispatcher,
                 mpInstance._IntegrationCapture,
+                createRoktFilteredUser,
             );
         }
 

package/src/mparticle-instance-manager.ts

@@ -7,6 +7,7 @@ import MPSideloadedKit from './sideloadedKit';
 import { IMParticleInstanceManager } from './sdkRuntimeModels';
 import { IStore } from './store';
 import { Dictionary } from '@mparticle/web-sdk';
+import { cleanUrl } from './pageUrl';
 
 if (!Array.prototype.forEach) {
     Array.prototype.forEach = Polyfill.forEach;
@@ -449,6 +450,8 @@ function mParticleInstanceManager(this: IMParticleInstanceManager) {
     this.generateHash = function(string) {
         return self.getInstance().generateHash(string);
     };
+    // Kits clean every URL they send with the same rule as core events.
+    this._cleanUrl = cleanUrl;
     this.addForwarder = function(forwarder) {
         self.getInstance().addForwarder(forwarder);
     };