Skip to content

ログ分析

コンテンツカード用のカスタムUIを構築する場合、インプレッション、クリック、非表示といった分析データを手動で記録する必要があります。これらはデフォルトのカードモデルでのみ自動的に処理されるためです。これらのイベントの記録は、コンテンツカード統合の標準的な部分であり、正確なキャンペーンレポートと請求に不可欠です。これを行うには、カスタムUIにBrazeのデータモデルからデータを入力し、その後手動でイベントを記録します。分析の記録方法を理解したら、Braze の顧客がカスタムコンテンツカードを作成する一般的な方法を確認できます。

分析の記録

カスタムコンテンツカードを実装する場合、コンテンツカードオブジェクトを解析して、title、cardDescription、imageUrlなどのペイロードデータを抽出できます。その後、生成されたモデルデータを使用してカスタム UI を作成できます。

コンテンツカードデータモデルを取得するには、コンテンツカードの更新をサブスクライブします。特に注意すべきプロパティが2つあります。

  • id：コンテンツカード ID の文字列を表します。これは、カスタムコンテンツカードの分析を記録するために使用されるユニークな識別子です。
  • extras：Braze ダッシュボードのすべてのキーと値のペアが含まれます。

カスタムコンテンツカードではidおよびextras以外のすべてのプロパティの解析はオプションです。データモデルの詳細については、Android、iOS、Web の各プラットフォームの統合記事を参照してください。

カードが更新されたときの更新をサブスクライブするコールバック関数を登録します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

import * as braze from "@braze/web-sdk";

braze.subscribeToContentCardsUpdates((updates) => {
  const cards = updates.cards;
// For example:
  cards.forEach(card => {
    if (card.isControl) {
      // Do not display the control card, but remember to call `logContentCardImpressions([card])`
    }
    else if (card instanceof braze.ClassicCard || card instanceof braze.CaptionedImage) {
      // Use `card.title`, `card.imageUrl`, etc.
    }
    else if (card instanceof braze.ImageOnly) {
      // Use `card.imageUrl`, etc.
    }
  })
});

braze.openSession();

ステップ 1: プライベートサブスクライバー変数を作成する

カード更新をサブスクライブするには、まずカスタムクラスでサブスクライバーを保持するプライベート変数を宣言します。

1
2

// subscriber variable
private IEventSubscriber<ContentCardsUpdatedEvent> mContentCardsUpdatedSubscriber;

ステップ 2: 更新をサブスクライブする

次に、通常はカスタムコンテンツカードアクティビティのActivity.onCreate()内で、以下のコードを追加して、Braze のコンテンツカードの更新をサブスクライブします。

1
2
3
4
5
6
7
8
9
10
11
12
13

// Remove the previous subscriber before rebuilding a new one with our new activity.
Braze.getInstance(context).removeSingleSubscription(mContentCardsUpdatedSubscriber, ContentCardsUpdatedEvent.class);
mContentCardsUpdatedSubscriber = new IEventSubscriber<ContentCardsUpdatedEvent>() {
    @Override
    public void trigger(ContentCardsUpdatedEvent event) {
        // List of all Content Cards
        List<Card> allCards = event.getAllCards();

        // Your logic below
    }
};
Braze.getInstance(context).subscribeToContentCardsUpdates(mContentCardsUpdatedSubscriber);
Braze.getInstance(context).requestContentCardsRefresh();

ステップ 3: 購読解除する

また、カスタムアクティビティが表示されなくなったら、購読を解除することをおすすめします。アクティビティのonDestroy()ライフサイクルメソッドに次のコードを追加します。

1

Braze.getInstance(context).removeSingleSubscription(mContentCardsUpdatedSubscriber, ContentCardsUpdatedEvent.class);

ステップ 1: プライベートサブスクライバー変数を作成する

カード更新をサブスクライブするには、まずカスタムクラスでサブスクライバーを保持するプライベート変数を宣言します。

1

private var contentCardsUpdatedSubscriber: IEventSubscriber<ContentCardsUpdatedEvent>? = null

ステップ 2: 更新をサブスクライブする

次に、通常はカスタムコンテンツカードアクティビティのActivity.onCreate()内で、以下のコードを追加して、Braze のコンテンツカードの更新をサブスクライブします。

