In-App-Nachrichten anpassen

Voraussetzungen

Bevor Sie dieses Feature nutzen können, müssen Sie das Braze Swift SDK integrieren.

Einrichten des UI-Delegate (erforderlich)

Um die Darstellung von In-App-Nachrichten anzupassen und auf verschiedene Lebenszyklus-Ereignisse zu reagieren, müssen Sie BrazeInAppMessageUIDelegate einrichten. Dies ist ein Delegate-Protokoll, das für den Empfang und die Verarbeitung von ausgelösten In-App-Nachrichten-Payloads, den Empfang von Anzeige-Lebenszyklus-Ereignissen und die Steuerung des Anzeige-Timings verwendet wird. Um BrazeInAppMessageUIDelegate zu verwenden, müssen Sie:

• Die Standard-Implementierung BrazeInAppMessageUI als Ihren inAppMessagePresenter verwenden.
• Die BrazeUI-Bibliothek in Ihr Projekt einbinden.

Schritt 1: Das BrazeInAppMessageUIDelegate-Protokoll implementieren

Implementieren Sie zunächst das BrazeInAppMessageUIDelegate-Protokoll und alle gewünschten zugehörigen Methoden. Im folgenden Beispiel wird dieses Protokoll in der AppDelegate-Klasse der Anwendung implementiert.

• 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

Schritt 2: Das delegate-Objekt zuweisen

Weisen Sie das delegate-Objekt auf der BrazeInAppMessageUI-Instanz zu, bevor Sie diese In-App-Nachrichten-UI als Ihren inAppMessagePresenter festlegen.

• 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;

Wichtig

Nicht alle Delegate-Methoden sind in Objective-C verfügbar, da ihre Parameter nicht mit der Sprachlaufzeit kompatibel sind.

Tipp

Eine schrittweise Implementierung des In-App-Nachrichten-UI-Delegate finden Sie in diesem Tutorial.

Klick-Verhalten

Jedes Braze.InAppMessage-Objekt enthält eine entsprechende ClickAction, die das Verhalten beim Klicken definiert.

Klick-Aktionstypen

Die Eigenschaft clickAction Ihres Braze.InAppMessage-Objekts ist standardmäßig auf .none gesetzt, kann aber auf einen der folgenden Werte eingestellt werden:

Wichtig

Bei In-App-Nachrichten mit Buttons wird die clickAction der Nachricht auch in den endgültigen Payload aufgenommen, wenn die Klick-Aktion vor dem Hinzufügen des Button-Texts hinzugefügt wird.

Klick-Verhalten anpassen

Um dieses Verhalten anzupassen, können Sie die Eigenschaft clickAction ändern, indem Sie sich auf das folgende Beispiel beziehen:

• 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)
  }
}

Angepasstes Verhalten verarbeiten

Die folgende Delegate-Methode BrazeInAppMessageUIDelegate wird aufgerufen, wenn Nutzer:innen auf eine In-App-Nachricht klicken. Dieser Callback wird bei von Nutzer:innen initiierten Klicks auf In-App-Nachrichten-Buttons und HTML-In-App-Nachrichten-Buttons (Links) ausgelöst, und eine Button-ID wird als optionaler Parameter für diese Interaktionen bereitgestellt. Dieser Callback wird nicht bei programmatischen Klicks aufgerufen, die über brazeBridge.logClick() ausgelöst werden.

• 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;

Diese Methode gibt einen booleschen Wert zurück, der angibt, ob Braze mit der Ausführung der Klick-Aktion fortfahren soll.

• 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;
}

Durch Wischen Slideup-Nachrichten schließen

Standardmäßig können Slideup-In-App-Nachrichten durch eine Wischgeste geschlossen werden. Die Richtung der Wischbewegung hängt von der Slideup-Position ab:

• Wischen nach links oder rechts: Schließt das Slideup unabhängig von seiner Position.
• Slideup von unten: Wischen von oben nach unten schließt die Nachricht. Wischen von unten nach oben schließt sie nicht.
• Slideup von oben: Wischen von unten nach oben schließt die Nachricht. Wischen von oben nach unten schließt sie nicht.

