@mparticle/web-sdk 3.27.0 → 3.29.0

package/src/buttonTracking/buttonTracker.ts

@@ -3,6 +3,7 @@ import { isFunction } from '../utils';
 import { buildButtonClickEvent, buildLinkClickEvent } from './buttonClickEvent';
 import {
     describeButtonClick,
+    describeCheckedPaymentChoice,
     describePaymentChoice,
     IButtonClick,
     IPaymentChoice,
@@ -14,6 +15,7 @@ import {
     CheckoutIntentSource,
     classifyIntent,
     classifyPaymentFrame,
+    namesWallet,
     PaymentFrameFamily,
 } from './checkoutIntent';
 import { findControl, findRoleControl, isExcludedPath } from './controls';
@@ -32,9 +34,6 @@ 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;
-// 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;
@@ -176,10 +175,6 @@ 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;
@@ -323,7 +318,6 @@ export class ButtonTracker {
         this.lastSent = {};
         this.pagePath = null;
         this.pageEvents = 0;
-        this.cancelUpload();
     }
 
     private enqueue(delivery: () => void): void {
@@ -349,14 +343,8 @@ export class ButtonTracker {
             event.type === 'pagehide' ||
             document.visibilityState === 'hidden'
         ) {
-            this.leaving = true;
-            try {
-                this.drain();
-            } finally {
-                this.leaving = false;
-            }
-            // The SDK's exit upload sends the queue, held taps included.
-            this.cancelUpload();
+            // The SDK's exit upload then sends these clicks with the queue.
+            this.drain();
         }
     };
 
@@ -404,6 +392,7 @@ export class ButtonTracker {
         let source: CheckoutIntentSource | undefined;
         let adds: true | undefined;
         let choice: IPaymentChoice | undefined;
+        let checkedNames: string[] | undefined;
         let family: PaymentFrameFamily | undefined;
         let unconfirmedCommit = false;
         if (layer === 'click') {
@@ -457,6 +446,19 @@ export class ButtonTracker {
                 choice = signalsKit
                     ? describePaymentChoice(control, path)
                     : undefined;
+                // A confirm or checkout-step click picks no radio itself, so it
+                // carries the one the page holds checked as read here. It is not
+                // read again at delivery: the page's own handlers may clear or
+                // replace it by then. A wallet tap names its own method, and
+                // so does a confirm that names a wallet.
+                if (
+                    !choice &&
+                    (kind === 'commit' || kind === 'checkout_step') &&
+                    !namesWallet(control, click)
+                ) {
+                    const checked = describeCheckedPaymentChoice();
+                    checkedNames = checked ? checked.names : undefined;
+                }
             }
             this.lastClick = { t, excluded, kind, source };
         } else if (layer === 'submit') {
@@ -517,6 +519,8 @@ export class ButtonTracker {
                 // with this pick.
                 if (choice && isPicked(choice.radio)) {
                     this.pickPayment(t, pathname, choice.names);
+                } else if (checkedNames) {
+                    this.pickPayment(t, pathname, checkedNames);
                 } else if (family) {
                     this.pickPayment(t, pathname, undefined, family);
                 }
@@ -548,57 +552,13 @@ export class ButtonTracker {
         this.pageEvents++;
         // Restarts an expired session, as public logEvent() and page views do.
         this.mpInstance._SessionManager.resetSessionTimer();
-        const queued = this.queuedForUpload();
+        // No upload of its own, which a click that opens another page would
+        // cancel: with batching on, the next batch or the exit upload sends it.
         this.mpInstance._Events.logEvent(
             asLink
                 ? buildLinkClickEvent(click, pathname)
                 : 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 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.pick &&
-            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(

package/src/buttonTracking/checkoutIntent.ts

@@ -7,6 +7,7 @@ import {
     isWalletNamedControl,
     vendorButtonKind,
 } from './controls';
+import { IButtonClick, TEST_ID_ATTRIBUTES } from './buttonDescription';
 
 // Classifies a click, submit or frame focus as checkout intent for the Rokt kit.
 // Reads only short control labels, never form field values, and stores nothing.
@@ -19,7 +20,15 @@ export type CheckoutIntentKind =
 
 // A checkout segment may name its kind or its version, as /express-checkout, /checkout-v2 and /checkout-external do.
 // Other hyphenated words make it a content slug, such as /help/checkout-faq or /products/self-checkout-kiosk.
-const checkoutPath = /(?:^|\/)(?:(?:(?:express|guest|quick|secure|complete|one-?page|single-?page|mobile)-)?checkouts?(?:-(?:v\d+|\d+|flow|external|process|step(?:-\d+)?))?|payment|order|kasse|paiement|commander?|pago)(?:\/|$)/i;
+const CHECKOUT_SEGMENT =
+    '(?:(?:express|guest|quick|secure|complete|one-?page|single-?page|mobile)-)?checkouts?' +
+    '(?:-(?:v\\d+|\\d+|flow|external|process|step(?:-\\d+)?))?';
+const checkoutPath = new RegExp(
+    '(?:^|\\/)(?:' + CHECKOUT_SEGMENT + '|payment|order|kasse|paiement|commander?|pago)(?:\\/|$)',
+    'i'
+);
+// A route with a checkout segment itself, not just a payment or order one, which account pages also use.
+const checkoutSegmentPath = new RegExp('(?:^|\\/)' + CHECKOUT_SEGMENT + '(?:\\/|$)', 'i');
 // A confirmation page under a checkout route, such as /checkout/thankyou/<order> or /checkouts/<token>/thank_you, comes
 // after the confirm click. "Complete" and "success" mark one only as the last word of a segment, so /complete-checkout
 // and /checkout/complete-registration stay checkout routes.
@@ -91,6 +100,9 @@ const steps = new RegExp(
         ].join('|') +
         ')$'
 );
+// "Save and continue" also saves profile, address and card forms, so it is a step only on a checkout segment's route
+// that isn't an account or confirmation page.
+const routeGatedSteps = /^save and continue$/;
 const CART_NOUN = '(?:(?:my|your|the) )?(?:shopping )?(?:cart|bag|basket)';
 // "Add to bag" and "Add 2 to cart": a click that puts something in the cart.
 const addToCartLabels = new RegExp('^add(?: [^ ]+){0,5} to ' + CART_NOUN + '$');
@@ -115,6 +127,9 @@ 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))*)?$'
 );
+// The wallets the Rokt kit reads from a click's label or identifiers, as words:
+// "Place order with PayPal!" and "paypal-pay-button" both name PayPal.
+const KIT_WALLET_WORDS = /(?:^| )(?:apple ?pay|google ?pay|g ?pay|android ?pay|venmo|pay ?pal|amazon ?pay|shop ?pay|klarna|after ?pay|clear ?pay|affirm|cash ?app|sezzle|samsung ?pay)(?= |$)/;
 // The payment method a frame's focus picks, in the Rokt kit's family names.
 export type PaymentFrameFamily =
     | 'apple_pay'
@@ -368,13 +383,52 @@ export function classifyIntent(
         if (isButton && walletBrands.test(text)) {
             return { kind: 'wallet', source: 'brand' };
         }
-        if (steps.test(text)) {
+        if (
+            steps.test(text) ||
+            (isButton &&
+                routeGatedSteps.test(text) &&
+                checkoutSegmentPath.test(pathname) &&
+                !confirmationPath.test(pathname) &&
+                !accountStepPath.test(pathname))
+        ) {
             return { kind: 'checkout_step', source: 'label' };
         }
     }
     return cart;
 }
 
+// The Rokt kit's own word split, so "PayPal!" and "paypal2" both read as
+// "paypal" here as they do there.
+function kitWords(value: string | null | undefined): string {
+    return (value || '')
+        .replace(/([a-z])([A-Z])/g, '$1 $2')
+        .toLowerCase()
+        .replace(/[^a-z]+/g, ' ')
+        .trim();
+}
+
+// A confirm control may name its wallet, so "Place order with PayPal" and a
+// "Place order" button with id paypal-pay-button are confirm clicks that still
+// name their own method. A logged click is judged on the fields the kit reads
+// a method from; a click that isn't logged, on the control's own label and
+// identifiers.
+export function namesWallet(control: Element, click?: IButtonClick): boolean {
+    const values = click
+        ? [
+              click.label,
+              click.ariaLabel,
+              click.elementId,
+              click.elementName,
+              click.testId,
+          ]
+        : labelSources(control).concat(
+              ['id', 'name']
+                  .concat(TEST_ID_ATTRIBUTES)
+                  .map(attribute => control.getAttribute(attribute))
+          );
+    return values.some(value => KIT_WALLET_WORDS.test(kitWords(value)));
+}
+
 export function classifyIntentControl(
     control: Element,
     pathname: string

package/src/pageViewTracker.ts

@@ -661,10 +661,12 @@ export class PageViewTracker {
             isAutoPageView: this.isAutoPageView,
         });
 
+        // A title can name the shopper or an order, so it stays out of the log
+        // line, for the same reason describePage omits param values.
         this.log(
             `[fire] deferred flush -> _Events.logEvent(PageView) (page: ${describePage(
                 page
-            )}, title: ${title})`
+            )})`
         );
 
         this.mpInstance._Events.logEvent(event);

package/src/pathMasking.ts

@@ -25,6 +25,19 @@ const MATRIX_SEPARATOR = /;|%(?:25)*3B/i;
 // can't be decoded again. What it hides is unknown, so it counts as sensitive.
 export const LEFTOVER_ESCAPE = /%[0-9A-F]{2}/i;
 
+// Pages under a personal route that name no one: the sign-in, sign-up and
+// account steps sites keep there, as in `/u/login` or `/u/mfa-sms-challenge`.
+const ACCOUNT_PAGE = /^(?:log-?in|log-?out|sign-?in|sign-?out|sign-?up|register|registration|create-account|account|settings|forgot-password|reset-password|password|challenge|consent|callback|authorize|continue|mfa(?:-[a-z]+)*)$/i;
+
+// Whether a segment after a route goes as `*`: always after an order route, and
+// after a personal route unless it is one of the account pages kept there.
+export function hidesSegmentAfter(route: string, segment: string): boolean {
+    return (
+        hidesNextSegment(route) &&
+        !(PERSONAL_ROUTE.test(route) && ACCOUNT_PAGE.test(segment))
+    );
+}
+
 export function hidesNextSegment(route: string): boolean {
     return (
         PERSONAL_ROUTE.test(route) ||
@@ -115,11 +128,102 @@ export function isTokenSegment(segment: string): boolean {
     );
 }
 
+// A word a product name is made of: three or more letters, lowercase or
+// Capitalised. A code's mixed case or capital-letter groups aren't words.
+const isWord = (piece: string): boolean =>
+    /^(?:[a-z]{3,}|[A-Z][a-z]{2,})$/.test(piece);
+
+const UUID_IN_TEXT = /[0-9a-f]{8}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{4}-[0-9a-f]{12}/i;
+
+// Route words whose next segment names a product, as in `/p/<name>` or
+// `/product/<name>`. Only there can words beside a token be a product's name
+// rather than a person's or part of a code.
+const PRODUCT_ROUTE = /^(?:p|product|products|item|items|dp|shop|catalog)$/i;
+
+// A segment that holds a token goes as `*`. After a product route, only the
+// token goes, so `/p/trail-runner-gtx-zq7Kd93Lm41` keeps its name as
+// `/p/trail-runner-gtx-*`.
+// Every piece that isn't a word in an unbroken run with the token goes with it
+// as one `*`, so the rest of a UUID or of a code cut into short pieces never
+// stays. A piece that can't be decoded or decodes to a separator counts as a
+// token, and so does any piece that mixes letters and digits or switches case
+// inside, as a code's short pieces do. The segment goes whole as `*` when no
+// piece is a word or it holds a UUID. Undefined when it holds no token. `segment` is as the page
+// has it, `text` decoded, `route` the route word before it.
+export function maskTokenSegment(
+    segment: string,
+    text: string,
+    route: string | undefined
+): string | undefined {
+    if (!isTokenSegment(text)) {
+        return undefined;
+    }
+    // A UUID anywhere in the decoded text, however its hyphens are escaped,
+    // takes the whole segment.
+    if (!route || !PRODUCT_ROUTE.test(route) || UUID_IN_TEXT.test(text)) {
+        return '*';
+    }
+    const parts = segment.split(/([-_.~])/);
+    const raws = parts.filter((_, i) => i % 2 === 0);
+    const separators = parts.filter((_, i) => i % 2 === 1);
+    const decoded = raws.map(raw => decodeFully(raw));
+    const kinds = decoded.map(piece => {
+        if (piece === undefined || /[-_.~]/.test(piece)) {
+            return 'token';
+        }
+        const plain = piece.replace(/\+/g, '');
+        return isToken(plain) ||
+            mixesLettersAndDigits(plain) ||
+            INNER_CASE_SWITCH.test(plain)
+            ? 'token'
+            : isWord(plain)
+            ? 'word'
+            : 'other';
+    });
+    // Each unbroken run of pieces that aren't words is hidden when it holds a
+    // token.
+    const masked = kinds.map(() => false);
+    for (let start = 0; start < kinds.length; ) {
+        if (kinds[start] === 'word') {
+            start++;
+            continue;
+        }
+        let end = start;
+        while (end < kinds.length && kinds[end] !== 'word') {
+            end++;
+        }
+        // A run reads as a token also when only its pieces joined do.
+        if (
+            kinds.slice(start, end).indexOf('token') !== -1 ||
+            isToken(raws.slice(start, end).join(''))
+        ) {
+            for (let k = start; k < end; k++) {
+                masked[k] = true;
+            }
+        }
+        start = end;
+    }
+    if (
+        masked.indexOf(true) === -1 ||
+        kinds.indexOf('word') === -1
+    ) {
+        return '*';
+    }
+    let out = '';
+    for (let k = 0; k < raws.length; k++) {
+        if (masked[k] && k > 0 && masked[k - 1]) {
+            continue;
+        }
+        out += (k > 0 ? separators[k - 1] : '') + (masked[k] ? '*' : raws[k]);
+    }
+    return out;
+}
+
 // The path a click logs. A segment that can single out one shopper
-// goes as `*`: one holding an @, `;` or `=`, a token, or the one after a route
-// that names a person, carries a code or opens an order. Kept segments stay
-// exactly as the page has them, plain numbers included, since on a product page
-// they name the product.
+// goes as `*`: one holding an @, `;` or `=`, an id, or the one after a route
+// that names a person, carries a code or opens an order. A token inside a name
+// goes as `*` alone. Kept segments stay exactly as the page has them, plain
+// numbers included, since on a product page they name the product.
 export function pagePath(pathname: string): string {
     const segments = pathname.split('/');
     return segments
@@ -131,15 +235,18 @@ export function pagePath(pathname: string): string {
             const hiddenByRoute =
                 i > 0 &&
                 !!text &&
-                (route === undefined || hidesNextSegment(route));
+                (route === undefined || hidesSegmentAfter(route, text));
             // An encoded slash hides several segments in one, so it goes whole.
-            return text === undefined ||
+            if (
+                text === undefined ||
                 /[@;=/]/.test(text) ||
                 LEFTOVER_ESCAPE.test(text) ||
-                isTokenSegment(text) ||
                 hiddenByRoute
-                ? '*'
-                : segment;
+            ) {
+                return '*';
+            }
+            const masked = maskTokenSegment(segment, text, route);
+            return masked === undefined ? segment : masked;
         })
         .join('/');
 }