Content Cards erstellen

Dieser Artikel beschreibt den grundlegenden Ansatz, den Sie bei der Implementierung angepasster Content Cards verwenden, sowie drei häufige Anwendungsfälle. Es wird davon ausgegangen, dass Sie bereits die anderen Artikel der Anleitung zur Anpassung von Content Cards gelesen haben, um zu verstehen, was standardmäßig möglich ist und was angepassten Code erfordert. Es ist besonders hilfreich zu verstehen, wie Sie Analytics protokollieren für Ihre angepassten Content Cards.

Tipp

Content-Cards für Nachrichten im Banner-Stil verwenden? Probieren Sie Banneraus -perfekt für persistente In-App- und Internet-Nachrichten.

Eine Karte erstellen

1. Schritt: Erstellen Sie ein angepasstes UI

• web
• android
• swift

2. Schritt: Updates für Karten abonnieren

Registrieren Sie eine Callback-Funktion, um Daten-Updates zu abonnieren, wenn die Karten aktualisiert werden. Sie können die Content-Card-Objekte parsen und deren Payload-Daten wie title, cardDescription und imageUrl extrahieren und dann die resultierenden Modelldaten verwenden, um Ihr angepasstes UI zu befüllen.

Um die Content-Card-Datenmodelle zu erhalten, abonnieren Sie Content-Card-Updates. Achten Sie dabei besonders auf die folgenden Eigenschaften:

• id: Repräsentiert den Content-Card-ID-String. Dies ist der eindeutige Bezeichner, der zum Protokollieren von Analytics aus angepassten Content Cards verwendet wird.
• extras: Umfasst alle Schlüssel-Wert-Paare aus dem Braze-Dashboard.

Alle Eigenschaften außer id und extras sind für angepasste Content Cards optional zu parsen. Weitere Informationen zum Datenmodell finden Sie im Integrationsartikel der jeweiligen Plattform: Android, iOS, Web.

• web
• android
• swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import * as braze from "@braze/web-sdk";

braze.subscribeToContentCardsUpdates((updates) => {
  const cards = updates.cards;
// For example:
  cards.forEach(card => {
    if (card.isControl) {
      // Do not display the control card, but remember to call `logContentCardImpressions([card])`
    }
    else if (card instanceof braze.ClassicCard || card instanceof braze.CaptionedImage) {
      // Use `card.title`, `card.imageUrl`, etc.
    }
    else if (card instanceof braze.ImageOnly) {
      // Use `card.imageUrl`, etc.
    }
  })
});

braze.openSession();

Hinweis

Content Cards werden nur beim Sitzungsstart aktualisiert, wenn subscribeToContentCardsUpdates() vor openSession() aufgerufen wird. Sie können den Feed auch jederzeit manuell aktualisieren.

• java
• kotlin

Schritt 2a: Erstellen Sie eine private Subscriber-Variable

Um Karten-Updates zu abonnieren, deklarieren Sie zunächst eine private Variable in Ihrer angepassten Klasse, die Ihren Subscriber hält:

1
2
// subscriber variable
private IEventSubscriber<ContentCardsUpdatedEvent> mContentCardsUpdatedSubscriber;

Schritt 2b: Updates abonnieren

Fügen Sie den folgenden Code hinzu, um Content-Card-Updates von Braze zu abonnieren, typischerweise innerhalb der Activity.onCreate() Ihrer angepassten Content-Cards-Activity:

1
2
3
4
5
6
7
8
9
10
11
12
13
// Remove the previous subscriber before rebuilding a new one with our new activity.
Braze.getInstance(context).removeSingleSubscription(mContentCardsUpdatedSubscriber, ContentCardsUpdatedEvent.class);
mContentCardsUpdatedSubscriber = new IEventSubscriber<ContentCardsUpdatedEvent>() {
    @Override
    public void trigger(ContentCardsUpdatedEvent event) {
        // List of all Content Cards
        List<Card> allCards = event.getAllCards();

        // Your logic below
    }
};
Braze.getInstance(context).subscribeToContentCardsUpdates(mContentCardsUpdatedSubscriber);
Braze.getInstance(context).requestContentCardsRefresh();

