Skip to content

Anpassen von In-App-Nachrichten

Erfahren Sie, wie Sie In-App-Nachrichten für das Braze SDK anpassen können. Für fortgeschrittene Formatierungstechniken empfehlen wir Ihnen unser Tutorial zur Anpassung der Nachrichtenformatierung mithilfe von Schlüssel-Wert-Paaren.

Voraussetzungen

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

Angepasste Stile

Die UI-Elemente von Braze sind standardmäßig so gestaltet, dass sie ein neutrales In-App-Nachricht-Erlebnis bieten und die Konsistenz mit anderen mobilen Plattformen von Braze gewährleisten. Die Standardstile von Braze sind in CSS im Braze SDK definiert.

Einstellen eines Standard-Stils

Indem Sie ausgewählte Stile in Ihrer Anwendung außer Kraft setzen, können Sie unsere standardmäßigen In-App-Nachrichtentypen mit Ihren eigenen Hintergrundbildern, Schriftfamilien, Stilen, Größen, Animationen und vielem mehr anpassen.

Im Folgenden finden Sie ein Beispiel für eine Überschreibung, die bewirkt, dass die Kopfzeilen einer In-App-Nachricht kursiv dargestellt werden:

1
2
3

  body .ab-in-app-message .ab-message-header {
    font-style: italic;
  }

In den JSDocs finden Sie weitere Informationen.

Anpassen des Z-Index

In-App-Nachrichten werden standardmäßig über z-index: 9001 angezeigt. Dies lässt sich mit der Initialisierungsoption inAppMessageZIndex konfigurieren, falls Ihre Website Elemente mit höheren Werten stilisiert.

1
2
3
4

braze.initialize("YOUR-API-KEY", {
    baseUrl: "YOUR-API-ENDPOINT",
    inAppMessageZIndex: 12000
});

Anpassen von Nachrichtenabweisungen

Standardmäßig wird eine In-App-Nachricht durch Drücken der Escape-Taste oder durch einen Klick auf den ausgegrauten Hintergrund der Seite verworfen, wenn sie angezeigt wird. Konfigurieren Sie die Initialisierungsoption requireExplicitInAppMessageDismissal auf true, um dieses Verhalten zu verhindern und einen expliziten Klick auf einen Button zu verlangen, um Nachrichten zu schließen.

1
2
3
4
5

import * as braze from "@braze/web-sdk";
braze.initialize("YOUR-API-KEY", {
    baseUrl: "YOUR-API-ENDPOINT",
    requireExplicitInAppMessageDismissal: true
});

Anpassen des Anzeigezeitpunkts

Um das standardmäßige Anzeigeverhalten zu überschreiben, entfernen Sie Aufrufe von braze.automaticallyShowInAppMessages() und verarbeiten Sie Nachrichten in braze.subscribeToInAppMessage(). Registrieren Sie Ihren Callback vor braze.openSession(), damit Sie Nachrichten beim Sitzungsstart abfangen und entscheiden können, ob Sie jede Nachricht anzeigen oder zurückstellen möchten.

Standardmäßig zeigt Braze In-App-Nachrichten an, wenn sie getriggert werden und zur Anzeige berechtigt sind. Wenn Sie ein anderes Verhalten für Ihr App-Erlebnis benötigen, verwenden Sie einen angepassten Callback, um Nachrichten basierend auf Ihrer eigenen Logik zurückzustellen oder anzuzeigen.

Das folgende Beispiel zeigt, wie Sie getriggerte In-App-Nachrichten abonnieren, ausgewählte Nachrichten zurückstellen und zurückgestellte Nachrichten später anzeigen können:

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

import * as braze from "@braze/web-sdk";

braze.initialize("YOUR-API-KEY", {
    baseUrl: "YOUR-API-ENDPOINT"
});

braze.subscribeToInAppMessage(function (message) {
    // Control-group messages should always be "shown" to log analytics.
    if (message.isControl || message instanceof braze.ControlMessage) {
        braze.showInAppMessage(message);
        return;
    }

    const shouldDefer = true; // Replace with your own display logic

    if (shouldDefer) {
        braze.deferInAppMessage(message);
        return;
    }

    braze.showInAppMessage(message);
});

braze.openSession();

// Later, when your app is ready to display a deferred message:
const deferredMessage = braze.getDeferredInAppMessage();
if (deferredMessage) {
    braze.showInAppMessage(deferredMessage);
}

Weitere Informationen zur Anpassung der Zustellung finden Sie unter:

Um festzulegen, dass Ihre In-App-Nachricht-Links in einem neuen Tab geöffnet werden, setzen Sie die Option openInAppMessagesInNewTab auf true, um zu erzwingen, dass alle Links von In-App-Nachrichten-Klicks in einem neuen Tab oder Fenster geöffnet werden.

1

braze.initialize('api-key', { openInAppMessagesInNewTab: true} );

Voraussetzungen

Bevor Sie dieses Feature nutzen können, müssen Sie das Android Braze SDK integrieren. Außerdem müssen Sie In-App-Nachrichten einrichten.

Angepasste Manager-Listener einstellen

Während der BrazeInAppMessageManager-Listener die Anzeige und den Lebenszyklus von In-App-Nachrichten automatisch verarbeiten kann, müssen Sie einen angepassten Manager-Listener implementieren, wenn Sie Ihre Nachrichten vollständig anpassen möchten.

Das Braze SDK verfügt über die Standardklasse DefaultHtmlInAppMessageActionListener. Sie wird verwendet, wenn kein angepasster Listener definiert ist, und führt automatisch die entsprechenden Aktionen durch. Wenn Sie mehr Kontrolle darüber benötigen, wie Nutzer:innen mit verschiedenen Buttons in einer angepassten HTML-In-App-Nachricht interagieren, implementieren Sie eine angepasste Klasse des Typs IHtmlInAppMessageActionListener.

Dieser Listener gilt für beide Nachrichtentypen – sowohl für Nachrichten, die mit angepasstem HTML erstellt wurden, als auch für Nachrichten, die mit dem Drag-and-Drop-Editor (DnD) erstellt wurden. Er gilt nicht für traditionelle IAMs. Traditionelle IAMs sind die integrierten, vom SDK gerenderten Nachrichtentypen von Braze (z. B. Slideup, Modal und Full), die im ursprünglichen Nachrichten-Editor für In-App-Nachrichten mit vordefinierten Layouts erstellt werden. Im Gegensatz zu angepassten HTML- und DnD-IAMs durchlaufen sie nicht den HTML-Aktions-Listener-Flow.

Wenn Sie einen angepassten IHtmlInAppMessageActionListener festlegen, überschreibt dessen Logik das Standard-Klickverhalten für alle DnD-Nachrichten. Bitte stellen Sie sicher, dass Ihr Marketing-Team darüber informiert ist, da dies deren Campaigns auf unerwartete Weise beeinflussen kann.

1. Schritt: Implementieren Sie den angepassten Manager-Listener

