コンテンツカード実装ガイド

このオプションおよび高度な実装ガイドでは、コンテンツカードコードの考慮事項、当社チームが作成した3つのカスタムユースケース、付随するコードスニペット、およびロギングインプレッション、クリック、および削除に関するガイダンスについて説明します。こちらから Braze Demo リポジトリにアクセスしてください！この実装ガイドは、Swift 実装を中心にしていますが、興味のある人のために Objective-C のスニペットが提供されていることに注意してください。

コードに関する考慮事項

カスタムオブジェクトとしてのコンテンツカード

ブースターを追加するロケット船のように、独自のカスタムオブジェクトを拡張してコンテンツカードとして機能させることができます。このような限定された API サーフェスは、異なるデータバックエンドとの互換性を保つ柔軟性を提供します。これは、ContentCardable プロトコルに準拠し、(次のコードスニペットに示すように) イニシャライザを実装することで実行できます。また、ContentCardData 構造体を使用することで、ABKContentCard データにアクセスできます。ABKContentCard ペイロードは、すべてプロトコルに付属のイニシャライザを使用して Dictionary 型から ContentCardData 構造体とカスタムオブジェクト自体を初期化するために使用されます。

イニシャライザには、ContentCardClassType enum も含まれます。この enum は、初期化するオブジェクトを決定するために使用されます。Braze ダッシュボード内のキーと値のペアを使用して、初期化するオブジェクトを決定するために使用する明示的な class_type キーを設定できます。コンテンツカードのこれらのキーと値のペアは、ABKContentCard の extras 変数に格納されます。イニシャライザのもう1つのコアコンポーネントは、metaData ディクショナリパラメータです。metaData には解析された ABKContentCard から一連のキーと値までのすべてが含まれます。関連するカードが解析され、カスタムオブジェクトに変換された後、アプリケーションは JSON またはその他のソースからインスタンス化されたかのように、それらのカードで作業を開始する準備ができています。

これらのコードに関する考慮事項をしっかりと理解したら、ユースケースをチェックして、カスタムオブジェクトの実装を開始します。

• contentcardable
• custom objects
• handling content cards
• working with payload data

1
2
3
4
let contentCardData = ContentCardData(contentCardId: idString, contentCardClassType: contentCardClassType, createdAt: createdAt, isDismissable: isDismissable)
let customObjectProperty = extras["YOUR-CUSTOM-OBJECT-PROPERTY"] as? String
       
