Von Content Cards zu Banner migrieren

Dieser Leitfaden unterstützt Sie bei der Migration von Content Cards zu Bannern für Anwendungsfälle im Bereich des bannerartigen Messaging. Banner eignen sich ideal für Inline-Anzeigen, persistente In-App- und Web-Nachrichten, die an bestimmten Stellen in Ihrer App erscheinen.

Warum zu Banner migrieren?

• Wenn Ihr Entwicklerteam angepasste Content Cards erstellt oder pflegt, kann die Migration zu Banner diesen laufenden Aufwand reduzieren. Banner ermöglichen es Marketern, die UI direkt zu steuern, sodass Entwickler:innen für andere Aufgaben frei werden.
• Wenn Sie neue Homepage-Nachrichten, Onboarding-Flows oder persistente Ankündigungen einführen, starten Sie mit Banner anstatt auf Content Cards aufzubauen. Sie profitieren von Anfang an von Realtime-Personalisierung, keiner 30-Tage-Ablaufgrenze, keiner Größenbeschränkung und nativer Priorisierung.
• Wenn Sie die 30-Tage-Ablaufgrenze umgehen, komplexe Wiederzulässigkeitslogik verwalten oder frustriert über veraltete Personalisierung sind, löst Banner diese Probleme nativ.

Banner bieten mehrere Vorteile gegenüber Content Cards für Banner-ähnliches Messaging:

Beschleunigte Produktion

• Reduzierter laufender Engineering-Aufwand: Marketer können angepasste Nachrichten mit einem Drag-and-Drop-Editor und benutzerdefiniertem HTML erstellen, ohne Unterstützung von Entwickler:innen für Anpassungen zu benötigen.
• Flexible Anpassungsoptionen: Entwerfen Sie direkt im Editor, verwenden Sie HTML oder nutzen Sie bestehende Datenmodelle mit angepassten Eigenschaften.

Bessere UX

• Dynamische Content-Aktualisierungen: Banner aktualisieren Liquid-Logik und Berechtigung bei jeder Aktualisierung, sodass Nutzer:innen immer den relevantesten Content sehen.
• Native Platzierungsunterstützung: Nachrichten erscheinen in bestimmten Kontexten anstatt in einem Feed, was eine bessere kontextuelle Relevanz bietet.
• Native Priorisierung: Kontrolle über die Anzeigereihenfolge ohne angepasste Logik, was die Verwaltung der Nachrichtenhierarchie erleichtert.

Persistenz

• Keine Ablaufgrenze: Banner-Campaigns unterliegen keiner 30-Tage-Ablaufgrenze wie Content Cards, was eine echte Persistenz von Nachrichten ermöglicht.

Wann Sie migrieren sollten

Erwägen Sie eine Migration zu Banner, wenn Sie Content Cards verwenden für:

• Startseiten-Helden, Produktseiten-Aktionen, Checkout-Angebote
• Persistente Navigationsankündigungen oder Sidebar-Nachrichten
• Always-on-Nachrichten, die länger als 30 Tage laufen
• Nachrichten, bei denen Sie Realtime-Personalisierung und -Berechtigung wünschen

Wann Content Cards weiterhin verwenden

Verwenden Sie Content Cards weiterhin, wenn Sie Folgendes benötigen:

• Feed-Erlebnisse: Jeder Anwendungsfall, der mehrere scrollbare Nachrichten oder einen kartenbasierten „Posteingang“ umfasst.
• Bestimmte Features: Nachrichten, die Aktionscodes erfordern, da Banner diese nicht nativ unterstützen. Banner unterstützen Connected Content im Early Access.
• Getriggerte Zustellung: Anwendungsfälle, die zwingend eine API-getriggerte oder aktionsbasierte Zustellung erfordern. Obwohl Banner keine API-getriggerte oder aktionsbasierte Zustellung unterstützen, bedeutet die Realtime-Berechtigungsprüfung, dass Nutzer:innen bei jeder Aktualisierung sofort basierend auf der Segmentzugehörigkeit qualifiziert oder disqualifiziert werden.

Migrationsleitfaden

Voraussetzungen

Stellen Sie vor der Migration sicher, dass Ihr Braze SDK die Mindestversionsanforderungen erfüllt:

Für das Schließen und die erneute Berechtigung gelten die folgenden SDK-Mindestversionen:

Updates abonnieren

Content-Cards-Ansatz

• web
• android
• swift
• react native
• flutter

1
2
3
4
5
6
7
8

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

braze.subscribeToContentCardsUpdates((cards) => {
  // Handle array of cards
  cards.forEach(card => {
    console.log("Card:", card.id);
  });
});

1
2
3
4
5
6

Braze.getInstance(context).subscribeToContentCardsUpdates { cards ->
  // Handle array of cards
  cards.forEach { card ->
    Log.d(TAG, "Card: ${card.id}")
  }
}

1
2
3
4
5
6

braze.contentCards.subscribeToUpdates { cards in
  // Handle array of cards
  for card in cards {
    print("Card: \(card.id)")
  }
}

1
2
3
4
5
6
7

Braze.addListener(Braze.Events.CONTENT_CARDS_UPDATED, (update) => {
  const cards = update.cards;
  // Handle array of cards
  cards.forEach(card => {
    console.log("Card:", card.id);
  });
});

1
2
3
4
5
6

StreamSubscription contentCardsStreamSubscription = braze.subscribeToContentCards((List<BrazeContentCard> contentCards) {
  // Handle array of cards
  for (final card in contentCards) {
    print("Card: ${card.id}");
  }
});

Banner-Ansatz

• web
• android
• swift
• react native
• flutter

1
2
3
4
5
6
7
8
9

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

braze.subscribeToBannersUpdates((banners) => {
  // Get banner for specific placement
  const banner = braze.getBanner("sample_placement_id");
  if (banner) {
    console.log("Banner received for placement:", banner.placementId);
  }
});

1
2
3
4
5
6
7

Braze.getInstance(context).subscribeToBannersUpdates { update ->
  // Get banner for specific placement
  val banner = Braze.getInstance(context).getBanner("sample_placement_id")
  if (banner != null) {
    Log.d(TAG, "Banner received for placement: ${banner.placementId}")
  }
}

1
2
3
4
5
6
7
8

braze.banners.subscribeToUpdates { banners in
  // Get banner for specific placement
  braze.banners.getBanner(for: "sample_placement_id") { banner in
    guard let banner = banner else { return }

    print("Banner received for placement: \(banner.placementId)")
  }
}

1
2
3
4
5
6
7
8
9

Braze.addListener(Braze.Events.BANNER_CARDS_UPDATED, (data) => {
  const banners = data.banners;
  // Get banner for specific placement
  Braze.getBanner("sample_placement_id").then(banner => {
    if (banner) {
      console.log("Banner received for placement:", banner.placementId);
    }
  });
});

1
2
3
4
5
6
7
8

StreamSubscription bannerStreamSubscription = braze.subscribeToBanners((List<BrazeBanner> banners) {
  // Get banner for specific placement
  braze.getBanner("sample_placement_id").then((banner) {
    if (banner != null) {
      print("Banner received for placement: ${banner.placementId}");
    }
  });
});

Inhalte anzeigen

Hinweis

Content Cards können manuell mit benutzerdefinierter UI-Logik gerendert werden, während Banner nur mit den mitgelieferten SDK-Methoden gerendert werden können.

Content-Cards-Ansatz

• web
• android
• swift
• react native
• flutter

1
2
3
4
5
6
7
8
9
10
11

// Show default feed UI
braze.showContentCards(document.getElementById("feed"));

// Or manually render cards
const cards = braze.getCachedContentCards();
cards.forEach(card => {
  // Custom rendering logic
  if (card instanceof braze.ClassicCard) {
    // Render classic card
  }
});

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

// Using default fragment
val fragment = ContentCardsFragment()
supportFragmentManager.beginTransaction()
  .replace(R.id.content_cards_container, fragment)
  .commit()

// Or manually render cards
val cards = Braze.getInstance(context).getCachedContentCards()
cards.forEach { card ->
  when (card) {
    is ClassicCard -> {
      // Render classic card
    }
  }
}

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