Schritt 1.1: Implementieren Sie IInAppMessageManagerListener

Erstellen Sie eine Klasse, die IInAppMessageManagerListener implementiert.

Die Callbacks in Ihrem IInAppMessageManagerListener werden ebenfalls an verschiedenen Punkten im Lebenszyklus der In-App-Nachricht aufgerufen. Wenn Sie beispielsweise einen angepassten Manager-Listener festlegen und eine In-App-Nachricht von Braze empfangen wird, wird die Methode beforeInAppMessageDisplayed() aufgerufen. Wenn Ihre Implementierung dieser Methode InAppMessageOperation.DISCARD zurückgibt, signalisiert dies Braze, dass die In-App-Nachricht von der Host-App verarbeitet wird und nicht von Braze angezeigt werden soll. Wenn InAppMessageOperation.DISPLAY_NOW zurückgegeben wird, versucht Braze, die In-App-Nachricht anzuzeigen. Diese Methode sollte verwendet werden, wenn die In-App-Nachricht auf angepasste Art und Weise angezeigt werden soll.

IInAppMessageManagerListener enthält auch Delegate-Methoden für Klicks auf Nachrichten und Buttons, die z. B. dazu verwendet werden können, eine Nachricht abzufangen, wenn ein Button oder eine Nachricht angeklickt wird, um sie weiter zu verarbeiten.

Schritt 1.2: Einbindung in IAM-View-Lebenszyklusmethoden (optional)

Die Schnittstelle IInAppMessageManagerListener verfügt über View-Methoden für In-App-Nachrichten, die an verschiedenen Punkten im Lebenszyklus der In-App-Nachrichten-View aufgerufen werden. Diese Methoden werden in der folgenden Reihenfolge aufgerufen:

  1. beforeInAppMessageViewOpened: Wird aufgerufen, kurz bevor die In-App-Nachricht zur View der Activity hinzugefügt wird. Die In-App-Nachricht ist zu diesem Zeitpunkt für die Nutzer:innen noch nicht sichtbar.
  2. afterInAppMessageViewOpened: Wird aufgerufen, kurz nachdem die In-App-Nachricht zur View der Activity hinzugefügt wurde. Die In-App-Nachricht ist jetzt für die Nutzer:innen sichtbar.
  3. beforeInAppMessageViewClosed: Wird aufgerufen, kurz bevor die In-App-Nachricht aus der View der Activity entfernt wird. Die In-App-Nachricht ist zu diesem Zeitpunkt für die Nutzer:innen noch sichtbar.
  4. afterInAppMessageViewClosed: Wird aufgerufen, kurz nachdem die In-App-Nachricht aus der View der Activity entfernt wurde. Die In-App-Nachricht ist zu diesem Zeitpunkt für die Nutzer:innen nicht mehr sichtbar.

Beachten Sie, dass die Zeit zwischen afterInAppMessageViewOpened und beforeInAppMessageViewClosed die Zeitspanne ist, in der die In-App-Nachrichten-View auf dem Bildschirm für die Nutzer:innen sichtbar ist.

Erstellen Sie eine Klasse, die IHtmlInAppMessageActionListener implementiert.

Die Callbacks in Ihrem IHtmlInAppMessageActionListener werden immer dann aufgerufen, wenn Nutzer:innen eine der folgenden Aktionen innerhalb der HTML-In-App-Nachricht auslösen:

  • Klick auf den Schließen-Button
  • Auslösen eines angepassten Events
  • Klick auf eine URL in einer HTML-In-App-Nachricht
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

public class CustomHtmlInAppMessageActionListener implements IHtmlInAppMessageActionListener {
  private final Context mContext;

  public CustomHtmlInAppMessageActionListener(Context context) {
    mContext = context;
  }

  @Override
  public void onCloseClicked(IInAppMessage inAppMessage, String url, Bundle queryBundle) {
    Toast.makeText(mContext, "HTML In App Message closed", Toast.LENGTH_LONG).show();
    BrazeInAppMessageManager.getInstance().hideCurrentlyDisplayingInAppMessage(false);
  }

  @Override
  public boolean onCustomEventFired(IInAppMessage inAppMessage, String url, Bundle queryBundle) {
    Toast.makeText(mContext, "Custom event fired. Ignoring.", Toast.LENGTH_LONG).show();
    return true;
  }

  @Override
  public boolean onOtherUrlAction(IInAppMessage inAppMessage, String url, Bundle queryBundle) {
    Toast.makeText(mContext, "Custom url pressed: " + url + " . Ignoring", Toast.LENGTH_LONG).show();
    BrazeInAppMessageManager.getInstance().hideCurrentlyDisplayingInAppMessage(false);
    return true;
  }
}

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

class CustomHtmlInAppMessageActionListener(private val mContext: Context) : IHtmlInAppMessageActionListener {

    override fun onCloseClicked(inAppMessage: IInAppMessage, url: String, queryBundle: Bundle) {
        Toast.makeText(mContext, "HTML In App Message closed", Toast.LENGTH_LONG).show()
        BrazeInAppMessageManager.getInstance().hideCurrentlyDisplayingInAppMessage(false)
    }

    override fun onCustomEventFired(inAppMessage: IInAppMessage, url: String, queryBundle: Bundle): Boolean {
        Toast.makeText(mContext, "Custom event fired. Ignoring.", Toast.LENGTH_LONG).show()
        return true
    }

    override fun onOtherUrlAction(inAppMessage: IInAppMessage, url: String, queryBundle: Bundle): Boolean {
        Toast.makeText(mContext, "Custom url pressed: $url . Ignoring", Toast.LENGTH_LONG).show()
        BrazeInAppMessageManager.getInstance().hideCurrentlyDisplayingInAppMessage(false)
        return true
    }
}

2. Schritt: Weisen Sie Braze an, den angepassten Manager-Listener zu verwenden

Nachdem Sie IInAppMessageManagerListener erstellt haben, rufen Sie BrazeInAppMessageManager.getInstance().setCustomInAppMessageManagerListener() auf, um BrazeInAppMessageManager anzuweisen, Ihren angepassten IInAppMessageManagerListener anstelle des Standard-Listeners zu verwenden. Tun Sie dies in Ihrem Application.onCreate() vor allen anderen Aufrufen von Braze, damit der angepasste Listener gesetzt wird, bevor In-App-Nachrichten angezeigt werden.

Ändern von In-App-Nachrichten vor der Anzeige

Wenn eine neue In-App-Nachricht eingeht und bereits eine In-App-Nachricht angezeigt wird, wird die neue Nachricht oben auf dem Stack abgelegt und kann zu einem späteren Zeitpunkt angezeigt werden.

Wenn jedoch keine In-App-Nachricht angezeigt wird, wird die folgende Delegate-Methode in IInAppMessageManagerListener aufgerufen:

1
2
3
4

@Override
public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
  return InAppMessageOperation.DISPLAY_NOW;
}