Schritt 2c: Abo kündigen

Kündigen Sie das Abo, wenn Ihre angepasste Activity nicht mehr sichtbar ist. Fügen Sie den folgenden Code zur onDestroy()-Lifecycle-Methode Ihrer Activity hinzu:

1
Braze.getInstance(context).removeSingleSubscription(mContentCardsUpdatedSubscriber, ContentCardsUpdatedEvent.class);

Schritt 2a: Erstellen Sie eine private Subscriber-Variable

Um Karten-Updates zu abonnieren, deklarieren Sie zunächst eine private Variable in Ihrer angepassten Klasse, die Ihren Subscriber hält:

1
private var contentCardsUpdatedSubscriber: IEventSubscriber<ContentCardsUpdatedEvent>? = null

Schritt 2b: Updates abonnieren

Fügen Sie den folgenden Code hinzu, um Content-Card-Updates von Braze zu abonnieren, typischerweise innerhalb der Activity.onCreate() Ihrer angepassten Content-Cards-Activity:

1
2
3
4
5
6
7
8
9
10
// Remove the previous subscriber before rebuilding a new one with our new activity.
Braze.getInstance(context).subscribeToContentCardsUpdates(contentCardsUpdatedSubscriber)
Braze.getInstance(context).requestContentCardsRefresh()
  // List of all Content Cards
  val allCards = event.allCards

  // Your logic below
}
Braze.getInstance(context).subscribeToContentCardsUpdates(mContentCardsUpdatedSubscriber)
Braze.getInstance(context).requestContentCardsRefresh(true)

Schritt 2c: Abo kündigen

Kündigen Sie das Abo, wenn Ihre angepasste Activity nicht mehr sichtbar ist. Fügen Sie den folgenden Code zur onDestroy()-Lifecycle-Methode Ihrer Activity hinzu:

1
Braze.getInstance(context).removeSingleSubscription(contentCardsUpdatedSubscriber, ContentCardsUpdatedEvent::class.java)

Um auf das Content-Cards-Datenmodell zuzugreifen, rufen Sie contentCards.cards auf Ihrer braze-Instanz auf.

• swift
• objective-c

1
let cards: [Braze.ContentCard] = AppDelegate.braze?.contentCards.cards

Zusätzlich können Sie ein Abo aufrechterhalten, um Änderungen an Ihren Content Cards zu beobachten. Dies ist auf zwei Arten möglich:

1. Über ein Cancellable; oder
2. Über einen AsyncStream.

Cancellable

1
2
3
4
5
6
// This subscription is maintained through a Braze cancellable, which will observe for changes until the subscription is cancelled.
// You must keep a strong reference to the cancellable to keep the subscription active.
// The subscription is canceled either when the cancellable is deinitialized or when you call its `.cancel()` method.
let cancellable = AppDelegate.braze?.contentCards.subscribeToUpdates { [weak self] contentCards in
  // Implement your completion handler to respond to updates in `contentCards`.
}

AsyncStream

1
let stream: AsyncStream<[Braze.ContentCard]> = AppDelegate.braze?.contentCards.cardsStream

1
NSArray<BRZContentCardRaw *> *contentCards = AppDelegate.braze.contentCards.cards;

Wenn Sie zusätzlich ein Abo für Ihre Content Cards aufrechterhalten möchten, können Sie subscribeToUpdates aufrufen:

1
2
3
4
// This subscription is maintained through Braze cancellable, which will continue to observe for changes until the subscription is cancelled.
BRZCancellable *cancellable = [self.braze.contentCards subscribeToUpdates:^(NSArray<BRZContentCardRaw *> *contentCards) {
  // Implement your completion handler to respond to updates in `contentCards`.
}];

3. Schritt: Analytics implementieren

