In-App-Nachrichten anpassen

Voraussetzungen

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

Einrichten des UI-Delegates (erforderlich)

Um die Darstellung von In-App-Nachrichten anzupassen und auf verschiedene Lifecycle-Ereignisse zu reagieren, müssen Sie BrazeInAppMessageUIDelegate einrichten. Dies ist ein Delegate-Protokoll, das zum Empfangen und Verarbeiten von getriggerten In-App-Nachrichten-Payloads, zum Empfangen von Anzeige-Lifecycle-Ereignissen und zur 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: Implementieren Sie das BrazeInAppMessageUIDelegate-Protokoll

Implementieren Sie zunächst das BrazeInAppMessageUIDelegate-Protokoll und alle entsprechenden Methoden, die Sie verwenden möchten. 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: Weisen Sie das delegate-Objekt zu

Weisen Sie das delegate-Objekt 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 mit der Sprach-Laufzeitumgebung nicht kompatibel sind.

Tipp

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

Verhalten bei Klick

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

Klick-Aktionstypen

Die Eigenschaft clickAction Ihrer Braze.InAppMessage 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.

Verhalten bei Klick anpassen

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

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

Behandlung des angepassten Verhaltens

Die folgende Delegate-Methode von BrazeInAppMessageUIDelegate wird aufgerufen, wenn Nutzer:innen auf eine In-App-Nachricht klicken. Dieser Callback wird bei nutzer:innen-initiierten Klicks auf Buttons von In-App-Nachrichten 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 die Klick-Aktion weiterhin ausführen 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;
}

Slideup-Nachrichten durch Wischen schließen

Standardmäßig können Slideup-In-App-Nachrichten durch eine Wischgeste geschlossen werden. Die Wischrichtung hängt von der Position des Slideups 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 Standard-BrazeInAppMessageUI SlideupView integriert und gilt nur für Slideup-In-App-Nachrichten. Modale und Vollbild-In-App-Nachrichten unterstützen das Schließen durch Wischen nicht. Um die Slideup-Ansicht weiter anzupassen, einschließlich des Wischverhaltens, können Sie die SlideupView.Attributes ändern oder eine angepasste Ansicht durch Subklassen 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 außerhalb der Nachricht mithilfe des Attributs dismissOnBackgroundTap aktivieren, das im folgenden Abschnitt beschrieben wird.

Modale Schließvorgänge anpassen

Um das Schließen durch Tippen außerhalb der Nachricht zu aktivieren, können Sie die Eigenschaft dismissOnBackgroundTap in der Attributes-Struktur des 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.

Nachrichtenausrichtung anpassen

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

• alle nachrichten
• einzelne nachricht

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 außerdem 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 der Zieleinstellungen 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, übernimmt die Nachrichtenansicht eine der von ihr unterstützten Ausrichtungen. Auf kleineren Geräten (iPhones, iPod Touch) kann das Festlegen einer Querformat-Ausrichtung für eine modale oder bildschirmfüllende In-App-Nachricht zu abgeschnittenen Inhalten führen.

Anzeigezeitpunkt anpassen

Sie können steuern, ob eine verfügbare In-App-Nachricht an bestimmten Stellen der Nutzererfahrung angezeigt wird. Wenn es Situationen gibt, in denen die In-App-Nachricht nicht erscheinen soll – beispielsweise während eines Vollbildspiels oder auf einem Ladebildschirm –, können Sie ausstehende In-App-Nachrichten verzögern oder verwerfen. Um den Zeitpunkt von In-App-Nachrichten 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

Für 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 das Dark-Mode-Styling ü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 InAppMessage-Objekt, das angezeigt werden soll. Jede InAppMessage hat 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 Light-Theme an.

In-App-Nachrichtentypen mit Buttons haben ein zusätzliches themes-Objekt in ihrer buttons-Eigenschaft. Um zu verhindern, dass Buttons das Dark-Mode-Styling ü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;
  }
}

App Store-Bewertungsaufforderung anpassen

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

Hinweis

Da diese Beispiel-Aufforderung das Standardverhalten von Braze überschreibt, können Impressionen nicht automatisch erfasst werden, wenn sie implementiert wird. Sie müssen Ihre eigenen Analytics protokollieren.

Schritt 1: In-App-Nachrichten-Delegate einrichten

Richten Sie zunächst das BrazeInAppMessageUIDelegate in Ihrer App ein.

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: Deeplink erstellen

Fügen Sie in Ihrem scene:openURLContexts:-Handler den folgenden Code hinzu, um den {YOUR-APP-SCHEME}:app-store-review-Deeplink 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 folgenden Einstellungen:

• Das Schlüssel-Wert-Paar "AppStore Review" : "true"
• Das Klickverhalten auf „Deeplink in 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 frequenzlimitiert werden.

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.