チュートリアル: プレースメント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} {#1-enable-debugging-optional}
開発中のトラブルシューティングを容易にするために、デバッグを有効にすることを検討してください。
2. プレースメントを更新する {#2-refresh-your-placements} {#2-refresh-your-placements}
Braze SDKを初期化した後、requestBannersRefresh(placementIds: ["PLACEMENT_ID"])を呼び出して、各セッションの開始時にバナーコンテンツを更新します。
3. バナーを初期化してコールバックを提供する {#3-initialize-the-banner-and-provide-a-callback} {#3-initialize-the-banner-and-provide-a-callback}
BrazeオブジェクトとプレースメントIDを使用してBrazeBannerUI.BannerUIViewインスタンスを作成し、processContentUpdatesコールバックを提供してバナーを表示し、提供されたコンテンツの高さに基づいて高さの制約を更新します。
4. Auto Layoutの制約を有効にする {#4-enable-auto-layout-constraints} {#4-enable-auto-layout-constraints}
デフォルトでバナービューを非表示にし、Auto Layoutの制約を有効にするためにautoresizingマスクの変換を無効にします。
5. コンテンツをアンカーして高さの制約を設定する {#5-anchor-content-and-set-height-constraints} {#5-anchor-content-and-set-height-constraints}
Auto Layoutを使用してメインコンテンツを上部にアンカーし、その後にバナービューを配置します。バナーのleading、trailing、bottomエッジをセーフエリアにピン留めし、コンテンツが読み込まれたときに更新される初期高さ制約を0に設定します。
1. デバッグを有効にする（オプション） {#1-enable-debugging-optional}
開発中のトラブルシューティングを容易にするために、デバッグを有効にすることを検討してください。
2. プレースメントを更新する {#2-refresh-your-placements}
Braze SDKを初期化した後、requestBannersRefresh(placementIds: ["PLACEMENT_ID"])を呼び出して、各セッションの開始時にバナーコンテンツを更新します。
3. ビューコンポーネントを作成する {#3-create-a-view-component} {#3-create-a-view-component}
利用可能なバナーを表示し、必要に応じてメインアプリのコンテンツを含む再利用可能なSwiftUIビューコンポーネントを作成します。
4. 利用可能なバナーのみを表示する {#4-only-display-available-banners} {#4-only-display-available-banners}
SDKが初期化されており、そのユーザーにバナーコンテンツが存在する場合にのみ、BrazeBannerUI.BannerViewの表示を試みます。.onAppearでgetBanner(for:placementID)を呼び出して、hasBannerForPlacementのステートを設定します。
5. 読み込み後にのみBannerViewを表示する {#5-only-show-bannerview-after-it-loads} {#5-only-show-bannerview-after-it-loads}
UIに空白スペースが表示されないようにするために、バナーが存在しSDKが初期化されている場合にのみBrazeBannerUI.BannerViewを表示します。
6. バナーの高さをダイナミックに更新する {#6-dynamically-update-banner-height} {#6-dynamically-update-banner-height}
processContentUpdatesコールバックを使用して、バナーのコンテンツの高さが読み込まれたらすぐに取得します。SwiftUIのステート（contentHeight）を更新し、提供された高さを使用して.frame(height:)制約を適用します。
7. バナーの高さを制限する {#7-limit-the-banner-height} {#7-limit-the-banner-height}
バナーが最大高さを超えないようにするために、.frame(height: min(contentHeight, 80))モディファイアを適用します。これにより、バナーのコンテンツに関係なく、UIの視覚的なバランスが保たれます。