Skip to content

Daten der Content-Cards

Beim Erstellen einer angepassten UI für Content Cards müssen Sie Analytics wie Impressionen, Klicks und Ausblendungen manuell protokollieren, da dies nur für Standard-Kartenmodelle automatisch erfolgt. Die Protokollierung dieser Ereignisse ist ein Standardbestandteil der Integration von Content Cards und für eine genaue Kampagnen-Berichterstattung und Abrechnung unerlässlich. Füllen Sie dazu Ihre angepasste UI mit Daten aus den Braze-Datenmodellen und protokollieren Sie die Ereignisse anschließend manuell. Sobald Sie wissen, wie man Analytics protokolliert, können Sie sehen, wie Braze-Kund:innen häufig angepasste Content Cards erstellen.

Analytics protokollieren

Bei der Implementierung Ihrer angepassten Content Cards können Sie die Content-Card-Objekte parsen und ihre Nutzlastdaten wie title, cardDescription und imageUrl extrahieren. Anschließend können Sie Ihre angepasste UI mit den resultierenden Modelldaten füllen.

Abonnieren Sie Content-Card-Updates, um die Content-Card-Datenmodelle zu erhalten. Es gibt zwei Eigenschaften, auf die Sie besonders achten sollten:

  • id: Stellt den String der Content-Card-ID dar. Dies ist der eindeutige Bezeichner, der zur Protokollierung der Analytics von angepassten Content Cards verwendet wird.
  • extras: Umfasst alle Schlüssel-Wert-Paare aus dem Braze-Dashboard.

Alle Eigenschaften außerhalb von id und extras sind optional und können für angepasste Content Cards ausgewertet werden. Weitere Informationen über das Datenmodell finden Sie im Artikel zur Integration der jeweiligen Plattform: Android, iOS, Web.

Registrieren Sie eine Callback-Funktion, um Updates zu abonnieren, wenn Karten aktualisiert werden.

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();

1. Schritt: Erstellen Sie eine private Abonnentenvariable

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

1
2

// subscriber variable
private IEventSubscriber<ContentCardsUpdatedEvent> mContentCardsUpdatedSubscriber;

2. Schritt: Updates abonnieren

Als Nächstes fügen Sie den folgenden Code – typischerweise innerhalb von Activity.onCreate() der angepassten Content-Card-Aktivität – hinzu, um Content-Card-Updates von Braze zu abonnieren:

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();

3. Schritt: Abmelden

Wir empfehlen Ihnen außerdem, sich abzumelden, wenn Ihre angepasste Aktivität nicht mehr sichtbar ist. Fügen Sie den folgenden Code in die Lebenszyklusmethode onDestroy() Ihrer Aktivität ein:

1

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

1. Schritt: Erstellen Sie eine private Abonnentenvariable

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

1

private var contentCardsUpdatedSubscriber: IEventSubscriber<ContentCardsUpdatedEvent>? = null

2. Schritt: Updates abonnieren