1
2
3

override fun beforeInAppMessageDisplayed(inAppMessage: IInAppMessage): InAppMessageOperation {
  return InAppMessageOperation.DISPLAY_NOW
}

Mit dem Rückgabewert von InAppMessageOperation() kann gesteuert werden, wann die Nachricht angezeigt werden soll. Die empfohlene Verwendung dieser Methode ist, Nachrichten in bestimmten Teilen der App zu verzögern, indem DISPLAY_LATER zurückgegeben wird, wenn In-App-Nachrichten das App-Erlebnis der Nutzer:innen beeinträchtigen würden.

Rückgabewert InAppMessageOperation Verhalten
DISPLAY_NOW Die Nachricht wird angezeigt
DISPLAY_LATER Die Nachricht wird an den Stack zurückgegeben und bei der nächsten Gelegenheit angezeigt
DISCARD Die Nachricht wird verworfen
null Die Nachricht wird ignoriert. Diese Methode sollte NICHT null zurückgeben

Weitere Informationen finden Sie unter InAppMessageOperation.

Unter Android wird dies durch den Aufruf von logClick und logImpression bei In-App-Nachrichten und logButtonClick bei immersiven In-App-Nachrichten erreicht.

Nachdem Sie IHtmlInAppMessageActionListener erstellt haben, rufen Sie BrazeInAppMessageManager.getInstance().setCustomHtmlInAppMessageActionListener() auf, um BrazeInAppMessageManager anzuweisen, Ihren angepassten IHtmlInAppMessageActionListener anstelle des Standard-Aktions-Listeners zu verwenden.

Wir empfehlen, Ihren IHtmlInAppMessageActionListener in Ihrem Application.onCreate() vor allen anderen Aufrufen von Braze zu setzen. Dadurch wird der angepasste Aktions-Listener festgelegt, bevor eine In-App-Nachricht angezeigt wird:

1

BrazeInAppMessageManager.getInstance().setCustomHtmlInAppMessageActionListener(new CustomHtmlInAppMessageActionListener(context));

1

BrazeInAppMessageManager.getInstance().setCustomHtmlInAppMessageActionListener(CustomHtmlInAppMessageActionListener(context))

Angepasste Factories einrichten

Sie können eine Reihe von Standardeinstellungen durch angepasste Factory-Objekte überschreiben. Diese können nach Bedarf beim Braze SDK registriert werden, um die gewünschten Ergebnisse zu erzielen. Wenn Sie sich jedoch entscheiden, eine Factory zu überschreiben, müssen Sie wahrscheinlich explizit auf den Standard zurückgreifen oder die vom Braze-Standard bereitgestellte Funktionalität neu implementieren. Das folgende Code-Snippet veranschaulicht, wie Sie angepasste Implementierungen der Schnittstellen IInAppMessageViewFactory und IInAppMessageViewWrapperFactory bereitstellen können.

Arten von In-App-Nachrichten

1
2
3
4
5
6
7
8

class BrazeDemoApplication : Application(){
 override fun onCreate() {
    super.onCreate()
    registerActivityLifecycleCallbacks(BrazeActivityLifecycleCallbackListener(true, true))
    BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory(CustomInAppMessageViewWrapperFactory())
    BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewFactory(CustomInAppMessageViewFactory())
  }
}

Arten von In-App-Nachrichten

1
2
3
4
5
6
7
8
9

public class BrazeDemoApplication extends Application {
  @Override
  public void onCreate{
    super.onCreate();
    registerActivityLifecycleCallbacks(new BrazeActivityLifecycleCallbackListener(true, true));
    BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory(new CustomInAppMessageViewWrapperFactory());
    BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewFactory(new CustomInAppMessageViewFactory());
  }
}

Die in Braze verfügbaren Typen von In-App-Nachrichten sind vielseitig genug, um die meisten angepassten Anwendungsfälle abzudecken. Wenn Sie jedoch das visuelle Erscheinungsbild Ihrer In-App-Nachrichten vollständig selbst definieren möchten, anstatt einen Standardtyp zu verwenden, ermöglicht Braze dies durch das Festlegen einer angepassten View-Factory.

BrazeInAppMessageManager platziert das In-App-Nachrichten-Modell mit DefaultInAppMessageViewWrapper standardmäßig automatisch in der bestehenden View-Hierarchie der Activity. Wenn Sie die Platzierung der In-App-Nachrichten in der View-Hierarchie anpassen müssen, sollten Sie eine angepasste IInAppMessageViewWrapperFactory verwenden.

In-App-Nachrichten haben ein voreingestelltes Animationsverhalten. Slideup-Nachrichten gleiten in den Bildschirm hinein; full- und modal-Nachrichten werden ein- und ausgeblendet. Wenn Sie angepasste Animationsverhalten für Ihre In-App-Nachrichten definieren möchten, ermöglicht Braze dies durch die Einrichtung einer angepassten Animations-Factory.

1. Schritt: Implementieren Sie die Factory

Erstellen Sie eine Klasse, die IInAppMessageViewFactory implementiert:

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

public class CustomInAppMessageViewFactory implements IInAppMessageViewFactory {
  @Override
  public View createInAppMessageView(Activity activity, IInAppMessage inAppMessage) {
    // Uses a custom view for slideups, modals, and full in-app messages.
    // HTML in-app messages and any other types will use the Braze default in-app message view factories
    switch (inAppMessage.getMessageType()) {
      case SLIDEUP:
      case MODAL:
      case FULL:
        // Use a custom view of your choosing
        return createMyCustomInAppMessageView();
      default:
        // Use the default in-app message factories
        final IInAppMessageViewFactory defaultInAppMessageViewFactory = BrazeInAppMessageManager.getInstance().getDefaultInAppMessageViewFactory(inAppMessage);
        return defaultInAppMessageViewFactory.createInAppMessageView(activity, inAppMessage);
    }
  }
}

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

class CustomInAppMessageViewFactory : IInAppMessageViewFactory {
  override fun createInAppMessageView(activity: Activity, inAppMessage: IInAppMessage): View {
    // Uses a custom view for slideups, modals, and full in-app messages.
    // HTML in-app messages and any other types will use the Braze default in-app message view factories
    when (inAppMessage.messageType) {
      MessageType.SLIDEUP, MessageType.MODAL, MessageType.FULL ->
        // Use a custom view of your choosing
        return createMyCustomInAppMessageView()
      else -> {
        // Use the default in-app message factories
        val defaultInAppMessageViewFactory = BrazeInAppMessageManager.getInstance().getDefaultInAppMessageViewFactory(inAppMessage)
        return defaultInAppMessageViewFactory!!.createInAppMessageView(activity, inAppMessage)
      }
    }
  }
}

Erstellen Sie eine Klasse, die IInAppMessageViewWrapperFactory implementiert und einen IInAppMessageViewWrapper zurückgibt.