1
2
3
4
5
6
7
8
9
10

// Remove the previous subscriber before rebuilding a new one with our new activity.
Braze.getInstance(context).removeSingleSubscription(contentCardsUpdatedSubscriber, ContentCardsUpdatedEvent::class.java)
contentCardsUpdatedSubscriber = IEventSubscriber { event ->
  // List of all Content Cards
  val allCards = event.allCards

  // Your logic below
}
Braze.getInstance(context).subscribeToContentCardsUpdates(contentCardsUpdatedSubscriber)
Braze.getInstance(context).requestContentCardsRefresh(true)

ステップ 3: 購読解除する

また、カスタムアクティビティが表示されなくなったら、購読を解除することをおすすめします。アクティビティのonDestroy()ライフサイクルメソッドに次のコードを追加します。

1

Braze.getInstance(context).removeSingleSubscription(contentCardsUpdatedSubscriber, ContentCardsUpdatedEvent::class.java)

コンテンツカードデータモデルにアクセスするには、brazeインスタンスのcontentCards.cardsを呼び出します。

1

let cards: [Braze.ContentCard] = AppDelegate.braze?.contentCards.cards

さらに、サブスクリプションを維持して、コンテンツカードの変更を監視することもできます。これには次の2つの方法があります。

  1. キャンセル可能なオブジェクトを維持する。または、
  2. AsyncStreamを維持する。

キャンセル可能

1
2
3
4
5
6

// This subscription is maintained through a Braze cancellable, which will observe for changes until the subscription is cancelled.
// You must keep a strong reference to the cancellable to keep the subscription active.
// The subscription is canceled either when the cancellable is deinitialized or when you call its `.cancel()` method.
let cancellable = AppDelegate.braze?.contentCards.subscribeToUpdates { [weak self] contentCards in
  // Implement your completion handler to respond to updates in `contentCards`.
}

AsyncStream

1

let stream: AsyncStream<[Braze.ContentCard]> = AppDelegate.braze?.contentCards.cardsStream

1

NSArray<BRZContentCardRaw *> *contentCards = AppDelegate.braze.contentCards.cards;

さらに、コンテンツカードのサブスクリプションを維持する場合は、subscribeToUpdatesを呼び出すことができます。

1
2
3
4

// This subscription is maintained through Braze cancellable, which will continue to observe for changes until the subscription is cancelled.
BRZCancellable *cancellable = [self.braze.contentCards subscribeToUpdates:^(NSArray<BRZContentCardRaw *> *contentCards) {
  // Implement your completion handler to respond to updates in `contentCards`.
}];

コンテンツカードのデータを取得するには、getContentCardsメソッドを使用します。

1
2
3

import Braze from "@braze/react-native-sdk";

const cards = await Braze.getContentCards();

更新を監視するには、コンテンツカードの更新イベントをサブスクライブします。

1
2
3
4
5
6
7
8
9
10

const subscription = Braze.addListener(Braze.Events.CONTENT_CARDS_UPDATED, (update) => {
  const cards = update.cards;
  cards.forEach(card => {
    if (card.isControl) {
      // Do not display the control card, but remember to log an impression
    } else {
      // Use card.title, card.cardDescription, card.image, etc.
    }
  });
});

Braze サーバーからコンテンツカードを手動で更新するには：

1

Braze.requestContentCardsRefresh();

ネットワークリクエストなしでキャッシュされたコンテンツカードを取得するには：

1

const cachedCards = await Braze.getCachedContentCards();

イベントの記録

インプレッション、クリック、非表示などの重要な指標の記録は、素早く簡単に行えます。これらの分析を手動で処理するようにカスタムクリックリスナーを設定します。

logContentCardImpressionsを使用して、ユーザーがカードを閲覧したときのインプレッションイベントを記録します。

1
2
3

import * as braze from "@braze/web-sdk";

braze.logContentCardImpressions([card1, card2, card3]);

logContentCardClickを使用して、ユーザーがカードを操作したときのカードクリックイベントを記録します。

1
2
3

import * as braze from "@braze/web-sdk";

braze.logContentCardClick(card);

BrazeManagerは、コンテンツカードオブジェクトの配列リストなどの Braze SDK 依存関係を参照して、Braze のロギングメソッドを呼び出すためのCardを取得できます。ContentCardable基本クラスを使用すると、BrazeManagerへのデータの参照や提供が容易になります。