self.init(contentCardData: contentCardData, property: customObjectProperty)   } } \`\`\`

1
2
**カスタムオブジェクトイニシャライザ**<br>
`ABKContentCard` からの MetaData は、オブジェクトの変数を入力するために使用されます。Braze ダッシュボードで設定されたキーと値のペアは、「extras」ディクショナリに表示されます。

1
2
3
4
5
6
7
  if ([extras objectForKey: @"YOUR-CUSTOM-PROPERTY")
    _customObjectProperty = extras[@"YOUR-CUSTOM-OBJECT-PROPERTY"];
 
  self.contentCardData = [[ContentCardData alloc] initWithIdString:idString classType:classType createdAt:createdAt isDismissible:isDismissible];
 
  return self;
}   }   return nil; } \`\`\`

1
2
3
4
func loadContentCards() {
  BrazeManager.shared.addObserverForContentCards(observer: self, selector: #selector(contentCardsUpdated))
  BrazeManager.shared.requestContentCardsRefresh()
}

1
2
3
4
- (void)loadContentCards {
  [[BrazeManager shared] addObserverForContentCards:self selector:@selector(contentCardsUpdated:)];
  [[BrazeManager shared] requestContentCardsRefresh];
}

1
2
3
4
5
6
7
8
- (NSArray *)handleContentCardsUpdated:(NSNotification *)notification forClassType:(ContentCardClassType)classType {  
  BOOL updateIsSuccessful = [notification.userInfo[ABKContentCardsProcessedIsSuccessfulKey] boolValue];
  if (updateIsSuccessful) {
    return [self convertContentCards:self.contentCards forClassType:classType];
  } else {
    return @[];
  }
}

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
var metaData: [ContentCardKey: Any] = [:]
switch card {
case let banner as ABKBannerContentCard:
  metaData[.image] = banner.image
case let captioned as ABKCaptionedImageContentCard:
  metaData[.title] = captioned.title
  metaData[.cardDescription] = captioned.cardDescription
  metaData[.image] = captioned.image
case let classic as ABKClassicContentCard:
  metaData[.title] = classic.title
  metaData[.cardDescription] = classic.cardDescription
default:
  break
}
 
metaData[.idString] = card.idString
metaData[.created] = card.created
metaData[.dismissible] = card.dismissible
metaData[.urlString] = card.urlString
metaData[.extras] = card.extras
...
// other Content Card properties such as expiresAt, pinned, etc.
  
if let contentCardable = contentCardable(with: metaData, for: classType) {
  contentCardables.append(contentCardable)
}   }   return contentCardables } \`\`\`

1
2
3
4
5
6
7
8
9
10
11
func contentCardable(with metaData: [ContentCardKey: Any], for classType: ContentCardClassType) -> ContentCardable? {
  switch classType {
  case .yourValue:
    return CustomObject(metaData: metaData, classType: classType)
  case .yourOtherValue:
    return OtherCustomObject(metaData: metaData, classType: classType)
  ...
  default:
    return nil
  }
}

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
NSMutableDictionary *metaData = [[NSMutableDictionary alloc] init];
if ([card isKindOfClass:[ABKBannerContentCard class]]) {
  ABKBannerContentCard *banner = (ABKBannerContentCard *)card;
  metaData[ContentCardKeyImage] = banner.image;
} else if ([card isKindOfClass:[ABKCaptionedImageContentCard class]]) {
  ABKCaptionedImageContentCard *captioned = (ABKCaptionedImageContentCard *)card;
  metaData[ContentCardKeyTitle] = captioned.title;
  metaData[ContentCardKeyCardDescription] = captioned.cardDescription;
  metaData[ContentCardKeyImage] = captioned.image;
} else if ([card isKindOfClass:[ABKClassicContentCard class]]) {
  ABKClassicContentCard *classic = (ABKClassicContentCard *)card;
  metaData[ContentCardKeyCardDescription] = classic.title;
  metaData[ContentCardKeyImage] = classic.image;
}
 
metaData[ContentCardKeyIdString] = card.idString;
metaData[ContentCardKeyCreated] = [NSNumber numberWithDouble:card.created];
metaData[ContentCardKeyDismissible] = [NSNumber numberWithBool:card.dismissible];
metaData[ContentCardKeyUrlString] = card.urlString;
metaData[ContentCardKeyExtras] = card.extras;
...
// other Content Card properties such as expiresAt, pinned, etc.   
 
id<ContentCardable> contentCardable = [self contentCardableWithMetaData:metaData forClassType:classType];
if (contentCardable) {
  [contentCardables addObject:contentCardable];
}   }

1
2
3
4
5
6
7
8
9
10
11
- (id<ContentCardable>)contentCardableWithMetaData:(NSDictionary *)metaData forClassType:(ContentCardClassType)classType {
  switch (classType) {
    case ContentCardClassTypeYourValue:
      return [[CustomObject alloc] initWithMetaData:metaData classType:classType];
    case ContentCardClassTypeYourOtherValue:
      return nil;
    ...
    default:
      return nil;
  }
}

サンプルユースケース

3つのサンプルカスタマーユースケースが用意されています。各ユースケースでは、詳細な説明、関連するコードスニペット、およびコンテンツカード変数が Braze ダッシュボードでどのように表示され、どのように使用されるかを確認できます。

• 補足コンテンツとしてのコンテンツカード
• メッセージセンターのコンテンツカード
• インタラクティブコンテンツカード

補足コンテンツとしてのコンテンツカード

コンテンツカードを既存のフィードにシームレスにブレンドし、複数のフィードからのデータを同時に読み込むことができます。これにより、Braze コンテンツカードと既存のフィードコンテンツとの一体感のある、調和のとれた体験が生まれます。

右の例は、ローカルデータと Braze を使用したコンテンツカードによって設定された項目のハイブリッドリストを含む UICollectionView を示しています。これにより、既存のコンテンツとコンテンツカードを区別できなくなります。

ダッシュボード設定

このコンテンツカードは、API トリガーのキーと値のペアを持つ API トリガーキャンペーンによって提供されます。これは、カードの値が外部要因に依存して、ユーザに表示するコンテンツを決定するキャンペーンに最適です。class_type はセットアップ時にわかっている必要があることに注意してください。

を使用して設定されています。

分析をログに記録する準備ができましたか?

以下のセクションを参照して、データフローの外観について理解を深めてください。

メッセージセンターのコンテンツカード

コンテンツカードは、各メッセージが独自のカードであるメッセージセンター形式で使用できます。メッセージセンター内の各メッセージは、コンテンツカードペイロードを介して入力され、各カードには、クリック時 UI/UX を起動する追加のキーと値のペアが含まれています。次の例では、1つのメッセージによって任意のカスタムビューが表示され、別のメッセージによってカスタム HTML を表示する Web ビューが開きます。

ダッシュボード設定

次のメッセージタイプでは、キーと値のペア class_type をダッシュボード設定に追加する必要があります。ここで割り当てる値は任意ですが、クラス型を区別できるようにする必要があります。これらのキーと値のペアは、ユーザーが簡略化された受信トレイメッセージをクリック際に行き先を決定するときにアプリケーションが参照するキー識別子です。

• arbitrary custom view message (full page)
• webview message (html)

詳細説明

メッセージセンターロジックは、Braze のキーと値のペアによって提供される contentCardClassType によって駆動されます。addContentCardToViewメソッドを使用すると、これらのクラス型をフィルタリングして識別することができます。

• swift
• objective-c

1
2
3
4
5
6
7
8
9
10
func addContentCardToView(with message: Message) {
    switch message.contentCardData?.contentCardClassType {
      case .message(.fullPage):
        loadContentCardFullPageView(with: message as! FullPageMessage)
      case .message(.webView):
        loadContentCardWebView(with: message as! WebViewMessage)
      default:
        break
    }
}

1
2
3
4
5
6
7
8
9
10
11
12
- (void)addContentCardToView:(Message *)message {
  switch (message.contentCardData.classType) {
    case ContentCardClassTypeMessageFullPage:
      [self loadContentCardFullPageView:(FullPageMessage *)message];
      break;
    case ContentCardClassTypeMessageWebview:
      [self loadContentCardWebView:(WebViewMessage *)message];
      break;
    default:
      break;
  }
}

分析をログに記録する準備ができましたか?

以下のセクションを参照して、データフローの外観について理解を深めてください。

インタラクティブコンテンツカード

コンテンツカードを活用して、ユーザーのための動的でインタラクティブな体験を作成できます。右の例では、コンテンツカードのポップアップがチェックアウト時に表示され、ユーザーに最新のプロモーションを提供しています。

このように適切に配置されたカードは、ユーザーが特定のユーザーアクションを実行するように「後押し」する優れた方法です。

ダッシュボード設定

インタラクティブコンテンツカードのダッシュボード設定は簡単です。このユースケースのキーと値のペアには、希望する割引額として設定された discount_percentage と、coupon_code として設定された class_type があります。これらのキーと値のペアは、タイプ固有のコンテンツカードがどのようにフィルタリングされ、チェックアウト画面に表示される方法です。

分析をログに記録する準備ができましたか?

以下のセクションを参照して、データフローの外観について理解を深めてください。

ダークモードのカスタマイズ

デフォルトでは、コンテンツカードビューは、テーマカラーのセットでデバイスのダークモードの変更に自動的に応答します。

この動作は、カスタムスタイルガイドで詳細に説明されているようにオーバーライドできます。

インプレッション、クリック、却下の記録

カスタムオブジェクトをコンテンツカードとして機能するように拡張した後は、インプレッション、クリック、および却下などの貴重なメトリクスのロギングが迅速に行われます。これは、ContentCardableプロトコルを使用して実行できます。このプロトコルは、Braze SDK によってロギングされるヘルパーファイルを参照し、データを提供します。

実装コンポーネント

• swift
• objective-c

1
2
3
customObject.logContentCardImpression()
customObject.logContentCardClicked()
customObject.logContentCardDismissed()

1
contentCard.logContentCardImpression()   }

ヘルパーファイル

1
2
3
4
5
6
7
8
enum ContentCardKey: String {
  case idString
  case created
  case classType = "class_type"
  case dismissible
  case extras
  ...
}

1
2
3
4
5
6
static NSString *const ContentCardKeyIdString = @"idString";
static NSString *const ContentCardKeyCreated = @"created";
static NSString *const ContentCardKeyClassType = @"class_type";
static NSString *const ContentCardKeyDismissible = @"dismissible";
static NSString *const ContentCardKeyExtras = @"extras";
...