Diese Factory wird unmittelbar nach der Erstellung der In-App-Nachrichten-View aufgerufen. Der einfachste Weg, einen angepassten IInAppMessageViewWrapper zu implementieren, besteht darin, den standardmäßigen DefaultInAppMessageViewWrapper zu erweitern:

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

public class CustomInAppMessageViewWrapper extends DefaultInAppMessageViewWrapper {
  public CustomInAppMessageViewWrapper(View inAppMessageView,
                                       IInAppMessage inAppMessage,
                                       IInAppMessageViewLifecycleListener inAppMessageViewLifecycleListener,
                                       BrazeConfigurationProvider brazeConfigurationProvider,
                                       Animation openingAnimation,
                                       Animation closingAnimation, View clickableInAppMessageView) {
    super(inAppMessageView,
        inAppMessage,
        inAppMessageViewLifecycleListener,
        brazeConfigurationProvider,
        openingAnimation,
        closingAnimation,
        clickableInAppMessageView);
  }

  @Override
  public void open(@NonNull Activity activity) {
    super.open(activity);
    Toast.makeText(activity.getApplicationContext(), "Opened in-app message", Toast.LENGTH_SHORT).show();
  }

  @Override
  public void close() {
    super.close();
    Toast.makeText(mInAppMessageView.getContext().getApplicationContext(), "Closed in-app message", Toast.LENGTH_SHORT).show();
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

class CustomInAppMessageViewWrapper(inAppMessageView: View,
                                    inAppMessage: IInAppMessage,
                                    inAppMessageViewLifecycleListener: IInAppMessageViewLifecycleListener,
                                    brazeConfigurationProvider: BrazeConfigurationProvider,
                                    openingAnimation: Animation,
                                    closingAnimation: Animation, clickableInAppMessageView: View) :
    DefaultInAppMessageViewWrapper(inAppMessageView,
        inAppMessage,
        inAppMessageViewLifecycleListener,
        brazeConfigurationProvider,
        openingAnimation,
        closingAnimation,
        clickableInAppMessageView) {

  override fun open(activity: Activity) {
    super.open(activity)
    Toast.makeText(activity.applicationContext, "Opened in-app message", Toast.LENGTH_SHORT).show()
  }

  override fun close() {
    super.close()
    Toast.makeText(mInAppMessageView.context.applicationContext, "Closed in-app message", Toast.LENGTH_SHORT).show()
  }
}

Erstellen Sie eine Klasse, die IInAppMessageAnimationFactory implementiert:

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

public class CustomInAppMessageAnimationFactory implements IInAppMessageAnimationFactory {

  @Override
  public Animation getOpeningAnimation(IInAppMessage inAppMessage) {
    Animation animation = new AlphaAnimation(0, 1);
    animation.setInterpolator(new AccelerateInterpolator());
    animation.setDuration(2000L);
    return animation;
  }

  @Override
  public Animation getClosingAnimation(IInAppMessage inAppMessage) {
    Animation animation = new AlphaAnimation(1, 0);
    animation.setInterpolator(new DecelerateInterpolator());
    animation.setDuration(2000L);
    return animation;
  }
}

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

class CustomInAppMessageAnimationFactory : IInAppMessageAnimationFactory {
  override fun getOpeningAnimation(inAppMessage: IInAppMessage): Animation {
    val animation: Animation = AlphaAnimation(0, 1)
    animation.interpolator = AccelerateInterpolator()
    animation.duration = 2000L
    return animation
  }

  override fun getClosingAnimation(inAppMessage: IInAppMessage): Animation {
    val animation: Animation = AlphaAnimation(1, 0)
    animation.interpolator = DecelerateInterpolator()
    animation.duration = 2000L
    return animation
  }
}

2. Schritt: Weisen Sie Braze an, die Factory zu verwenden

Nachdem Ihre IInAppMessageViewFactory erstellt wurde, rufen Sie BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewFactory() auf, um BrazeInAppMessageManager anzuweisen, Ihre angepasste IInAppMessageViewFactory anstelle der standardmäßigen View-Factory zu verwenden.

Funktionsweise

Die Slideup-In-App-Nachrichten-View implementiert IInAppMessageView. Die Nachrichten-Views vom Typ full und modal implementieren IInAppMessageImmersiveView. Wenn Sie eine dieser Klassen implementieren, kann Braze Ihrer angepassten View bei Bedarf Klick-Listener hinzufügen. Alle Braze-View-Klassen erweitern die Android-Klasse View.

Durch die Implementierung von IInAppMessageView können Sie einen bestimmten Teil Ihrer angepassten View als anklickbar definieren. Durch die Implementierung von IInAppMessageImmersiveView können Sie Views für Nachrichten-Buttons sowie eine View für einen Schließen-Button definieren.

Nachdem Ihr IInAppMessageViewWrapper erstellt ist, rufen Sie BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory() auf, um BrazeInAppMessageManager anzuweisen, Ihre angepasste IInAppMessageViewWrapperFactory anstelle der Standard-View-Wrapper-Factory zu verwenden.

Wir empfehlen, Ihre IInAppMessageViewWrapperFactory in Ihrem Application.onCreate() vor allen anderen Aufrufen von Braze zu setzen. Dadurch wird die angepasste View-Wrapper-Factory festgelegt, bevor eine In-App-Nachricht angezeigt wird:

1

BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory(new CustomInAppMessageViewWrapper());

1

BrazeInAppMessageManager.getInstance().setCustomInAppMessageViewWrapperFactory(CustomInAppMessageViewWrapper())

Nachdem Ihre IInAppMessageAnimationFactory erstellt wurde, rufen Sie BrazeInAppMessageManager.getInstance().setCustomInAppMessageAnimationFactory() auf, um BrazeInAppMessageManager anzuweisen, Ihre angepasste IInAppMessageAnimationFactory anstelle der standardmäßigen Animations-Factory zu verwenden.

Wir empfehlen, Ihre IInAppMessageAnimationFactory in Ihrem Application.onCreate() vor allen anderen Aufrufen von Braze zu setzen. Dadurch wird die angepasste Animations-Factory festgelegt, bevor eine In-App-Nachricht angezeigt wird.

Angepasste Stile

Die UI-Elemente von Braze sind standardmäßig so gestaltet, dass sie den Standard-UI-Richtlinien von Android entsprechen und ein nahtloses Erlebnis bieten. Dieser Referenzartikel behandelt angepasste Stile für In-App-Nachrichten in Ihrer Android- oder FireOS-Anwendung.

Einstellen eines Standard-Stils

Sie können die Standardstile in der styles.xml-Datei des Braze SDK einsehen:

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

  <style name="Braze"/>
  <style name="Braze.InAppMessage"/>
  <style name="Braze.InAppMessage.Header">
    <item name="android:layout_height">wrap_content</item>
    <item name="android:layout_width">match_parent</item>
    <item name="android:padding">0.0dp</item>
    <item name="android:background">@android:color/transparent</item>
    <item name="android:textColor">@color/com_braze_inappmessage_header_text</item>
    <item name="android:textSize">20.0sp</item>
    <item name="android:lineSpacingMultiplier">1.3</item>
    <item name="android:gravity">center</item>
    <item name="android:textStyle">bold</item>
    <item name="android:layout_centerHorizontal">true</item>
  </style>

Wenn Sie möchten, können Sie diese Stile überschreiben, um ein Erscheinungsbild zu schaffen, das besser zu Ihrer App passt.

Um einen Stil zu überschreiben, kopieren Sie ihn vollständig in die Datei styles.xml Ihres Projekts und nehmen Sie die gewünschten Änderungen vor. Der gesamte Stil muss in Ihre lokale styles.xml-Datei kopiert werden, damit alle Attribute korrekt gesetzt werden. Beachten Sie, dass diese angepassten Stile für Änderungen an einzelnen UI-Elementen gedacht sind, nicht für umfassende Änderungen an Layouts. Änderungen auf Layout-Ebene müssen mit angepassten Views gehandhabt werden.

Anpassen der Schriftart

Sie können eine angepasste Schriftart festlegen, indem Sie die Schriftart im Verzeichnis res/font ablegen. Um sie zu verwenden, überschreiben Sie den Stil für Nachrichtentext, Überschriften und Button-Text und verwenden Sie das Attribut fontFamily, um Braze anzuweisen, Ihre angepasste Schriftfamilie zu verwenden.

Wenn Sie beispielsweise die Schriftart für den Button-Text Ihrer In-App-Nachricht aktualisieren möchten, überschreiben Sie den Stil Braze.InAppMessage.Button und referenzieren Sie Ihre angepasste Schriftfamilie. Der Attributwert sollte auf eine Schriftfamilie in Ihrem Verzeichnis res/font verweisen.

Hier ist ein verkürztes Beispiel mit einer angepassten Schriftfamilie my_custom_font_family, auf die in der letzten Zeile verwiesen wird:

1
2
3
4
5
6
7

  <style name="Braze.InAppMessage.Button">
    <item name="android:layout_height">wrap_content</item>
    ...
    <item name="android:paddingBottom">15.0dp</item>
    <item name="android:fontFamily">@font/my_custom_font_family</item>
    <item name="fontFamily">@font/my_custom_font_family</item>
  </style>

Neben dem Stil Braze.InAppMessage.Button für den Button-Text ist der Stil für den Nachrichtentext Braze.InAppMessage.Message und der Stil für die Nachrichtenüberschriften Braze.InAppMessage.Header. Wenn Sie Ihre angepasste Schriftfamilie für alle In-App-Nachrichtentexte verwenden möchten, können Sie Ihre Schriftfamilie auf den Stil Braze.InAppMessage setzen, der der übergeordnete Stil für alle In-App-Nachrichten ist.

Schließen von Nachrichten

Durch Wischen Slideup-Nachrichten schließen

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

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

Dieses Wischverhalten ist standardmäßig in DefaultInAppMessageViewWrapper integriert und gilt ausschließlich für Slideup-In-App-Nachrichten. Modale und vollständige In-App-Nachrichten unterstützen das Wegwischen nicht. Um dieses Verhalten anzupassen, können Sie eine angepasste View-Wrapper-Factory implementieren.

Deaktivieren des Schließens über die Zurück-Taste

Standardmäßig werden In-App-Nachrichten von Braze mit der Hardware-Zurück-Taste geschlossen. Dieses Verhalten kann für jede einzelne Nachricht über BrazeInAppMessageManager.setBackButtonDismissesInAppMessageView() deaktiviert werden.

Im folgenden Beispiel ist disable_back_button ein angepasstes Schlüssel-Wert-Paar, das in der In-App-Nachricht festgelegt ist und angibt, ob die Nachricht über die Zurück-Taste geschlossen werden kann:

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

BrazeInAppMessageManager.getInstance().setCustomInAppMessageManagerListener(new DefaultInAppMessageManagerListener() {
  @Override
  public void beforeInAppMessageViewOpened(View inAppMessageView, IInAppMessage inAppMessage) {
    super.beforeInAppMessageViewOpened(inAppMessageView, inAppMessage);
    final Map<String, String> extras = inAppMessage.getExtras();
    if (extras != null && extras.containsKey("disable_back_button")) {
      BrazeInAppMessageManager.getInstance().setBackButtonDismissesInAppMessageView(false);
    }
  }

  @Override
  public void afterInAppMessageViewClosed(IInAppMessage inAppMessage) {
    super.afterInAppMessageViewClosed(inAppMessage);
    BrazeInAppMessageManager.getInstance().setBackButtonDismissesInAppMessageView(true);
  }
});

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

BrazeInAppMessageManager.getInstance().setCustomInAppMessageManagerListener(object : DefaultInAppMessageManagerListener() {
  override fun beforeInAppMessageViewOpened(inAppMessageView: View, inAppMessage: IInAppMessage) {
    super.beforeInAppMessageViewOpened(inAppMessageView, inAppMessage)
    val extras = inAppMessage.extras
    if (extras != null && extras.containsKey("disable_back_button")) {
      BrazeInAppMessageManager.getInstance().setBackButtonDismissesInAppMessageView(false)
    }
  }

  override fun afterInAppMessageViewClosed(inAppMessage: IInAppMessage) {
    super.afterInAppMessageViewClosed(inAppMessage)
    BrazeInAppMessageManager.getInstance().setBackButtonDismissesInAppMessageView(true)
  }
})

Aktivieren des Schließens durch Tippen außerhalb

Standardmäßig ist das Schließen des Modals durch Antippen außerhalb auf false eingestellt. Wenn Sie diesen Wert auf true setzen, wird die modale In-App-Nachricht geschlossen, wenn Nutzer:innen auf eine Stelle außerhalb der In-App-Nachricht tippen. Dieses Verhalten kann durch folgenden Aufruf aktiviert werden:

1

BrazeInAppMessageManager.getInstance().setClickOutsideModalViewDismissInAppMessageView(true)

Anpassen der Ausrichtung

Um eine feste Ausrichtung für eine In-App-Nachricht festzulegen, richten Sie zunächst einen angepassten In-App-Nachrichten-Manager-Listener ein. Aktualisieren Sie anschließend die Ausrichtung des IInAppMessage-Objekts in der Delegate-Methode beforeInAppMessageDisplayed():

1
2
3
4
5

public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
  // Set the orientation to portrait
  inAppMessage.setOrientation(Orientation.PORTRAIT);
  return InAppMessageOperation.DISPLAY_NOW;
}

1
2
3
4
5

override fun beforeInAppMessageDisplayed(inAppMessage: IInAppMessage): InAppMessageOperation {
  // Set the orientation to portrait
  inAppMessage.orientation = Orientation.PORTRAIT
  return InAppMessageOperation.DISPLAY_NOW
}

Bei Tablet-Geräten werden In-App-Nachrichten in der von den Nutzer:innen bevorzugten Ausrichtung angezeigt, unabhängig von der tatsächlichen Bildschirmausrichtung.

Deaktivieren des dunklen Designs

Standardmäßig prüft beforeInAppMessageDisplayed() von IInAppMessageManagerListener die Systemeinstellungen und aktiviert bedingt das Styling für das dunkle Design der Nachricht mit dem folgenden Code:

1
2
3
4
5
6
7

@Override
public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
  if (inAppMessage instanceof IInAppMessageThemeable && ViewUtils.isDeviceInNightMode(BrazeInAppMessageManager.getInstance().getApplicationContext())) {
    ((IInAppMessageThemeable) inAppMessage).enableDarkTheme();
  }
  return InAppMessageOperation.DISPLAY_NOW;
}