// Using default view controller
let contentCardsController = BrazeContentCardUI.ViewController(braze: braze)
navigationController?.pushViewController(contentCardsController, animated: true)

// Or manually render cards
let cards = braze.contentCards.cards
for card in cards {
  switch card {
  case let card as Braze.ContentCard.Classic:
    // Render classic card
  default:
    break
  }
}

1
2
3
4
5
6
7
8
9
10

// Launch default feed
Braze.launchContentCards();

// Or manually render cards
const cards = await Braze.getCachedContentCards();
cards.forEach(card => {
  if (card.type === 'CLASSIC') {
    // Render classic card
  }
});

1
2
3
4
5
6
7
8
9
10

// Launch default feed
braze.launchContentCards();

// Or manually render cards
final cards = await braze.getContentCards();
for (final card in cards) {
  if (card.type == 'CLASSIC') {
    // Render classic card
  }
}

Banner-Ansatz

• web
• android
• swift
• react native
• flutter

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

braze.subscribeToBannersUpdates((banners) => {
  const banner = braze.getBanner("sample_placement_id");
  if (!banner) {
    return;
  }

  const container = document.getElementById("global-banner-container");
  braze.insertBanner(banner, container);

  if (banner.isControl) {
    container.style.display = "none";
  }
});

braze.requestBannersRefresh(["sample_placement_id"]);

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

// Using BannerView in XML
// <com.braze.ui.banners.BannerView
//     android:id="@+id/banner_view"
//     android:layout_width="match_parent"
//     android:layout_height="wrap_content"
//     app:placementId="sample_placement_id" />

// Or programmatically
val bannerView = BannerView(context).apply {
  placementId = "sample_placement_id"
}
container.addView(bannerView)

Braze.getInstance(context).requestBannersRefresh(listOf("sample_placement_id"))

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

// Using BannerUIView
let bannerView = BrazeBannerUI.BannerUIView(
  placementId: "sample_placement_id",
  braze: braze,
  processContentUpdates: { result in
    switch result {
    case .success(let updates):
      if let height = updates.height {
        // Update height constraint
      }
    case .failure:
      break
    }
  }
)
view.addSubview(bannerView)

braze.banners.requestBannersRefresh(placementIds: ["sample_placement_id"])

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

// Using BrazeBannerView component
<Braze.BrazeBannerView
  placementId='sample_placement_id'
/>

// Or get banner data
const banner = await Braze.getBanner("sample_placement_id");
if (banner) {
  // Render custom banner UI
}

Braze.requestBannersRefresh(["sample_placement_id"]);

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

// Using BrazeBannerView widget
BrazeBannerView(
  placementId: "sample_placement_id",
)

// Or get banner data
final banner = await braze.getBanner("sample_placement_id");
if (banner != null) {
  // Render custom banner UI
}

braze.requestBannersRefresh(["sample_placement_id"]);

Analytics protokollieren (benutzerdefinierte Implementierungen)

Hinweis

Sowohl Content Cards als auch Banner erfassen Analytics automatisch, wenn ihre Standard-UI-Komponenten verwendet werden. Die folgenden Beispiele gelten für benutzerdefinierte Implementierungen, bei denen Sie Ihre eigene UI erstellen.

Content-Cards-Ansatz

• web
• android
• swift
• react native
• flutter

1
2
3
4
5
6
7

// Manual impression logging required for custom implementations
cards.forEach(card => {
  braze.logContentCardImpressions([card]);
});

// Manual click logging required for custom implementations
card.logClick();

1
2
3
4
5
6
7

// Manual impression logging required for custom implementations
cards.forEach { card ->
  card.logImpression()
}

// Manual click logging required for custom implementations
card.logClick()

1
2
3
4
5
6
7

// Manual impression logging required for custom implementations
for card in cards {
  card.context?.logImpression()
}

// Manual click logging required for custom implementations
card.context?.logClick()

1
2
3
4
5
6
7

// Manual impression logging required for custom implementations
cards.forEach(card => {
  Braze.logContentCardImpression(card.id);
});

// Manual click logging required for custom implementations
Braze.logContentCardClicked(card.id);

1
2
3
4
5
6
7

// Manual impression logging required for custom implementations
for (final card in cards) {
  braze.logContentCardImpression(card);
}

