braze-inc / braze-flutter-sdk

Public repo for the Braze Flutter SDK
Other
16 stars 31 forks source link

[Bug]: ClickAction.uri not received on Dart layer for in-app message buttons #88

Open SahharWithu opened 1 week ago

SahharWithu commented 1 week ago

Which Platforms?

Both

Which Flutter Version?

3.22.2

Which Braze Flutter SDK version?

11.0.0

Repro Rate

100%

Steps To Reproduce

When subscribing to in-app messages using braze.subscribeToInAppMessages, I expect that the clickAction.uri should be received when an in-app message button is clicked. However, clickAction.uri is not being received on the Dart layer, despite setting up the correct logic for handling the click action.

  void subscribeToInAppMessaging() {
    _inAppMessagingStreamSubscription ??=
        braze.subscribeToInAppMessages((BrazeInAppMessage inAppMessage) {
      if (kDebugMode) {
        print(
            'InAppMessage: ${inAppMessage.clickAction} - ${inAppMessage.inAppMessageJsonString}');
      }
      if (inAppMessage.clickAction == ClickAction.none) {
        braze.logInAppMessageImpression(inAppMessage);
      } else if (inAppMessage.clickAction == ClickAction.uri) {
        braze.logInAppMessageClicked(inAppMessage);
        braze.logInAppMessageButtonClicked(inAppMessage, 0);
      }
    });
  }

Expected Behavior

clickAction.uri should be triggered and logged in the Dart layer when the in-app message button is clicked.

Actual Incorrect Behavior

Only ClickAction.none is triggered, and ClickAction.uri is not received.

Verbose Logs

i receive this log when i send test inapp message to ios18

=> [In-app Message] Received message from Braze: modal(BrazeKit.Braze.InAppMessage.Modal(data: BrazeKit.Braze.InAppMessage.Data(id: Optional("NjZmNTdjMzcyNmJlYTcwY2E3YTMyNTQyX3Rlc3Q="), clickAction: BrazeKit.Braze.InAppMessage.ClickAction.none, messageClose: BrazeKit.Braze.InAppMessage.MessageClose.userInteraction, orientation: BrazeKit.Braze.InAppMessage.Orientation.any, animateIn: true, animateOut: true, messageExtras: nil, context: Optional(<BRZInAppMessageContext: 0x600002c62700>), codableExtras: [:]), graphic: Optional(BrazeKit.Braze.InAppMessage.Graphic.icon("")), header: "Hello", headerTextAlignment: BrazeKit.Braze.InAppMessage.TextAlignment.center, message: "Thanks for joining youcef@withutraining.com", messageTextAlignment: BrazeKit.Braze.InAppMessage.TextAlignment.center, buttons: [BrazeKit.Braze.InAppMessage.Button(id: 0, text: "Hi", clickAction: BrazeKit.Braze.InAppMessage.ClickAction.url(/exercise_preview/123, useWebView: false), themes: BrazeKit.Braze.InAppMessage.ButtonThemes(themes: ["dark": BrazeKit.Braze.InAppMessage.ButtonTheme(textColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4294967295), borderColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4283782485), backgroundColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4283782485)), "light": BrazeKit.Braze.InAppMessage.ButtonTheme(textColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4279990479), borderColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4279990479), backgroundColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4294834175))])), BrazeKit.Braze.InAppMessage.Button(id: 1, text: "hello", clickAction: BrazeKit.Braze.InAppMessage.ClickAction.url(/exercise_preview/223, useWebView: false), themes: BrazeKit.Braze.InAppMessage.ButtonThemes(themes: ["light": BrazeKit.Braze.InAppMessage.ButtonTheme(textColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4294967295), borderColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4279990479), backgroundColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4279990479)), "dark": BrazeKit.Braze.InAppMessage.ButtonTheme(textColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4294967295), borderColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4279990479), backgroundColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4279990479))]))], themes: BrazeKit.Braze.InAppMessage.Themes(themes: ["light": BrazeKit.Braze.InAppMessage.Theme(backgroundColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4294739452), textColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4280624421), iconColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4278410550), iconBackgroundColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4278631276), headerTextColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4280624421), closeButtonColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4291085508), frameColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 3207803699)), "dark": BrazeKit.Braze.InAppMessage.Theme(backgroundColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4280163870), textColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4294967295), iconColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4278410550), iconBackgroundColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4278631276), headerTextColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4294967295), closeButtonColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 4291085508), frameColor: BrazeKit.Braze.InAppMessage.Color(rawValue: 3207803699))])))

Additional Information

Tested on ios 18 and Android 14 devices , both simulator and real devices , release and debug modes

hokstuff commented 1 week ago

Hi @SahharWithu,

When you create an in-app message subscription via the Dart code braze.subscribeToInAppMessages((BrazeInAppMessage inAppMessage) { }, it will trigger the closure upon receiving an in-app message (not when clicking on it). The reason is that the in-app message UI is fully handled by the native iOS + Android layers by default, so we don't have a way to intercept the interactions in the Swift/Kotlin layer and port them via a subscription method into the Dart layer. However, through the native layer, we already log impressions, clicks, and button clicks by default.

If you would like to have full control of the IAM UI (appearance, metrics, etc), you would have to use the data models provided in subscribeToInAppMessages() to create your own custom in the Dart layer. That way you can track clicks on your IAM and then determine what to do with that.

Hope this helps!