1
2
3
4
5
6

override fun beforeInAppMessageDisplayed(inAppMessage: IInAppMessage): InAppMessageOperation {
  if (inAppMessage is IInAppMessageThemeable && ViewUtils.isDeviceInNightMode(BrazeInAppMessageManager.getInstance().applicationContext!!)) {
    (inAppMessage as IInAppMessageThemeable).enableDarkTheme()
  }
  return InAppMessageOperation.DISPLAY_NOW
}

Um dies zu ändern, können Sie enableDarkTheme in jedem Schritt des Voranzeigeprozesses aufrufen, um Ihre eigene bedingte Logik zu implementieren.

Anpassen der Google Play-Bewertungsaufforderung

Aufgrund der von Google festgelegten Beschränkungen und Einschränkungen werden angepasste Google Play-Bewertungsaufforderungen derzeit nicht von Braze unterstützt. Während einige Nutzer:innen diese Aufforderungen erfolgreich integrieren konnten, waren die Erfolgsquoten bei anderen aufgrund der Google Play-Quoten gering. Die Integration erfolgt auf Ihr eigenes Risiko. Weitere Informationen finden Sie in der Dokumentation zu den In-App-Bewertungsaufforderungen von Google Play.

Voraussetzungen

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

Einrichtung des UI-Delegaten (erforderlich)

