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

前提条件

コンテンツカードを使用するには、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 でのコンテンツカードのテスト

ブラウザーの開発者ツールを使用して、コンテンツカードの統合をテストできます。

1. コンテンツカードキャンペーンを作成し、テストユーザーをターゲットにします。
2. Web SDK が統合されている Web サイトにログインします。
3. ブラウザーのコンソールを開きます。Chrome の場合、ページを右クリックし、検証を選択してから、Console タブを選択します。
4. コンソールで以下のコマンドを実行します。
   • window.braze.getCachedContentCards()
   • window.braze.toggleContentCards()

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

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

基本カードモデル

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

画像のみ

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

キャプション付き画像

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

クラシック

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

コントロールグループ

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

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

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

カードメソッド

デフォルトフィードメソッド

Braze のデフォルトフィード UI を使用してコンテンツカードを表示する場合は、以下のメソッドを使用します。

カスタムフィードメソッド

独自のコンテンツカード UI を構築する場合は、以下のメソッドを使用します。

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

ベストプラクティス

メソッドを正しい順序で呼び出す

カスタムフィードの場合、subscribeToContentCardsUpdates() が openSession() の前に呼び出された場合にのみ、セッション開始時にコンテンツカードが更新されます。Braze メソッドは以下の順序で呼び出してください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
import * as braze from "@braze/web-sdk";

// Step 1: Initialize the SDK
braze.initialize("YOUR-API-KEY", { baseUrl: "YOUR-SDK-ENDPOINT" });

// Step 2: Subscribe to card updates
braze.subscribeToContentCardsUpdates((updates) => {
  const cards = updates.cards;
  renderCards(cards);
});

// Step 3: Identify the user
braze.changeUser("USER_ID");

// Step 4: Start the session
braze.openSession();

キャッシュされたカードを使用してページ読み込み間でコンテンツを保持する

subscribeToContentCardsUpdates() は新しい更新がある場合（セッション開始時など）にのみコールバックを呼び出すため、ユーザーがセッション中にページを更新すると、カスタムフィードからカードが消えることがあります。これを防ぐには、getCachedContentCards() を使用してローカルキャッシュからカードを即座にレンダリングし、新しい更新のサブスクリプションと併用してください。

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
import * as braze from "@braze/web-sdk";

function renderCards(cards) {
  const container = document.getElementById("content-cards");
  container.textContent = "";
  const displayedCards = [];

  cards.forEach(card => {
    if (card instanceof braze.ClassicCard || card instanceof braze.CaptionedImage) {
      const cardElement = document.createElement("div");

      const h3 = document.createElement("h3");
      h3.textContent = card.title || "";
      cardElement.appendChild(h3);

      const p = document.createElement("p");
      p.textContent = card.description || "";
      cardElement.appendChild(p);

      if (card.imageUrl) {
        const img = document.createElement("img");
        img.src = card.imageUrl;
        img.alt = card.title || "";
        cardElement.appendChild(img);
      }

      if (card.url) {
        cardElement.addEventListener("click", () => {
          braze.logContentCardClick(card);
          braze.handleBrazeAction(card.url);
        });
      }

      container.appendChild(cardElement);
      displayedCards.push(card);
    }
  });

  if (displayedCards.length > 0) {
    braze.logContentCardImpressions(displayedCards);
  }
}

// Display cached cards immediately
const cached = braze.getCachedContentCards();
if (cached && cached.cards.length > 0) {
  renderCards(cached.cards);
}

// Subscribe to future updates
braze.subscribeToContentCardsUpdates((updates) => {
  renderCards(updates.cards);
});

カスタムフィードの分析を記録する

カスタム UI を使用する場合、インプレッション、クリック、却下は自動的に追跡されません。各イベントを手動で記録する必要があります。

• インプレッション: カードがユーザーに表示されたときに、カードオブジェクトの配列を指定して logContentCardImpressions([card1, card2, ...]) を呼び出します。
• クリック: ユーザーがカードを操作したときに logContentCardClick(card) を呼び出します。
• クリック時の動作: カードに設定されたクリック時アクション（URL へのナビゲーションやカスタムイベントの記録など）を実行するために handleBrazeAction(card.url) を呼び出します。

Google Tag Manager の使用

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

トラブルシューティング

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

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

デバッグモードに入る

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

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

カスタムイベントのタグシーケンスを確認する

カスタムイベントやその他のアクションが Braze に記録されない場合、よくある原因は競合です。アクションタグ（Custom Event や Purchase など）が Braze Initialization タグの完了前に発火してしまうことがあります。これを修正するには、GTM でタグシーケンスを設定します。

1. 正しく記録されていないアクションタグを開きます。
2. Advanced Settings > Tag Sequencing で、A tag that fires before [this tag] を選択します。
3. セットアップタグとして Braze Initialization タグを選択します。

これにより、アクションタグが Braze にデータを送信する前に、SDK が完全に初期化されることが保証されます。

詳細ログの有効化

トラブルシューティング用の詳細なログをキャプチャするには、Google Tag Manager 統合で詳細ログを有効にできます。これらのログは、ブラウザーの開発者ツールの Console タブに表示されます。

Google Tag Manager 統合で、Braze 初期化タグに移動し、Enable Web SDK Logging を選択します。