// Manual click logging required for custom implementations
braze.logContentCardClicked(card);

Banner-Ansatz

• web
• android
• swift
• react native
• flutter

Wichtig

Analytics werden automatisch erfasst, wenn insertBanner() verwendet wird. Manuelles Protokollieren sollte bei der Verwendung von insertBanner() nicht eingesetzt werden.

1
2
3
4
5
6
7
8
9

// Analytics are automatically tracked when using insertBanner()
// Manual logging should not be used when using insertBanner()

// For custom implementations, use manual logging methods:
// Log impression
braze.logBannerImpressions([banner]);

// Log click (with optional buttonId)
braze.logBannerClick("sample_placement_id", buttonId);

Wichtig

Analytics werden automatisch erfasst, wenn BannerView verwendet wird. Manuelles Protokollieren sollte bei der Standard-BannerView nicht eingesetzt werden.

1
2
3
4
5
6
7
8
9

// Analytics are automatically tracked when using BannerView
// Manual logging should not be used for default BannerView

// For custom implementations, use manual logging methods:
// Log impression
Braze.getInstance(context).logBannerImpression("sample_placement_id");

// Log click (with optional buttonId)
Braze.getInstance(context).logBannerClick("sample_placement_id", buttonId);

Wichtig

Analytics werden automatisch erfasst, wenn BannerUIView verwendet wird. Manuelles Protokollieren sollte bei der Standard-BannerUIView nicht eingesetzt werden.

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

// Analytics are automatically tracked when using BannerUIView
// Manual logging should not be used for default BannerUIView

// For custom implementations, use manual logging methods:
// Get banner for specific placement
braze.banners.getBanner(for: "sample_placement_id") { banner in
  guard let banner = banner else { return }

  // Log impression
  banner.context?.logImpression()

  // Log click (with optional buttonId)
  banner.context?.logClick(buttonId: buttonId)
}

// Control groups are automatically handled by BannerUIView

Wichtig

Analytics werden automatisch erfasst, wenn BrazeBannerView verwendet wird. Manuelles Protokollieren ist nicht erforderlich.

1
2
3
4
5

// Analytics are automatically tracked when using BrazeBannerView
// No manual logging required

// Note: Manual logging methods for Banners are not yet supported in React Native
// Control groups are automatically handled by BrazeBannerView

Wichtig

Analytics werden automatisch erfasst, wenn BrazeBannerView verwendet wird. Manuelles Protokollieren ist nicht erforderlich.

1
2
3
4
5

// Analytics are automatically tracked when using BrazeBannerView
// No manual logging required

// Note: Manual logging methods for Banners are not yet supported in Flutter
// Control groups are automatically handled by BrazeBannerView

Eigenschaften abrufen

Content-Cards-Ansatz

• web
• android
• swift
• react native
• flutter

1
2
3

cards.forEach(card => {
  console.log("Card id:", card.id, "Extras:", card.extras);
});

1
2
3

cards.forEach { card ->
  Log.d(TAG, "Card id: ${card.id} Extras: ${card.extras}")
}

1
2
3

for card in cards {
  print("Card id: \(card.id) Extras: \(card.extras)")
}

1
2
3

cards.forEach(card => {
  console.log("Card id:", card.id, "Extras:", card.extras);
});

1
2
3

for (final card in cards) {
  print("Card id: ${card.id} Extras: ${card.extras}");
}

Banner-Ansatz

• web
• android
• swift
• react native
• flutter

1
2
3
4
5
6

const banner = braze.getBanner("sample_placement_id");
if (!banner) {
  return;
}

console.log("Banner placement:", banner.placementId, "Properties:", banner.properties);

1
2
3
4

val banner = Braze.getInstance(context).getBanner("sample_placement_id")
if (banner != null) {
  Log.d(TAG, "Banner placement: ${banner.placementId} Properties: ${banner.properties}")
}

1
2
3
4
5

braze.banners.getBanner(for: "sample_placement_id") { banner in
  guard let banner = banner else { return }

  print("Banner placement: \(banner.placementId) Properties: \(banner.properties)")
}

1
2
3
4