Impressionen, Klicks und Schließungen von Content Cards werden in Ihrer angepassten Ansicht nicht automatisch protokolliert. Sie müssen die jeweilige Methode implementieren, um alle Metriken ordnungsgemäß in die Analytics des Braze-Dashboards zu protokollieren.

4. Schritt: Testen Sie Ihre Karte (optional)

So testen Sie Ihre Content Card:

1. Legen Sie eine:n aktive:n Nutzer:in in Ihrer Anwendung fest, indem Sie die changeUser()-Methode aufrufen.
2. Gehen Sie in Braze zu Campaigns und erstellen Sie eine neue Content-Card-Kampagne.
3. Wählen Sie in Ihrer Kampagne Test aus und geben Sie die user-id der Testnutzer:in ein. Wenn Sie bereit sind, wählen Sie Send Test. Sie können dann in Kürze eine Content Card auf Ihrem Gerät starten.

Platzierung von Content Cards

Content Cards können auf viele verschiedene Arten verwendet werden. Drei gängige Implementierungen sind die Verwendung als Nachrichtenzentrale, als dynamische Bildanzeige oder als Bildkarussell. Für jede dieser Platzierungen weisen Sie Ihren Content Cards Schlüssel-Wert-Paare (die Eigenschaft extras im Datenmodell) zu und passen auf der Grundlage der Werte das Verhalten, das Aussehen oder die Funktionalität der Karte während der Laufzeit dynamisch an.

Posteingang für Nachrichten

Content Cards können verwendet werden, um eine Nachrichtenzentrale zu simulieren. In diesem Format ist jede Nachricht eine eigene Karte, die Schlüssel-Wert-Paare enthält, die Events beim Klicken triggern. Diese Schlüssel-Wert-Paare sind die Bezeichner, anhand derer die Anwendung entscheidet, wohin navigiert wird, wenn Nutzer:innen auf eine Nachricht im Posteingang klicken. Die Werte der Schlüssel-Wert-Paare sind frei wählbar.

Beispiel

Sie möchten beispielsweise zwei Messaging-Karten erstellen: einen Call-to-Action für Nutzer:innen zum Aktivieren von Leseempfehlungen und einen Gutschein-Code für Ihr neues Segment von Abonnent:innen.

Schlüssel wie body, title und buttonText können einfache String-Werte haben, die Ihre Marketer festlegen können. Schlüssel wie terms können Werte haben, die eine kleine Sammlung von Phrasen enthalten, die von Ihrer Rechtsabteilung genehmigt wurden. Schlüssel wie style und class_type haben String-Werte, die Sie festlegen können, um zu bestimmen, wie Ihre Karte in Ihrer App oder Website dargestellt wird.

• reading recommendations
• new subscriber coupon