Um die Darstellung von In-App-Nachrichten anzupassen und auf verschiedene Lebenszyklusereignisse zu reagieren, müssen Sie BrazeInAppMessageUIDelegate einrichten. Dies ist ein Delegiertenprotokoll, das zum Empfangen und Verarbeiten von getriggerten In-App-Nachrichten-Payloads, zum Empfangen von Anzeige-Lebenszyklusereignissen und zum Steuern des Anzeigezeitpunkts verwendet wird. Um BrazeInAppMessageUIDelegate zu verwenden, müssen Sie:

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

1. Schritt: Das BrazeInAppMessageUIDelegate-Protokoll implementieren

Implementieren Sie zunächst das Protokoll BrazeInAppMessageUIDelegate und die gewünschten Methoden. In unserem Beispiel unten implementieren wir dieses Protokoll in der Klasse AppDelegate unserer Anwendung.

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

2. Schritt: Das delegate-Objekt zuweisen

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

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;

On-Click-Verhalten

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

Arten von Klickaktionen

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

ClickAction On-Click-Verhalten
.url(URL, useWebView: Bool) Öffnet die angegebene URL in einem externen Browser. Wenn useWebView auf true festgelegt ist, wird sie in einer Webansicht geöffnet.
.none Die Nachricht wird ausgeblendet, wenn sie angeklickt wird.

Anpassen des Verhaltens bei Klick

Um dieses Verhalten anzupassen, können Sie die Eigenschaft clickAction ändern. Ziehen Sie dazu das folgende Beispiel zurate:

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

Die Methode inAppMessage(_:prepareWith:) ist in Objective-C nicht verfügbar.

Umgang mit dem angepassten Verhalten

Die folgende BrazeInAppMessageUIDelegate-Delegate-Methode 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 für diese Interaktionen wird eine Button-ID als optionaler Parameter bereitgestellt. Dieser Callback wird nicht für programmatische Klicks ausgelöst, die über brazeBridge.logClick() getriggert werden.

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 Klickaktion weiter ausführen soll.

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 des Wischens hängt von der Position des Slideups ab:

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

Dieses Wischverhalten ist in der Standard-BrazeInAppMessageUI-SlideupView integriert und gilt nur für Slideup-In-App-Nachrichten. Modale und vollständige In-App-Nachrichten unterstützen das Wegwischen nicht. Um die Slideup-Ansicht weiter anzupassen, einschließlich des Wischverhaltens, können Sie die SlideupView.Attributes modifizieren oder eine angepasste Ansicht über eine Unterklasse bereitstellen.

Anpassen des Schließens von Modalen

Um Ausblendungen durch Tippen außerhalb des Fensters zu aktivieren, können Sie die Eigenschaft dismissOnBackgroundTap in der Struktur Attributes des In-App-Nachrichtentyps ändern, den Sie anpassen möchten.

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

1

BrazeInAppMessageUI.ModalImageView.Attributes.defaults.dismissOnBackgroundTap = true

Die Anpassung über Attributes ist in Objective-C nicht möglich.

Der Standardwert ist false. Hierdurch wird festgelegt, ob die modale In-App-Nachricht ausgeblendet wird, wenn Nutzer:innen auf eine Stelle außerhalb der In-App-Nachricht tippen.

DismissModalOnOutsideTap Beschreibung
true Modale In-App-Nachrichten werden ausgeblendet, wenn auf eine Stelle außerhalb des Fensters getippt wird.
false Standardmäßig werden modale In-App-Nachrichten beim Tippen auf eine Stelle außerhalb des Fensters nicht ausgeblendet.

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

Anpassung der Nachrichtenausrichtung

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

Um eine Standardausrichtung für alle In-App-Nachrichten festzulegen, verwenden Sie die inAppMessage(_:prepareWith:)-Methode, um die Eigenschaft preferredOrientation auf dem PresentationContext festzulegen.

Um beispielsweise das Hochformat als Standardausrichtung festzulegen:

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

Um die Ausrichtung für eine einzelne Nachricht festzulegen, ändern Sie die Eigenschaft orientation von Braze.InAppMessage:

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 wird, 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 von der orientation-Konfiguration der Nachricht unterstützt).

Die Geräteausrichtung muss auch durch die Eigenschaft orientation der In-App-Nachricht unterstützt werden, damit die Nachricht angezeigt wird. Außerdem wird die Einstellung preferredOrientation nur beachtet, wenn sie in den unterstützten Ausrichtungen der Benutzeroberfläche Ihrer Anwendung unter dem Abschnitt Deployment Info in den Einstellungen Ihres Ziels in Xcode enthalten ist.

Unterstützte Ausrichtungen in Xcode.

Anpassen der Anzeigezeit

