Avertissement

AppboyKit (également connu sous le nom de SDK Objective-C) n’est plus pris en charge et a été remplacé par Swift SDK. Il ne recevra plus de nouvelles fonctionnalités, de corrections de bugs, de mises à jour de sécurité ou d’assistance technique - cependant, la messagerie et l’analyse continueront à fonctionner normalement. Pour en savoir plus, consultez Présentation du nouveau SDK Braze Swift.

Important

Vous recherchez le guide d’intégration de base du développeur de messages in-app ? Retrouvez-le dans le guide d’intégration de base du développeur de messages in-app.

Guide d’implémentation de la messagerie in-app

Ce guide d’implémentation avancé et optionnel couvre les considérations du code des messages in-app, trois cas d’utilisation personnalisés créés par notre équipe et les extraits de code qui l’accompagnent. Visitez notre dépôt de démonstrations Braze sur GitHub ! Ce guide d’implémentation est centré sur une implémentation Swift, mais des extraits de code Objective-C sont fournis aux personnes intéressées. Vous recherchez des implémentations HTML ? Jetez un coup d’œil à notre dépôt de modèles HTML !

Considérations du code

Le guide suivant propose une intégration de développeur personnalisée facultative à utiliser en plus des messages in-app par défaut. Les contrôleurs de vue personnalisés sont inclus dans chaque cas d’utilisation, offrant des exemples pour étendre la fonctionnalité et personnaliser nativement l’apparence et la convivialité de vos messages in-app.

Sous-classes ABKInAppMessage

L’extrait de code suivant est une méthode de délégation de l’interface utilisateur du SDK Braze qui détermine la vue de sous-classe avec laquelle vous souhaitez remplir votre message in-app. Nous couvrons une implémentation de base dans ce guide et montrons comment les sous-classes plein écran, contextuelle et modale peuvent être implémentées de manière captivante. Notez que si vous souhaitez configurer votre contrôleur de vue personnalisé, vous devez configurer toutes les autres sous-classes de messages in-app. Après avoir bien compris les concepts derrière la sous-classification, consultez nos cas d’utilisation pour commencer à implémenter des sous-classes de messagerie in-app.

