Content Cardsからバナーへ移行する
このガイドは、バナー形式のメッセージングユースケースにおいて、Content Cardsからバナーへの移行を支援するものです。バナーは、アプリケーション内の特定の配置に表示される、インラインで持続的なアプリ内メッセージおよびWebメッセージに最適です。
Bannerへの移行が推奨される理由
- エンジニアリングチームがカスタムContent Cardsを構築または保守している場合、Bannerに移行することでその継続的な投資を削減できます。Bannerを使用すると、マーケターがUIを直接コントロールできるため、開発者は他の作業に集中できます。
- ホームページメッセージ、オンボーディングフロー、永続的なお知らせなど新しいメッセージを立ち上げる場合は、Content Cardsをベースにするのではなく、Bannerから始めましょう。リアルタイムのパーソナライゼーション、30日間の有効期限なし、サイズ制限なし、ネイティブな優先順位付けを初日から活用できます。
- 30日間の有効期限の制限を回避したり、複雑な再適格性ロジックを管理したり、古くなったパーソナライゼーションに不満を感じたりしている場合、Bannerはこれらの問題をネイティブに解決します。
Bannerは、バナースタイルのメッセージングにおいてContent Cardsに比べていくつかの利点があります。
制作の高速化
- 継続的なエンジニアリングサポートの削減: マーケターは、開発者のカスタマイズ支援を必要とせずに、ドラッグ&ドロップエディターやカスタムHTMLを使用してカスタムメッセージを作成できます
- 柔軟なカスタマイズオプション: エディターで直接デザインしたり、HTMLを使用したり、カスタムプロパティで既存のデータモデルを活用したりできます
より優れたUX
- ダイナミックなコンテンツ更新: BannerはリフレッシュのたびにLiquidロジックと適格性を更新するため、ユーザーは常に最も関連性の高いコンテンツを目にすることができます
- ネイティブな配置サポート: メッセージはフィードではなく特定の文脈に表示されるため、文脈に応じた関連性が向上します
- ネイティブな優先順位付け: カスタムロジックを必要とせずに表示順序をコントロールできるため、メッセージの階層管理が容易になります
永続性
- 有効期限の制限なし: Bannerキャンペーンには、Content Cardsのような30日間の有効期限の制限がないため、メッセージを真に永続的に表示できます
移行のタイミング
以下の目的でContent Cardsを使用している場合は、バナーへの移行を検討してください。
- ホームページのヒーロー、製品ページのプロモーション、チェックアウトオファー
- 永続的なナビゲーションのお知らせやサイドバーメッセージ
- 30日以上継続して配信される常時表示メッセージ
- リアルタイムのパーソナライゼーションや適格性判定が必要なメッセージ
Content Cardsを引き続き使用すべき場合
以下のような要件がある場合は、Content Cardsを引き続き使用してください。
- フィード体験:スクロール可能な複数のメッセージやカードベースの「受信トレイ」を含むユースケース。
- 特定の機能:プロモーションコードを必要とするメッセージ。バナーではプロモーションコードがネイティブにサポートされていません。バナーではConnected Contentが早期アクセスでサポートされています。
- トリガー配信:APIトリガーまたはアクションベースの配信を厳密に必要とするユースケース。バナーではAPIトリガーやアクションベースの配信はサポートされていませんが、リアルタイムの適格性評価により、ユーザーは更新のたびにセグメントメンバーシップに基づいて即座に適格または不適格と判定されます。
移行ガイド
前提条件
移行する前に、Braze SDKが最小バージョン要件を満たしていることを確認してください。
解除と再適格性には、以下の最小SDKバージョンが必要です。
更新を購読する
Content Cardsのアプローチ
import * as braze from "@braze/web-sdk";
braze.subscribeToContentCardsUpdates((cards) => {
// Handle array of cards
cards.forEach(card => {
console.log("Card:", card.id);
});
});
Braze.getInstance(context).subscribeToContentCardsUpdates { cards ->
// Handle array of cards
cards.forEach { card ->
Log.d(TAG, "Card: ${card.id}")
}
}
braze.contentCards.subscribeToUpdates { cards in
// Handle array of cards
for card in cards {
print("Card: \(card.id)")
}
}
Braze.addListener(Braze.Events.CONTENT_CARDS_UPDATED, (update) => {
const cards = update.cards;
// Handle array of cards
cards.forEach(card => {
console.log("Card:", card.id);
});
});
StreamSubscription contentCardsStreamSubscription = braze.subscribeToContentCards((List<BrazeContentCard> contentCards) {
// Handle array of cards
for (final card in contentCards) {
print("Card: ${card.id}");
}
});
バナーのアプローチ
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);
}
});
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}")
}
}
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)")
}
}
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);
}
});
});
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}");
}
});
});
コンテンツを表示する

