コンテンツカードの統合

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

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

標準フィードUI

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

この例では、コンテンツカードフィードを配置する <div id="feed"></div> があります。3つのボタンを使って、フィードの非表示、表示、トグル（現在の状態に応じて非表示、表示）を切り替える。

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
<button id="toggle" type="button">Toggle Cards Feed</button>
<button id="hide" type="button">Hide Cards Feed</button>
<button id="show" type="button">Show Cards Feed</button>

<nav>
    <h1>Your Personalized Feed</h1>
    <div id="feed"></div>
</nav>

<script> 
   const toggle = document.getElementById("toggle");
   const hide = document.getElementById("hide");
   const show = document.getElementById("show");
   const feed = document.getElementById("feed");
    
   toggle.onclick = function(){
      braze.toggleContentCards(feed);    
   }
    
   hide.onclick = function(){
      braze.hideContentCards();
   }
    
   show.onclick = function(){
      braze.showContentCards(feed);    
   }
</script>

toggleContentCards(parentNode, filterFunction) 、showContentCards(parentNode, filterFunction) メソッドを使用する際、引数が与えられない場合、すべてのコンテンツカードはページ右側の固定位置のサイドバーに表示される。そうでなければ、フィードは指定されたparentNode オプションに置かれる。

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

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

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

Braze Web SDK には、3種類のコンテンツカードがあります。ImageOnly、CaptionedImage、ClassicCardである。各タイプは、ベースモデルカードから共通のプロパティを継承し、以下の追加プロパティを持つ。

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

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

すべてのコンテンツカードは、以下の共有プロパティを持っています。

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

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

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

CaptionedImageカードは、クリック可能なフルサイズの画像で、説明文が添えられている。

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

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

対照群

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

コンテンツカード用のカスタム統合を使用している場合、コントロールカードが表示されたときのインプレッションを記録する必要があります。この作業の一環として、AB テストでインプレッションを記録する際には、必ずコントロールカードを処理するようにしてください。これらのカードは空白であり、ユーザーに表示されませんが、コントロールカードでないカードとのパフォーマンスを比較するために、インプレッションを記録する必要がある。

コンテンツカードが AB テストのコントロールグループにあるかどうかを判断するには、card.isControl プロパティ(Web SDK v4.5.0+) を確認するか、カードが ControlCard インスタンス (card instanceof braze.ControlCard) かどうかをチェックします。

カードメソッド

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