Als Nächstes fügen Sie den folgenden Code – typischerweise innerhalb von Activity.onCreate() der angepassten Content-Card-Aktivität – hinzu, um Content-Card-Updates von Braze zu abonnieren:

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).removeSingleSubscription(contentCardsUpdatedSubscriber, ContentCardsUpdatedEvent::class.java)
contentCardsUpdatedSubscriber = IEventSubscriber { event ->
  // List of all Content Cards
  val allCards = event.allCards

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

3. Schritt: Abmelden

Wir empfehlen Ihnen außerdem, sich abzumelden, wenn Ihre angepasste Aktivität nicht mehr sichtbar ist. Fügen Sie den folgenden Code in die Lebenszyklusmethode onDestroy() Ihrer Aktivität ein:

1

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

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

1

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

Außerdem können Sie ein Abo abschließen, um Änderungen an Ihren Content Cards zu beobachten. Dafür gibt es zwei Möglichkeiten:

  1. Ein Cancellable verwenden oder
  2. Einen AsyncStream verwenden.

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 Abo für Ihre Content Cards einrichten 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`.
}];

Um die Daten der Content Cards abzurufen, verwenden Sie die Methode getContentCards:

1
2
3

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

const cards = await Braze.getContentCards();

Um über Updates informiert zu werden, abonnieren Sie die Update-Ereignisse der Content Cards:

1
2
3
4
5
6
7
8
9
10

const subscription = Braze.addListener(Braze.Events.CONTENT_CARDS_UPDATED, (update) => {
  const cards = update.cards;
  cards.forEach(card => {
    if (card.isControl) {
      // Do not display the control card, but remember to log an impression
    } else {
      // Use card.title, card.cardDescription, card.image, etc.
    }
  });
});

Um eine manuelle Aktualisierung der Content Cards von den Braze-Servern anzufordern:

1

Braze.requestContentCardsRefresh();

Um zwischengespeicherte Content Cards ohne Netzwerkanfrage zu erhalten:

1

const cachedCards = await Braze.getCachedContentCards();

Ereignisse protokollieren

Wertvolle Metriken wie Impressionen, Klicks und Ausblendungen können schnell und einfach protokolliert werden. Legen Sie einen angepassten Klick-Listener fest, um diese Analytics manuell zu verarbeiten.

Protokollieren Sie Impression-Ereignisse, wenn Karten von Nutzer:innen angesehen werden, mit logContentCardImpressions:

1
2
3

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

braze.logContentCardImpressions([card1, card2, card3]);

Protokollieren Sie Klick-Ereignisse, wenn Nutzer:innen mit einer Karte interagieren, mit logContentCardClick:

1
2
3

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

braze.logContentCardClick(card);

Der BrazeManager kann Braze-SDK-Abhängigkeiten referenzieren, wie z. B. die Content-Card-Objekt-Array-Liste, um das Card-Objekt abzurufen und die Braze-Protokollierungsmethoden aufzurufen. Verwenden Sie die Basisklasse ContentCardable, um Daten einfach zu referenzieren und an den BrazeManager weiterzugeben.

Um eine Impression oder einen Klick auf eine Karte zu protokollieren, rufen Sie Card.logClick() bzw. Card.logImpression() auf.

Sie können eine Content-Card manuell protokollieren oder mit isDismissed bei Braze als „ausgeblendet“ festlegen. Wenn eine Karte bereits als ausgeblendet markiert ist, kann sie nicht erneut als ausgeblendet markiert werden.

Um einen angepassten Klick-Listener zu erstellen, erstellen Sie eine Klasse, die IContentCardsActionListener implementiert, und registrieren Sie sie mit BrazeContentCardsManager. Implementieren Sie die Methode onContentCardClicked(), die aufgerufen wird, wenn Nutzer:innen auf eine Content-Card klicken. Weisen Sie Braze dann an, Ihren Klick-Listener für Content Cards zu verwenden.

Zum Beispiel:

1
2
3
4
5
6
7
8
9
10
11

BrazeContentCardsManager.getInstance().setContentCardsActionListener(new IContentCardsActionListener() {
  @Override
  public boolean onContentCardClicked(Context context, Card card, IAction cardAction) {
    return false;
  }

  @Override
  public void onContentCardDismissed(Context context, Card card) {

  }
});

Zum Beispiel:

1
2
3
4
5
6
7
8
9

BrazeContentCardsManager.getInstance().contentCardsActionListener = object : IContentCardsActionListener {
  override fun onContentCardClicked(context: Context, card: Card, cardAction: IAction): Boolean {
    return false
  }

  override fun onContentCardDismissed(context: Context, card: Card) {

  }
}

Implementieren Sie das Protokoll BrazeContentCardUIViewControllerDelegate und legen Sie das Delegate-Objekt als Eigenschaft delegate von BrazeContentCardUI.ViewController fest. Dieser Delegate sorgt dafür, dass die Daten Ihres angepassten Objekts zur Protokollierung an Braze zurückgegeben werden. Ein Beispiel finden Sie im Tutorial zur Content-Cards-UI.

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

// Set the delegate when creating the Content Cards controller
contentCardsController.delegate = delegate

// Method to implement in delegate
func contentCard(
    _ controller: BrazeContentCardUI.ViewController,
    shouldProcess clickAction: Braze.ContentCard.ClickAction,
    card: Braze.ContentCard
  ) -> Bool {
  // Intercept the content card click action here.
  return true
}

1
2
3
4
5
6
7
8
9
10

// Set the delegate when creating the Content Cards controller
contentCardsController.delegate = delegate;

// Method to implement in delegate
- (BOOL)contentCardController:(BRZContentCardUIViewController *)controller
                shouldProcess:(NSURL *)url
                         card:(BRZContentCardRaw *)card {
  // Intercept the content card click action here.
  return YES;
}

Protokollieren Sie Impression-Ereignisse, wenn Karten von Nutzer:innen angesehen werden:

1

Braze.logContentCardImpression(card.id);

Protokollieren Sie Klick-Ereignisse, wenn Nutzer:innen mit einer Karte interagieren:

1

Braze.logContentCardClicked(card.id);

Protokollieren Sie Ausblendungs-Ereignisse, wenn Nutzer:innen eine Karte ausblenden:

1

Braze.logContentCardDismissed(card.id);

Verarbeitung des Klickverhaltens

Wenn Nutzer:innen in einem angepassten Feed auf eine Content-Card klicken, wird das Klickverhalten (z. B. Navigation zu einer URL, Deeplinking oder Protokollierung eines angepassten Events) nicht automatisch verarbeitet. Verwenden Sie handleBrazeAction, um die URL der Karte zu verarbeiten und die konfigurierte Klickaktion auszuführen, einschließlich Braze-Aktionen (brazeActions://-URLs).

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

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

// In your card click handler
function onCardClick(card) {
  // Log the click
  braze.logContentCardClick(card);

  // Handle the on-click behavior
  if (card.url) {
    braze.handleBrazeAction(card.url);
  }
}

Das Klickverhalten wird von der Standard-Content-Cards-UI automatisch verarbeitet. Für angepasste Implementierungen verwenden Sie die Schnittstelle IContentCardsActionListener, die im Abschnitt Analytics protokollieren oben beschrieben wird.

Das Klickverhalten wird von der Standard-Content-Cards-UI automatisch verarbeitet. Für angepasste Implementierungen verwenden Sie das Protokoll BrazeContentCardUIViewControllerDelegate, das im Abschnitt Analytics protokollieren oben beschrieben wird.
New Stuff!