Content CardsはカスタムUIロジックで手動レンダリングできますが、バナーはSDKの標準メソッドでのみレンダリングできます。
Content Cardsのアプローチ
// 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
}
});
// 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
}
}
}
// 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
}
}
// Launch default feed
Braze.launchContentCards();
// Or manually render cards
const cards = await Braze.getCachedContentCards();
cards.forEach(card => {
if (card.type === 'CLASSIC') {
// Render classic card
}
});
// 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
}
}
バナーのアプローチ
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"]);
// 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"))
// 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"])
// 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"]);
// 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"]);
分析を記録する(カスタム実装)

Content Cardsとバナーはどちらも、デフォルトのUIコンポーネントを使用する場合、分析を自動的にトラッキングします。以下の例は、独自のUIを構築するカスタム実装向けです。
Content Cardsのアプローチ
// Manual impression logging required for custom implementations
cards.forEach(card => {
braze.logContentCardImpressions([card]);
});
// Manual click logging required for custom implementations
card.logClick();
// Manual impression logging required for custom implementations
cards.forEach { card ->
card.logImpression()
}
// Manual click logging required for custom implementations
card.logClick()
// Manual impression logging required for custom implementations
for card in cards {
card.context?.logImpression()
}
// Manual click logging required for custom implementations
card.context?.logClick()
// 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);
// 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);
バナーのアプローチ

insertBanner()を使用すると、分析は自動的にトラッキングされます。insertBanner()を使用している場合は、手動のログ記録を使用しないでください。
// 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);

BannerViewを使用すると、分析は自動的にトラッキングされます。BannerViewを使用している場合は、手動のログ記録を使用しないでください。
// 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);

BannerUIViewを使用すると、分析は自動的にトラッキングされます。デフォルトのBannerUIViewでは、手動のログ記録を使用しないでください。
// 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

BrazeBannerViewを使用すると、分析は自動的にトラッキングされます。手動のログ記録は不要です。
// 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