Sie können steuern, ob eine verfügbare In-App-Nachricht an bestimmten Punkten des Nutzererlebnisses angezeigt werden soll. Wenn es Situationen gibt, in denen die In-App-Nachricht nicht angezeigt werden soll – z. B. während eines Spiels im Vollbildmodus oder auf einem Ladebildschirm – können Sie ausstehende In-App-Nachrichten verzögern oder ausblenden. Um das Timing von In-App-Nachrichten zu steuern, verwenden Sie die Delegate-Methode inAppMessage(_:displayChoiceForMessage:), um die Eigenschaft BrazeInAppMessageUI.DisplayChoice festzulegen.

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:

Anzeigeoption Verhalten
.now Die Nachricht wird sofort angezeigt. Dies ist der Standardwert.
.reenqueue Die Nachricht wird nicht angezeigt und wird wieder oben auf dem Stack platziert.
.later Die Nachricht wird nicht angezeigt und wird wieder oben auf dem Stack platziert. (Veraltet, bitte verwenden Sie .reenqueue)
.discard Die Nachricht wird verworfen und nicht angezeigt.

Ausblenden der Statusleiste

Bei In-App-Nachrichten des Typs Full, FullImage und HTML blendet das SDK die Statusleiste standardmäßig aus. Bei anderen Arten von In-App-Nachrichten bleibt die Statusleiste unangetastet. Um dieses Verhalten zu konfigurieren, verwenden Sie die Delegate-Methode inAppMessage(_:prepareWith:), um die Eigenschaft statusBarHideBehavior auf dem PresentationContext festzulegen. Dieses Feld kann einen der folgenden Werte annehmen:

Verhalten beim Ausblenden der Statusleiste Beschreibung
.auto Die Nachrichtenansicht entscheidet, ob die Statusleiste ausgeblendet wird.
.hidden Die Statusleiste wird immer ausgeblendet.
.visible Die Statusleiste wird immer angezeigt.

Deaktivieren des Dark Mode

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 Delegate-Methode inAppMessage(_:prepareWith:). Der an die Methode übergebene PresentationContext enthält einen Verweis auf das darzustellende InAppMessage-Objekt. Jede InAppMessage verfügt über eine Eigenschaft themes mit den Designs dark und light. Wenn Sie die Eigenschaft themes.dark auf nil setzen, wird die In-App-Nachricht automatisch im hellen Design dargestellt.

In-App-Nachrichten mit Buttons verfügen über ein zusätzliches themes-Objekt in der Eigenschaft buttons. Um zu verhindern, dass Buttons das Styling des Dark Mode übernehmen, können Sie mit map(_:) ein neues Array von Buttons mit einem light-Design und keinem dark-Design erstellen.

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 Bewertung im App Store zu bitten.

1. Schritt: Den Delegaten für In-App-Nachrichten festlegen

Setzen Sie zunächst den BrazeInAppMessageUIDelegate in Ihrer App ein.

2. Schritt: Die standardmäßige App-Store-Bewertungsnachricht deaktivieren

Als Nächstes implementieren Sie die Delegate-Methode inAppMessage(_:displayChoiceForMessage:), um die standardmäßige App-Store-Bewertungsnachricht zu deaktivieren.

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

Fügen Sie in Ihrem Code zur Behandlung von Deeplinks 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 zu verwenden:

1
2
3
4
5
6
7
8

func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
  let urlString = url.absoluteString.removingPercentEncoding
  if (urlString == "{YOUR-APP-SCHEME}:app-store-review") {
    SKStoreReviewController.requestReview()
    return true;
  }
  // Other deep link handling code…
}

1
2
3
4
5
6
7
8

- (BOOL)application:(UIApplication *)app openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey, id> *)options {
  NSString *urlString = url.absoluteString.stringByRemovingPercentEncoding;
  if ([urlString isEqualToString:@"{YOUR-APP-SCHEME}:app-store-review"]) {
    [SKStoreReviewController requestReview];
    return YES;
  }
  // Other deep link handling code…
}

4. Schritt: Angepasstes Verhalten beim Klicken einstellen

Als Nächstes erstellen Sie eine In-App-Nachrichten-Campaign mit den folgenden Elementen:

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

Voraussetzungen

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

Methoden zur Protokollierung

Sie können diese Methoden nutzen, indem Sie Ihre BrazeInAppMessage-Instanz zur Protokollierung von Analytics und zur Durchführung von Aktionen übergeben:

Methode Beschreibung
logInAppMessageClicked(inAppMessage) Protokolliert einen Klick für die bereitgestellten Daten der In-App-Nachricht.
logInAppMessageImpression(inAppMessage) Protokolliert eine Impression für die bereitgestellten In-App-Nachricht-Daten.
logInAppMessageButtonClicked(inAppMessage, buttonId) Protokolliert einen Button-Klick für die angegebenen In-App-Nachricht-Daten und die Button-ID.
hideCurrentInAppMessage() Schließt die aktuell angezeigte In-App-Nachricht.
performInAppMessageAction(inAppMessage) Führt die Aktion für eine In-App-Nachricht aus.
performInAppMessageButtonAction(inAppMessage, buttonId) Führt die Aktion für einen Button einer In-App-Nachricht aus.

Umgang mit Nachrichten-Daten

In den meisten Fällen können Sie die Methode Braze.addListener verwenden, um Event-Listener zu registrieren, die Daten aus In-App-Nachrichten verarbeiten.

Außerdem können Sie auf die Daten der In-App-Nachricht im JavaScript-Layer zugreifen, indem Sie die Methode Braze.subscribeToInAppMessage aufrufen, damit die SDKs ein inAppMessageReceived-Event veröffentlichen, wenn eine In-App-Nachricht getriggert wird. Übergeben Sie einen Callback an diese Methode, um Ihren eigenen Code auszuführen, wenn die In-App-Nachricht getriggert und vom Listener empfangen wird.

Um die Behandlung von Nachrichten-Daten anzupassen, sehen Sie sich die folgenden Implementierungsbeispiele an:

Um das Standardverhalten zu verbessern oder wenn Sie keinen Zugang zur Anpassung des nativen iOS- oder Android-Codes haben, empfehlen wir Ihnen, die Standard-UI zu deaktivieren, während Sie weiterhin In-App-Nachrichten-Events von Braze erhalten. Um die Standard-UI zu deaktivieren, übergeben Sie false an die Methode Braze.subscribeToInAppMessage und verwenden Sie die Daten der In-App-Nachricht, um Ihre eigene Nachricht in JavaScript zu erstellen. Beachten Sie, dass Sie Analytics für Ihre Nachrichten manuell protokollieren müssen, wenn Sie die Standard-UI deaktivieren möchten.

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

import Braze from "@braze/react-native-sdk";

// Option 1: Listen for the event directly via `Braze.addListener`.
//
// You may use this method to accomplish the same thing if you don't
// wish to make any changes to the default Braze UI.
Braze.addListener(Braze.Events.IN_APP_MESSAGE_RECEIVED, (event) => {
  console.log(event.inAppMessage);
});