Dieses Wischverhalten ist in die standardmäßige BrazeInAppMessageUI SlideupView integriert und gilt nur für Slideup-In-App-Nachrichten. Modale und Vollbild-In-App-Nachrichten unterstützen kein Schließen durch Wischen. Um die Slideup-Ansicht weiter anzupassen, einschließlich des Wischverhaltens, können Sie die SlideupView.Attributes ändern oder über Subclassing eine angepasste Ansicht bereitstellen.

Hinweis

Das Tippen außerhalb einer Slideup-Nachricht schließt diese nicht. Für modale oder Vollbild-In-App-Nachrichten können Sie das Schließen durch Tippen auf den Hintergrund mithilfe des Attributs dismissOnBackgroundTap aktivieren, das im folgenden Abschnitt beschrieben wird.

Schließen von Modals anpassen

Um das Schließen durch Tippen außerhalb des Modals zu aktivieren, können Sie die Eigenschaft dismissOnBackgroundTap im Attributes-Struct des jeweiligen In-App-Nachrichtentyps ändern, den Sie anpassen möchten.

Wenn Sie dieses Feature beispielsweise für modale Bild-In-App-Nachrichten aktivieren möchten, können Sie Folgendes konfigurieren:

• swift
• objective-c

1

BrazeInAppMessageUI.ModalImageView.Attributes.defaults.dismissOnBackgroundTap = true

Der Standardwert ist false. Dieser bestimmt, ob die modale In-App-Nachricht geschlossen wird, wenn Nutzer:innen außerhalb der In-App-Nachricht tippen.

Weitere Informationen zur Anpassung von In-App-Nachrichten finden Sie in diesem Artikel.

Ausrichtung von Nachrichten anpassen

Sie können die Ausrichtung Ihrer In-App-Nachrichten anpassen. Sie können eine neue Standardausrichtung für alle Nachrichten festlegen oder eine individuelle Ausrichtung für eine einzelne Nachricht festlegen.

• 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;

Nachdem die In-App-Nachricht angezeigt wurde, führt jede Änderung der Geräteausrichtung, während die Nachricht noch angezeigt wird, dazu, dass sich die Nachricht mit dem Gerät dreht (vorausgesetzt, dies wird durch die orientation-Konfiguration der Nachricht unterstützt).

Die Geräteausrichtung muss auch von der orientation-Eigenschaft der In-App-Nachricht unterstützt werden, damit die Nachricht angezeigt wird. Zusätzlich wird die Einstellung preferredOrientation nur berücksichtigt, wenn sie in den unterstützten Schnittstellenausrichtungen Ihrer Anwendung im Abschnitt Deployment Info in den Einstellungen Ihres Targets in Xcode enthalten ist.

Hinweis

Die Ausrichtung wird nur für die Darstellung der Nachricht angewendet. Nachdem das Gerät die Ausrichtung geändert hat, nimmt die Nachrichtenansicht eine der von ihr unterstützten Ausrichtungen ein. Auf kleineren Geräten (iPhones, iPod Touch) kann das Festlegen einer Querformat-Ausrichtung für eine modale oder Vollbild-In-App-Nachricht zu abgeschnittenen Inhalten führen.

Anzeigezeitpunkt anpassen

Sie können steuern, ob eine verfügbare In-App-Nachricht zu bestimmten Zeitpunkten in der Nutzererfahrung angezeigt wird. Wenn es Situationen gibt, in denen die In-App-Nachricht nicht erscheinen soll, z. B. während eines Vollbildspiels oder auf einem Ladebildschirm, können Sie ausstehende In-App-Nachrichten verzögern oder verwerfen. Um den Zeitpunkt der In-App-Nachricht zu steuern, verwenden Sie die Delegate-Methode inAppMessage(_:displayChoiceForMessage:), um die Eigenschaft BrazeInAppMessageUI.DisplayChoice festzulegen.

• 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

