コンテンツカードによって促進された

前提条件

コンテンツカードを使用するには、 Braze Web SDK をアプリに統合する必要があります。ただし、追加のセットアップは必要ありません。代わりに独自の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 リファレンスドキュメントを参照してください。

カードの種類とプロパティ

コンテンツカードデータモデルはWeb SDKで使用でき、次のコンテンツカードタイプを提供します。ImageOnly、CaptionedImage、ClassicCardである。各タイプは、ベースモデルカードから共通のプロパティを継承し、以下の追加プロパティを持つ。

基準カード型式

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

画像のみ

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

キャプション付き画像

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

クラシック

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

対照群

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

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

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

カードメソッド

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

Google タグマネージャの使用

Google Tag Manager は、 Braze CDN (当社Web SDKのバージョン) をWeb サイト コードに直接注入することで機能します。これは、コンテンツカードを実装する場合を除き、Google Tag Manager なしでSDKを統合した場合と同様に、すべてのSDK方法を利用できることを意味します。

コンテンツカードの設定

• google tag manager
• manual

1
2
3
<script>
   window.braze.showContentCards();
</script>

1
2
3
body .ab-feed { 
    width: 800px;
}

テンプレートのアップグレード

Braze Web SDK の最新バージョンにアップグレードするには、Google Tag Manager ダッシュボードで次の3つのステップを実行します。

1. タグテンプレートを更新する
   ワークスペース内のTemplates ページに移動します。更新が利用可能であることを示すアイコンが表示されます。
   
   
   
   そのアイコンをクリックし、変更を確認した後、Accept Updateをクリックします。
   
   
   
   
2. バージョン番号を更新する
   タグテンプレートが更新されたら、Braze 初期化タグを編集し、SDK バージョンを最新の major.minor バージョンに更新します。たとえば、最新バージョンが4.1.2 の場合、4.1 と入力します。SDKのバージョン一覧は変更履歴で見ることができる。
   
   
   
   
3. QA および公開
   Google Tag Manager の [デバッグツール] を使用して、新しい SDK バージョンが動作していることを確認してから、タグコンテナーに更新を公開します。

トラブルシューティング

タグデバッグを有効にする

それぞれのBraze タグ テンプレートにはオプションのGTM タグ デバッグ チェックボックスがあり、ウェブページのJavaScript コンソールへのデバッグメッセージのログ記録に使用できます。

デバッグモードに入る

Google Tag Manager の統合をデバッグするもう1つの方法は、Google の [プレビューモード] 機能を使用することです。

これにより、Web ページのデータレイヤーから、トリガーされた Braze 各タグに送信されている値を特定できるほか、トリガーされたタグとトリガーされなかったタグについても確認できます。

詳細ログの有効化

Braze テクニカルサポートがテスト中にログにアクセスできるようにするには、Google Tag Manager 統合で詳細ログを有効にします。これらのログは、ブラウザーの開発者ツールの [コンソール] タブに表示されます。

Google Tag Manager 統合で、Braze 初期化タグに移動し、[Web SDK ログを有効にする] を選択します。