[Bug]:

[ivan-rino]

Braze Web SDK Version

4.4.0

Integration Method

NPM

Browser

Edge

Steps To Reproduce

import * as braze from "@braze/web-sdk";

function onMessageClose() {
  console.debug("message closed");
}

function onMessage(inAppMessage) {
  console.debug("show message", inAppMessage);
  inAppMessage.subscribeToDismissedEvent(onMessageClose);
}

braze.subscribeToInAppMessage(onMessage);

Expected Behavior

onMessageClose function is called when the in-app message is closed from a button with the default Close message action.

Actual Incorrect Behavior

onMessageClose function is not called when the in-app message is closed from a button with the default Close message action.

Verbose Logs

braze.js:122 [braze] Delete localStorage session item ab.storage.messagingSessionStart.53f78507-db47-4f48-90c5-3a37b6c7f971
braze.js:131 [braze] Initializing braze...
logger.js:17 Braze: Initialization Options: {
  "allowUserSuppliedJavascript": true,
  "baseUrl": "sdk.fra-02.braze.eu",
  "disablePushTokenMaintenance": true,
  "enableLogging": true,
  "manageServiceWorkerExternally": true,
  "noCookies": true
}
logger.js:17 Braze: Initialized for the Braze backend at "sdk.fra-02.braze.eu" with API key "53f78507-db47-4f48-90c5-3a37b6c7f971".
logger.js:17 Braze: Invoking new session subscriptions
braze.js:60 [braze] send event homepage_viewed {event_time: Fri Nov 18 2022 16:01:55 GMT+0100 (hora estándar de Europa central), platform_type: 'samsung'}
logger.js:17 Braze: Logged custom event "homepage_viewed".
logger.js:17 Braze: Trigger sync is currently in progress, awaiting sync completion before firing trigger event.
logger.js:17 Braze: Firing inapp trigger action 6373ce0679422a004b66a626 from trigger event open.
braze.js:97 [braze] show message ModalMessage {message: 'I am an in-app message', messageAlignment: 'CENTER', duration: 5000, slideFrom: 'BOTTOM', extras: {…}, …}Ie: "26c704a1-18e1-6918-363b-241065eeb696"Pi: falseQi: trueRi: trueUi: u {Pe: {…}}animateIn: trueanimateOut: truebackgroundColor: 4279834930buttons: Array(2)0: InAppMessageButton {text: 'My Account', backgroundColor: 4294912090, textColor: 4294967295, borderColor: 4294912090, clickAction: 'URI', …}1: InAppMessageButtonbackgroundColor: 14474465borderColor: 4292664545clickAction: "NONE"id: 1lt: u {Pe: {…}}nl: truetext: "Dismiss"textColor: 4294967295uri: undefined[[Prototype]]: Objectlength: 2lastIndex: (...)lastItem: (...)[[Prototype]]: Array(0)clickAction: "NONE"closeButtonColor: 4292664545cropType: "FIT_CENTER"css: undefineddismissType: "SWIPE"duration: 5000extras: {}frameColor: 3207803699header: "Hello"headerAlignment: "CENTER"headerTextColor: 4294967295htmlId: undefinedicon: undefinediconBackgroundColor: 4278219733iconColor: 4294967295imageStyle: "TOP"imageUrl: "https://cdn.braze.eu/appboy/communication/marketing/slide_up/slide_up_message_parameters/images/6373ce0579422a004b66a606/77d2384c2add576db919b5270abc51aaa7c7097c/original.png?1668698468"ke: bodylt: u {Pe: {…}}message: "I am an in-app message"messageAlignment: "CENTER"mn: nullnl: falseopenTarget: "NONE"orientation: undefinedslideFrom: "BOTTOM"textColor: 4294967295triggerId: "NjM3M2NlMDY3OTQyMmEwMDRiNjZhNjI2XyRfbXY9NjM3M2NlMDU3OTQyMmEwMDRiNjZhNjBlJnBpPWNtcA=="un: "MODAL"uri: undefinedCe: (...)[[Prototype]]: InAppMessage
logger.js:17 Braze: Trigger event custom_event did not match any trigger conditions.
braze.js:70 [braze] on display HTMLCollection(2) [button.ab-message-button, button.ab-message-button]
logger.js:17 Braze: Trigger event iam_click did not match any trigger conditions.

Additional Information

Closing the in-app message with the default X close button calls fine to the onClose callback as expected.

[wesleyorbin]

Hi @Ivan-rino. It looks like your onMessage function returns for non-ControlMessages before ever subscribing to the dismissed event. If you change that line to the below, it should work as expected.

if (inAppMessage instanceof braze.ControlMessage) {
    return;
}

[ivan-rino]

Hi @wesleyorbin, thanks for the reply. Sorry about the sample code, I copied it wrong, I just edited it correctly. I removed completely the condition and didn't worked neither, same behaviour, only the X button of the modal triggers the dismissed event.

[wesleyorbin]

Hi @Ivan-rino. I can't reproduce on my side. Clicking the close button, clicking outside of the message, and pressing the Esc key all log a dismissed event. Clicking the message itself or the message buttons will log click events rather than dismissal events. Is there a specific use case that isn't working for you?

[ivan-rino]

Hi @wesleyorbin,

The issue happens with a button with the default Close message action.

Please take a look to the logs attached and you can observe that is a modal with 2 buttons, one with an URL action that works fine, and the dismiss one that with the Close message action that doesn't trigger the onMessageClose callback:

1: InAppMessageButtonbackgroundColor: 14474465borderColor: 4292664545clickAction: "NONE"id: 1lt: u {Pe: {…}}nl: truetext: "Dismiss"textColor: 4294967295uri: undefined[[Prototype]]:

Thanks!

[wesleyorbin]

@Ivan-rino The built-in UI will log a button click rather than a dismissal in this scenario since all button clicks close the message. You will be able to see analytics on which buttons have been clicked on the dashboard.

[ivan-rino]

Hi @wesleyorbin,

Based on your suggestion then I will handle all the button clicks as if they always closed the message.

Thanks!