アプリ内メッセージング実装ガイド

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

コードに関する考慮事項

次のガイドでは、デフォルトのアプリ内メッセージに加えて使用する、オプションのカスタムデベロッパーインテグレーションについて説明します。各ユースケースにはカスタムビューコントローラーが含まれており、機能を拡張したり、アプリ内メッセージの外観をネイティブにカスタマイズしたりするためのサンプルが用意されています。

ABKInAppMessage サブクラス

次のコードスニペットは Braze SDK の UI デリゲートメソッドで、アプリ内メッセージに入力するサブクラスビューを決定します。このガイドでは基本的な実装について説明し、フルサブクラス、スライドアップサブクラス、モーダルサブクラスを魅力的な方法で実装する方法を示します。カスタムビューコントローラーを設定する場合は、他のすべてのアプリ内メッセージサブクラスを設定する必要があることに注意してください。サブクラス化の背後にある概念をしっかりと理解したら、ユースケースを確認してアプリ内メッセージングサブクラスの実装を開始してください。

• swift
• objective-c

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
extension AppboyManager: ABKInAppMessageUIDelegate {
  func inAppMessageViewControllerWith(_ inAppMessage: ABKInAppMessage) -> ABKInAppMessageViewController {
    switch inAppMessage {
    case is ABKInAppMessageSlideup:
      return slideupViewController(inAppMessage: inAppMessage) //Custom Method
    case is ABKInAppMessageModal: 
      return modalViewController(inAppMessage: inAppMessage) //Custom Method
    case is ABKInAppMessageFull:
      return fullViewController(inAppMessage: inAppMessage) //Custom Method
    case is ABKInAppMessageHTML:
      return ABKInAppMessageHTMLViewController(inAppMessage: inAppMessage)
    default:
      return ABKInAppMessageViewController(inAppMessage: inAppMessage)
    }
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
- (ABKInAppMessageViewController *)inAppMessageViewControllerWithInAppMessage:(ABKInAppMessage *)inAppMessage {
  if ([inAppMessage isKindOfClass:[ABKInAppMessageSlideup class]]) {
    return [self slideupViewControllerWithInAppMessage:inAppMessage]; //Custom Method
  } else if ([inAppMessage isKindOfClass:[ABKInAppMessageModal class]]) {
    return [self modalViewControllerWithInAppMessage:inAppMessage]; //Custom Method
  } else if ([inAppMessage isKindOfClass:[ABKInAppMessageFull class]]) {
    return [self fullViewControllerWithInAppMessage:inAppMessage]; //Custom Method
  } else if ([inAppMessage isKindOfClass:[ABKInAppMessageHTML class]]) {
    return [[ABKInAppMessageHTMLViewController alloc] initWithInAppMessage:inAppMessage];
  } else {
    return [[ABKInAppMessageViewController alloc] initWithInAppMessage:inAppMessage];
  }
}

サンプルユースケース

3つのサンプルの顧客ユースケースが提供されています。それぞれのユースケースには、詳細な説明、関連するコードスニペット、アプリ内メッセージが Braze ダッシュボードでどのように表示され、どのように使用されるかが記載されています。

• カスタムスライドアップアプリ内メッセージ
• カスタムモーダルアプリ内メッセージ
• カスタムフルアプリ内メッセージ

カスタムスライドアップアプリ内メッセージ

スライドアップのアプリ内メッセージを作成しているときに、デフォルトの方法ではメッセージの配置を変更できないことに気付くかもしれません。このような変更は、ABKInAppMessageSlideupViewController をサブクラス化し、独自のカスタム変数で offset 変数をオーバーライドすることによって可能になります。右の画像は、これを使用してスライドアップアプリ内メッセージを調整する方法の例を示しています。

開始するには、SlideFromBottomViewController にアクセスしてください。

デフォルト UI への動作の追加

• swift
• objective-c

1
2
3
func setSlideConstraint() {
  offset = 0
}

1
2
3
4
5
6
7
8
override var offset: CGFloat {
  get {
    return super.offset
  }
  set {
    super.offset = newValue + adjustedOffset
  }
}

1
2
3
func setSlideConstraint() {
    slideConstraint?.constant = bottomSpacing
}

1
2
3
private var bottomSpacing: CGFloat {
    return AppboyManager.shared.activeApplicationViewController.topMostViewController().view.safeAreaInsets.bottom
}

1
2
3
- (void)setOffset {
  self.offset = 0;
}

1
2
3
- (void)self.setSlideConstraint:(NSLayoutConstraint *)slideConstraint {
  slideConstraint.constant = bottomSpacing;
}

1
2
3
- (CGFloat)bottomSpacing {
  return [AppboyManager shared].activeApplicationViewController.topMostViewController.view.safeAreaInsets.bottom;
}

• swift
• objective-c

1
2
3
4
override func beforeMoveInAppMessageViewOnScreen() {
  super.beforeMoveInAppMessageViewOnScreen()
  setOffset()
}

1
2
3
override func beforeMoveInAppMessageViewOnScreen() {
  setSlideConstraint()
}

1
2
3
4
- (void)beforeMoveInAppMessageViewOnScreen {
  [super beforeMoveInAppMessageViewOnScreen];
  [self setOffset];
}

1
2
3
- (void)beforeMoveInAppMessageViewOnScreen {
  [self setSlideConstraint:self.slideConstraint];
}

デバイスの向きの制約を調整
サブクラスはレイアウト変更中に制約の同期を維持する責任を負うため、viewWillTransition() 内のそれぞれの値を調整します。

カスタムモーダルアプリ内メッセージ

ABKInAppMessageModalViewController をサブクラス化して、貴重なユーザー属性を収集する魅力的な方法を提供する UIPickerView を活用できます。カスタムモーダルアプリ内メッセージを使用すると、コネクテッドコンテンツまたは使用可能なリストを使用して、アイテムの動的なリストから属性を表示およびキャプチャできます。

サブクラス化されたアプリ内メッセージに独自のビューを挿入できます。この例では、UIPickerView を使用して ABKModalInAppMessageViewController の機能を拡張する方法を示しています。

開始するには、ModalPickerViewController にアクセスしてください。

ダッシュボード構成

ダッシュボードでモーダルアプリ内メッセージを設定するには、コンマ区切り文字列として書式設定された項目のリストを指定する必要があります。この例では、コネクテッドコンテンツを使用してチーム名の JSON リストを取得し、それに応じてフォーマットします。

キーと値のペアに attribute_key を入力します。このキーは、ユーザーが選択した値とともに、カスタム属性としてユーザープロファイルに保存されます。カスタムビューロジックは、Braze に送信されたユーザー属性を処理する必要があります。

ABKInAppMessage オブジェクト内の extras ディクショナリを使用して、表示すべき正しいビューを示す view_type キー (存在する場合) をクエリできます。アプリ内メッセージはメッセージごとに設定されるため、カスタムとデフォルトのモーダルビューが調和して機能することに注意してください。

• swift
• objective-c

1
2
3
4
5
6
7
8
func modalViewController(inAppMessage: ABKInAppMessage) -> ABKInAppMessageModalViewController {
  switch inAppMessage.extras?[InAppMessageKey.viewType.rawValue] as? String {
  case InAppMessageViewType.picker.rawValue:
    return ModalPickerViewController(inAppMessage: inAppMessage)
  default:
    return ABKInAppMessageModalViewController(inAppMessage: inAppMessage)
  }
}

• swift
• objective-c

• swift
• objective-c

• swift
• objective-c

カスタムフルアプリ内メッセージ

カスタムのフルアプリ内メッセージを使用して、インタラクティブで使いやすいプロンプトを作成し、貴重な顧客データを収集します。右の例は、通知設定を備えたインタラクティブなプッシュプライマーとして再構成されたカスタムフルアプリ内メッセージの実装を示しています。

開始するには、FullListViewController にアクセスしてください。

ダッシュボード構成

ダッシュボードでカスタムアプリ内メッセージ全体を設定するには、コンマ区切り文字列形式のタグのリストを指定する必要があります。

キーと値のペアに、attribute_key を入力します。このキーは、ユーザーが選択した値とともに、カスタム属性としてユーザープロファイルに保存されます。カスタムビューロジックは、Braze に送信されたユーザー属性を処理する必要があります。

アプリ内メッセージタッチのインターセプト

カスタムフルアプリ内メッセージボタンを正しく機能させるには、アプリ内メッセージのタッチをインターセプトすることが重要です。デフォルトでは、ABKInAppMessageImmersive はメッセージにタップジェスチャ認識機能を追加するので、ユーザーはボタンなしでメッセージを閉じることができます。UISwitch またはボタンを UITableViewCell ビュー階層に追加すると、タッチはカスタムビューによって処理されるようになります。iOS 6 以降、ジェスチャー認識機能を使用する場合はボタンやその他のコントロールが優先され、カスタムのフルアプリ内メッセージが正常に機能するようになりました。