チュートリアル: プレースメントIDによるバナーの表示
このチュートリアルのサンプルコードに沿って、プレースメントIDを使用してバナーを表示します。詳細については、バナーを参照してください。
前提条件
このチュートリアルを始める前に、Braze SDKが最低バージョン要件を満たしていることを確認してください：
Web SDKのバナーを表示する
1. デバッグを有効にする（オプション） {#1-enable-debugging-optional}
開発中のトラブルシューティングを容易にするために、デバッグを有効にすることを検討してください。
2. バナーの更新をサブスクライブする {#2-subscribe-to-banner-updates}
subscribeToBannersUpdates() を使用して、バナーが更新されるたびに実行されるハンドラーを登録します。ハンドラー内でbraze.getBanner("global_banner")を呼び出して、最新のプレースメントを取得します。
3. バナーを挿入し、コントロールグループを処理する {#3-insert-the-banner-and-handle-control-groups}
バナーが返されたら、braze.insertBanner(banner, container)を使用してバナーを挿入します。レイアウトを整えるために、コントロールグループに含まれるバナーは非表示にするか折りたたんでください（例えば、isControlがtrueの場合）。
4. バナーを更新する {#4-refresh-your-banners}
SDKを初期化した後、requestBannersRefresh(["global_banner", ...])を呼び出して、各セッションの開始時にバナーが更新されるようにします。
この関数はいつでも呼び出して、後からバナーのプレースメントを更新することもできます。
5. バナー用のコンテナを追加する {#5-add-a-container-for-your-banner}
HTMLに新しい<div>要素を追加し、global-banner-containerのようなバナーに関連する短いidを付けます。Brazeはこの<div>を使用して、バナーをページに挿入します。
前提条件
このチュートリアルを始める前に、Braze SDKが最低バージョン要件を満たしていることを確認してください：
Android SDKのバナーを表示する
1. デバッグを有効にする（オプション） {#1-enable-debugging-optional}
開発中のトラブルシューティングを容易にするために、デバッグを有効にすることを検討してください。
2. バナーの更新情報を購読する {#2-subscribe-to-banner-updates}
subscribeToBannersUpdates() を使用して、バナーが更新されるたびに実行されるハンドラを登録します。
3. プレースメントを更新する {#3-refresh-your-placements}
Braze SDKを初期化した後、requestBannersRefresh(["PLACEMENT_ID"]) を呼び出して、そのプレースメントの最新バナーコンテンツを取得します。
4. banners.xmlでBannerViewを定義する {#4-define-bannerview-in-your-bannersxml}
banners.xmlで、app:placementId="PLACEMENT_ID" を指定した <com.braze.ui.banners.BannerView> 要素を宣言します。Brazeはこの要素を使用して、UIにバナーを挿入します。
前提条件
このチュートリアルを始める前に、Braze SDKが最低バージョン要件を満たしていることを確認してください：
Swift SDKのバナーを表示する
1. デバッグを有効にする（オプション） {#1-enable-debugging-optional}
開発中のトラブルシューティングを容易にするために、デバッグを有効にすることを検討してください。
2. プレースメントを更新する {#2-refresh-your-placements}
Braze SDKを初期化した後、各セッションの開始時にrequestBannersRefresh(placementIds: ["PLACEMENT_ID"])を呼び出してバナーコンテンツを更新します。
3. バナーを初期化し、コールバックを提供する {#3-initialize-the-banner-and-provide-a-callback}
BrazeオブジェクトとプレースメントIDを使用してBrazeBannerUI.BannerUIViewインスタンスを作成し、processContentUpdatesコールバックを提供して、提供されたコンテンツの高さに基づいてバナーの非表示を解除し、高さの制約を更新します。
4. Auto Layout制約を有効にする {#4-enable-auto-layout-constraints}
デフォルトでバナービューを非表示にし、Auto Layout制約を有効にするために自動リサイズマスクの変換を無効にします。
5. コンテンツをアンカーし、高さの制約を設定する {#5-anchor-content-and-set-height-constraints}
Auto Layoutを使用してメインコンテンツを上部にアンカーし、バナービューをその後に配置します。バナーのleading、trailing、bottomの各端をセーフエリアに固定し、コンテンツの読み込み時に更新される初期高さ制約0を設定します。
1. デバッグを有効にする（オプション）
開発中のトラブルシューティングを容易にするために、デバッグを有効にすることを検討してください。
2. プレースメントを更新する
Braze SDKを初期化した後、各セッションの開始時にバナーコンテンツを更新するためにrequestBannersRefresh(placementIds: ["PLACEMENT_ID"])を呼び出します。
3. ビューコンポーネントを作成する {#3-create-a-view-component}
利用可能なバナーを表示し、必要に応じてメインアプリのコンテンツを含む、再利用可能なSwiftUIビューコンポーネントを作成します。
4. 利用可能なバナーのみを表示する {#4-only-display-available-banners}
SDKが初期化され、かつそのユーザー向けのバナーコンテンツが存在する場合にのみBrazeBannerUI.BannerViewの表示を試みます。.onAppearでgetBanner(for:placementID)を呼び出してhasBannerForPlacementの状態を設定します。
5. 読み込み後にのみBannerViewを表示する {#5-only-show-bannerview-after-it-loads}
UIに空白が生じないように、バナーが存在し、かつSDKが初期化されている場合にのみBrazeBannerUI.BannerViewを表示します。
6. バナーの高さをダイナミックに更新する {#6-dynamically-update-banner-height}
processContentUpdatesコールバックを使用して、バナーのコンテンツの高さを読み込み完了時に取得します。SwiftUIのステート（contentHeight）を更新し、提供された高さを使って.frame(height:)制約を適用します。
7. バナーの高さを制限する {#7-limit-the-banner-height}
バナーが最大の高さを超えないようにするには、.frame(height: min(contentHeight, 80))修飾子を適用します。これにより、バナーのコンテンツに関わらず、UIの視覚的なバランスが保たれます。