@mparticle/web-sdk 3.21.0 → 3.23.0

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

@@ -35,6 +35,8 @@ export declare class BatchUploader {
     private exitHandler;
     private visibilityChangeHandler;
     private destroyed;
+    private batchOrder;
+    private nextBatchOrder;
     /**
      * Creates an instance of a BatchUploader
      * @param {IMParticleWebSDKInstance} mpInstance - the mParticle SDK instance

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' | 'outbound' | 'download';
-export type ButtonLabelSource = 'labelledby' | 'aria' | 'text' | 'alt' | 'title' | 'value' | 'none';
+export type ButtonLabelSource = 'labelledby' | 'aria' | 'text' | 'label' | 'alt' | 'title' | 'value' | 'none';
 export interface IButtonClick {
     label?: string;
     labelSource: ButtonLabelSource;
@@ -16,5 +16,6 @@ export interface IButtonClick {
     linkType?: LinkType;
     linkDomain?: string;
     fileExtension?: string;
+    checked?: boolean;
 }
 export declare function describeButtonClick(control: Element): IButtonClick | undefined;

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

@@ -15,6 +15,9 @@ export declare class ButtonTracker {
     private pagePath;
     private pageEvents;
     private pending;
+    private uploadTimerId;
+    private uploadHeld;
+    private leaving;
     constructor(mpInstance: IMParticleWebSDKInstance);
     get isActive(): boolean;
     init(options: IButtonTrackerOptions): void;
@@ -28,6 +31,9 @@ export declare class ButtonTracker {
     private readonly onEvent;
     private observe;
     private logClick;
+    private queuedForUpload;
+    private uploadNow;
+    private cancelUpload;
     private emit;
     private eventsEnabled;
     private isKitSuppressed;

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

@@ -1,3 +1,9 @@
 export type CheckoutIntentKind = 'commit' | 'wallet' | 'checkout_step' | 'frame';
+export type CheckoutIntentSource = 'vendor' | 'label' | 'brand' | 'frame' | 'submit';
+export interface ICheckoutIntent {
+    kind: Exclude<CheckoutIntentKind, 'frame'>;
+    source: CheckoutIntentSource;
+}
+export declare function classifyIntent(control: Element, pathname: string): ICheckoutIntent | undefined;
 export declare function classifyIntentControl(control: Element, pathname: string): Exclude<CheckoutIntentKind, 'frame'> | undefined;
-export declare function classifyIntentFrame(target: EventTarget | null, win: Window): 'frame' | undefined;
+export declare function classifyIntentFrame(target: EventTarget | null, win: Window): 'wallet' | 'frame' | undefined;

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

@@ -1,6 +1,9 @@
 export declare const CONTROL_SELECTOR = "button, input[type=\"submit\"], input[type=\"button\"], input[type=\"image\"], [role=\"button\"]";
 export declare function hasComposedAncestor(element: Element, selector: string): boolean;
 export declare function isRoktElement(element: Element): boolean;
+export declare function vendorButtonKind(control: Element): 'wallet' | 'checkout_step' | 'none' | undefined;
 export declare function isWalletElement(element: Element): boolean;
+export declare function isQuietIntentControl(control: Element, isVendorWallet: boolean): boolean;
 export declare function findControl(path: Array<EventTarget | null>): Element | undefined;
 export declare function isUnsafeTextSource(element: Element): boolean;
+export declare function isUnsafeLabelSource(label: Element): boolean;

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

@@ -0,0 +1,10 @@
+import { valueof } from './utils';
+export declare const UrlMode: {
+    readonly Path: "path";
+    readonly Full: "full";
+};
+export type UrlMode = valueof<typeof UrlMode>;
+export declare const EXCLUDED_URL_QUERY_PARAMS: string[];
+export declare const EXCLUDED_URL_FRAGMENT_PARAMS: string[];
+export declare const cleanUrl: (href: string, mode: UrlMode) => string;
+export declare const cleanPageHref: () => string;

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

@@ -3,6 +3,8 @@ import { BaseEvent } from './sdkRuntimeModels';
 import { Dictionary } from './utils';
 export declare const WIN_APV_KEY = "__mpApv__";
 export declare const ALLOWED_QUERY_PARAMS: string[];
+export declare const ALLOWED_QUERY_PARAM_PREFIXES: string[];
+export declare const isAllowedQueryParam: (name: string) => boolean;
 interface IPageSnapshot {
     path: string;
     params: Dictionary<string>;

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

@@ -5,10 +5,11 @@ import { Dictionary, AttributeValue } from "./utils";
 import { SDKIdentityApi } from "./identity.interfaces";
 import { SDKLoggerApi } from "./sdkRuntimeModels";
 import { IStore, LocalSessionAttributes } from "./store";
+import { MPID } from "@mparticle/web-sdk";
 import { IErrorReportingService, ILoggingService } from "./reporting/types";
 import { IRoktLauncherOptions } from "./roktLauncherOptions";
 import IntegrationCapture from "./integrationCapture";
-import type { CheckoutIntentKind } from "./buttonTracking/checkoutIntent";
+import type { CheckoutIntentKind, CheckoutIntentSource } from "./buttonTracking/checkoutIntent";
 export type RoktAttributeValueArray = Array<string | number | boolean>;
 export type RoktAttributeValueType = string | number | boolean | undefined | null;
 export type RoktAttributeValue = RoktAttributeValueType | RoktAttributeValueArray;
@@ -46,6 +47,8 @@ export interface RoktKitFilterSettings {
 export interface ICheckoutIntentSignal {
     kind: CheckoutIntentKind;
     t: number;
+    source?: CheckoutIntentSource;
+    pathname?: string;
 }
 export interface IRoktKitSettings {
     accountId?: string;
@@ -80,6 +83,7 @@ export default class RoktManager {
     kit: IRoktKit;
     filters: RoktKitFilterSettings;
     private currentUser;
+    private createFilteredUser?;
     private messageQueue;
     private sandbox;
     private placementAttributesMapping;
@@ -114,15 +118,17 @@ export default class RoktManager {
      * @param {Function} captureTiming - Function to capture performance timing marks
      * @param {IErrorReportingService} errorReporter - Dispatcher for error/warning reporting
      * @param {ILoggingService} loggingService - Dispatcher for informational logging
+     * @param {Function} createFilteredUser - Builds a user as the Rokt connection's filters and the data plan allow
      *
      * @throws Logs error to console if placementAttributesMapping parsing fails
      */
-    init(roktConfig: IKitConfigs, filteredUser: IMParticleUser, identityService: SDKIdentityApi, store: IStore, logger?: SDKLoggerApi, options?: IRoktOptions, captureTiming?: (metricsName: string) => void, errorReporter?: IErrorReportingService, loggingService?: ILoggingService, integrationCapture?: IntegrationCapture): void;
+    init(roktConfig: IKitConfigs, filteredUser: IMParticleUser, identityService: SDKIdentityApi, store: IStore, logger?: SDKLoggerApi, options?: IRoktOptions, captureTiming?: (metricsName: string) => void, errorReporter?: IErrorReportingService, loggingService?: ILoggingService, integrationCapture?: IntegrationCapture, createFilteredUser?: (mpid: MPID) => IMParticleUser): void;
     get isInitialized(): boolean;
     attachKit(kit: IRoktKit): void;
     private watchRouteChanges;
     private notifyRouteChange;
     isCheckoutIntentSuppressed(): boolean;
+    isCheckoutIntentLive(): boolean;
     notifyCheckoutIntent(signal: ICheckoutIntentSignal, pathname?: string): void;
     discardCheckoutIntents(): void;
     private flushCheckoutIntents;
@@ -143,6 +149,7 @@ export default class RoktManager {
      * });
      */
     selectPlacements(options: IRoktSelectPlacementsOptions): Promise<IRoktSelection>;