• swift
• objective-c

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
extension AppboyManager: ABKInAppMessageUIDelegate {
  func inAppMessageViewControllerWith(_ inAppMessage: ABKInAppMessage) -> ABKInAppMessageViewController {
    switch inAppMessage {
    case is ABKInAppMessageSlideup:
      return slideupViewController(inAppMessage: inAppMessage) //Custom Method
    case is ABKInAppMessageModal:
      return modalViewController(inAppMessage: inAppMessage) //Custom Method
    case is ABKInAppMessageFull:
      return fullViewController(inAppMessage: inAppMessage) //Custom Method
    case is ABKInAppMessageHTML:
      return ABKInAppMessageHTMLViewController(inAppMessage: inAppMessage)
    default:
      return ABKInAppMessageViewController(inAppMessage: inAppMessage)
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
- (ABKInAppMessageViewController *)inAppMessageViewControllerWithInAppMessage:(ABKInAppMessage *)inAppMessage {
  if ([inAppMessage isKindOfClass:[ABKInAppMessageSlideup class]]) {
    return [self slideupViewControllerWithInAppMessage:inAppMessage]; //Custom Method
  } else if ([inAppMessage isKindOfClass:[ABKInAppMessageModal class]]) {
    return [self modalViewControllerWithInAppMessage:inAppMessage]; //Custom Method
  } else if ([inAppMessage isKindOfClass:[ABKInAppMessageFull class]]) {
    return [self fullViewControllerWithInAppMessage:inAppMessage]; //Custom Method
  } else if ([inAppMessage isKindOfClass:[ABKInAppMessageHTML class]]) {
    return [[ABKInAppMessageHTMLViewController alloc] initWithInAppMessage:inAppMessage];
  } else {
    return [[ABKInAppMessageViewController alloc] initWithInAppMessage:inAppMessage];
  }
}

Cas d’utilisation

Nous avons fourni trois cas d’utilisation dans la section suivante. Chaque cas d’utilisation offre une explication détaillée, des extraits de code pertinents et un aperçu de la manière dont les messages in-app peuvent être examinés et utilisés dans le tableau de bord de Braze :

• Message in-app contextuel personnalisé
• Message in-app modal personnalisé
• Message in-app plein écran personnalisé

Message in-app contextuel personnalisé

Lors de la création de votre message in-app contextuel, vous remarquerez peut-être que vous ne pouvez pas modifier l’emplacement du message à l’aide des méthodes par défaut. Une telle modification est rendue possible en sous-classant le ABKInAppMessageSlideupViewController et en remplaçant la variable offset par votre propre variable personnalisée. L’image ci-contre montre comment cela peut être utilisé pour ajuster vos messages in-app contextuels.

Visitez le SlideFromBottomViewController pour commencer.

Ajouter un comportement supplémentaire à notre interface utilisateur par défaut

• swift
• objective-c

1
2
3
func setSlideConstraint() {
  offset = 0
}

1
2
3
4
5
6
7
8
override var offset: CGFloat {
  get {
    return super.offset
  }
  set {
    super.offset = newValue + adjustedOffset
  }
}

1
2
3
func setSlideConstraint() {
    slideConstraint?.constant = bottomSpacing
}

1
2
3
private var bottomSpacing: CGFloat {
    return AppboyManager.shared.activeApplicationViewController.topMostViewController().view.safeAreaInsets.bottom
}

1
2
3
- (void)setOffset {
  self.offset = 0;
}

1
2
3
4
5
6
7
- (CGFloat)offset {
  return [super offset];
}

- (void)setOffset:(CGFloat)offset {
  [super setOffset:offset + [self adjustedOffset]];
}

1
2
3
- (void)self.setSlideConstraint:(NSLayoutConstraint *)slideConstraint {
  slideConstraint.constant = bottomSpacing;
}

1
2
3
- (CGFloat)bottomSpacing {
  return [AppboyManager shared].activeApplicationViewController.topMostViewController.view.safeAreaInsets.bottom;
}

• swift
• objective-c

1
2
3
4
override func beforeMoveInAppMessageViewOnScreen() {
  super.beforeMoveInAppMessageViewOnScreen()
  setOffset()
}

1
2
3
override func beforeMoveInAppMessageViewOnScreen() {
  setSlideConstraint()
}

1
2
3
4
- (void)beforeMoveInAppMessageViewOnScreen {
  [super beforeMoveInAppMessageViewOnScreen];
  [self setOffset];
}

1
2
3
- (void)beforeMoveInAppMessageViewOnScreen {
  [self setSlideConstraint:self.slideConstraint];
}

Modifier la contrainte pour l’orientation de l’appareil
Ajustez la valeur respective dans viewWillTransition(), car la sous-classe assume la responsabilité de maintenir la contrainte synchronisée lors des changements de mise en page.

Message in-app modal personnalisé

Un ABKInAppMessageModalViewController peut être sous-classé pour tirer parti d’un UIPickerView offrant des moyens attrayants de collecter de précieux attributs utilisateur. Le message in-app modal personnalisé vous permet d’utiliser le contenu connecté ou toute liste disponible pour afficher et recueillir des attributs à partir d’une liste dynamique d’éléments.

Vous pouvez intégrer vos propres vues dans des messages in-app sous-classés. Cet exemple illustre comment un UIPickerView peut être utilisé pour étendre la fonctionnalité d’un ABKModalInAppMessageViewController.

Visitez le ModalPickerViewController pour commencer.

Configuration du tableau de bord

Pour configurer un message in-app modal dans le tableau de bord, vous devez fournir une liste d’éléments formatés comme une chaîne de caractères séparée par des virgules. Dans notre exemple, nous utilisons le contenu connecté pour extraire une liste de noms d’équipes JSON et les formater en conséquence.

Dans les paires clé-valeur, fournissez un attribute_key ; cette clé, ainsi que la valeur sélectionnée par l’utilisateur, sera enregistrée dans son profil utilisateur en tant qu’attribut personnalisé. Votre logique d’affichage personnalisé doit gérer les attributs utilisateur envoyés à Braze.

Le dictionnaire extras dans l’objet ABKInAppMessage vous permet de rechercher une clé view_type (le cas échéant) qui signale la vue correcte à afficher. Il est important de noter que les messages in-app sont configurés par message, de sorte que les vues modales personnalisées et par défaut puissent fonctionner harmonieusement.

• swift
• objective-c

1
2
3
4
5
6
7
8
func modalViewController(inAppMessage: ABKInAppMessage) -> ABKInAppMessageModalViewController {
  switch inAppMessage.extras?[InAppMessageKey.viewType.rawValue] as? String {
  case InAppMessageViewType.picker.rawValue:
    return ModalPickerViewController(inAppMessage: inAppMessage)
  default:
    return ABKInAppMessageModalViewController(inAppMessage: inAppMessage)
  }
}

1
2
3
4
5
6
7
8
9
10
11
- (ABKInAppMessageModalViewController *)modalViewControllerWithInAppMessage:(ABKInAppMessage *)inAppMessage {
  InAppMessageData *inAppMessageData = [[InAppMessageData alloc] init];
  NSString *key = [inAppMessageData rawValueForInAppMessageKey:InAppMessageKeyViewType];
  NSString *viewType = [inAppMessageData rawValueForInAppMessageViewType:InAppMessageViewTypePicker];

  if ([inAppMessage.extras objectForKey:key] && [inAppMessage.extras[key] isEqualToString:viewType]) {
    return [[ModalViewController alloc] initWithInAppMessage:inAppMessage];
  } else {
    return [[ABKInAppMessageModalViewController alloc] initWithInAppMessage:inAppMessage];
  }
}

• swift
• objective-c

1
2
3
4
5
6
7
override var nibname: String{
  return "ModalPickerViewController"
}

override func loadView() {
  Bundle.main.loadNibNamed(nibName, owner: self, options: nil)
}

1
2
3
4
- (void)loadView {
  NSString *nibName = @"ModalPickerViewController";
  [[NSBundle mainBundle] loadNibNamed:nibName owner:self options:nil];
}

• swift
• objective-c

1
2
3
4
5
6
override func viewDidLoad() {
  super.viewDidLoad()

  items = inAppMessage.message.separatedByCommaSpaceValue
  pickerView.reloadAllComponents()
}

1
2
3
4
5
6
- (void)viewDidLoad {
  [super viewDidLoad];

  self.items = [[NSArray alloc] initWithArray:[self.inAppMessage.message componentsSeparatedByString:@", "]];
  [self.pickerView reloadAllComponents];
}

• swift
• objective-c

1
2
3
4
5
@IBAction func primaryButtonTapped(_ sender: Any) {
  guard let item = selectedItem, !item.isEmpty, let attributeKey = inAppMessage.extras?[InAppMessageKey.attributeKey.rawValue] as? String else { return }

  AppboyManager.shared.setCustomAttributeWithKey(attributeKey, andStringValue: item)
}

1
2
3
4
5
6
7
8
- (IBAction)primaryButtonTapped:(id)sender {
  InAppMessageData *inAppMessageData = [[InAppMessageData alloc] init];
  NSString *key = [inAppMessageData rawValueForInAppMessageKey:InAppMessageKeyAttributeKey];

  if (self.selectedItem.length > 0 && [self.inAppMessage.extras objectForKey:key]) {
    [[AppboyManager shared] setCustomAttributeWithKey:self.inAppMessage.extras[key] andStringValue:self.selectedItem];
  }
}

Conseil

Vous souhaitez utiliser nos messages in-app modaux personnalisés pour partager des vidéos via FaceTime ? Consultez notre guide d’implémentation des messages in-app SharePlay.

Message in-app plein écran personnalisé

Utilisez des messages in-app plein écran personnalisés pour créer des invites interactives et conviviales afin de recueillir de précieuses données client. L’exemple ci-contre montre une implémentation du message in-app plein écran personnalisé réinventé comme un primer push interactif avec des préférences de notification.

Visitez le FullListViewController pour commencer.

Configuration du tableau de bord

Pour configurer un message in-app plein écran personnalisé dans le tableau de bord, vous devez fournir une liste de vos étiquettes formatées comme une chaîne de caractères séparée par des virgules.

Dans les paires clé-valeur, fournissez un attribute_key ; cette clé, ainsi que les valeurs sélectionnées par l’utilisateur, sera enregistrée dans son profil utilisateur en tant qu’attribut personnalisé. Votre logique d’affichage personnalisé doit gérer les attributs utilisateur envoyés à Braze.

Interception des touches de message in-app

L’interception des touches de message in-app est essentielle pour que les boutons du message in-app plein écran personnalisé fonctionnent correctement. Par défaut, le ABKInAppMessageImmersive ajoute un outil de reconnaissance des gestes tactiles au message, afin que les utilisateurs puissent fermer les messages sans boutons. En ajoutant un UISwitch ou un bouton à la hiérarchie de la vue UITableViewCell, les touches sont maintenant gérées par notre vue personnalisée. À partir d’iOS 6, les boutons et autres commandes ont la priorité lors de l’utilisation de reconnaissances de gestes, ce qui permet à notre message in-app plein écran personnalisé de fonctionner comme prévu.