Personnaliser les messages in-app

Conditions préalables

Avant de pouvoir utiliser cette fonctionnalité, vous devrez intégrer le SDK Braze Swift.

Configuration du délégué d’interface utilisateur (obligatoire)

Pour personnaliser la présentation des messages in-app et réagir aux différents événements du cycle de vie, vous devez configurer BrazeInAppMessageUIDelegate. Il s’agit d’un protocole de délégué utilisé pour recevoir et traiter les payloads de messages in-app déclenchés, recevoir les événements du cycle de vie de l’affichage et contrôler le timing d’affichage. Pour utiliser BrazeInAppMessageUIDelegate, vous devez :

• Utiliser l’implémentation par défaut BrazeInAppMessageUI comme votre inAppMessagePresenter.
• Inclure la bibliothèque BrazeUI dans votre projet.

Étape 1 : Implémenter le protocole BrazeInAppMessageUIDelegate

Commencez par implémenter le protocole BrazeInAppMessageUIDelegate et toutes les méthodes correspondantes souhaitées. Dans l’exemple suivant, ce protocole est implémenté dans la classe AppDelegate de l’application.

• swift
• objective-c

1
2
3

extension AppDelegate: BrazeInAppMessageUIDelegate {
  // Implement your protocol methods here.
}

1
2
3
4
5
6
7

@interface AppDelegate () <BrazeInAppMessageUIDelegate>

@end

@implementation AppDelegate
  // Implement your protocol methods here.
@end

Étape 2 : Assigner l’objet delegate

Assignez l’objet delegate sur l’instance BrazeInAppMessageUI avant d’assigner cette interface utilisateur de message in-app comme votre inAppMessagePresenter.

• swift
• objective-c

1
2
3

let inAppMessageUI = BrazeInAppMessageUI()
inAppMessageUI.delegate = self
AppDelegate.braze?.inAppMessagePresenter = inAppMessageUI

1
2
3

BrazeInAppMessageUI *inAppMessageUI = [[BrazeInAppMessageUI alloc] init];
inAppMessageUI.delegate = self;
AppDelegate.braze.inAppMessagePresenter = inAppMessageUI;

Important

Toutes les méthodes de délégué ne sont pas disponibles en Objective-C en raison de l’incompatibilité de leurs paramètres avec l’environnement d’exécution du langage.

Conseil

Pour un déploiement pas à pas du délégué d’interface utilisateur des messages in-app, consultez ce tutoriel.

Comportement au clic

Chaque objet Braze.InAppMessage contient une ClickAction correspondante, qui définit le comportement lors du clic.

Types d’actions au clic

La propriété clickAction de votre Braze.InAppMessage est définie par défaut sur .none, mais peut être configurée avec l’une des valeurs suivantes :

Important

Pour les messages in-app contenant des boutons, l’action au clic clickAction du message sera également incluse dans le payload final si l’action au clic est ajoutée avant le texte du bouton.

Personnaliser le comportement au clic

Pour personnaliser ce comportement, vous pouvez modifier la propriété clickAction en vous référant à l’exemple suivant :

• swift
• objective-c

1
2
3
4
5
6
7
8

func inAppMessage(
  _ ui: BrazeInAppMessageUI,
  prepareWith context: inout BrazeInAppMessageUI.PresentationContext
) {
  if let newUrl = URL(string: "{your-url}") {
    context.message.clickAction = .url(newUrl, useWebView: true)
  }
}

Gérer le comportement personnalisé

La méthode déléguée BrazeInAppMessageUIDelegate suivante est appelée lorsqu’un utilisateur clique sur un message in-app. Ce rappel est déclenché pour les clics initiés par l’utilisateur sur les boutons de messages in-app et les boutons de messages in-app HTML (liens), et un identifiant de bouton est fourni en tant que paramètre optionnel pour ces interactions. Ce rappel n’est pas invoqué pour les clics programmatiques déclenchés via brazeBridge.logClick().

• swift
• objective-c

1
2
3
4
5
6
7