+    private logFilteredIdentity;
     /**
      * Hashes attributes and returns both original and hashed versions
      * with Rokt-compatible key names (like emailsha256, mobilesha256)

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

@@ -19,6 +19,7 @@ import { IErrorLogMessage, IMParticleWebSDKInstance, IntegrationDelays } from '.
 import Constants from './constants';
 import RoktManager, { IRoktLauncherOptions } from './roktManager';
 import { IConsoleLogger } from './logger';
+import { UrlMode } from './pageUrl';
 import { ErrorCodes, IErrorReportingService, ILoggingService } from './reporting/types';
 export type SDKEventCustomFlags = Dictionary<any>;
 export interface SDKEvent {
@@ -194,6 +195,7 @@ export interface IMParticleInstanceManager extends MParticleWebSDK {
     _instances: Dictionary<IMParticleWebSDKInstance>;
     _isTestEnv?: boolean;
     _forceNoLocalStorage?: boolean;
+    _cleanUrl(href: string, mode: UrlMode): string;
     config: SDKInitConfig;
     isIOS?: boolean;
     MPSideloadedKit: typeof MPSideloadedKit;

package/package.json

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

package/src/batchUploader.ts

@@ -3,7 +3,8 @@ import Constants from './constants';
 import { SDKEvent, SDKEventCustomFlags } from './sdkRuntimeModels';
 import { convertEvents } from './sdkToEventsApiConverter';
 import { MessageType, EventType } from './types';
-import { getRampNumber, getHref, isEmpty, obfuscateDevData } from './utils';
+import { getRampNumber, isEmpty, obfuscateDevData } from './utils';
+import { cleanPageHref } from './pageUrl';
 import { SessionStorageVault, LocalStorageVault, StorageResult } from './vault';
 import {
     AsyncUploader,
@@ -52,6 +53,11 @@ export class BatchUploader {
     private exitHandler: (() => void) | null = null;
     private visibilityChangeHandler: (() => void) | null = null;
     private destroyed = false;
+    // The order this page's uploads first picked each batch up in, by request
+    // id. Batches enter uploads in creation order, so this keeps that order for
+    // batches that share a millisecond.
+    private batchOrder = new Map<string, number>();
+    private nextBatchOrder = 0;
 
     /**
      * Creates an instance of a BatchUploader
@@ -199,7 +205,7 @@ export class BatchUploader {
             Debug: SDKConfig.isDevelopmentMode,
             ActiveTimeOnSite: _timeOnSiteTimer?.getTimeInForeground() || 0,
             TotalTimeOnSite: _Store.getTotalTimeOnSite?.() || 0,
-            PageUrl: getHref() || null,
+            PageUrl: cleanPageHref() || null,
             IsBackgroundAST: true
         } as SDKEvent;
 
@@ -444,12 +450,27 @@ export class BatchUploader {
         // Clear out pending batches to avoid any potential duplication
         const batchesToUpload = this.batchesQueuedForProcessing;
         this.batchesQueuedForProcessing = [];
+        batchesToUpload.forEach(batch => {
+            if (!this.batchOrder.has(batch.source_request_id)) {
+                this.batchOrder.set(batch.source_request_id, this.nextBatchOrder++);
+            }
+        });
 
         const batchesThatDidNotUpload = await this.uploadBatches(
             batchesToUpload,
             useBeacon
         );
 
+        // Only a batch that will be retried needs its place kept.
+        const retriedIds = (batchesThatDidNotUpload || []).map(
+            batch => batch.source_request_id
+        );
+        batchesToUpload.forEach(batch => {
+            if (retriedIds.indexOf(batch.source_request_id) === -1) {
+                this.batchOrder.delete(batch.source_request_id);
+            }
+        });
+
         // Batches that do not successfully upload are added back to the process queue
         // in the order they were created so that we can attempt re-transmission in
         // the same sequence. This is to prevent any potential data corruption.
@@ -475,7 +496,19 @@ export class BatchUploader {
     }
 
     private storeBatchesQueuedForProcessing(): void {
-        const batches = this.batchesQueuedForProcessing;
+        // Another upload may have stored its failed batches while this one was
+        // in flight. Merge them in creation order, whichever upload finished
+        // first, so they are not overwritten and quota trimming drops the oldest.
+        const orderOf = (batch: Batch): number =>
+            this.batchOrder.get(batch.source_request_id) ?? -1;
+        const batches = [
+            ...this.batchesQueuedForProcessing,
+            ...(this.batchVault.retrieve() ?? []),
+        ].sort(
+            (a, b) =>
+                orderOf(a) - orderOf(b) ||
+                (a.timestamp_unixtime_ms ?? 0) - (b.timestamp_unixtime_ms ?? 0)
+        );
 
         // Nothing to persist: reset offline storage to an empty state.
         if (isEmpty(batches)) {

package/src/buttonTracking/buttonClickEvent.ts

@@ -42,6 +42,9 @@ export const buildButtonClickEvent = (
             data[key] = optional[key];
         }
     }
+    if (click.checked !== undefined) {
+        data.checked = click.checked;
+    }
     return {
         messageType: MessageType.PageEvent,
         name: BUTTON_CLICK_EVENT_NAME,

package/src/buttonTracking/buttonDescription.ts

@@ -1,6 +1,7 @@
 import { isFunction } from '../utils';
 import {
     hasComposedAncestor,
+    isUnsafeLabelSource,
     isUnsafeTextSource,
     isWalletElement,
 } from './controls';
@@ -19,6 +20,7 @@ export type ButtonLabelSource =
     | 'labelledby'
     | 'aria'
     | 'text'
+    | 'label'
     | 'alt'
     | 'title'
     | 'value'
@@ -39,6 +41,7 @@ export interface IButtonClick {
     linkType?: LinkType;
     linkDomain?: string;
     fileExtension?: string;
+    checked?: boolean;
 }
 
 function elementKind(control: Element): ButtonElementKind {
@@ -63,9 +66,10 @@ function nonBlank(value: string | null): string | undefined {
 }
 
 // The button's name as a screen reader would read it, simplified: the first of
-// aria-labelledby, aria-label, own text (or an inner image's alt), title, and for
-// inputs their value. The text sources are skipped for controls that hold form
-// fields or more than four children, so a typed value is never read.
+// aria-labelledby, aria-label, own text (or an inner image's alt), title, for
+// inputs their value, and for checkboxes and radios their label's text. The text
+// sources are skipped for controls that hold form fields or more than four
+// children, so a typed value is never read.
 function accessibleName(
     control: Element
 ): { raw?: string; source: ButtonLabelSource } {
@@ -108,6 +112,16 @@ function accessibleName(
                 // What the browser shows on an input without a value.
                 return { raw: type, source: 'value' };
             }
+        } else if (type === 'checkbox' || type === 'radio') {
+            // The label the browser ties to the box, never the box's value.
+            const label = control.labels ? control.labels[0] : undefined;
+            const text =
+                label && !isUnsafeLabelSource(label) && label.textContent
+                    ? label.textContent.trim()
+                    : '';
+            if (text) {
+                return { raw: text, source: 'label' };
+            }
         }
     } else if (readable) {
         const text = textOf(control);
@@ -318,5 +332,12 @@ export function describeButtonClick(
         linkType: link ? link.type : undefined,
         linkDomain: link ? link.domain : 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:
+            control instanceof HTMLInputElement &&
+            (control.type === 'checkbox' || control.type === 'radio')
+                ? control.checked
+                : undefined,
     };
 }

package/src/buttonTracking/buttonTracker.ts

@@ -4,7 +4,8 @@ import { buildButtonClickEvent } from './buttonClickEvent';
 import { describeButtonClick, IButtonClick } from './buttonDescription';
 import {
     CheckoutIntentKind,
-    classifyIntentControl,
+    CheckoutIntentSource,
+    classifyIntent,
     classifyIntentFrame,
 } from './checkoutIntent';
 import { findControl } from './controls';
@@ -19,6 +20,9 @@ const PATH_LIMIT = 12;
 // 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;
+// A click uploads at once. Taps that follow it this quickly are held and share
+// one upload once they stop.
+const UPLOAD_DEBOUNCE_MS = 100;
 
 interface IBtnState {
     tracker?: ButtonTracker;
@@ -77,7 +81,7 @@ const CAPTURE_PASSIVE: AddEventListenerOptions = {
 const PASSIVE: AddEventListenerOptions = { passive: true };
 
 // Logs every button click as an mParticle event, and hands checkout intent to the
-// Rokt kit as a frozen {kind, t}. Submits and wallet frame focus feed the kit only.
+// Rokt kit as a frozen {kind, t, source, pathname}. Submits and wallet frame focus feed the kit only.
 export class ButtonTracker {
     private readonly mpInstance: IMParticleWebSDKInstance;
     private active = false;
@@ -90,6 +94,10 @@ export class ButtonTracker {
     private pageEvents = 0;
     // Clicks read at dispatch and waiting for the next paint.
     private pending: Array<() => void> = [];
+    private uploadTimerId: ReturnType<typeof setTimeout> | null = null;
+    private uploadHeld = false;
+    // Set while the page is left, when the SDK's exit upload sends the queue.
+    private leaving = false;
 
     constructor(mpInstance: IMParticleWebSDKInstance) {
         this.mpInstance = mpInstance;
@@ -181,6 +189,7 @@ export class ButtonTracker {
         this.lastSent = {};
         this.pagePath = null;
         this.pageEvents = 0;
+        this.cancelUpload();
     }
 
     private enqueue(delivery: () => void): void {
@@ -206,7 +215,14 @@ export class ButtonTracker {
             event.type === 'pagehide' ||
             document.visibilityState === 'hidden'
         ) {
-            this.drain();
+            this.leaving = true;
+            try {
+                this.drain();
+            } finally {
+                this.leaving = false;
+            }
+            // The SDK's exit upload sends the queue, held taps included.
+            this.cancelUpload();
         }
     };
 
@@ -244,7 +260,9 @@ export class ButtonTracker {
         // button that disables or relabels itself is seen as it was clicked.
         // Logging and the kit hand-off wait for the next paint.
         let click: IButtonClick | undefined;
+        let box: HTMLInputElement | undefined;
         let kind: CheckoutIntentKind | undefined;
+        let source: CheckoutIntentSource | undefined;
         let unconfirmedCommit = false;
         if (layer === 'click') {
             // The composed path is only populated during dispatch.
@@ -255,10 +273,15 @@ export class ButtonTracker {
             );
             if (control) {
                 click = logsEvents ? describeButtonClick(control) : undefined;
+                if (click && click.checked !== undefined) {
+                    box = control as HTMLInputElement;
+                }
                 // Checkout intent is only worked out when the kit can use it.
-                kind = signalsKit
-                    ? classifyIntentControl(control, pathname)
+                const intent = signalsKit
+                    ? classifyIntent(control, pathname)
                     : undefined;
+                kind = intent ? intent.kind : undefined;
+                source = intent ? intent.source : undefined;
             }
         } else if (layer === 'submit') {
             const submitter = (event as Event & { submitter?: Element | null })
@@ -268,8 +291,11 @@ export class ButtonTracker {
             // commit click, which is known once that click is delivered.
             if (!submitter) {
                 kind = 'commit';
+                source = 'submit';
             } else if (control) {
-                kind = classifyIntentControl(control, pathname);
+                const intent = classifyIntent(control, pathname);
+                kind = intent ? intent.kind : undefined;
+                source = intent ? intent.source : undefined;
             }
             unconfirmedCommit = !submitter;
         }
@@ -284,6 +310,7 @@ export class ButtonTracker {
                     // Read after the blur settles: some browsers have not moved
                     // focus into the frame yet when the window blurs.
                     kind = classifyIntentFrame(document.activeElement, window);
+                    source = 'frame';
                 } else if (
                     unconfirmedCommit &&
                     t - this.lastCommitClick > SUBMIT_AFTER_COMMIT_CLICK_MS
@@ -291,10 +318,21 @@ export class ButtonTracker {
                     kind = undefined;
                 }
                 if (click && logsEvents) {
+                    // The box as this click left it. The browser toggles it
+                    // before dispatch and puts it back once a cancelled click
+                    // is over, so only a cancelled click changes the reading
+                    // taken at dispatch: a checkbox to the other state, a
+                    // radio to however it was restored.
+                    if (box && event.defaultPrevented) {
+                        click.checked =
+                            box.type === 'checkbox'
+                                ? !click.checked
+                                : box.checked;
+                    }
                     this.logClick(click, pathname);
                 }
                 if (kind) {
-                    this.emit(kind, layer, t, pathname);
+                    this.emit(kind, source, layer, t, pathname);
                 }
             } catch (e) {
                 this.log('[error] delivery threw: ' + e);
@@ -317,13 +355,59 @@ export class ButtonTracker {
         this.pageEvents++;
         // Restarts an expired session, as public logEvent() and page views do.
         this.mpInstance._SessionManager.resetSessionTimer();
+        const queued = this.queuedForUpload();
         this.mpInstance._Events.logEvent(
             buildButtonClickEvent(click, pathname)
         );
+        // 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.
+        if (
+            !this.leaving &&
+            click.checked === undefined &&
+            this.queuedForUpload() > queued
+        ) {
+            this.uploadNow();
+        }
+    }
+
+    // Events waiting in the upload queue for the next batch interval.
+    private queuedForUpload(): number {
+        const uploader = this.mpInstance._APIClient.uploader;
+        return uploader ? uploader.eventsQueuedForProcessing.length : 0;
+    }
+
+    // Uploads a click without waiting for the batch interval. A tap inside the
+    // wait after the last one is held, and each restarts the wait, so a burst
+    // after the first click goes out in one request once the taps stop.
+    private uploadNow(): void {
+        if (this.uploadTimerId === null) {
+            this.mpInstance.upload();
+        } else {
+            clearTimeout(this.uploadTimerId);
+            this.uploadHeld = true;
+        }
+        this.uploadTimerId = setTimeout(() => {
+            this.uploadTimerId = null;
+            if (this.uploadHeld) {
+                this.uploadHeld = false;
+                this.mpInstance.upload();
+            }
+        }, UPLOAD_DEBOUNCE_MS);
+    }
+
+    private cancelUpload(): void {
+        if (this.uploadTimerId !== null) {
+            clearTimeout(this.uploadTimerId);
+            this.uploadTimerId = null;
+        }
+        this.uploadHeld = false;
     }
 
     private emit(
         kind: CheckoutIntentKind,
+        source: CheckoutIntentSource | undefined,
         layer: string,
         t: number,
         pathname: string
@@ -342,7 +426,7 @@ export class ButtonTracker {
         this.lastSent[kind] = { t, pathname };
 
         this.mpInstance._RoktManager.notifyCheckoutIntent(
-            Object.freeze({ kind, t }),
+            Object.freeze({ kind, t, source, pathname }),
             pathname
         );
     }