BrazeBannerViewを使用すると、分析は自動的にトラッキングされます。手動のログ記録は不要です。
// 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
プロパティを取得する
Content Cardsのアプローチ
cards.forEach(card => {
console.log("Card id:", card.id, "Extras:", card.extras);
});
cards.forEach { card ->
Log.d(TAG, "Card id: ${card.id} Extras: ${card.extras}")
}
for card in cards {
print("Card id: \(card.id) Extras: \(card.extras)")
}
cards.forEach(card => {
console.log("Card id:", card.id, "Extras:", card.extras);
});
for (final card in cards) {
print("Card id: ${card.id} Extras: ${card.extras}");
}
バナーのアプローチ
const banner = braze.getBanner("sample_placement_id");
if (!banner) {
return;
}
console.log("Banner placement:", banner.placementId, "Properties:", banner.properties);
val banner = Braze.getInstance(context).getBanner("sample_placement_id")
if (banner != null) {
Log.d(TAG, "Banner placement: ${banner.placementId} Properties: ${banner.properties}")
}
braze.banners.getBanner(for: "sample_placement_id") { banner in
guard let banner = banner else { return }
print("Banner placement: \(banner.placementId) Properties: \(banner.properties)")
}
const banner = await Braze.getBanner("sample_placement_id");
if (banner) {
console.log("Banner placement:", banner.placementId, "Properties:", banner.properties);
}
final banner = await braze.getBanner("sample_placement_id");
if (banner != null) {
print("Banner placement: ${banner.placementId} Properties: ${banner.properties}");
}
コントロールグループを処理する
Content Cardsのアプローチ
cards.forEach(card => {
if (card.isControl) {
// Logic for control cards ie. don't display but log analytics
} else {
// Logic for cards ie. render card
}
});
cards.forEach { card ->
if (card.isControl) {
// Logic for control cards ie. don't display but log analytics
} else {
// Logic for cards ie. render card
}
}
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
}
}
cards.forEach(card => {
if (card.isControl) {
// Logic for control cards ie. don't display but log analytics
} else {
// Logic for cards ie. render card
}
});
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
}
}
バナーのアプローチ
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";
}
});
// BannerView automatically handles control groups
// No additional code needed
val bannerView = BannerView(context).apply {
placementId = "sample_placement_id"
}
// BannerUIView automatically handles control groups
// No additional code needed
let bannerView = BrazeBannerUI.BannerUIView(
placementId: "sample_placement_id",
braze: braze
)
// BrazeBannerView automatically handles control groups
// No additional code needed
<Braze.BrazeBannerView
placementId='sample_placement_id'
/>
// BrazeBannerView automatically handles control groups
// No additional code needed
BrazeBannerView(
placementId: "sample_placement_id",
)
制限事項
Content Cardsからバナーに移行する際は、以下の制限事項にご注意ください。
トリガーメッセージの移行
バナーはスケジュール配信キャンペーンのみをサポートしています。以前APIトリガーやアクションベースだったメッセージを移行するには、セグメントベースのターゲティングに変換してください。
- 例: APIで「プロフィール完成」カードをトリガーする代わりに、過去7日以内にサインアップしたがプロフィールを完成していないユーザーのセグメントを作成します。
- リアルタイム適格性: ユーザーはリフレッシュのたびに、セグメントメンバーシップに基づいてバナーの対象になったり対象外になったりします。
機能の違い
| 機能 | Content Cards | バナー |
|---|---|---|
| コンテンツ構造 | ||
| フィード内の複数カード | ✅ サポートあり | ✅ 複数のプレースメントを作成してカルーセルのような実装が可能。1つのプレースメントにつき1つのバナーが返されます。 |
| 複数プレースメント | N/A | ✅ 複数プレースメントをサポート |
| カードタイプ(クラシック、キャプション付き、画像のみ) | ✅ 複数の定義済みタイプ | ✅ 単一のHTMLベースバナー(より柔軟) |
| コンテンツ管理 | ||
| ドラッグ&ドロップエディター | ❌ カスタマイズには開発者が必要 | ✅ マーケターが開発なしで作成・更新可能 |
| カスタムHTML/CSS | ❌ カード構造に制限あり | ✅ 完全なHTML/CSSサポート |
| カスタマイズ用のキーと値のペア | ✅ 高度なカスタマイズに必要 | ✅ 高度なカスタマイズ用の「プロパティ」と呼ばれる強い型付けのキーと値のペア |
| メッセージエクストラ | ✅ サポートあり | ❌ 現在サポートされていません |
| 永続性と有効期限 | ||
| カードの有効期限 | ✅ サポートあり(30日制限) | ✅ サポートあり(有効期限の制限なし) |
| 真の永続性 | ❌ 最大30日 | ✅ 無制限の永続性 |
| 表示とターゲティング | ||
| フィードUI | ✅ デフォルトフィードが利用可能 | ❌ プレースメントベースのみ |
| 状況に即したプレースメント | ❌ フィードベース | ✅ ネイティブプレースメントサポート |
| 優先順位付け | ❌ カスタムロジックが必要 | ✅ ネイティブの優先順位付け |
| ユーザーインタラクション | ||
| 手動での非表示 | ✅ サポートあり | ✅ サポートあり |
| 非表示後の再適格性 | ❌ カスタムフィルターまたはキャンペーンロジックが必要 | ✅ デフォルトの待機期間 |
| 固定カード | ✅ サポートあり | N/A |
| 分析 | ||
| 自動分析(デフォルトUI) | ✅ サポートあり | ✅ サポートあり |
| 優先度ソート | ❌ サポートなし | ✅ サポートあり |
| コンテンツ更新 | ||
| Liquidテンプレートの更新 | ❌ 送信/起動時にカードごとに1回 | ✅ リフレッシュのたびに更新 |
| 適格性の更新 | ❌ 送信/起動時にカードごとに1回 | ✅ セッションごとに更新 |
製品の制限事項
- 1つのプレースメントにつき最大25件のアクティブメッセージ。
- 1回のリフレッシュリクエストにつき最大10件のプレースメントID。これを超えるリクエストは切り捨てられます。
SDKの制限事項
- バナーは現在、.NET MAUI(Xamarin)、Cordova、Unity、Vega、またはTVプラットフォームではサポートされていません。
- 前提条件に記載されている最小SDKバージョンを使用していることを確認してください。