Konfigurieren Sie BrazeInAppMessageUI.DisplayChoice so, dass einer der folgenden Werte zurückgegeben wird:

Tipp

Ein Beispiel für InAppMessageUI finden Sie in unserem Swift Braze SDK Repository und Objective-C.

Statusleiste ausblenden

Bei In-App-Nachrichten vom Typ Full, FullImage und HTML blendet das SDK die Statusleiste standardmäßig aus. Bei anderen Typen von In-App-Nachrichten bleibt die Statusleiste unverändert. Um dieses Verhalten zu konfigurieren, verwenden Sie die Delegate-Methode inAppMessage(_:prepareWith:), um die Eigenschaft statusBarHideBehavior im PresentationContext festzulegen. Dieses Feld akzeptiert einen der folgenden Werte:

Dark Mode deaktivieren

Um zu verhindern, dass In-App-Nachrichten den Dark-Mode-Stil übernehmen, wenn auf dem Gerät der Nutzer:innen der Dark Mode aktiviert ist, implementieren Sie die inAppMessage(_:prepareWith:) Delegate-Methode. Der an die Methode übergebene PresentationContext enthält eine Referenz auf das darzustellende InAppMessage-Objekt. Jede InAppMessage verfügt über eine themes-Eigenschaft, die ein dark- und ein light-Mode-Theme enthält. Wenn Sie die Eigenschaft themes.dark auf nil setzen, zeigt Braze die In-App-Nachricht automatisch mit dem hellen Theme an.

In-App-Nachrichtentypen mit Buttons haben ein zusätzliches themes-Objekt in ihrer buttons-Eigenschaft. Um zu verhindern, dass Buttons den Dark-Mode-Stil übernehmen, können Sie map(_:) verwenden, um ein neues Array von Buttons mit einem light-Theme und ohne dark-Theme zu erstellen.

• 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;
  }
}

Anpassen der App-Store-Bewertungsaufforderung

Sie können In-App-Nachrichten in einer Campaign verwenden, um Nutzer:innen um eine App-Store-Bewertung zu bitten.

Hinweis

Da diese Beispielaufforderung das Standardverhalten von Braze überschreibt, können wir Impressionen nicht automatisch tracken, wenn sie implementiert wird. Sie müssen Ihre eigenen Analytics protokollieren.

Schritt 1: In-App-Nachrichten-Delegate festlegen

Legen Sie zunächst den BrazeInAppMessageUIDelegate in Ihrer App fest.

Schritt 2: Standard-App-Store-Bewertungsnachricht deaktivieren

Implementieren Sie als Nächstes die inAppMessage(_:displayChoiceForMessage:) Delegate-Methode, um die Standard-App-Store-Bewertungsnachricht zu deaktivieren.

• 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;
  }
}

Schritt 3: Einen Deeplink erstellen

Fügen Sie in Ihrem scene:openURLContexts:-Handler den folgenden Code hinzu, um den Deeplink {YOUR-APP-SCHEME}:app-store-review zu verarbeiten. Beachten Sie, dass Sie StoreKit importieren müssen, um SKStoreReviewController verwenden zu können:

• 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…
}

Schritt 4: Angepasstes Klickverhalten festlegen

Erstellen Sie als Nächstes eine In-App-Messaging-Campaign mit den folgenden Einstellungen:

• Das Schlüssel-Wert-Paar "AppStore Review" : "true"
• Das Klickverhalten auf „Deeplink in die App“ gesetzt, unter Verwendung des Deeplinks {YOUR-APP-SCHEME}:app-store-review.

Tipp

Apple beschränkt App-Store-Bewertungsaufforderungen auf maximal drei Mal pro Jahr für jede:n Nutzer:in, daher sollte Ihre Campaign auf drei Mal pro Jahr pro Nutzer:in frequenzbegrenzt sein.

Nutzer:innen können App-Store-Bewertungsaufforderungen deaktivieren. Daher sollte Ihre angepasste Bewertungsaufforderung nicht versprechen, dass eine native App-Store-Bewertungsaufforderung erscheint, und auch nicht direkt um eine Bewertung bitten.