const banner = await Braze.getBanner("sample_placement_id");
if (banner) {
  console.log("Banner placement:", banner.placementId, "Properties:", banner.properties);
}

1
2
3
4

final banner = await braze.getBanner("sample_placement_id");
if (banner != null) {
  print("Banner placement: ${banner.placementId} Properties: ${banner.properties}");
}

Kontrollgruppen behandeln

Content-Cards-Ansatz

• web
• android
• swift
• react native
• flutter

1
2
3
4
5
6
7

cards.forEach(card => {
  if (card.isControl) {
    // Logic for control cards ie. don't display but log analytics
  } else {
    // Logic for cards ie. render card
  }
});

1
2
3
4
5
6
7

cards.forEach { card ->
  if (card.isControl) {
    // Logic for control cards ie. don't display but log analytics
  } else {
    // Logic for cards ie. render card
  }
}

1
2
3
4
5
6
7

for card in cards {
  if card.isControl {
    // Logic for control cards ie. don't display but log analytics
  } else {
    // Logic for cards ie. render card
  }
}

1
2
3
4
5
6
7

cards.forEach(card => {
  if (card.isControl) {
    // Logic for control cards ie. don't display but log analytics
  } else {
    // Logic for cards ie. render card
  }
});

1
2
3
4
5
6
7

for (final card in cards) {
  if (card.isControl) {
    // Logic for control cards ie. don't display but log analytics
  } else {
    // Logic for cards ie. render card
  }
}

Banner-Ansatz

• web
• android
• swift
• react native
• flutter

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

braze.subscribeToBannersUpdates((banners) => {
  const banner = braze.getBanner("sample_placement_id");
  if (!banner) {
    return;
  }

  const container = document.getElementById("global-banner-container");

  // Always call insertBanner to track impression (including control)
  braze.insertBanner(banner, container);

  // Hide if control group
  if (banner.isControl) {
    container.style.display = "none";
  }
});

1
2
3
4
5

// BannerView automatically handles control groups
// No additional code needed
val bannerView = BannerView(context).apply {
  placementId = "sample_placement_id"
}

1
2
3
4
5
6

// BannerUIView automatically handles control groups
// No additional code needed
let bannerView = BrazeBannerUI.BannerUIView(
  placementId: "sample_placement_id",
  braze: braze
)

1
2
3
4
5

// BrazeBannerView automatically handles control groups
// No additional code needed
<Braze.BrazeBannerView
  placementId='sample_placement_id'
/>

1
2
3
4
5

// BrazeBannerView automatically handles control groups
// No additional code needed
BrazeBannerView(
  placementId: "sample_placement_id",
)

Einschränkungen

Beachten Sie bei der Migration von Content Cards zu Banner die folgenden Einschränkungen:

Migration von getriggerten Nachrichten

Banner unterstützen nur Campaigns mit geplanter Zustellung. Um eine Nachricht zu migrieren, die zuvor API-getriggert oder aktionsbasiert war, konvertieren Sie sie in segmentbasiertes Targeting:

• Beispiel: Anstatt eine „Profil vervollständigen“-Karte über die API zu triggern, erstellen Sie ein Segment für Nutzer:innen, die sich in den letzten 7 Tagen registriert haben, aber ihr Profil noch nicht vervollständigt haben.
• Echtzeit-Berechtigung: Nutzer:innen qualifizieren oder disqualifizieren sich bei jeder Aktualisierung basierend auf ihrer Segmentzugehörigkeit sofort für das Banner.

Feature-Unterschiede

Produkteinschränkungen

• Bis zu 25 aktive Nachrichten pro Placement.
• Bis zu 10 Placement-IDs pro Aktualisierungsanfrage; Anfragen darüber hinaus werden abgeschnitten.

SDK-Einschränkungen

• Banner werden derzeit nicht auf .NET MAUI (Xamarin), Cordova, Unity, Vega oder TV-Plattformen unterstützt.
• Stellen Sie sicher, dass Sie die in den Voraussetzungen aufgeführten Mindestversionen des SDK verwenden.

Verwandte Artikel

• Banner-Platzierungen
• Tutorial: Ein Banner nach Platzierungs-ID anzeigen
• Banner-Analytics
• Banner-FAQ