バナーカードの埋め込み
Braze SDK を使用してバナーカードを埋め込む方法を学習することで、自然な感じの体験をユーザーにエンゲージできるようになります。一般的な情報については、バナーカードについてを参照してください。
important:
バナーカードは現在、早期アクセス段階です。早期アクセスに参加することに興味がある場合は、Brazeのアカウントマネージャーに連絡してください。
前提条件
以下は、Banner Card の使用を開始するために必要な最低限のSDK バージョンです。
バナーカードの埋め込み
Step 1: Create placements
If you haven’t already, you’ll need to create Banner placements in Braze that are used to define the locations in your app or site can display Banners. To create a placement, go to Settings > Banners Placements, then select Create Placement.

Give your placement a name and assign a Placement ID. Be sure you consult other teams before assigning an ID, as it’ll be used throughout the card’s lifecycle and shouldn’t be changed later. For more information, see Placement IDs.

ステップ2:アプリの配置を更新する
配置はセッションごとにリクエストでき、ユーザーのセッションの有効期限が切れたとき、または changeUser
メソッドを使用して識別されたユーザーを変更したときに自動的にキャッシュされます。
tip:
バナーのダウンロードや表示の遅延を避けるため、できるだけ早く配置を更新してください。
1
2
3
| import * as braze from "@braze/web-sdk";
braze.requestBannersRefresh(["global_banner", "navigation_square_banner"])
|
1
| AppDelegate.braze?.banners.requestRefresh(placementIds: ["global_banner", "navigation_square_banner"])
|
1
2
3
4
| ArrayList<String> listOfBanners = new ArrayList<>();
listOfBanners.add("global_banner");
listOfBanners.add("navigation_square_banner");
Braze.getInstance(context).requestBannersRefresh(listOfBanners);
|
1
| Braze.getInstance(context).requestBannersRefresh(listOf("global_banner", "navigation_square_banner"))
|
1
| Braze.requestBannersRefresh(["global_banner", "navigation_square_banner"]);
|
1
| This feature is not currently supported on Unity.
|
1
| This feature is not currently supported on Cordova.
|
1
| braze.requestBannersRefresh(["global_banner", "navigation_square_banner"]);
|
1
| This feature is not currently supported on Roku.
|
ステップ 3:更新をリッスンする
tip:
このガイドのSDK メソッドを使用してバナーを挿入すると、すべての分析イベントが自動的に処理されます。HTML を手動でレンダリングする場合は、お知らせください。
1
2
3
4
5
6
7
8
| import * as braze from "@braze/web-sdk";
braze.subscribeToBannersUpdates((banners) => {
console.log(`Banners were updated`);
})
// always refresh after your subscriber function has been registered
braze.requestBannersRefresh(["global_banner", "navigation_square_banner"])
|
1
2
3
4
5
| let cancellable = brazeClient.braze()?.banners.subscribeToUpdates { banners in
banners.forEach { placementId, banner in
print("Received banner: \(banner) with placement ID: \(placementId)")
}
}
|
1
2
3
4
5
| Braze.getInstance(context).subscribeToBannersUpdates(banners -> {
for (Banner banner : banners.getBanners()) {
Log.d(TAG, "Received banner: " + banner.getPlacementId());
}
});
|
1
2
3
4
5
| Braze.getInstance(context).subscribeToBannersUpdates { update ->
for (banner in update.banners) {
Log.d(TAG, "Received banner: " + banner.placementId)
}
}
|
1
2
3
4
5
6
7
8
9
10
| const bannerCardsSubscription = Braze.addListener(
Braze.Events.BANNER_CARDS_UPDATED,
data => {
const banners = data.banners;
console.log(
`Received ${banners.length} Banner Cards with placement IDs:`,
banners.map(banner => banner.placementId),
);
},
);
|
1
| This feature is not currently supported on Unity.
|
1
| This feature is not currently supported on Cordova.
|
1
2
3
4
5
| StreamSubscription bannerStreamSubscription = braze.subscribeToBanners((List<BrazeBanner> banners) {
for (final banner in banners) {
print("Received banner: " + banner.toString());
}
});
|
1
| This feature is not currently supported on Roku.
|
ステップ4:配置ID を使用した埋め込み
バナーのコンテナー要素を作成します。幅と高さは必ず設定してください。
1
| <div id="global-banner-container" style="width: 100%; height: 450px;"></div>
|
次に、insertBanner
メソッドを使用して、コンテナ要素の内部HTML を置き換えます。
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
29
30
| import * as braze from "@braze/web-sdk";
braze.initialize("sdk-api-key", {
baseUrl: "sdk-base-url",
allowUserSuppliedJavascript: true, // banners require you to opt-in to user-supplied javascript
});
braze.subscribeToBannersUpdates((banners) => {
// get this placement's banner. If it's `null` the user did not qualify for one.
const globalBanner = braze.getBanner("global_banner");
if (!globalBanner) {
return;
}
// choose where in the DOM you want to insert the banner HTML
const container = document.getElementById("global-banner-container");
// Insert the banner which replacees the innerHTML of that container
braze.insertBanner(globalBanner, container);
// Special handling if the user is part of a Control Variant
if (globalBanner.isControl) {
// hide or collapse the container
container.style.display = 'none';
}
});
braze.requestBannersRefresh(["global_banner", "navigation_square_banner"])
|
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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
| // To get access to the Banner model object:
let globalBanner: Braze.Banner?
AppDelegate.braze?.banners.getBanner(for: "global_banner", { banner in
self.globalBanner = banner
})
// If you simply want the Banner view, you may initialize a `UIView` with the placement ID:
if let braze = AppDelegate.braze {
let bannerUIView = BrazeBannerUI.BannerUIView(
placementId: "global_banner",
braze: braze,
// iOS does not perform automatic resizing or visibility changes.
// Use the `processContentUpdates` parameter to adjust the size and visibility of your Banner Card according to your use case.
processContentUpdates: { result in
switch result {
case .success(let updates):
if let height = updates.height {
// Adjust the visibility and/or height.
}
case .failure(let error):
// Handle the error.
}
}
)
}
// Similarly, if you want a Banner view in SwiftUI, use the corresponding `BannerView` initializer:
if let braze = AppDelegate.braze {
let bannerView = BrazeBannerUI.BannerView(
placementId: "global_banner",
braze: braze,
// iOS does not perform automatic resizing or visibility changes.
// Use the `processContentUpdates` parameter to adjust the size and visibility of your Banner Card according to your use case.
processContentUpdates: { result in
switch result {
case .success(let updates):
if let height = updates.height {
// Adjust the visibility and/or height according to your parent controller.
}
case .failure(let error):
// Handle the error.
}
}
)
}
|
Java コードでバナーを取得するには、以下を使用します。
1
| Banner globalBanner = Braze.getInstance(context).getBanner("global_banner");
|
次のXML を含めることで、Android ビューレイアウトでBanner Cards を作成できます。
1
2
3
4
5
| <com.braze.ui.banners.BannerView
android:id="@+id/global_banner_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:placementId="global_banner" />
|
Kotlin でバナーを取得するには、以下を使用します。
1
| val banner = Braze.getInstance(context).getBanner("global_banner")
|
Android ビューを使用している場合は、次の XML を使用します。
1
2
3
4
5
| <com.braze.ui.banners.BannerView
android:id="@+id/global_banner_id"
android:layout_width="match_parent"
android:layout_height="wrap_content"
app:placementId="global_banner" />
|
Jetpack Compose を使用している場合は、次を使用できます。
1
| Banner(placementId = "global_banner")
|
React Native の新しいアーキテクチャ を使用している場合は、BrazeBannerView
をファブリックコンポーネントとしてAppDelegate.mm
に登録する必要があります。
1
2
3
4
5
6
7
8
| #ifdef RCT_NEW_ARCH_ENABLED
/// Register the `BrazeBannerView` for use as a Fabric component.
- (NSDictionary<NSString *,Class<RCTComponentViewProtocol>> *)thirdPartyFabricComponents {
NSMutableDictionary * dictionary = [super thirdPartyFabricComponents].mutableCopy;
dictionary[@"BrazeBannerView"] = [BrazeBannerView class];
return dictionary;
}
#endif
|
Banner Card のデータモデルをReact Native で取得するには、以下を使用します。
1
| const banner = await Braze.getBanner("global_banner");
|
getBanner
メソッドを使用して、ユーザーのキャッシュにその配置が存在するかどうかを確認できます。ただし、最も単純な統合のために、以下のJavaScript XML (JSX) スニペットをビュー階層に追加し、配置ID のみを指定します。
1
2
3
| <Braze.BrazeBannerView
placementID='global_banner'
/>
|
1
| This feature is not currently supported on Unity.
|
1
| This feature is not currently supported on Cordova.
|
バナーカードのデータモデルをFlutter で取得するには、以下を使用します。
1
2
3
4
5
6
7
| braze.getBanner("global_banner").then((banner) {
if (banner == null) {
// Handle null cases.
} else {
print(banner.toString());
}
});
|
getBanner
メソッドを使用して、ユーザーのキャッシュにその配置が存在するかどうかを確認できます。ただし、最も単純な統合のために、以下のウィジェットをビュー階層に追加し、配置ID のみを指定します。
1
2
3
| BrazeBannerView(
placementId: "global_banner",
),
|
1
| This feature is not currently supported on Roku.
|
ステップ 5: テストカードを送信する(オプション)
バナーカードキャンペーンを起動する前に、テストバナーカードを送信して統合を検証できます。テストカードは別のメモリ内キャッシュに保存され、アプリの再起動後も保持されません。追加のセットアップは必要ありませんが、テスト・デバイスがテスト・カードを表示できるように、フォアグラウンド・プッシュ通知を受信できる必要があります。
note:
テストバナーカードは、次のアプリセッションで削除される点を除き、他のバナーと同じです。
分析のログ記録
SDK メソッドを使用してバナーカードを挿入すると、Braze は自動的にインプレッションを記録します。そのため、インプレッションを手動で追跡する必要はありません。カスタムビューでHTML を解析してレンダリングする必要がある場合は、[email protected] までお問い合わせください。
寸法とサイズ
バナーカードの寸法とサイズについては、次のとおりです。
- 作曲者が異なる寸法のバナーをプレビューする間、その情報は保存されず、SDK に送信されません。
- HTML は、レンダリングされるコンテナの全幅を使用します。
- 固定寸法要素を作成し、それらの寸法をコンポーザーでテストすることをお勧めします。