Skip to content

コンテンツカードの作成

この記事では、カスタムコンテンツカードを実装するときに使用する基本的なアプローチと、バナー画像、メッセージ受信トレイ、画像のカルーセルの3つの一般的なユースケースについて説明します。コンテンツ・カードのカスタマイズ・ガイドの他の記事をすでに読んで、デフォルトでできることと、カスタム・コードが必要なことを理解していることを前提としている。カスタム・コンテンツ・カードのlog analyticsの方法を理解することは特に役立ちます。

カードを作成する

ステップ1:カスタム UI を作成する

まず、独自のカスタムフラグメントを作成します。デフォルトのContentCardFragmentは、デフォルトのコンテンツカードタイプのみに対応するよう設計されていますが、良い出発点です。

まず、独自のカスタムビューコントローラーコンポーネントを作成します。デフォルトのBrazeContentCardUI.ViewControllerは、デフォルトのコンテンツカードタイプのみに対応するよう設計されていますが、良い出発点です。

まず、カードのレンダリングに使用するカスタム HTML コンポーネントを作成します。

ステップ 2:カードの更新情報を購読する

次に、カードの更新時にデータ更新を購読するコールバック関数を登録します。

ステップ3: 分析を実装する

コンテンツカードのインプレッション数、クリック数、却下数は、カスタムビューに自動的に記録されません。すべての指標が Braze ダッシュボードの分析に適切に記録されるように、それぞれのメソッドを実装する必要があります。

ステップ 4:カードのテスト(オプション)

コンテンツカードをテストするには:

  1. changeUser() メソッドを呼び出して、アプリケーションでアクティブなユーザーを設定します。
  2. ブレーズで、Campaignsに移動し、新しいコンテンツカードキャンペーンを作成します。
  3. キャンペーンで、Test を選択し、テストユーザのuser-id を入力します。準備ができたら、Send Testを選択します。すぐにデバイスでコンテンツカードを起動できます。

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

コンテンツカードの配置

コンテンツカードはさまざまな方法で使用できます。一般的な3つの実装は、メッセージセンター、バナー広告、または画像カルーセルとして使用することです。これらの配置ごとに、キーと値のペア (データモデルのextrasプロパティ) をコンテンツカードに割り当て、その値に基づいて、ランタイム時にカードの動作、外観、または機能を動的に調整します。

メッセージの受信トレイ

コンテンツカードを使用してメッセージセンターをシミュレーションできます。この形式では、各メッセージはクリック時のイベントを動作させるキーと値のペアを含む独自のカードです。これらのキーと値のペアは、ユーザーが受信トレイのメッセージをクリックしたときに、アプリケーションが行き先を決定する際に参照する重要な識別子です。キーと値のペアの値は任意です。

例

たとえば、ユーザがおすすめを読めるようにするためのコール・トゥ・アクションと、新しいサブスクライバ・セグメントに付与されるクーポン・コードという2つのメッセージ・カードを作成できます。

body、title、buttonTextなどのキーは、マーケターが設定できる単純な文字列値を持つ場合があります。termsのようなキーは、法務部門が承認したフレーズの小さなコレクションを提供する値を持つ場合があります。style やclass_type などのキーには、アプリやサイトでのカードのレンダリング方法を決定するために設定できる文字列値があります。

読み取り推奨カードのキーと値のペア:

新しいサブスクライバクーポンのキーと値のペア:

Android の追加情報

Android と FireOS SDK では、メッセージセンターのロジックは Braze のキーと値のペアが提供するclass_type値によって駆動されます。createContentCardableメソッドを使用すると、これらのクラスタイプをフィルタリングして識別できます。

クリック時の動作に class_type を使用する
コンテンツカードのデータをカスタムクラスにインフレートするときに、データのContentCardClassプロパティを使用して、データの格納に使用する具象サブクラスを決定します。

1
2
3
4
5
6
7
8
9
10
11

 private fun createContentCardable(metadata: Map<String, Any>, type: ContentCardClass?): ContentCardable?{
        return when(type){
            ContentCardClass.AD -> Ad(metadata)
            ContentCardClass.MESSAGE_WEB_VIEW -> WebViewMessage(metadata)
            ContentCardClass.NOTIFICATION_CENTER -> FullPageMessage(metadata)
            ContentCardClass.ITEM_GROUP -> Group(metadata)
            ContentCardClass.ITEM_TILE -> Tile(metadata)
            ContentCardClass.COUPON -> Coupon(metadata)
            else -> null
        }
    }

