@mparticle/web-sdk 3.22.0 → 3.24.0

package/src/buttonTracking/controls.ts

@@ -6,29 +6,46 @@ import { isFunction } from '../utils';
 export const CONTROL_SELECTOR =
     'button, input[type="submit"], input[type="button"], input[type="image"], [role="button"]';
 
-// closest() over the composed tree: slots, parents, then shadow hosts.
-export function hasComposedAncestor(
+const EDITABLE = '[contenteditable]:not([contenteditable="false"])';
+
+// One step up the composed tree: the slot, the parent, then the shadow host.
+function composedParent(node: Element): Element | null {
+    const root = isFunction(node.getRootNode)
+        ? (node.getRootNode() as ShadowRoot)
+        : null;
+    return (
+        (node as Element & { assignedSlot?: Element | null }).assignedSlot ||
+        node.parentElement ||
+        (root && root.host) ||
+        null
+    );
+}
+
+// Tests the element and its ancestors over the composed tree: slots, parents,
+// then shadow hosts. With `until`, stops before reaching that ancestor.
+export function someComposedAncestor(
     element: Element,
-    selector: string
+    test: (node: Element) => boolean,
+    until?: Element
 ): boolean {
     let node: Element | null = element;
-    while (node) {
-        if (node.matches(selector)) {
+    while (node && node !== until) {
+        if (test(node)) {
             return true;
         }
-        const root = isFunction(node.getRootNode)
-            ? (node.getRootNode() as ShadowRoot)
-            : null;
-        node =
-            (node as Element & { assignedSlot?: Element | null })
-                .assignedSlot ||
-            node.parentElement ||
-            (root && root.host) ||
-            null;
+        node = composedParent(node);
     }
     return false;
 }
 
+// closest() over the composed tree, starting at the element itself.
+export function hasComposedAncestor(
+    element: Element,
+    selector: string
+): boolean {
+    return someComposedAncestor(element, node => node.matches(selector));
+}
+
 const ROKT_SELECTOR = '[data-core-type], #rokt-controller-frame';
 
 // A Rokt frame or script is served from a /wsdk/ path.
@@ -110,8 +127,44 @@ export function vendorButtonKind(
     return host.matches(CARD_FORM_BUTTON) ? 'checkout_step' : 'wallet';
 }
 
+// A merchant-built wallet button that names its wallet in an id or test id, such
+// as `venmo-pay-btn` or `applePayButton`. The name must also say button and not
+// name a part or a wrapper of one, so a wallet's logo, label or container never
+// counts, nor a button that only chooses a wallet. Affirm is also an English
+// verb, so it counts only beside a payment word. Only the element's own
+// attributes are read.
+const WALLET_IN_NAME = /(?:^| )(?:apple ?pay|google ?pay|g ?pay|amazon ?pay|cash ?app|venmo|pay ?pal|shop ?pay|klarna|after ?pay|clear ?pay|sezzle|samsung ?pay)(?= |$)/;
+const AFFIRM_IN_NAME = /(?:^| )affirm(?= |$)/;
+const PAYMENT_IN_NAME = /(?:^| )(?:pay|payment|checkout)(?= |$)/;
+const BUTTON_IN_NAME = /(?:^| )(?:btn|button)(?= |$)/;
+const PART_IN_NAME = /(?:^| )(?:logo|icon|image|img|label|text|caption|message|messaging|info|tooltip|help|learn|terms|promo|banner|container|wrapper|wrap|placeholder|form|section|panel|modal|list|group|select|option|tab|toggle|radio|choice|method)(?= |$)/;
+
+function nameWords(value: string | null): string {
+    return (value || '')
+        .slice(0, 64)
+        .replace(/([a-z0-9])([A-Z])/g, '$1 $2')
+        .replace(/[^A-Za-z0-9]+/g, ' ')
+        .trim()
+        .toLowerCase();
+}
+
+export function isWalletNamed(element: Element): boolean {
+    return [element.getAttribute('id'), element.getAttribute('data-testid')]
+        .map(nameWords)
+        .some(
+            words =>
+                (WALLET_IN_NAME.test(words) ||
+                    (AFFIRM_IN_NAME.test(words) &&
+                        PAYMENT_IN_NAME.test(words))) &&
+                BUTTON_IN_NAME.test(words) &&
+                !PART_IN_NAME.test(words)
+        );
+}
+
 export function isWalletElement(element: Element): boolean {
-    return vendorButtonKind(element) === 'wallet';
+    return (
+        vendorButtonKind(element) === 'wallet' || isWalletNamedControl(element)
+    );
 }
 
 // Pickers and toggles choose a payment method or open a panel; they never pay.
@@ -125,9 +178,11 @@ const MESSAGING =
     '.affirm-product-modal, [data-pp-message]';
 
 // A control that is still logged as a click but never counts as checkout intent.
+// A cart button can open a flyout, so aria-expanded alone never quiets one.
 export function isQuietIntentControl(
     control: Element,
-    isVendorWallet: boolean
+    isVendorWallet: boolean,
+    isCart = false
 ): boolean {
     if (control.matches(PICKER)) {
         return true;
@@ -137,7 +192,7 @@ export function isQuietIntentControl(
     }
     if (
         !isVendorWallet &&
-        (control.hasAttribute('aria-expanded') ||
+        ((!isCart && control.hasAttribute('aria-expanded')) ||
             control.hasAttribute('aria-pressed'))
     ) {
         return true;
@@ -146,15 +201,58 @@ export function isQuietIntentControl(
 }
 
 // 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.
+// around it takes the click, so a tappable row stays the control.
 const OPTION_INPUT = 'input[type="checkbox"], input[type="radio"]';
+// Anything that chooses, toggles or takes typing. One between a click's target
+// and a wallet-named element, or inside that element, keeps it from becoming
+// the tap. Hidden inputs and button-like inputs are not fields.
+const NAME_BARRIER =
+    PICKER +
+    ', ' +
+    PICKER_GROUP +
+    ', input:not([type="hidden"]):not([type="submit"]):not([type="button"]):not([type="image"]), ' +
+    'select, textarea, option, optgroup, datalist, [aria-expanded], [aria-pressed], ' +
+    EDITABLE;
+// What owns a click on anything inside it: a picker, a real control or link,
+// a toggle, or an editable region.
+const NAME_HOLDER =
+    PICKER +
+    ', ' +
+    CONTROL_SELECTOR +
+    ', a[href], ' +
+    VENDOR_BUTTON +
+    ', [aria-expanded], [aria-pressed], ' +
+    EDITABLE;
 
-// Walks at most 12 entries of an event's composed path for the nearest control.
-// 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 {
+// A wallet-named element that may stand as a control by its name alone: not
+// itself a picker, toggle or form field; not inside a picker, a real button or
+// link, a toggle, an editable region or another wallet-named element, which own
+// the click with their own state; and holding no picker or field, in its open
+// shadow root either, so a payment-method row with its own radio or select
+// never becomes a wallet tap.
+export function isWalletNamedControl(element: Element): boolean {
+    if (!isWalletNamed(element) || element.matches(NAME_BARRIER)) {
+        return false;
+    }
+    for (
+        let node = composedParent(element);
+        node;
+        node = composedParent(node)
+    ) {
+        if (node.matches(NAME_HOLDER) || isWalletNamed(node)) {
+            return false;
+        }
+    }
+    const shadow = element.shadowRoot;
+    return (
+        !element.querySelector(NAME_BARRIER) &&
+        !(shadow && shadow.querySelector(NAME_BARRIER))
+    );
+}
+
+// Whether a click is never tracked: it has no element, or lands on a Rokt
+// element or under data-mp-no-track. Reads at most 12 entries of the path.
+export function isExcludedPath(path: Array<EventTarget | null>): boolean {
     const entries = path.slice(0, 12);
     let first: Element | undefined;
     for (const target of entries) {
@@ -167,35 +265,62 @@ export function findControl(
         !first ||
         hasComposedAncestor(first, ROKT_SELECTOR + ', [data-mp-no-track]')
     ) {
+        return true;
+    }
+    for (const target of entries) {
+        if (target instanceof Element && hasRoktSrc(target)) {
+            return true;
+        }
+    }
+    return false;
+}
+
+// Walks at most 12 entries of an event's composed path for the nearest control.
+// A wallet-named element counts as one unless a picker, toggle or form field
+// lies between it and the target or a picker holds it, so choosing an option in
+// or around it never becomes its tap. Excluded clicks give nothing; disabled controls are skipped, a
+// wallet-named one also by its `disabled` class. A caller that has already
+// found the path not excluded passes `included` so the walk runs once.
+export function findControl(
+    path: Array<EventTarget | null>,
+    included = false
+): Element | undefined {
+    if (!included && isExcludedPath(path)) {
         return undefined;
     }
     let control: Element | undefined;
     let option: Element | undefined;
-    for (const target of entries) {
+    let picked = false;
+    for (const target of path.slice(0, 12)) {
+        if (control) {
+            break;
+        }
         if (!(target instanceof Element)) {
             continue;
         }
-        if (hasRoktSrc(target)) {
-            return undefined;
-        }
         if (
-            !control &&
-            target.matches(CONTROL_SELECTOR + ', a[href], ' + VENDOR_BUTTON)
+            target.matches(CONTROL_SELECTOR + ', a[href], ' + VENDOR_BUTTON) ||
+            (!picked && isWalletNamedControl(target))
         ) {
             control = target;
-        } else if (!control && !option && target.matches(OPTION_INPUT)) {
-            option = target;
+        } else {
+            if (!option && target.matches(OPTION_INPUT)) {
+                option = target;
+            }
+            picked = picked || target.matches(NAME_BARRIER);
         }
     }
     control = control || option;
-    if (!control || control.matches(':disabled, [aria-disabled="true"]')) {
+    if (
+        !control ||
+        control.matches(':disabled, [aria-disabled="true"]') ||
+        (control.classList.contains('disabled') && isWalletNamed(control))
+    ) {
         return undefined;
     }
     return control;
 }
 
-const EDITABLE = '[contenteditable]:not([contenteditable="false"])';
-
 // Text that may hold what a shopper typed or what the page opted out: form
 // fields, editable regions, and anything under data-mp-no-track.
 export function isUnsafeTextSource(element: Element): boolean {
@@ -212,18 +337,3 @@ 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/buttonTracking/labelMasking.ts

@@ -16,10 +16,13 @@ function createDigitPatterns(): { run: RegExp; number: RegExp } | undefined {
 
 const digitPatterns = createDigitPatterns();
 
+// Longer raw labels are dropped, not cut short.
+export const MAX_RAW_LABEL_LENGTH = 128;
+
 // The label as logged: lower case, at most 64 characters, digits and amounts
 // masked. Dropped when it looks like an email, phone or card number.
 export function maskLabel(raw: string | null | undefined): string | undefined {
-    if (!raw || raw.length > 128 || !digitPatterns) {
+    if (!raw || raw.length > MAX_RAW_LABEL_LENGTH || !digitPatterns) {
         return undefined;
     }
     const text = raw

package/src/configAPIClient.ts

@@ -78,6 +78,7 @@ export interface IConfigResponse {
     workspaceToken: string;
     pixelConfigs: IPixelConfiguration[];
     flags: SDKEventCustomFlags;
+    autoLogPageViewQueryParams?: string;
 }
 
 export interface IConfigAPIClient {

package/src/events.ts

@@ -25,6 +25,7 @@ import {
     allowedQueryParams,
     autoPageViewAttribute,
     IPageViewOptions,
+    paramsToAttributes,
 } from './pageViewTracker';
 
 interface DOMHandlerElement extends HTMLElement {
@@ -151,8 +152,7 @@ export default function Events(
 
     // The auto page view for the landing page. The SPA navigations that follow it
     // come from PageViewTracker instead, so both emitters attach the same
-    // allowlisted query params — and this is the one that matters for campaign
-    // attribution, since utm_*/gclid live on the entry URL.
+    // allowlisted query params.
     this.logPageView = function(options?: IPageViewOptions): void {
         self.logEvent({
             messageType: Types.MessageType.PageView,
@@ -160,7 +160,13 @@ export default function Events(
             data: {
                 // Params first so the core fields always win. See
                 // buildPageViewEvent, which does the same for SPA views.
-                ...allowedQueryParams(getHref()),
+                ...paramsToAttributes(
+                    allowedQueryParams(
+                        getHref(),
+                        mpInstance._Store.SDKConfig.autoLogPageViewQueryParams
+                            ?.allowed
+                    )
+                ),
                 hostname: window.location.hostname,
                 title: window.document.title,
                 ...autoPageViewAttribute(options && options.isAutoPageView),

package/src/forwarder-utils.ts

@@ -7,6 +7,8 @@ import { inArray, valueof } from './utils';
 import KitFilterHelper from './kitFilterHelper';
 import * as EventsApi from '@mparticle/event-models';
 import { IKitFilterSettings } from './configAPIClient';
+import type { SDKEvent } from './sdkRuntimeModels';
+import type KitBlocker from './kitBlocking';
 import {
     getEventNameFromBatchEvent,
     getEventCategoryFromBatchEvent,
@@ -117,6 +119,42 @@ export function isBlockedByEventFilter(
     return false;
 }
 
+// sendEventToForwarders passes no kitBlocker: apiClient has already applied
+// the data plan by then.
+export function isEventForwarded(
+    event: SDKEvent,
+    forwarder: ForwarderFilterConfig,
+    kitBlocker?: KitBlocker
+): boolean {
+    const plannedEvent =
+        kitBlocker && kitBlocker.kitBlockingEnabled
+            ? kitBlocker.createBlockedEvent(event)
+            : event;
+    if (!plannedEvent) {
+        return false;
+    }
+
+    if (
+        isBlockedByForwardingRule(
+            plannedEvent.EventDataType,
+            plannedEvent.EventAttributes,
+            forwarder
+        )
+    ) {
+        return false;
+    }
+
+    const eventCategory = plannedEvent.EventCategory as valueof<
+        typeof EventType
+    >;
+    return !isBlockedByEventFilter(
+        plannedEvent.EventDataType,
+        KitFilterHelper.hashEventName(plannedEvent.EventName, eventCategory),
+        KitFilterHelper.hashEventType(eventCategory),
+        forwarder
+    );
+}
+
 export function filterEventAttributes(
     messageType: number,
     eventCategory: number,

package/src/forwarders.ts

@@ -6,8 +6,7 @@ import KitFilterHelper from './kitFilterHelper';
 import Constants from './constants';
 import APIClient, { IForwardingStatsData } from './apiClient';
 import {
-    isBlockedByForwardingRule,
-    isBlockedByEventFilter,
+    isEventForwarded,
     filterEventAttributes,
     filterUserIdentities,
 } from './forwarder-utils';
@@ -266,39 +265,14 @@ export default function Forwarders(
             return;
         }
 
-        const hashedEventName = KitFilterHelper.hashEventName(
-            event.EventName,
-            event.EventCategory as any
-        );
-        const hashedEventType = KitFilterHelper.hashEventType(
-            event.EventCategory as any
-        );
-
         const forwardEvent = function(forwarder: ConfiguredKit): void {
-            if (
-                isBlockedByForwardingRule(
-                    event.EventDataType,
-                    event.EventAttributes,
-                    forwarder
-                )
-            ) {
+            if (!isEventForwarded(event, forwarder)) {
                 return;
             }
 
             // Clone the event object, as we could be sending different attributes to each forwarder
             const clonedEvent = extend(true, {}, event);
 
-            if (
-                isBlockedByEventFilter(
-                    event.EventDataType,
-                    hashedEventName,
-                    hashedEventType,
-                    forwarder
-                )
-            ) {
-                return;
-            }
-
             clonedEvent.EventAttributes = filterEventAttributes(
                 event.EventDataType,
                 event.EventCategory,

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';
@@ -67,6 +67,7 @@ import {
     resetPageViewTracking,
 } from './pageViewTracker';
 import { ButtonTracker, resetButtonTracking } from './buttonTracking/buttonTracker';
+import { getButtonClickBlocker } from './buttonTracking/buttonClickEvent';
 
 export interface IErrorLogMessage {
     message?: string;
@@ -1384,6 +1385,7 @@ function completeSDKInitialization(apiKey, config, mpInstance) {
         mpInstance._NativeSdkHelpers.initializeSessionAttributes(apiKey);
         // Button tracking never runs as a native passthrough.
         resetButtonTracking();
+        mpInstance._RoktManager.setAutoButtonClicksForwarded(false);
     } else {
         // Main SDK initialization flow
 
@@ -1424,12 +1426,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 +1436,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,9 +1445,26 @@ function completeSDKInitialization(apiKey, config, mpInstance) {
                 mpInstance._ErrorReportingDispatcher,
                 mpInstance._LoggingDispatcher,
                 mpInstance._IntegrationCapture,
+                createRoktFilteredUser,
             );
         }
 
+        // Checkout intent comes from the shopper's clicks, so it goes to the
+        // Rokt kit only when that kit receives them. Set before
+        // processForwarders: the kit can read it during this init, from its own
+        // init or from a returning shopper's landing page view.
+        const buttonClickBlocker = roktConfig
+            ? getButtonClickBlocker(roktConfig, kitBlocker)
+            : undefined;
+        if (buttonClickBlocker && getFeatureFlag(AutoButtonTracking)) {
+            mpInstance.Logger.warning(
+                `Checkout intent is off: the ${buttonClickBlocker} keeps some or all Auto Button Click events from the Rokt kit.`
+            );
+        }
+        mpInstance._RoktManager.setAutoButtonClicksForwarded(
+            !!roktConfig && !buttonClickBlocker
+        );
+
         mpInstance._Forwarders.processForwarders(
             config,
             mpInstance._APIClient.prepareForwardingStats
@@ -1494,8 +1509,6 @@ function completeSDKInitialization(apiKey, config, mpInstance) {
             mpInstance._PageViewTracker.teardown();
         }
 
-        // Button clicks are logged for any workspace that opts in. Checkout
-        // intent also goes to the Rokt kit when this init configures one.
         if (getFeatureFlag(AutoButtonTracking)) {
             if (!mpInstance._ButtonTracker) {
                 mpInstance._ButtonTracker = new ButtonTracker(mpInstance);

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);
     };