Skip to content

コンテンツカードの統合

この記事では、React Native 用のコンテンツカードを設定する方法について説明します。

Braze SDK には、コンテンツカードを使い始めるためのデフォルトのカードフィードが含まれています。カードフィードを表示するには、Braze.launchContentCards() メソッドを使用できます。Braze SDK に含まれるデフォルトのカードフィードは、ユーザーのコンテンツカードの分析トラッキング、却下、レンダリングをすべて処理します。

カスタマイズ

独自の UI を構築するには、利用可能なカードのリストを取得し、カードの更新をリッスンすることができます。

1
2
3
4
5
6
7
8
9
10
11

// Set initial cards
const [cards, setCards] = useState([]);

// Listen for updates as a result of card refreshes, such as:
// a new session, a manual refresh with `requestContentCardsRefresh()`, or after the timeout period
Braze.addListener(Braze.Events.CONTENT_CARDS_UPDATED, async (update) => {
    setCards(update.cards);
});

// Manually trigger a refresh of cards
Braze.requestContentCardsRefresh();

以下の追加メソッドを使用して、アプリ内にカスタムコンテンツカードフィードを構築できます。

コンテンツカードのサンプル表示のテスト

コンテンツカードのサンプルをテストする手順は、次のとおりです。

  1. Braze.changeUser('your-user-id') メソッドを呼び出して、React アプリケーションにアクティブユーザーを設定します。
  2. [キャンペーン] に移動し、このガイドに従って新しいコンテンツカードキャンペーンを作成します。
  3. コンテンツカードのテストキャンペーンを作成し、[テスト] タブに移動します。テストユーザーと同じ user-id を追加し、[テストを送信] をクリックします。まもなくデバイスでコンテンツカードを起動できるようになります。

自分のユーザーIDをテスト受信者として追加して、コンテンツカードをテストできることを示すBrazeコンテンツカードキャンペーン。

その他の統合については、プラットフォームに応じて、Android 統合手順または、iOS 統合手順に従ってください。

これのサンプル実装は、React Native SDK 内のBrazeProject にあります。

コンテンツカードデータモデル

コンテンツカードのデータモデルは、React Native SDK で利用できます。コンテンツカードのデータモデルの完全なリファレンスは、Androidと iOSのドキュメントを参照のこと。

Braze React Native SDK には、画像のみ、キャプション付き画像、クラシックという、ベースモデルを共有する3種類のユニークなコンテンツカードのカードがあります。

また、特別なコントロール・カード・タイプもあり、これは指定されたカードのコントロール・グループに属するユーザーに返される。

各型はベースモデルから共通のプロパティを継承し、以下の追加プロパティを持ちます。

ベースコンテンツカードモデルのプロパティ

ベースカードモデルは、すべてのカードの基本的な動作を規定します。

ベースカードの完全なリファレンスについては、Android および iOS のドキュメントを参照してください。

画像のみコンテンツカードモデルのプロパティ

画像のみのカードはクリック可能なフルサイズの画像です。

画像onlyカードの完全なリファレンスは、Androidと iOSのドキュメントを参照のこと。

キャプション付き画像コンテンツカードモデルのプロパティ

キャプション付き画像カードはクリック可能なフルサイズの画像で、説明文が添えられています。

キャプション付き画像カードの完全なリファレンスについては、Android および iOS のドキュメントを参照してください。

クラシックコンテンツカードモデルのプロパティ

クラシックカードには、タイトル、説明、およびオプションの画像がテキストの左側に表示されます。

クラシック (テキストアナウンス) コンテンツカードの完全なリファレンスについては、Android および iOS のドキュメントを参照してください。クラシック画像 (ショートニュース) カードの完全なリファレンスについては、Android および iOS のドキュメントを参照してください。

コントロール・コンテンツ・カードのモデル・プロパティ

コントロールカードには、基本プロパティがすべて含まれていますが、いくつかの重要な違いがあります。最も重要な点:

  • isControl プロパティはtrue であることが保証されている。
  • extras プロパティは空であることが保証されます。

コントロールカードの詳細については、Androidと iOSのドキュメントを参照のこと。

GIFサポート

デフォルトでは、Braze Android SDKは、コンテンツカードのアニメーションGIFをサポートしていない。詳しくは、Androidコンテンツカードを参照のこと：GIF.

デフォルトでは、Braze Swift SDKは、コンテンツカードのためのアニメーションGIFサポートを提供しない。 GIFViewProvider.完全なチュートリアルについては、チュートリアルを参照のこと：SwiftコンテンツカードのGIFサポート.

Github   GitHub でこのページを編集
「このページはどの程度役に立ちましたか?」
New Stuff!