Skip to content

コンテンツカードの統合

この記事では、コンテンツカードデータモデル、標準フィード UI オプション、その他のカードメソッドを含む Web 用コンテンツカード統合について説明します。

Braze Web SDKには、統合作業をスピードアップするためのコンテンツカードフィードUIが含まれています。代わりに独自の UI を構築したい場合は、『コンテンツカードカスタマイズガイド』を参照してください。

標準フィード UI

付属のコンテンツカード UI を使用するには、Web サイトのどこにフィードを表示するかを指定する必要があります。

この例では、コンテンツカードフィードを配置したい場所があります。<div id="feed"></div>3 つのボタンを使用して、フィードの非表示、表示、切り替え (現在の状態に基づいて非表示または表示) を切り替えます。

```html

```

toggleContentCards(parentNode, filterFunction)showContentCards(parentNode, filterFunction)およびメソッドを使用する場合、引数が指定されていない場合、すべてのコンテンツカードがページの右側の固定位置のサイドバーに表示されます。それ以外の場合、parentNodeフィードは指定されたオプションに配置されます。

パラメーター 説明  
parentNode   コンテンツカードをレンダリングする HTML ノード。親ノードに直系の子孫として既にBrazeコンテンツカードビューがある場合は、既存のコンテンツカードが置き換えられます。たとえば、渡す必要がありますdocument.querySelector(".my-container")。
filterFunction このビューに表示されるカードのフィルターまたはソート機能。Cardでソートされたオブジェクトの配列で呼び出されます{pinned, date}。Cardこのユーザーにレンダリングするソートされたオブジェクトの配列を返すことが期待されています。省略すると、すべてのカードが表示されます。  

コンテンツカードの切り替えについて詳しくは、SDK リファレンスドキュメントを参照してください。

コンテンツカードデータモデル{#data-models}

コンテンツカードデータモデルは Web SDK で使用できます。

Braze Web SDK には次の 3 種類のコンテンツカードが用意されています。画像のみ、キャプション付き画像[、クラシックカード。](https://js.appboycdn.com/web-sdk/latest/doc/classes/braze.classiccard.html)各タイプはベースモデルから共通のプロパティを継承し、次の追加プロパティを持ちます。

カードデータの購読については、「分析のロギング」を参照してください。

基本コンテンツカードモデルプロパティ-カード

すべてのコンテンツカードには次の共有プロパティがあります。

プロパティ 説明  
expiresAt カードの有効期限の UNIX タイムスタンプ。  
extras （オプション）値文字列を含む文字列オブジェクトとしてフォーマットされたキーと値のペアのデータ。  
id (オプション) カードの ID。これは、分析目的でイベントとともに Braze に報告されます。  
pinned このプロパティは、カードがダッシュボードで「固定」されるように設定されているかどうかを反映します。  
updated このカードが最後に変更されたときのUNIXタイムスタンプ。  
viewed このプロパティは、ユーザーがカードを閲覧したかどうかを反映します。  
isControl このプロパティは、カードがA/Bテスト内の「コントロール」true グループである場合です。  

画像のみコンテンツカードプロパティ-画像のみ

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

プロパティ 説明  
aspectRatio カードの画像の縦横比で、画像の読み込みが完了する前のヒントになります。特定の状況ではプロパティが提供されない場合があることに注意してください。  
categories このプロパティは、カスタム実装の整理のみを目的としています。これらのカテゴリはダッシュボードコンポーザーで設定できます。  
clicked このプロパティは、このカードがこのデバイスでこれまでにクリックされたことがあるかどうかを示します。  
created Braze からのカード作成時刻を示す UNIX タイムスタンプ。  
dismissed このプロパティは、このカードが却下されたかどうかを示します。  
dismissible このプロパティは、ユーザーがカードを非表示にして表示されないようにできるかどうかを反映します。  
imageUrl   カードの画像の URL。
linkText   URL の表示テキスト。
url   カードをクリックした後に開かれるURL。

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

CaptionEdImage カードは、説明文が付いた、クリック可能なフルサイズの画像です。

プロパティ 説明  
aspectRatio カードの画像の縦横比で、画像の読み込みが完了する前のヒントになります。特定の状況ではプロパティが提供されない場合があることに注意してください。  
categories このプロパティは、カスタム実装の整理のみを目的としています。これらのカテゴリはダッシュボードコンポーザーで設定できます。  
clicked このプロパティは、このカードがこのデバイスでこれまでにクリックされたことがあるかどうかを示します。  
created Braze からのカード作成時刻を示す UNIX タイムスタンプ。  
dismissed このプロパティは、このカードが却下されたかどうかを示します。  
dismissible このプロパティは、ユーザーがカードを非表示にして表示されないようにできるかどうかを反映します。  
imageUrl   カードの画像の URL。
linkText   URL の表示テキスト。
title このカードのタイトルテキスト。  
url   カードをクリックした後に開かれるURL。

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

ClassicCard モデルには、テキストのない画像または画像付きのテキストを含めることができます。

プロパティ 説明  
aspectRatio カードの画像の縦横比で、画像の読み込みが完了する前のヒントになります。特定の状況ではプロパティが提供されない場合があることに注意してください。  
categories このプロパティは、カスタム実装の整理のみを目的としています。これらのカテゴリはダッシュボードコンポーザーで設定できます。  
clicked このプロパティは、このカードがこのデバイスでこれまでにクリックされたことがあるかどうかを示します。  
created Braze からのカード作成時刻を示す UNIX タイムスタンプ。  
description このカードの本文テキスト。  
dismissed このプロパティは、このカードが却下されたかどうかを示します。  
dismissible このプロパティは、ユーザーがカードを非表示にして表示されないようにできるかどうかを反映します。  
imageUrl   カードの画像の URL。
linkText   URL の表示テキスト。
title このカードのタイトルテキスト。  
url   カードをクリックした後に開かれるURL。

コントロールグループ

デフォルトのコンテンツカードフィードを使用すると、インプレッションとクリックが自動的に追跡されます。

コンテンツカードにカスタムインテグレーションを使用する場合は、コントロールカードが表示されたときのインプレッションを記録する必要があります。この取り組みの一環として、A/B テストでインプレッションを記録するときは、必ずコントロールカードを取り扱ってください。これらのカードは空白で、ユーザーには見えませんが、インプレッションを記録して、コントロールカード以外のカードとのパフォーマンスを比較する必要があります。

コンテンツカードが A/B テストのコントロールグループに含まれているかどうかを判断するには、card.isControlプロパティ (Web SDK v4.5.0+) を確認するか、カードがインスタンス () かどうかを確認します。ControlCard card instanceof braze.ControlCard

カードメソッド

メソッド 説明  
logContentCardImpressions 指定されたカードリストのインプレッションイベントを記録します。これは、Braze UI ではなくカスタマイズされた UI を使用する場合に必要です。  
logContentCardClick 指定されたカードのクリックイベントを記録します。これは、Braze UI ではなくカスタマイズされた UI を使用する場合に必要です。  
showContentCards ユーザーのコンテンツカードを表示します。  
hideContentCards 現在表示されているブレイズコンテンツカードを非表示にする。  
toggleContentCards ユーザーのコンテンツカードを表示します。  
getCachedContentCards 前回のコンテンツカード更新で現在利用可能なカードをすべて取得します。  
subscribeToContentCardsUpdates コンテンツカードの更新を購読する.
サブスクライバーコールバックは、コンテンツカードが更新されるたびに呼び出されます。		  
dismissCard プログラムでカードを消去する (v2.4.1で使用可能) .

詳細については、SDK リファレンスドキュメントを参照してください。

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