@mparticle/web-sdk 3.28.0 → 3.29.1

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';
@@ -160,8 +162,9 @@ export class ButtonTracker {
     // Bumped on reset so classification queued before it is dropped.
     private generation = 0;
     private lastCommitClick = -Infinity;
-    // The latest trusted click: whether the page excluded it, and the intent it
-    // already carries to the kit, with its source, if any.
+    // The latest trusted click: whether the page excluded it or it was withheld
+    // from the kit, and the intent it already carries to the kit, with its
+    // source, if any.
     private lastClick: {
         t: number;
         excluded: boolean;
@@ -390,6 +393,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') {
@@ -405,15 +409,26 @@ export class ButtonTracker {
                     ? undefined
                     : findControl(path, true, PATH_LIMIT) ||
                       findRoleControl(path, PATH_LIMIT));
+            // A click that link tracking logs as Auto Link Click gives the kit no
+            // intent when the Rokt connection does not receive those events.
+            let withheld = false;
             if (logged) {
                 // With links alone, only an anchor can be logged.
-                click =
+                const logsThis =
                     logsEvents &&
-                    (this.logButtons || logged.matches('a[href]'))
+                    (this.logButtons || logged.matches('a[href]'));
+                const linksWithheld =
+                    signalsKit && this.logLinks && !this.linkClicksReachKit();
+                const described =
+                    logsThis || linksWithheld
                         ? describeButtonClick(logged, path)
                         : undefined;
+                const linkClick =
+                    this.logLinks && !!described && isLinkClick(described);
+                withheld = linksWithheld && linkClick;
+                click = logsThis ? described : undefined;
                 if (click) {
-                    asLink = this.logLinks && isLinkClick(click);
+                    asLink = linkClick;
                     // Without link tracking, a link that leaves the page stays a
                     // button click, except a plain link to another page of the
                     // site, which button tracking never logged.
@@ -432,7 +447,7 @@ export class ButtonTracker {
                     box = logged as HTMLInputElement;
                 }
             }
-            if (control) {
+            if (control && !withheld) {
                 // Checkout intent is only worked out when the kit can use it.
                 const intent = signalsKit
                     ? classifyIntent(control, pathname)
@@ -443,8 +458,28 @@ 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 };
+            // A withheld click cannot start an Apple Pay session for the kit
+            // either.
+            this.lastClick = {
+                t,
+                excluded: excluded || withheld,
+                kind,
+                source,
+            };
         } else if (layer === 'submit') {
             const submitter = (event as Event & { submitter?: Element | null })
                 .submitter;
@@ -503,6 +538,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);
                 }
@@ -625,6 +662,11 @@ export class ButtonTracker {
         );
     }
 
+    private linkClicksReachKit(): boolean {
+        const roktManager = this.mpInstance._RoktManager;
+        return !!roktManager && roktManager.areAutoLinkClicksForwarded();
+    }
+
     private log(message: string): void {
         this.mpInstance.Logger.verbose('mParticle button tracking: ' + message);
     }

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.
@@ -126,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'
@@ -393,6 +397,38 @@ export function classifyIntent(
     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/mp-instance.ts

@@ -1390,6 +1390,7 @@ function completeSDKInitialization(apiKey, config, mpInstance) {
         // Button tracking never runs as a native passthrough.
         resetButtonTracking();
         mpInstance._RoktManager.setAutoButtonClicksForwarded(false);
+        mpInstance._RoktManager.setAutoLinkClicksForwarded(false);
     } else {
         // Main SDK initialization flow
 
@@ -1459,8 +1460,8 @@ function completeSDKInitialization(apiKey, config, mpInstance) {
         // init or from a returning shopper's landing page view.
         const logButtons = !!getFeatureFlag(AutoButtonTracking);
         const logLinks = !!getFeatureFlag(AutoLinkTracking);
-        // Links feed intent too, so with link tracking on the kit must also
-        // receive Auto Link Click events.
+        // With link tracking on, a click logged as Auto Link Click feeds intent
+        // only when the kit also receives those events; button clicks still do.
         const buttonClickBlocker = roktConfig
             ? getButtonClickBlocker(roktConfig, kitBlocker)
             : undefined;
@@ -1472,11 +1473,14 @@ function completeSDKInitialization(apiKey, config, mpInstance) {
             mpInstance.Logger.warning(
                 buttonClickBlocker
                     ? `Checkout intent is off: the ${buttonClickBlocker} keeps some or all Auto Button Click events from the Rokt kit.`
-                    : `Checkout intent is off: the ${linkClickBlocker} keeps some or all Auto Link Click events from the Rokt kit.`
+                    : `Checkout intent skips link clicks: the ${linkClickBlocker} keeps some or all Auto Link Click events from the Rokt kit.`
             );
         }
         mpInstance._RoktManager.setAutoButtonClicksForwarded(
-            !!roktConfig && !buttonClickBlocker && !linkClickBlocker
+            !!roktConfig && !buttonClickBlocker
+        );
+        mpInstance._RoktManager.setAutoLinkClicksForwarded(
+            !!roktConfig && !linkClickBlocker
         );
 
         mpInstance._Forwarders.processForwarders(

package/src/roktManager.ts

@@ -175,6 +175,9 @@ export default class RoktManager {
     private pendingCheckoutIntents: Array<{ signal: ICheckoutIntentSignal; pathname: string }> = [];
     // Off until SDK init finds the Rokt connection receives auto button clicks.
     private autoButtonClicksForwarded = false;
+    // Off until SDK init finds the Rokt connection receives auto link clicks, or
+    // link tracking is off. Only link clicks lose their intent without it.
+    private autoLinkClicksForwarded = false;
 
     // Keys this manager's route subscription, so a re-executed bundle's manager replaces
     // it while a second named instance keeps its own.
@@ -331,6 +334,16 @@ export default class RoktManager {
         this.autoButtonClicksForwarded = forwarded;
     }
 
+    public setAutoLinkClicksForwarded(forwarded: boolean): void {
+        this.autoLinkClicksForwarded = forwarded;
+    }
+
+    // The Rokt kit reads this too: while false, its page views keep
+    // dispatchDelayMs, since a checkout link could never release the wait.
+    public areAutoLinkClicksForwarded(): boolean {
+        return this.autoLinkClicksForwarded;
+    }
+
     // noTargeting (which noDeviceId implies), doNotShareOrSell or Global Privacy
     // Control. Unlike noFunctional, these also stop auto button and link clicks
     // from being logged.