1
2
3
4
5
6
7
8
9
10
11
 private fun createContentCardable(metadata: Map<String, Any>, type: ContentCardClass?): ContentCardable?{
        return when(type){
            ContentCardClass.AD -> Ad(metadata)
            ContentCardClass.MESSAGE_WEB_VIEW -> WebViewMessage(metadata)
            ContentCardClass.NOTIFICATION_CENTER -> FullPageMessage(metadata)
            ContentCardClass.ITEM_GROUP -> Group(metadata)
            ContentCardClass.ITEM_TILE -> Tile(metadata)
            ContentCardClass.COUPON -> Coupon(metadata)
            else -> null
        }
    }

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
override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //...
        listView.onItemClickListener = AdapterView.OnItemClickListener { parent, view, position, id ->
           when (val card = dataProvider[position]){
                is WebViewMessage -> {
                    val intent = Intent(this, WebViewActivity::class.java)
                    val bundle = Bundle()
                    bundle.putString(WebViewActivity.INTENT_PAYLOAD, card.contentString)
                    intent.putExtras(bundle)
                    startActivity(intent)
                }
                is FullPageMessage -> {
                    val intent = Intent(this, FullPageContentCard::class.java)
                    val bundle = Bundle()
                    bundle.putString(FullPageContentCard.CONTENT_CARD_IMAGE, card.icon)
                    bundle.putString(FullPageContentCard.CONTENT_CARD_TITLE, card.messageTitle)
                    bundle.putString(FullPageContentCard.CONTENT_CARD_DESCRIPTION, card.cardDescription)
                    intent.putExtras(bundle)
                    startActivity(intent)
                }
            }

        }
    }

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
private ContentCardable createContentCardable(Map<String, ?> metadata,  ContentCardClass type){
    switch(type){
        case ContentCardClass.AD:{
            return new Ad(metadata);
        }
        case ContentCardClass.MESSAGE_WEB_VIEW:{
            return new WebViewMessage(metadata);
        }
        case ContentCardClass.NOTIFICATION_CENTER:{
            return new FullPageMessage(metadata);
        }
        case ContentCardClass.ITEM_GROUP:{
            return new Group(metadata);
        }
        case ContentCardClass.ITEM_TILE:{
            return new Tile(metadata);
        }
        case ContentCardClass.COUPON:{
            return new Coupon(metadata);
        }
        default:{
            return null;
        }
    }
}

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
@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState)
        //...
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id){
               ContentCardable card = dataProvider.get(position);
               if (card instanceof WebViewMessage){
                    Bundle intent = new Intent(this, WebViewActivity.class);
                    Bundle bundle = new Bundle();
                    bundle.putString(WebViewActivity.INTENT_PAYLOAD, card.getContentString());
                    intent.putExtras(bundle);
                    startActivity(intent);
                }
                else if (card instanceof FullPageMessage){
                    Intent intent = new Intent(this, FullPageContentCard.class);
                    Bundle bundle = Bundle();
                    bundle.putString(FullPageContentCard.CONTENT_CARD_IMAGE, card.getIcon());
                    bundle.putString(FullPageContentCard.CONTENT_CARD_TITLE, card.getMessageTitle());
                    bundle.putString(FullPageContentCard.CONTENT_CARD_DESCRIPTION, card.getCardDescription());
                    intent.putExtras(bundle)
                    startActivity(intent)
                }
            }

        });
    }

Karussell

Sie können Content Cards in Ihrem vollständig angepassten Karussell-Feed einrichten, sodass Nutzer:innen durch zusätzliche hervorgehobene Karten wischen und diese ansehen können. Standardmäßig werden Content Cards nach Erstellungsdatum sortiert (das neueste zuerst), und Ihre Nutzer:innen sehen alle Karten, für die sie in Frage kommen.

So implementieren Sie ein Content-Card-Karussell:

1. Erstellen Sie eine angepasste Logik, die auf Änderungen in Ihren Content Cards achtet und die Ankunft der Content Cards behandelt.
2. Erstellen Sie eine angepasste clientseitige Logik, um eine bestimmte Anzahl von Karten gleichzeitig im Karussell anzuzeigen. Sie könnten zum Beispiel die ersten fünf Content-Card-Objekte aus dem Array auswählen oder Schlüssel-Wert-Paare einführen, um bedingte Logik aufzubauen.

Tipp

Wenn Sie ein Karussell als sekundären Content-Cards-Feed implementieren, stellen Sie sicher, dass Sie die Karten mithilfe von Schlüssel-Wert-Paaren in den richtigen Feed einsortieren.

Nur Bild

Content Cards müssen nicht wie „Karten“ aussehen. Content Cards können zum Beispiel als dynamisches Bild erscheinen, das persistent auf Ihrer Homepage oder am Anfang bestimmter Seiten angezeigt wird.

Um dies zu erreichen, erstellen Ihre Marketer eine Kampagne oder einen Canvas-Schritt mit einer Content Card vom Typ Nur Bild. Legen Sie dann Schlüssel-Wert-Paare fest, die für die Verwendung von Content Cards als ergänzende Inhalte geeignet sind.