func inAppMessage(
  _ ui: BrazeInAppMessageUI,
  shouldProcess clickAction: Braze.InAppMessage.ClickAction,
  buttonId: String?,
  message: Braze.InAppMessage,
  view: InAppMessageView
) -> Bool

1
2
3
4
5
6

- (BOOL)inAppMessage:(BrazeInAppMessageUI *)ui
       shouldProcess:(enum BRZInAppMessageRawClickAction)clickAction
                 url:(NSURL *)uri
            buttonId:(NSString *)buttonId
             message:(BRZInAppMessageRaw *)message
                view:(UIView *)view;

Cette méthode renvoie une valeur booléenne pour indiquer si Braze doit continuer à exécuter l’action au clic.

• swift
• objective-c

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

func inAppMessage(
  _ ui: BrazeInAppMessageUI, shouldProcess clickAction: Braze.InAppMessage.ClickAction,
  buttonId: String?, message: Braze.InAppMessage, view: InAppMessageView
) -> Bool {
    guard let buttonId,
      let idInt = Int(buttonId)
    else { return true }
    var button: BrazeKit.Braze.InAppMessage.Button? = nil

    switch message {
    case .modal(let modal):
      button = modal.buttons[idInt]

    case .modalImage(let modalImage):
      button = modalImage.buttons[idInt]

    case .full(let full):
      button = full.buttons[idInt]

    case .fullImage(let fullImage):
      button = fullImage.buttons[idInt]

    default:
      break
    }

    print(button?.id)
    print(button?.text)
    print(button?.clickAction)

    return true
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

- (BOOL)inAppMessage:(BrazeInAppMessageUI *)ui
       shouldProcess:(enum BRZInAppMessageRawClickAction)clickAction
                 url:(NSURL *)uri
            buttonId:(NSString *)buttonId
             message:(BRZInAppMessageRaw *)message
                view:(UIView *)view {
  NSInteger buttonInt = [buttonId integerValue];

  if (message.type == BRZInAppMessageRawTypeFull || message.type == BRZInAppMessageRawTypeModal) {
    BRZInAppMessageRawButton *button = message.buttons[buttonInt];
    NSLog(@"%ld", (long)button.identifier);
    NSLog(@"%@", button.text);
    NSLog(@"%ld", (long)button.clickAction);
  }
  return YES;
}

Balayer pour fermer les messages contextuels

Par défaut, les messages in-app contextuels peuvent être fermés par un geste de balayage. La direction du balayage dépend de la position du message contextuel :

• Balayage vers la gauche ou la droite : Ferme le message contextuel, quelle que soit sa position.
• Message contextuel depuis le bas : Un balayage du haut vers le bas ferme le message. Un balayage du bas vers le haut ne le ferme pas.
• Message contextuel depuis le haut : Un balayage du bas vers le haut ferme le message. Un balayage du haut vers le bas ne le ferme pas.

Ce comportement de balayage est intégré à la vue par défaut SlideupView de BrazeInAppMessageUI et s’applique uniquement aux messages in-app contextuels. Les messages in-app modaux et plein écran ne prennent pas en charge la fermeture par balayage. Pour personnaliser davantage la vue contextuelle, y compris le comportement de balayage, vous pouvez modifier les SlideupView.Attributes ou fournir une vue personnalisée via le sous-classement.

Remarque

Appuyer à l’extérieur d’un message contextuel ne le ferme pas. Pour les messages in-app modaux ou plein écran, vous pouvez activer la fermeture par appui à l’extérieur à l’aide de l’attribut dismissOnBackgroundTap décrit dans la section suivante.

Personnaliser la fermeture des fenêtres modales

Pour activer la fermeture par un appui en dehors de la fenêtre, vous pouvez modifier la propriété dismissOnBackgroundTap dans la structure Attributes du type de message in-app que vous souhaitez personnaliser.

Par exemple, si vous souhaitez activer cette fonctionnalité pour les messages in-app d’image modale, vous pouvez configurer ce qui suit :

• swift
• objective-c

1

BrazeInAppMessageUI.ModalImageView.Attributes.defaults.dismissOnBackgroundTap = true

La valeur par défaut est false. Cela détermine si le message in-app modal sera fermé lorsque l’utilisateur appuie en dehors du message in-app.

Pour plus de détails sur la personnalisation des messages in-app, consultez cet article.

Personnaliser l’orientation des messages

Vous pouvez personnaliser l’orientation de vos messages in-app. Vous pouvez définir une nouvelle orientation par défaut pour tous les messages ou définir une orientation personnalisée pour un seul message.

• all messages
• single message

1
2
3
4
5
6

func inAppMessage(
  _ ui: BrazeInAppMessageUI,
  prepareWith context: inout BrazeInAppMessageUI.PresentationContext
) {
  context.preferredOrientation = .portrait
}

1
2
3
4

- (void)inAppMessage:(BrazeInAppMessageUI *)ui
         prepareWith:(BrazeInAppMessageUIPresentationContextRaw *)context {
  context.preferredOrientation = BRZInAppMessageRawOrientationPortrait;
}

1
2
3
4
5
6
7
8

// Set inAppMessage orientation to support any configuration
inAppMessage.orientation = .any

// Set inAppMessage orientation to only display in portrait
inAppMessage.orientation = .portrait

// Set inAppMessage orientation to only display in landscape
inAppMessage.orientation = .landscape

1
2
3
4
5
6
7
8

// Set inAppMessage orientation to support any configuration
inAppMessage.orientation = BRZInAppMessageRawOrientationAny;

// Set inAppMessage orientation to only display in portrait
inAppMessage.orientation = BRZInAppMessageRawOrientationPortrait;

// Set inAppMessage orientation to only display in landscape
inAppMessage.orientation = BRZInAppMessageRawOrientationLandscape;

Une fois le message in-app affiché, tout changement d’orientation de l’appareil pendant que le message est encore visible entraînera la rotation du message avec l’appareil (à condition que cette orientation soit prise en charge par la configuration orientation du message).

L’orientation de l’appareil doit également être prise en charge par la propriété orientation du message in-app pour que le message s’affiche. De plus, le paramètre preferredOrientation ne sera respecté que s’il est inclus dans les orientations d’interface prises en charge par votre application, dans la section Deployment Info des paramètres de votre cible dans Xcode.

Remarque

L’orientation s’applique uniquement lors de la présentation du message. Lorsque l’appareil change d’orientation, la vue du message adopte l’une des orientations qu’elle prend en charge. Sur les appareils de petite taille (iPhones, iPod Touch), définir une orientation paysage pour un message in-app modal ou plein écran peut entraîner un contenu tronqué.

Personnaliser le moment d’affichage

Vous pouvez contrôler si un message in-app disponible s’affichera à certains moments de l’expérience utilisateur. Si, dans certaines situations, vous ne souhaitez pas que le message in-app apparaisse, par exemple pendant un jeu en plein écran ou sur un écran de chargement, vous pouvez retarder ou ignorer les messages in-app en attente. Pour contrôler le moment d’affichage des messages in-app, utilisez la méthode déléguée inAppMessage(_:displayChoiceForMessage:) pour définir la propriété BrazeInAppMessageUI.DisplayChoice.

• swift
• objective-c

1
2
3
4

func inAppMessage(
  _ ui: BrazeInAppMessageUI,
  displayChoiceForMessage message: Braze.InAppMessage
) -> BrazeInAppMessageUI.DisplayChoice

1

- (enum BRZInAppMessageUIDisplayChoice)inAppMessage:(BrazeInAppMessageUI *)ui displayChoiceForMessage:(BRZInAppMessageRaw *)message

Configurez BrazeInAppMessageUI.DisplayChoice pour renvoyer l’une des valeurs suivantes :

Conseil

Pour un exemple d’InAppMessageUI, consultez notre dépôt Swift du SDK Braze et Objective-C.

Masquer la barre d’état

Pour les messages in-app Full, FullImage et HTML, le SDK masque la barre d’état par défaut. Pour les autres types de messages in-app, la barre d’état n’est pas modifiée. Pour configurer ce comportement, utilisez la méthode déléguée inAppMessage(_:prepareWith:) pour définir la propriété statusBarHideBehavior sur le PresentationContext. Ce champ accepte l’une des valeurs suivantes :

Désactiver le mode sombre

Pour empêcher les messages in-app d’adopter le style du mode sombre lorsque l’appareil de l’utilisateur a le mode sombre activé, implémentez la méthode déléguée inAppMessage(_:prepareWith:). Le PresentationContext transmis à la méthode contient une référence à l’objet InAppMessage à présenter. Chaque InAppMessage possède une propriété themes contenant un thème de mode dark et un thème de mode light. Si vous définissez la propriété themes.dark sur nil, Braze présentera automatiquement le message in-app en utilisant son thème clair.

Les types de messages in-app avec des boutons ont un objet themes supplémentaire dans leur propriété buttons. Pour empêcher les boutons d’adopter le style du mode sombre, vous pouvez utiliser map(_:) pour créer un nouveau tableau de boutons avec un thème light et sans thème dark.

• swift
• objective-c

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

func inAppMessage(
  _ ui: BrazeInAppMessageUI,
  prepareWith context: inout BrazeInAppMessageUI.PresentationContext
) {
  switch context.message {
    case .slideup:
      guard var slideup = context.message.slideup else { return }
      slideup.themes.dark = nil
      context.message.slideup = slideup

    case .modal:
      guard var modal = context.message.modal else { return }
      modal.themes.dark = nil
      modal.buttons = modal.buttons.map {
        var newButton = $0
        newButton.themes = .init(themes: ["light": $0.themes.light])
        return newButton
      }
      context.message.modal = modal

    case .modalImage:
      guard var modalImage = context.message.modalImage else { return }
      modalImage.themes.dark = nil
      modalImage.buttons = modalImage.buttons.map {
        var newButton = $0
        newButton.themes = .init(themes: ["light": $0.themes.light])
        return newButton
      }
      context.message.modalImage = modalImage

    case .full:
      guard var full = context.message.full else { return }
      full.themes.dark = nil
      full.buttons = full.buttons.map {
        var newButton = $0
        newButton.themes = .init(themes: ["light": $0.themes.light])
        return newButton
      }
      context.message.full = full

    case .fullImage:
      guard var fullImage = context.message.fullImage else { return }
      fullImage.themes.dark = nil
      fullImage.buttons = fullImage.buttons.map {
        var newButton = $0
        newButton.themes = .init(themes: ["light": $0.themes.light])
        return newButton
      }
      context.message.fullImage = fullImage

    default:
      break
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

- (void)inAppMessage:(BrazeInAppMessageUI *)ui
         prepareWith:(BrazeInAppMessageUIPresentationContextRaw *)context {
  switch (context.message.type) {
    case BRZInAppMessageRawTypeSlideup: {
      NSMutableDictionary *updatedThemes = [context.message.themes mutableCopy];
      [updatedThemes removeObjectForKey:@"dark"];
      context.message.themes = updatedThemes;
      break;
    }
    case BRZInAppMessageRawTypeModal:
    case BRZInAppMessageRawTypeFull:
    {
      NSMutableDictionary *updatedThemes = [context.message.themes mutableCopy];
      [updatedThemes removeObjectForKey:@"dark"];
      context.message.themes = updatedThemes;

      NSMutableArray *updatedButtons = [NSMutableArray arrayWithCapacity:context.message.buttons.count];
      for (BRZInAppMessageRawButton *button in context.message.buttons) {
        BRZInAppMessageRawButtonTheme *lightTheme = BRZInAppMessageRawButtonTheme.defaultLight;
        BRZInAppMessageRawButton *newButton = [button mutableCopy];
        newButton.textColor = lightTheme.textColor;
        newButton.backgroundColor = lightTheme.backgroundColor;
        newButton.borderColor = lightTheme.borderColor;
        [updatedButtons addObject:newButton];
      }
      context.message.buttons = updatedButtons;
      break;
    }
    default:
      break;
  }
}

Personnaliser l’invite d’évaluation de l’App Store

Vous pouvez utiliser des messages in-app dans une campagne pour demander aux utilisateurs de laisser un avis sur l’App Store.

Remarque

Étant donné que cet exemple d’invite remplace le comportement par défaut de Braze, nous ne pouvons pas suivre automatiquement les impressions si elle est implémentée. Vous devez enregistrer vos propres analyses.

Étape 1 : Définir le délégué de message in-app

Tout d’abord, définissez le BrazeInAppMessageUIDelegate dans votre application.

Étape 2 : Désactiver le message d’évaluation par défaut de l’App Store

Ensuite, implémentez la méthode de délégation inAppMessage(_:displayChoiceForMessage:) pour désactiver le message d’évaluation par défaut de l’App Store.

• swift
• objective-c

1
2
3
4
5
6
7
8
9

func inAppMessage(_ ui: BrazeInAppMessageUI, displayChoiceForMessage message: Braze.InAppMessage) -> BrazeInAppMessageUI.DisplayChoice {
  if message.extras["AppStore Review"] != nil,
    let messageUrl = message.clickAction.url {
      UIApplication.shared.open(messageUrl, options: [:], completionHandler: nil)
      return .discard
  } else {
    return .now
  }
}

1
2
3
4
5
6
7
8
9

- (enum BRZInAppMessageUIDisplayChoice)inAppMessage:(BrazeInAppMessageUI *)ui
                            displayChoiceForMessage:(BRZInAppMessageRaw *)message {
  if (message.extras != nil && message.extras[@"AppStore Review"] != nil) {
    [[UIApplication sharedApplication] openURL:message.url options:@{} completionHandler:nil];
    return BRZInAppMessageUIDisplayChoiceDiscard;
  } else {
    return BRZInAppMessageUIDisplayChoiceNow;
  }
}

Étape 3 : Créer un deep link

Dans votre gestionnaire scene:openURLContexts:, ajoutez le code suivant pour traiter le deep link {YOUR-APP-SCHEME}:app-store-review. Notez que vous devrez importer StoreKit pour utiliser SKStoreReviewController :

• swift
• objective-c

1
2
3
4
5
6
7
8
9

func scene(_ scene: UIScene, openURLContexts URLContexts: Set<UIOpenURLContext>) {
  guard let url = URLContexts.first?.url else { return }
  let urlString = url.absoluteString.removingPercentEncoding
  if (urlString == "{YOUR-APP-SCHEME}:app-store-review") {
    SKStoreReviewController.requestReview()
    return;
  }
  // Other deep link handling code…
}

1
2
3
4
5
6
7
8
9

- (void)scene:(UIScene *)scene openURLContexts:(NSSet<UIOpenURLContext *> *)URLContexts {
  NSURL *url = URLContexts.allObjects.firstObject.URL;
  NSString *urlString = url.absoluteString.stringByRemovingPercentEncoding;
  if ([urlString isEqualToString:@"{YOUR-APP-SCHEME}:app-store-review"]) {
    [SKStoreReviewController requestReview];
    return;
  }
  // Other deep link handling code…
}

Étape 4 : Définir un comportement de clic personnalisé

Ensuite, créez une campagne de communication par message in-app avec les éléments suivants :

• La paire clé-valeur "AppStore Review" : "true"
• Le comportement au clic défini sur « Deep link vers l’application », en utilisant le deep link {YOUR-APP-SCHEME}:app-store-review.

Conseil

Apple limite les invites d’évaluation de l’App Store à un maximum de trois fois par an pour chaque utilisateur. Votre campagne devrait donc être limitée en fréquence à trois fois par an et par utilisateur.

Les utilisateurs peuvent désactiver les invites d’évaluation de l’App Store. Par conséquent, votre invite d’évaluation personnalisée ne doit pas promettre qu’une invite d’évaluation native de l’App Store apparaîtra ni demander directement un avis.