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 Banner aus – perfekt für inline, persistente In-App- und Internet-Nachrichten.

Eine Card erstellen

Schritt 1: Eine benutzerdefinierte UI erstellen

• web
• android
• swift

Schritt 2: Card-Aktualisierungen abonnieren

Registrieren Sie eine Callback-Funktion, um Datenaktualisierungen zu abonnieren, wenn Cards 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 Ihre benutzerdefinierte UI zu befüllen.

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

• id: Repräsentiert den Content-Card-ID-String. Dies ist der eindeutige Bezeichner, der zum Protokollieren von Analytics aus benutzerdefinierten 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 benutzerdefinierte Content Cards optional zu parsen. Weitere Informationen zum Datenmodell finden Sie in den Integrationsartikeln 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: Eine private Abonnent-Variable erstellen

Um Card-Aktualisierungen zu abonnieren, deklarieren Sie zunächst eine private Variable in Ihrer benutzerdefinierten Klasse, um Ihren Abonnenten zu halten:

1
2

// subscriber variable
private IEventSubscriber<ContentCardsUpdatedEvent> mContentCardsUpdatedSubscriber;

Schritt 2b: Aktualisierungen abonnieren

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

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: Abonnement beenden

Beenden Sie das Abonnement, wenn Ihre benutzerdefinierte Aktivität aus dem Sichtfeld verschwindet. Fügen Sie den folgenden Code in die onDestroy()-Lebenszyklusmethode Ihrer Aktivität ein:

1

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

Schritt 2a: Eine private Abonnent-Variable erstellen

Um Card-Aktualisierungen zu abonnieren, deklarieren Sie zunächst eine private Variable in Ihrer benutzerdefinierten Klasse, um Ihren Abonnenten zu halten:

1

private var contentCardsUpdatedSubscriber: IEventSubscriber<ContentCardsUpdatedEvent>? = null

Schritt 2b: Aktualisierungen abonnieren

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

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: Abonnement beenden

Beenden Sie das Abonnement, wenn Ihre benutzerdefinierte Aktivität aus dem Sichtfeld verschwindet. Fügen Sie den folgenden Code in die onDestroy()-Lebenszyklusmethode Ihrer Aktivität ein:

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 Abonnement aufrechterhalten, um Änderungen an Ihren Content Cards zu beobachten. Dies ist auf zwei Arten möglich:

1. Durch Aufrechterhaltung eines Cancellable; oder
2. Durch Aufrechterhaltung eines 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 außerdem ein Abonnement 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`.
}];

Schritt 3: Analytics implementieren

Content-Card-Impressionen, Klicks und Abweisungen werden in Ihrer benutzerdefinierten Ansicht nicht automatisch protokolliert. Sie müssen jede entsprechende Methode implementieren, um alle Metriken ordnungsgemäß an die Braze-Dashboard-Analytics zurückzumelden.

Schritt 4: Ihre Card testen (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-Campaign.
3. Wählen Sie in Ihrer Campaign Test aus und geben Sie dann die user-id der Testnutzer:in ein. Wenn Sie bereit sind, wählen Sie Send Test. Sie können in Kürze eine Content Card auf Ihrem Gerät starten.

Content-Card-Platzierungen

Content Cards können auf viele verschiedene Arten eingesetzt 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 extras-Eigenschaft im Datenmodell) zu und passen basierend auf den Werten das Verhalten, das Erscheinungsbild oder die Funktionalität der Card zur Laufzeit dynamisch an.

Nachrichtenposteingang

Content Cards können verwendet werden, um eine Nachrichtenzentrale zu simulieren. In diesem Format ist jede Nachricht eine eigene Card, die Schlüssel-Wert-Paare enthält, welche Klick-Ereignisse steuern. Diese Schlüssel-Wert-Paare sind die zentralen Bezeichner, anhand derer die App entscheidet, wohin navigiert werden soll, wenn Nutzer:innen auf eine Posteingangs-Nachricht klicken. Die Werte der Schlüssel-Wert-Paare sind beliebig wählbar.

Beispiel

Beispielsweise möchten Sie möglicherweise zwei Nachrichten-Cards erstellen: einen Handlungsaufruf, damit Nutzer:innen Leseempfehlungen aktivieren, und einen Gutscheincode für Ihr Segment neuer 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 enthalten, die eine kleine Sammlung von Formulierungen bereitstellen, 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 Card in Ihrer App oder auf Ihrer Website dargestellt wird.

• leseempfehlungen
• gutschein für neue abonnent:innen

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 und Nutzer:innen so ermöglichen, durch weitere hervorgehobene Cards zu wischen und sie anzuzeigen. Standardmäßig werden Content Cards nach Erstellungsdatum sortiert (neueste zuerst), und Ihre Nutzer:innen sehen alle Cards, für die sie berechtigt sind.

So implementieren Sie ein Content-Card-Karussell:

1. Erstellen Sie benutzerdefinierte Logik, die Änderungen an Ihren Content Cards beobachtet und den Eingang von Content Cards verarbeitet.
2. Erstellen Sie benutzerdefinierte clientseitige Logik, um eine bestimmte Anzahl von Cards gleichzeitig im Karussell anzuzeigen. Beispielsweise könnten Sie 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 Cards mithilfe von Schlüssel-Wert-Paaren dem richtigen Feed zuordnen.

Nur Bild

Content Cards müssen nicht wie „Cards“ aussehen. Beispielsweise können Content Cards als dynamisches Bild erscheinen, das dauerhaft auf Ihrer Startseite oder am oberen Rand bestimmter Seiten angezeigt wird.

Um dies zu erreichen, erstellen Ihre Marketer eine Campaign oder einen Canvas-Schritt mit dem Content-Card-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.