次に、メッセージリストに対するユーザーの操作を処理するときに、メッセージのタイプを使用して、ユーザーに表示するビューを決定できます。

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

override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        //...
        listView.onItemClickListener = AdapterView.OnItemClickListener { parent, view, position, id ->
           when (val card = dataProvider[position]){
                is WebViewMessage -> {
                    val intent = Intent(this, WebViewActivity::class.java)
                    val bundle = Bundle()
                    bundle.putString(WebViewActivity.INTENT_PAYLOAD, card.contentString)
                    intent.putExtras(bundle)
                    startActivity(intent)
                }
                is FullPageMessage -> {
                    val intent = Intent(this, FullPageContentCard::class.java)
                    val bundle = Bundle()
                    bundle.putString(FullPageContentCard.CONTENT_CARD_IMAGE, card.icon)
                    bundle.putString(FullPageContentCard.CONTENT_CARD_TITLE, card.messageTitle)
                    bundle.putString(FullPageContentCard.CONTENT_CARD_DESCRIPTION, card.cardDescription)
                    intent.putExtras(bundle)
                    startActivity(intent)
                }
            }

        }
    }

クリック時の動作に class_type を使用する
コンテンツカードのデータをカスタムクラスにインフレートするときに、データのContentCardClassプロパティを使用して、データの格納に使用する具象サブクラスを決定します。

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

private ContentCardable createContentCardable(Map<String, ?> metadata,  ContentCardClass type){
    switch(type){
        case ContentCardClass.AD:{
            return new Ad(metadata);
        }
        case ContentCardClass.MESSAGE_WEB_VIEW:{
            return new WebViewMessage(metadata);
        }
        case ContentCardClass.NOTIFICATION_CENTER:{
            return new FullPageMessage(metadata);
        }
        case ContentCardClass.ITEM_GROUP:{
            return new Group(metadata);
        }
        case ContentCardClass.ITEM_TILE:{
            return new Tile(metadata);
        }
        case ContentCardClass.COUPON:{
            return new Coupon(metadata);
        }
        default:{
            return null;
        }
    }
}

次に、メッセージリストに対するユーザーの操作を処理するときに、メッセージのタイプを使用して、ユーザーに表示するビューを決定できます。

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

@Override
protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState)
        //...
        listView.setOnItemClickListener(new AdapterView.OnItemClickListener() {
            @Override
            public void onItemClick(AdapterView<?> parent, View view, int position, long id){
               ContentCardable card = dataProvider.get(position);
               if (card instanceof WebViewMessage){
                    Bundle intent = new Intent(this, WebViewActivity.class);
                    Bundle bundle = new Bundle();
                    bundle.putString(WebViewActivity.INTENT_PAYLOAD, card.getContentString());
                    intent.putExtras(bundle);
                    startActivity(intent);
                }
                else if (card instanceof FullPageMessage){
                    Intent intent = new Intent(this, FullPageContentCard.class);
                    Bundle bundle = Bundle();
                    bundle.putString(FullPageContentCard.CONTENT_CARD_IMAGE, card.getIcon());
                    bundle.putString(FullPageContentCard.CONTENT_CARD_TITLE, card.getMessageTitle());
                    bundle.putString(FullPageContentCard.CONTENT_CARD_DESCRIPTION, card.getCardDescription());
                    intent.putExtras(bundle)
                    startActivity(intent)
                }
            }

        });
    }

カルーセル

フルカスタムのカルーセルフィードでコンテンツカードを設定できます。これにより、ユーザーは追加の機能付きカードをスワイプして表示できます。デフォルトでは、コンテンツカードは作成された日付(最新のもの)でソートされ、ユーザーには対象となるすべてのカードが表示されます。

コンテンツカードカローセルを実装するには:

  1. コンテンツカードの変更を監視し、コンテンツカードの到着を処理するカスタムロジックを作成します。
  2. カスタムクライアント側ロジックを作成して、カルーセル内の特定の数のカードを一度に表示します。たとえば、配列から最初の5つのコンテンツカードオブジェクトを選択したり、キーと値のペアを導入して条件付きロジックを構築したりできます。

バナー

コンテンツカードは「カード」のように見せる必要はありません。たとえば、コンテンツカードは動的なバナーとして表示され、ホームページや指定ページの上部に永続的に表示されます。

これを実現するために、マーケターは画像のみタイプのコンテンツカードでキャンペーンまたはキャンバスステップを作成します。次に、コンテンツカードを補足コンテンツとして使用するのに適したキーと値のペアを設定します。

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