インプレッションやカードのクリックを記録するには、Card.logClick()またはCard.logImpression()をそれぞれ呼び出します。

isDismissedを使用して、特定のコンテンツカードを手動で「却下」として記録したり、Braze に設定したりできます。カードがすでに却下済みとしてマークされている場合、そのカードを再度却下済みとしてマークすることはできません。

カスタムクリックリスナーを作成するには、IContentCardsActionListenerを実装するクラスを作成し、BrazeContentCardsManagerに登録します。ユーザーがコンテンツカードをクリックしたときに呼び出されるonContentCardClicked()メソッドを実装します。次に、コンテンツカードクリックリスナーを使用するよう Braze に指示します。

以下に例を示します。

1
2
3
4
5
6
7
8
9
10
11

BrazeContentCardsManager.getInstance().setContentCardsActionListener(new IContentCardsActionListener() {
  @Override
  public boolean onContentCardClicked(Context context, Card card, IAction cardAction) {
    return false;
  }

  @Override
  public void onContentCardDismissed(Context context, Card card) {

  }
});

以下に例を示します。

1
2
3
4
5
6
7
8
9

BrazeContentCardsManager.getInstance().contentCardsActionListener = object : IContentCardsActionListener {
  override fun onContentCardClicked(context: Context, card: Card, cardAction: IAction): Boolean {
    return false
  }

  override fun onContentCardDismissed(context: Context, card: Card) {

  }
}

BrazeContentCardUIViewControllerDelegateプロトコルを実装し、デリゲートオブジェクトをBrazeContentCardUI.ViewControllerのdelegateプロパティとして設定します。このデリゲートは、カスタムオブジェクトのデータを Braze に渡して記録する処理を行います。例については、Content Cards UI tutorialを参照してください。

1
2
3
4
5
6
7
8
9
10
11
12

// Set the delegate when creating the Content Cards controller
contentCardsController.delegate = delegate

// Method to implement in delegate
func contentCard(
    _ controller: BrazeContentCardUI.ViewController,
    shouldProcess clickAction: Braze.ContentCard.ClickAction,
    card: Braze.ContentCard
  ) -> Bool {
  // Intercept the content card click action here.
  return true
}

1
2
3
4
5
6
7
8
9
10

// Set the delegate when creating the Content Cards controller
contentCardsController.delegate = delegate;

// Method to implement in delegate
- (BOOL)contentCardController:(BRZContentCardUIViewController *)controller
                shouldProcess:(NSURL *)url
                         card:(BRZContentCardRaw *)card {
  // Intercept the content card click action here.
  return YES;
}

ユーザーがカードを閲覧したときにインプレッションイベントを記録します。

1

Braze.logContentCardImpression(card.id);

ユーザーがカードを操作したときにカードクリックイベントを記録します。

1

Braze.logContentCardClicked(card.id);

ユーザーがカードを閉じたときに非表示イベントを記録します。

1

Braze.logContentCardDismissed(card.id);

クリック時の動作の処理

カスタムフィードでユーザーがコンテンツカードをクリックした場合、クリック時の動作（URLへの遷移、ディープリンク、カスタムイベントの記録など）は自動的に処理されません。handleBrazeActionを使用して、カードのURLを処理し、設定されたクリック時のアクション（Braze アクション（brazeActions:// URL）を含む）を実行します。

1
2
3
4
5
6
7
8
9
10
11
12

import * as braze from "@braze/web-sdk";

// In your card click handler
function onCardClick(card) {
  // Log the click
  braze.logContentCardClick(card);

  // Handle the on-click behavior
  if (card.url) {
    braze.handleBrazeAction(card.url);
  }
}

クリック時の動作は、デフォルトのコンテンツカード UI によって自動的に処理されます。カスタム実装の場合は、上記の分析の記録セクションで説明されているIContentCardsActionListenerインターフェイスを使用してください。

クリック時の動作は、デフォルトのコンテンツカード UI によって自動的に処理されます。カスタム実装の場合は、上記の分析の記録セクションで説明されているBrazeContentCardUIViewControllerDelegateプロトコルを使用してください。
Github   GitHub でこのページを編集
New Stuff!