チュートリアル: Content Cardsを使った受信トレイの作成
このチュートリアルのサンプルコードに沿って、BrazeのContent Cardsで受信トレイを構築しましょう。
前提条件
この機能を使用する前に、Android Braze SDKを統合する必要がある。
Android（Compose）向けContent Cardsを使った受信トレイの作成
1. デバッグを有効にする（オプション） {#1-enable-debugging-optional}
開発中のトラブルシューティングを容易にするために、デバッグを有効にすることを検討してください。
2. UIビューを構築する {#2-build-a-ui-view}
Jetpack Composeでは、LazyColumnを使用して、スクロール可能なリストにContent Cardsを表示します。
3. Content Cardsの更新をサブスクライブする {#3-subscribe-to-content-card-updates}
DisposableEffectを使用してサブスクリプションのライフサイクルを管理し、コンポーザブルがコンポジションから離脱する際に適切なクリーンアップを行います。
4. カスタム受信トレイUIを構築する {#4-build-a-custom-inbox-ui}
Content Cardsの属性（title、description、urlなど）を使用することで、特定のUI要件に合ったContent Cardsを作成できます。ここでは、Jetpack ComposeのCardコンポーザブルとColumnコンポーザブルを使って受信トレイを構築しています。
5. インプレッションとクリックをトラッキングする {#5-track-impressions-and-clicks}
Content Cards向けに用意されているlogImpressionsメソッドとlogClickメソッドを使って、インプレッションとクリックを記録できます。
インプレッションは、ユーザーがカードを閲覧した際に一度だけ記録する必要があります。LaunchedEffectを使用して、カードが表示されたときにインプレッションを記録します。アプリのビューライフサイクルやユースケースを考慮して、インプレッションが正しく記録されるようにする必要がある点にご注意ください。
Android向けContent Cardsを使った受信トレイの作成（RecyclerView）
1. デバッグを有効にする（オプション）
開発中のトラブルシューティングを容易にするために、デバッグを有効にすることを検討してください。
2. UIビューを構築する
このチュートリアルでは、AndroidのRecyclerViewを使用してContent Cardsを表示しますが、ユースケースに合ったクラスやコンポーネントでUIを構築することをお勧めします。BrazeはデフォルトでUIを提供しますが、このチュートリアルでは外観と動作をカスタマイズするためのカスタムビューの作成方法を説明します。
3. Content Cardsの更新をサブスクライブする
subscribeToContentCardsUpdatesを使用して、新しいContent Cardsが利用可能になった際にUIが応答できるようにします。ここでは、サブスクライバーはアクティビティのライフサイクルフック内で登録および削除されます。
4. カスタム受信トレイUIを構築する
Content Cardsの属性（title、description、urlなど）を使用することで、特定のUI要件に合ったContent Cardsを作成できます。ここでは、AndroidのネイティブRecyclerViewを使って受信トレイを構築しています。
5. インプレッションとクリックをトラッキングする
Content Cards向けに用意されているlogImpressionsメソッドとlogClickメソッドを使って、インプレッションとクリックを記録できます。
インプレッションは、ユーザーがカードを閲覧した際に一度だけ記録する必要があります。ここでは、カードごとのフラグを用いて重複ログを防ぐシンプルな仕組みを採用しています。アプリのビューライフサイクルやユースケースを考慮して、インプレッションが正しく記録されるようにする必要がある点にご注意ください。
前提条件
この機能を使う前に、Swift Braze SDKを統合する必要がある。 また、Swiftのアプリ内メッセージを有効にする必要もあります。
Swift向けContent Cardsを使った受信トレイの作成
1. デバッグを有効にする（オプション）
開発中のトラブルシューティングを容易にするために、デバッグを有効にすることを検討してください。
2. UIビューを構築する
このチュートリアルではSwiftのUITableViewControllerを使用しますが、ユースケースに合ったクラスやコンポーネントでUIを構築することをお勧めします。
3. Content Cardsの更新をサブスクライブする
Content Cardsリスナーをサブスクライブして最新の更新を受け取り、requestRefresh()を呼び出してそのユーザー向けの最新のContent Cardsをリクエストします。
4. カスタム受信トレイUIを構築する
Content Cardsのattributes（title、description、imageUrlなど）を使用することで、特定のUI要件に合ったContent Cardsを作成できます。ここでは、SwiftのネイティブテーブルAPIを使って受信トレイを構築しています。
5. インプレッションとクリックをトラッキングする
コンテンツカード向けに用意されているlogClick(using:)メソッドとlogImpression(using:)メソッドを使って、インプレッションとクリックを記録できます。
さらに、却下の記録にはlogDismissed(using:)も使用できます。
インプレッションは、ユーザーが閲覧した際に一度だけ記録する必要があります。ここでは、SetとwillDisplayを使用したシンプルな仕組みでこれを実現しています。アプリのUIライフサイクルやユースケースを考慮して、インプレッションが正しく記録されるようにする必要がある点にご注意ください。
前提条件
この機能を使用する前に、Web Braze SDKを統合する必要がある。 ただし、追加のセットアップは不要です。
Web向けContent Cardsを使った受信トレイの作成
1. デバッグを有効にする（オプション）
開発中のトラブルシューティングを容易にするために、デバッグを有効にすることを検討してください。オプションとして、コンソールでBraze Web SDKのメソッドを実行することもできます。
2. UIを構築する {#2-build-the-ui}
受信トレイページのUIを作成します。ここでは、基本的なHTMLページを作成しています。このページには、cards-listというIDを持つdivが含まれています。これはContent Cardsをレンダリングするためのターゲットコンテナとして使用されます。
3. Content Cardsの更新をサブスクライブする
Content Cardsリスナーをサブスクライブして最新の更新を受け取り、requestContentCardsRefresh()を呼び出してそのユーザー向けの最新のContent Cardsをリクエストします。または、セッション開始時に自動更新を行うために、openSession()の前にサブスクライバーを呼び出すこともできます。
4. 受信トレイの要素を作成する {#4-build-the-inbox-elements}
Content Cardsの属性（title、description、urlなど）を使用することで、特定のUI要件に合わせてContent Cardsを表示できます。
5. インプレッションとクリックをトラッキングする
Content Cards向けに用意されているlogContentCardImpressionsメソッドとlogContentCardClickメソッドを使って、インプレッションとクリックを記録できます。
さらに、却下の記録にはlogCardDismissalも使用できます。
インプレッションは、ユーザーが閲覧した際に一度だけ記録する必要があります。ここでは、IntersectionObserverとcard.idをキーとしたSetを使用して重複ログを防止しています。アプリのUIライフサイクルやユースケースを考慮して、インプレッションが正しく記録されるようにする必要がある点にご注意ください。