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

注

このガイドでは、Braze Web SDK 4.0.0+ のコードサンプルを使用します。最新の Web SDK バージョンにアップグレードするには、SDK アップグレードガイドを参照してください。

前提条件

Content Cardsを使用するには、Braze Web SDKをアプリに統合する必要があります。ただし、追加のセットアップは必要ありません。代わりに独自のUIを構築するには、コンテンツカードカスタマイズガイドを参照してください。

注

一部の広告ブロッカーやブラウザーのプライバシー拡張機能は、Braze Web SDKスクリプトや関連するネットワークリクエストをブロックすることがあり、Content Cardsの読み込みが妨げられる場合があります。CDN統合方法を使用している場合は、NPM統合方法への切り替えを検討してください。この方法ではSDKライブラリをWebサイトにローカルで保存するため、広告ブロッカー関連の問題を回避できる場合があります。

標準フィードUI

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

この例では、Content Cardsフィードを配置する <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) メソッドを使用する際、引数が指定されない場合、すべてのContent Cardsはページ右側の固定位置サイドバーに表示されます。引数が指定された場合は、フィードは指定された parentNode オプションに配置されます。

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

WebでのContent Cardsのテスト

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

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

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

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

ヒント

Content Cardsデータを記録するには、分析の記録を参照してください。

基本カードモデル

すべてのContent Cardsは、以下の共有プロパティを持っています。

画像のみ

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

キャプション付き画像

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

クラシック

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

コントロールグループ

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

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

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

カードメソッド

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

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

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

独自のContent Cards UIを構築する場合は、以下のメソッドを使用します。

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

ベストプラクティス

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

カスタムフィードの場合、subscribeToContentCardsUpdates() を openSession() の前に呼び出した場合にのみ、セッション開始時にContent Cardsが更新されます。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) を呼び出します。

警告

logContentCardClick() に渡す引数は、オリジナルの Braze Card オブジェクトである必要があります。カードデータを変換または再構築した場合（例：シリアライズとデシリアライズ）、クリックは記録されず、「card must be a Card object.」というエラーが表示されます。

Google Tag Managerの使用

Google Tag Managerは、Braze CDN（当社Web SDKのバージョン）をWebサイトコードに直接注入することで機能します。つまり、Content Cardsを実装する場合を除き、Google Tag ManagerなしでSDKを統合した場合と同様に、すべてのSDKメソッドを利用できます。

Content Cardsの設定

• 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を選択します。