// Option 2: Call `subscribeToInAppMessage`.
//
// Pass in `false` to disable the automatic display of in-app messages.
Braze.subscribeToInAppMessage(false, (event) => {
  console.log(event.inAppMessage);
  // Use `event.inAppMessage` to construct your own custom message UI.
});

Um eine fortgeschrittenere Logik einzubauen, die bestimmt, ob eine In-App-Nachricht über die integrierte UI angezeigt wird oder nicht, implementieren Sie In-App-Nachrichten über den nativen Layer.

Implementieren Sie IInAppMessageManagerListener wie in unserem Android-Artikel über angepasste Manager-Listener beschrieben. In Ihrer beforeInAppMessageDisplayed-Implementierung können Sie auf die Daten von inAppMessage zugreifen, sie an den JavaScript-Layer senden und anhand des Rückgabewerts entscheiden, ob Sie die native Nachricht anzeigen oder nicht.

Mehr über diese Werte erfahren Sie in unserer Android-Dokumentation.

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

// In-app messaging
@Override
public InAppMessageOperation beforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
    WritableMap parameters = new WritableNativeMap();
    parameters.putString("inAppMessage", inAppMessage.forJsonPut().toString());
    getReactNativeHost()
        .getReactInstanceManager()
        .getCurrentReactContext()
        .getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class)
        .emit("inAppMessageReceived", parameters);
    // Note: return InAppMessageOperation.DISCARD if you would like
    // to prevent the Braze SDK from displaying the message natively.
    return InAppMessageOperation.DISPLAY_NOW;
}

Überschreiben des Standard-UI-Delegaten

Standardmäßig wird BrazeInAppMessageUI erstellt und zugewiesen, wenn Sie die Instanz braze initialisieren. BrazeInAppMessageUI ist eine Implementierung des BrazeInAppMessagePresenter-Protokolls und verfügt über die Eigenschaft delegate, mit der Sie die Behandlung von empfangenen In-App-Nachrichten anpassen können.

  1. Implementieren Sie den Delegaten BrazeInAppMessageUIDelegate wie in diesem iOS-Artikel beschrieben.

  2. In der Delegate-Methode inAppMessage(_:displayChoiceForMessage:) können Sie auf die Daten von inAppMessage zugreifen, sie an den JavaScript-Layer senden und anhand des Rückgabewerts entscheiden, ob die native Nachricht angezeigt werden soll oder nicht.

Weitere Einzelheiten zu diesen Werten finden Sie in unserer iOS-Dokumentation.

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

- (enum BRZInAppMessageUIDisplayChoice)inAppMessage:(BrazeInAppMessageUI *)ui
                            displayChoiceForMessage:(BRZInAppMessageRaw *)message {
  // Convert the message to a JavaScript representation.
  NSData *inAppMessageData = [message json];
  NSString *inAppMessageString = [[NSString alloc] initWithData:inAppMessageData encoding:NSUTF8StringEncoding];
  NSDictionary *arguments = @{
    @"inAppMessage" : inAppMessageString
  };

  // Send to JavaScript.
  [self sendEventWithName:@"inAppMessageReceived" body:arguments];

  // Note: Return `BRZInAppMessageUIDisplayChoiceDiscard` if you would like
  // to prevent the Braze SDK from displaying the message natively.
  return BRZInAppMessageUIDisplayChoiceNow;
}

Um diesen Delegaten zu verwenden, weisen Sie ihn brazeInAppMessagePresenter.delegate zu, nachdem Sie die Instanz braze initialisiert haben.

1
2
3
4
5
6
7
8

@import BrazeUI;

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:apiKey endpoint:endpoint];
  Braze *braze = [BrazeReactBridge initBraze:configuration];
  ((BrazeInAppMessageUI *)braze.inAppMessagePresenter).delegate = [[CustomDelegate alloc] init];
  AppDelegate.braze = braze;
}

Native Standard-UI überschreiben

Wenn Sie die Darstellung Ihrer In-App-Nachrichten auf der nativen iOS-Ebene vollständig anpassen möchten, halten Sie sich an das BrazeInAppMessagePresenter-Protokoll und weisen Sie Ihren angepassten Presenter nach dem folgenden Beispiel zu:

1
2
3
4

BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:apiKey endpoint:endpoint];
Braze *braze = [BrazeReactBridge initBraze:configuration];
braze.inAppMessagePresenter = [[MyCustomPresenter alloc] init];
AppDelegate.braze = braze;

Anpassen des Anzeigeverhaltens

Sie können das Anzeigeverhalten von In-App-Nachrichten zur Laufzeit wie folgt ändern:

1
2
3
4
5
6
7
8

// Sets in-app messages to display immediately when triggered.
Appboy.AppboyBinding.SetInAppMessageDisplayAction(BrazeUnityInAppMessageDisplayActionType.IAM_DISPLAY_NOW);

// Sets in-app messages to display at a later time and be saved in a stack.
Appboy.AppboyBinding.SetInAppMessageDisplayAction(BrazeUnityInAppMessageDisplayActionType.IAM_DISPLAY_LATER);

// Sets in-app messages to be discarded after being triggered.
Appboy.AppboyBinding.SetInAppMessageDisplayAction(BrazeUnityInAppMessageDisplayActionType.IAM_DISCARD);

Einen angepassten Hörer einstellen

Wenn Sie mehr Kontrolle darüber benötigen, wie Nutzer mit In-App-Nachrichten interagieren, verwenden Sie einen BrazeInAppMessageListener und weisen Sie ihn dem Appboy.AppboyBinding.inAppMessageListener zu. Delegaten, die Sie nicht verwenden möchten, können Sie einfach auf null gesetzt lassen.

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

BrazeInAppMessageListener listener = new BrazeInAppMessageListener() {
  BeforeInAppMessageDisplayed = BeforeInAppMessageDisplayed,
  OnInAppMessageButtonClicked = OnInAppMessageButtonClicked,
  OnInAppMessageClicked       = OnInAppMessageClicked,
  OnInAppMessageHTMLClicked   = OnInAppMessageHTMLClicked,
  OnInAppMessageDismissed     = OnInAppMessageDismissed,
};
Appboy.AppboyBinding.inAppMessageListener = listener;

public void BeforeInAppMessageDisplayed(IInAppMessage inAppMessage) {
  // Executed before an in-app message is displayed.
}

public void OnInAppMessageButtonClicked(IInAppMessage inAppMessage, InAppMessageButton inAppMessageButton) {
  // Executed whenever an in-app message button is clicked.
}

public void OnInAppMessageClicked(IInAppMessage inAppMessage) {
  // Executed whenever an in-app message is clicked.
}

public void OnInAppMessageHTMLClicked(IInAppMessage inAppMessage, Uri uri) {
  // Executed whenever an HTML in-app message is clicked.
}

public void OnInAppMessageDismissed(IInAppMessage inAppMessage) {
  // Executed whenever an in-app message is dismissed without a click.
}
New Stuff!