Skip to content

BrazeロゴBraze SDKを統合する

Braze SDKの統合方法を学習する。各SDKは、独自のGitHub公開リポジトリでホストされており、Brazeの機能をテストしたり、独自のアプリケーションと一緒に実装したりするために使用できる、完全にビルド可能なサンプルアプリが含まれている。詳しくは、参照資料、リポジトリ、サンプルアプリを参照してください。SDK に関する一般的な情報については、[はじめに] を参照してください。統合の概要](/docs/ja/developer_guide/getting_started/integration_overview/)。

Web Braze SDKについて

Web Braze SDKを使えば、分析データを収集し、ウェブユーザー向けにリッチなアプリ内メッセージ、プッシュ通知、コンテンツカードメッセージを表示できる。詳細については、Braze JavaScriptリファレンスドキュメントを参照せよ。

Web SDK を連携

Web Braze SDKは次の方法で統合できる。追加のオプションについては、他の統合方法を参照せよ。

  • コードベースの統合：お好みのパッケージマネージャーかBraze CDNを使って、Web Braze SDKをコードベースに直接組み込む。これにより、SDKを読み込む方法と設定方法を完全にコントロールできる。
  • Google Tag Manager：サイトのコードを変更せずにWeb Braze SDKを統合できるノーコードソリューションだ。詳細については、Braze SDK を使用した Google Tag Manager を参照のこと。

ステップ 1: Brazeライブラリをインストールする

Brazeライブラリは、以下のいずれかの方法でインストールできます。ただし、Web サイトがコンテンツセキュリティポリシーを使用しているContent-Security-Policy場合は、続行する前にそのポリシーを確認すること。

あなたのサイトがNPMまたはYarnパッケージマネージャを使用している場合、依存関係としてBraze NPMパッケージを追加することができます。

v3.0.0 からタイプスクリプトの定義が含まれるようになりました。2.x から 3.x へのアップグレードに関する注意事項については、changelog を参照してください。

1
2
3

npm install --save @braze/web-sdk
# or, using yarn:
# yarn add @braze/web-sdk

インストール後は、通常の方法でライブラリを import または require できます。

1
2
3

import * as braze from "@braze/web-sdk";
// or, using `require`
const braze = require("@braze/web-sdk");

Braze Web SDKをHTMLに直接追加するには、当社のCDNホストスクリプトを参照し、ライブラリを非同期で読み込みます。

ステップ2:SDK の初期化

Braze Web SDKをWeb サイトに追加した後、Brazeダッシュボードの「設定」＞「アプリ設定」にあるAPI キーとSDKエンドポイントURLでライブラリーを初期化する。のオプションの完全な一覧とbraze.initialize()、その他のJavaScriptメソッドについては、Braze JavaScriptドキュメントを参照せよ。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

// initialize the SDK
braze.initialize('YOUR-API-KEY-HERE', {
    baseUrl: "YOUR-SDK-ENDPOINT-HERE",
    enableLogging: false, // set to `true` for debugging
    allowUserSuppliedJavascript: false, // set to `true` to support custom HTML messages
});

// Enable automatic display of in-app messages
// Required if you want in-app messages to display automatically when triggered
braze.automaticallyShowInAppMessages();

// if you use Content Cards
braze.subscribeToContentCardsUpdates(function(cards){
    // cards have been updated
});

// optionally set the current user's external ID before starting a new session
// you can also call `changeUser` later in the session after the user logs in
if (isLoggedIn){
    braze.changeUser(userIdentifier);
}

// `openSession` should be called last - after `changeUser` and `automaticallyShowInAppMessages`
braze.openSession();

匿名ユーザーにおけるセッション消失のトラブルシューティング

「セッションが欠落している」という現象が発生している場合、またはWeb上で匿名のままのユーザーのセッションをトラッキングできない場合は、初期化中に統合braze.openSession()が呼び出されていることを確認せよ。

  • シナリオ:匿名ユーザーはBraze IDを返すが、セッションデータは空白か欠落している。
  • 原因：実装は呼び出さないbraze.openSession()。
  • 決議：初期化後は必ずbraze.openSession()呼び出すこと（external IDを設定した場合はbraze.changeUser()その後も）。

詳細については、ステップ2を参照せよ。SDKを初期化する。

前提条件

この連携方法を使用する前に、Google Tag Managerのアカウントとコンテナを作成する必要がある。

ステップ 1: タグテンプレートギャラリーを開け

Google Tag Managerで、ワークスペースを選択し、次に「テンプレート」を選ぶ。タグテンプレート ペインで、検索ギャラリーを選択する。

Google Tag Managerのサンプルワークスペース用テンプレートページ。

ステップ 2:初期化タグのテンプレートを追加する

テンプレートギャラリーでを検索し、次にBraze **braze-incInitialization Tag**を選択する。

様々な「Braze-inc」テンプレートを表示するテンプレートギャラリー。

ワークスペースに追加＞追加を選択する。

Google Tag Managerの「Braze 初期化タグ」ページ。

ステップ 3:タグを設定する

テンプレートセクションから、新しく追加したテンプレートを選択する。

Google Tag Managerの「テンプレート」ページに、Braze 初期化タグのテンプレートが表示されている。

鉛筆アイコンを選択すると、タグ設定のドロップダウンが開く。

鉛筆アイコンが表示されたタグ設定タイル。

必要な最低限の情報を入力せよ：

追加の初期化設定を行うには、Braze 初期化オプションを選択し、必要な設定を選択する。

「タグ設定」の下にあるBraze初期化オプションの一覧だ。

ステップ 4: 初期化オプションの選択

Brazeの初期化タグは、以下のオプションを公開する。これらのほとんどはWeb SDKに直接対応している。また一部は、タグが初期化時にInitializationOptions呼び出すWeb SDKのメソッドに対応している。統合のニーズに合うオプションを選択せよ：

GTMオプション Web SDKの設定またはメソッド 説明
アプリ内メッセージでHTMLを許可する allowUserSuppliedJavascript アプリ内メッセージ、バナー、およびユーザーが提供するJavaScriptクリックアクションでHTMLをイネーブルメントする。カスタムHTMLを使用するアプリ内メッセージやバナーのHTMLに必須である。HTMLとJavaScriptの内容を信頼できる場合にのみイネーブルメントせよ。これはユーザーが提供したJavaScriptの実行を許可するからだ。
アプリバージョン番号 appVersion, appVersionNumber セグメンテーション用のアプリ版（例：1.2.3.4）。
自動的に新しいセッションを開く braze.openSession() このメソッドを呼び出すことで、SDKが初期化された後に新しいセッションを開く。
アプリ内メッセージを自動的に表示する braze.automaticallyShowInAppMessages() 初期化後にこのメソッドを呼び出すことで、サーバーから新しいアプリ内メッセージが届いた際に自動的に表示する。
自動プッシュトークンメンテナンスを無効にする disablePushTokenMaintenance 新しいセッションでは、SDKがプッシュトークンをBrazeバックエンドと同期するのを止める。
自動サービスワーカー登録を無効にする manageServiceWorkerExternally サービスワーカーを自分で登録してコントロールする場合に使用する。
Cookieを無効にする noCookies ユーザー／セッションデータにはCookieではなくlocalStorageを使用する。クロスサブドメイン認識を防ぐ。
Font Awesomeを無効化する doNotLoadFontAwesome SDKがCDNからFont Awesomeを読み込むのを防ぐ。サイトに独自のFont Awesomeがある場合に使用する。
SDK認証を有効にする enableSdkAuthentication SDK認証をイネーブルメントする。
Web SDKのログ記録を有効にする enableLogging デバッグ用のコンソールログのイネーブルメント。本番環境では削除せよ。
トリガーメッセージ間の最小間隔 minimumIntervalBetweenTriggerActionsInSeconds トリガーアクション間の最小秒数（デフォルト：30）。
カードを新しいタブで開く openCardsInNewTab デフォルトのフィードUIを使用している場合、コンテンツカードのリンクは新しいタブで開封する。
サービスワーカーの位置 serviceWorkerLocation サービスワーカーファイルのカスタムパス（デフォルト：/service-worker.js）。
セッションタイムアウト（秒） sessionTimeoutInSeconds セッションタイムアウト（秒単位）（デフォルト値：1800年。

GTMテンプレートで公開されていないオプション（例えばcontentSecurityNonce、localizationやなどdevicePropertyAllowlist）については、代わりに実行時初期化を使用する。

ステップ 5: すべてのページでトリガーされるように設定する

初期化タグはサイトの全ページで実行すべきだ。これにより、Braze SDKメソッドを使用し、Web プッシュの分析を記録できる。

ステップ 6: 統合を確認せよ

以下のいずれかの方法で統合を確認できる：

  • オプション 1:Google Tag Manager のデバッグツールを使えば、設定したページやイベントで Braze の初期化タグが正しくトリガーされているか確認できる。
  • オプション 2:ウェブページからBrazeへのネットワークリクエストがないか確認せよ。さらに、グローバルwindow.brazeライブラリーを定義する必要がある。

ボットトラフィックのフィルター

MAUにはボットユーザーの割合が含まれる場合があり、それによって月間アクティブユーザー数が水増しされる。Braze Web SDKには、検索エンジンのボットやソーシャルメディアのプレビューボットなど、一般的なウェブクローラーの検出機能が組み込まれている。しかし、SDKの更新だけでは常に新しいボットをすべて検出できるわけではないため、ボットを検出するための堅牢なソリューションを積極的に導入することが特に重要だ。

SDK側のボット検出の限界

Web SDKには、既知のクローラーを除外する基本的なユーザーエージェントベースのボット検出機能が組み込まれている。しかし、この方法には限界がある：

  • 新しいボットが次々と現れる：AI企業やその他の関係者は、検出を避けるために偽装する可能性のある新しいボットを定期的に作成している。
  • ユーザーエージェント偽装：高度なボットは、正当なブラウザのユーザーエージェントを模倣できる。
  • カスタムボット：技術的知識のないユーザーでも、大規模言語モデル（LLM）を使って簡単にボットを作成できるようになった。これによりボットの挙動は予測不能になる。

ボットフィルターの実装

最も堅牢なソリューションは、Braze SDKを初期化する前に独自のボットフィルターロジックを実装することだ。一般的な手法には以下が含まれる：

ユーザーの操作が必要だ

ユーザーがCookie同意バナーの承諾、スクロール、クリックなどの意味のある操作を行うまで、SDKの初期化を遅らせることを検討せよ。この手法は実装が容易な場合が多く、ボットトラフィックのフィルターに非常に効果的である。

カスタムボット検出

特定のボットトラフィックパターンに基づいてカスタム検出を実装する。例えば：

  • トラフィックで識別したパターンについて、ユーザーエージェント文字列を分析する
  • ヘッドレスブラウザの指標を確認する
  • サードパーティのボット検出サービスを利用する
  • サイト固有の行動シグナルを監視する

条件付き初期化の例：

1
2
3
4
5
6
7
8

// Only initialize Braze if your custom bot detection determines this is not a bot
if (!isLikelyBot()) {
  braze.initialize('YOUR-API-KEY-HERE', {
    baseUrl: "YOUR-SDK-ENDPOINT-HERE"
  });
  braze.automaticallyShowInAppMessages();
  braze.openSession();
}

ベストプラクティス

  • MAUデータとWebトラフィックのパターンを定期的に分析し、新たなボットの行動を識別する。
  • ボットフィルターが正当なユーザーのトラッキングを妨げないよう、徹底的にテストせよ。
  • 環境内で観察されるボットのトラフィックパターンに基づいて、フィルターロジックを更新せよ。

オプション設定

ロギング

ロギングをすばやく有効にするには、?brazeLogging=true をパラメーターとして Web サイト URL に追加します。あるいは、基本ロギングまたはカスタム・ロギングを有効にすることもできます。すべてのプラットフォームにわたる一元的な概要については、詳細ログを参照せよ。

基本的なロギング

SDKが初期化される前に、基本的なデバッグメッセージをJavaScriptコンソールに記録するにはenableLogginguseを使用する。

1

enableLogging: true

メソッドは次のようになるはずです。

1
2
3
4
5

braze.initialize('API-KEY', {
    baseUrl: 'API-ENDPOINT',
    enableLogging: true
});
braze.openSession();

SDKが初期化された後、基本的なデバッグメッセージをJavaScriptコンソールに記録するにはbraze.toggleLogging()useを使用する。メソッドは次のようになるはずです。

1
2
3
4
5
6

braze.initialize('API-KEY', {
    baseUrl: 'API-ENDPOINT',
});
braze.openSession();
...
braze.toggleLogging();

カスタムロギング

カスタムデバッグメッセージをJavaScriptコンソールに記録するには、`setLoggerlog`を使用する。基本ログとは異なり、これらのログはユーザーには見えません。

1

setLogger(loggerFunction: (message: STRING) => void): void

STRING を1つの文字列パラメーターとしてメッセージに置き換えます。メソッドは次のようになるはずです。

1
2
3
4
5

braze.initialize('API-KEY');
braze.setLogger(function(message) {
    console.log("Braze Custom Logger: " + message);
});
braze.openSession();

SDKをアップグレードする

例えば、当社のコンテンツ配信ネットワークからBraze Web SDKを参照する場合（デフォルトの統合手順で推奨されている通り）https://js.appboycdn.com/web-sdk/a.a/braze.min.js、ユーザーはサイトを更新する際にマイナー更新（バグ修正や下位互換性のある機能、上記の例でa.a.zバージョンa.a.aからまでの更新）を自動的に受け取る。

ただし、主要な変更をリリースする際には、互換性を損なう変更が統合に影響しないよう、Braze Web SDKを手動でアップグレードする必要がある。さらに、当社のSDKをダウンロードして自身でホストする場合、バージョン更新は自動的には行われない。最新の機能やバグ修正を受けるには、手動でアップグレードする必要がある。

RSS Reader または任意のサービスを使用して、リリースフィードに従って最新のリリースを取得できます。また、Web SDK のリリース履歴の詳細については、変更ログを参照してください。Braze Web SDKをアップグレードします：

  • バージョン番号 https://js.appboycdn.com/web-sdk/[OLD VERSION NUMBER]/braze.min.js を変更するか、パッケージマネージャーの依存関係で、Braze ライブラリのバージョンを更新します。
  • Web プッシュが統合されている場合は、サイトのサービスワーカーファイルを更新します。デフォルトでは、このファイルはサイトのルートディレクトリの/service-worker.js にありますが、統合によっては場所がカスタマイズされている場合があります。サービスワーカーファイルをホストするには、ルートディレクトリにアクセスしなければなりません。

これらの2つのファイルは、正常に機能させるために互いに連携して更新しなければならない。

その他の統合方法

アクセラレイテッド・モバイル・ページズ（AMP）

See more

ステップ 1: AMP Web プッシュスクリプトを含める

次の非同期スクリプトタグをヘッドに追加します：

1

<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>

ステップ 2:サブスクリプションウィジェットを追加する

HTMLの本文にウィジェットを追加し、ユーザーがプッシュ通知の登録と配信停止を行えるようにする。

1
2
3
4
5
6
7
8
9

<!-- A subscription widget -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="80">
  <button on="tap:amp-web-push.subscribe">Subscribe to Notifications</button>
</amp-web-push-widget>

<!-- An unsubscription widget -->
<amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="80">
  <button on="tap:amp-web-push.unsubscribe">Unsubscribe from Notifications</button>
</amp-web-push-widget>

ステップ 3:追加helper-iframeする permission-dialog

AMP Web プッシュコンポーネントは、プッシュサブスクリプションを処理するためのポップアップを作成する。このイネーブルメントを行うには、プロジェクトに以下のヘルパーファイルを追加する必要がある：

ステップ 4: サービスワーカーファイルを作成する

Web サイトのルートディレクトリにファイルservice-worker.jsを作成し、以下のスニペットを追加する：

ステップ 5: AMP Web プッシュ HTML 要素を構成する

HTMLのbodyに次のamp-web-pushHTML要素を追加せよ。覚えておけ、とapiKeyをbaseUrlクエリパラメータとしてに追加する必要があるservice-worker-URL。

1
2
3
4
5
6
7

<amp-web-push
layout="nodisplay"
id="amp-web-push"
helper-iframe-url="FILE_PATH_TO_YOUR_HELPER_IFRAME"
permission-dialog-url="FILE_PATH_TO_YOUR_PERMISSION_DIALOG"
service-worker-url="FILE_PATH_TO_YOUR_SERVICE_WORKER?apiKey={YOUR_API_KEY}&baseUrl={YOUR_BASE_URL}"
>

非同期モジュール定義（AMD）

サポートを無効にする

もしあなたのサイトがRequireJSや他のAMDモジュールローダーを使用しているが、このリストにある他のオプションのいずれかでBraze Web SDKを読み込みたい場合、AMDサポートを含まないバージョンのライブラリーを読み込むことができる。このバージョンのライブラリーは、以下のCDNの場所からロードできます：

モジュールローダー

RequireJS または他の AMD モジュールローダーを使用する場合は、ライブラリのコピーをセルフホスティングし、他のリソースと同様に参照することをお勧めします。

1
2
3
4
5
6

require(['path/to/braze.min.js'], function(braze) {
  braze.initialize('YOUR-API-KEY-HERE', { baseUrl: 'YOUR-SDK-ENDPOINT' });
  // Required if you want in-app messages to display automatically
  braze.automaticallyShowInAppMessages();
  braze.openSession();
});

電子

Electron は公式には Web プッシュ通知をサポートしていません (参照： この GitHub issue)。Brazeがテストしていないオープンソースの回避策を試すこともできます。

Jestフレームワーク

Jestを使用している場合、SyntaxError: Unexpected token 'export' のようなエラーが表示されることがあります。これを修正するには、Braze SDK を無視するように package.json の設定を調整します。

1
2
3
4
5

"jest": {
  "transformIgnorePatterns": [
    "/node_modules/(?!@braze)"
  ]
}

SSRフレームワーク

サーバーサイドレンダリング（SSR）フレームワークを使用する場合、SDKはブラウザ環境での実行を想定しているため、エラーが発生するNext.js可能性がある。これらの問題は、SDKを動的にインポートすることで解決できます。

必要な SDK の部分を別のファイルにエクスポートし、そのファイルをコンポーネントに動的にインポートすることで、ツリーシェイクの利点を維持できます。

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

// MyComponent/braze-exports.js
// export the parts of the SDK you need here
export { initialize, openSession } from "@braze/web-sdk";

// MyComponent/MyComponent.js
// import the functions you need from the braze exports file
useEffect(() => {
    import("./braze-exports.js").then(({ initialize, openSession }) => {
        initialize("YOUR-API-KEY-HERE", {
            baseUrl: "YOUR-SDK-ENDPOINT",
            enableLogging: true,
        });
        openSession();
    });
}, []);

あるいは、アプリのバンドルにwebpackを使用している場合、そのマジックコメントを利用して、必要なSDKの部分だけを動的にインポートすることもできます。

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

// MyComponent.js
useEffect(() => {
    import(
        /* webpackExports: ["initialize", "openSession"] */
        "@braze/web-sdk"
    ).then(({ initialize, openSession }) => {
        initialize("YOUR-API-KEY-HERE", {
            baseUrl: "YOUR-SDK-ENDPOINT",
            enableLogging: true,
        });
        openSession();
    });
}, []);

Tealium iQ

Tealium iQは、基本的なターンキー Braze 統合を提供します。統合を構成するには、Tealium Tag Management インターフェイスで Braze を検索し、ダッシュボードから Web SDK API キーを指定します。

詳細やTealiumの設定に関する深いサポートが必要な場合は、統合ドキュメントを参照するか、Tealiumのアカウントマネージャーに連絡する。

ヴィテ

Viteを使用していて、循環依存関係やUncaught TypeError: Class extends value undefined is not a constructor or null に関する警告が表示される場合は、Braze SDKを依存関係の発見から除外する必要があるかもしれません：

1
2
3

optimizeDeps: {
    exclude: ['@braze/web-sdk']
},

その他のタグ・マネージャー

Brazeは、カスタムHTMLタグの中で当社の統合指示に従うことにより、他のタグ管理ソリューションと互換性を持つこともできます。これらのソリューションの評価について支援が必要な場合は、Brazeの担当者にお問い合わせください。

Android SDKの統合

ステップ 1: Gradleのビルド設定を更新せよ

プロジェクトのリポジトリ設定（例:settings.gradle , settings.gradle.kts, または最上位の build.gradle）で、リポジトリ一覧に をmavenCentral()追加する。この構文はGroovyとKotlinのDSLの両方で同じである。

1
2
3

repositories {
  mavenCentral()
}

次に、依存関係にBrazeを追加する。以下の例では、を現在のAndroid BrazeSDK_VERSION SDKのバージョンに置き換えること。全バージョンのリストについては、変更履歴を参照せよ。

Braze UI コンポーネントを使用する予定がないなら、依存関係に以下を追加せよ。

1
2
3
4

dependencies {
    implementation 'com.braze:android-sdk-base:SDK_VERSION' // (Required) Adds dependencies for the base Braze SDK.
    implementation 'com.braze:android-sdk-location:SDK_VERSION' // (Optional) Adds dependencies for Braze location services.
}

1
2
3
4

dependencies {
    implementation("com.braze:android-sdk-base:SDK_VERSION") // (Required) Adds dependencies for the base Braze SDK.
    implementation("com.braze:android-sdk-location:SDK_VERSION") // (Optional) Adds dependencies for Braze location services.
}

君のgradle/libs.versions.tomlファイルには：

1
2
3
4
5
6

[versions]
braze = "SDK_VERSION"

[libraries]
braze-android-sdk-base = { group = "com.braze", name = "android-sdk-base", version.ref = "braze" }
braze-android-sdk-location = { group = "com.braze", name = "android-sdk-location", version.ref = "braze" }

次に、`.bashrc` またはbuild.gradle.kts.bash_profilebuild.gradle\ ファイルに、以下の依存関係を追加する。この構文はGroovyとKotlinのDSLの両方で同じである。

1
2
3
4

dependencies {
    implementation(libs.braze.android.sdk.base) // (Required) Adds dependencies for the base Braze SDK.
    implementation(libs.braze.android.sdk.location) // (Optional) Adds dependencies for Braze location services.
}

Braze UIコンポーネントを使用する予定なら、依存関係に以下を追加せよ。

1
2
3
4

dependencies {
    implementation 'com.braze:android-sdk-ui:SDK_VERSION' // (Required) Adds dependencies for the Braze SDK and Braze UI components.
    implementation 'com.braze:android-sdk-location:SDK_VERSION' // (Optional) Adds dependencies for Braze location services.
}

1
2
3
4

dependencies {
    implementation("com.braze:android-sdk-ui:SDK_VERSION") // (Required) Adds dependencies for the Braze SDK and Braze UI components.
    implementation("com.braze:android-sdk-location:SDK_VERSION") // (Optional) Adds dependencies for Braze location services.
}

君のgradle/libs.versions.tomlファイルには：

1
2
3
4
5
6

[versions]
braze = "SDK_VERSION"

[libraries]
braze-android-sdk-ui = { group = "com.braze", name = "android-sdk-ui", version.ref = "braze" }
braze-android-sdk-location = { group = "com.braze", name = "android-sdk-location", version.ref = "braze" }

次に、`.bashrc` またはbuild.gradle.kts.bash_profilebuild.gradle\ ファイルに、以下の依存関係を追加する。この構文はGroovyとKotlinのDSLの両方で同じである。

1
2
3
4

dependencies {
    implementation(libs.braze.android.sdk.ui) // (Required) Adds dependencies for the Braze SDK and Braze UI components.
    implementation(libs.braze.android.sdk.location) // (Optional) Adds dependencies for Braze location services.
}

ステップ 2:設定する braze.xml

プロジェクトres/valuesのフォルダ内にファイルbraze.xmlを作成する。特定のデータクラスターを使用している場合、または既存のカスタムエンドポイントがある場合は、braze.xml ファイルでもエンドポイントを指定する必要があります。

ファイルの内容は、次のコードスニペットのようになります。Braze ダッシュボードの [設定の管理] ページにある識別子で YOUR_APP_IDENTIFIER_API_KEY を置き換えてください。dashboard.braze.comにログインして、クラスターアドレスを見つけてください。

1
2
3
4
5

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string translatable="false" name="com_braze_api_key">YOUR_APP_IDENTIFIER_API_KEY</string>
  <string translatable="false" name="com_braze_custom_endpoint">YOUR_CUSTOM_ENDPOINT_OR_CLUSTER</string>
</resources>

ステップ 3:権限を追加する AndroidManifest.xml

次に、以下の権限をあなたのに追加AndroidManifest.xmlする：

1
2

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

ステップ 4: 遅延初期化のイネーブルメント（任意）

遅延初期化を使用するには、最低限のBraze SDKバージョンが必要だ。

ステップ4.1：braze.xml を更新する

遅延初期化はデフォルトで無効になっている。イネーブルメントを行うには、次のいずれかの方法を使う：

プロジェクトのbraze.xmlファイルで、をにcom_braze_enable_delayed_initialization設定するtrue。

1

<bool name="com_braze_enable_delayed_initialization">true</bool>

実行時に遅延初期化のイネーブルメントを行うには、次の方法を使う。

1

Braze.enableDelayedInitialization(context);

1

Braze.enableDelayedInitialization(context)

ステップ4.2：プッシュ分析を設定する（任意）

遅延初期化のイネーブルメントが有効な場合、プッシュ分析はデフォルトでキューに格納される。ただし、代わりにプッシュ分析を明示的にキューに入れるか破棄するかを選択できる。

明示的にキューに入れる

明示的にキューにプッシュ分析を追加するには、次のいずれかのオプションを選択する：

ファイルbraze.xml内で、をcom_braze_delayed_initialization_analytics_behaviorに設定せよQUEUE：

1

<string name="com_braze_delayed_initialization_analytics_behavior">QUEUE</string>

メソッドBraze.enableDelayedInitialization()にQUEUE追加せよ：

1

Braze.enableDelayedInitialization(context, DelayedInitializationAnalyticsBehavior.QUEUE);

1

Braze.enableDelayedInitialization(context, DelayedInitializationAnalyticsBehavior.QUEUE)
落とす

プッシュ通知の分析を停止するには、次のいずれかの方法を選ぶ：

ファイルbraze.xml内で、をcom_braze_delayed_initialization_analytics_behaviorに設定せよDROP：

1

<string name="com_braze_delayed_initialization_analytics_behavior">DROP</string>

メソッドBraze.enableDelayedInitialization()にDROP追加する：

1

Braze.enableDelayedInitialization(context, DelayedInitializationAnalyticsBehavior.DROP);

1

Braze.enableDelayedInitialization(context, DelayedInitializationAnalyticsBehavior.DROP)

ステップ4.3：SDKを手動で初期化する

選択した遅延期間の後、SDKを手動で初期化するためにメソッドBraze.disableDelayedInitialization()を使用する。

1

Braze.disableDelayedInitialization(context);

1

Braze.disableDelayedInitialization(context)

ステップ 5: ユーザーセッションのトラッキングを有効にする

ユーザーセッショントラッキングをイネーブルすると、`openSession()closeSession()`、[`ensureSubscribedToInAppMessageEvents()`](https://braze-inc.github.io/braze-android-sdk/kdoc/braze-android-sdk/com.braze.ui.inappmessage/-braze-in-app-message-manager/ensure-subscribed-to-in-app-message-events.html)、``、およびInAppMessageManager``の登録呼び出しは自動的に処理される。

アクティビティのライフサイクルコールバックを登録するには、`ActivityApplicationクラスのonStart()メソッドonCreate()`に以下のコードを追加する。

1
2
3
4
5
6
7

public class MyApplication extends Application {
  @Override
  public void onCreate() {
    super.onCreate();
    registerActivityLifecycleCallbacks(new BrazeActivityLifecycleCallbackListener());
  }
}

1
2
3
4
5
6

class MyApplication : Application() {
  override fun onCreate() {
    super.onCreate()
    registerActivityLifecycleCallbacks(BrazeActivityLifecycleCallbackListener())
  }
}

利用可能なパラメータの一覧については、を参照せよBrazeActivityLifecycleCallbackListener。

セッショントラッキングをテストする

テスト中に問題が発生した場合は、詳細ログのイネーブルメントを行い、logcatを使用してアクティビティ内で欠落している`onStartopenSession()およびonStop(closeSession)`呼び出しを検出する。

  1. Brazeで、概要に移動し、アプリを選択する。次に「データを表示する期間」のドロップダウンから「今日」を選ぶ。 Brazeの「概要」ページで、「表示対象」フィールドが「本日」に設定されている状態。
  2. アプリを開いて、次にBrazeのダッシュボードを更新しろ。指標が1増加したことを確認せよ。
  3. アプリを操作し、Brazeに記録されたセッションが1つだけであることを確認する。
  4. アプリをバックグラウンドに少なくとも10秒間送ってから、フォアグラウンドに戻す。新しいセッションが記録されたことを確認せよ。

オプション設定

ランタイム構成

Brazeのオプションを設定braze.xmlファイルではなくコード内で設定するには、ランタイム構成を使用する。両方の場所に値が存在する場合、代わりに実行時の値が使用される。必要な設定をすべて実行時に指定したら、そのbraze.xmlファイルを削除できる。

次の例では、ビルダーオブジェクトが作成され、その後.に渡されるBraze.configure()。利用可能な実行時オプションの一部のみが表示されていることに注意せよ。完全なリストについてはKDocを参照せよ。

1
2
3
4
5
6
7
8

BrazeConfig brazeConfig = new BrazeConfig.Builder()
        .setApiKey("api-key-here")
        .setCustomEndpoint("YOUR_CUSTOM_ENDPOINT_OR_CLUSTER")
        .setSessionTimeout(60)
        .setHandlePushDeepLinksAutomatically(true)
        .setGreatNetworkDataFlushInterval(10)
        .build();
Braze.configure(this, brazeConfig);

1
2
3
4
5
6
7
8

val brazeConfig = BrazeConfig.Builder()
        .setApiKey("api-key-here")
        .setCustomEndpoint("YOUR_CUSTOM_ENDPOINT_OR_CLUSTER")
        .setSessionTimeout(60)
        .setHandlePushDeepLinksAutomatically(true)
        .setGreatNetworkDataFlushInterval(10)
        .build()
Braze.configure(this, brazeConfig)

Google 広告 ID

Google広告ID（GAID）は、Google Playサービスが提供する、広告向けの任意のユーザー固有の匿名で一意かつリセット可能なIDである。GAID によりユーザーは、自分の識別子をリセットし、Google Play アプリ内の興味・関心に基づく広告をオプトアウトできます。また、開発者は、アプリの収益化を継続するためのシンプルな標準システムを入手できます。

Google 広告 ID は Braze SDK によって自動的に収集されないため、Braze.setGoogleAdvertisingId() メソッドを使用して手動で設定する必要があります。

1
2
3
4
5
6
7
8
9
10
11

new Thread(new Runnable() {
  @Override
  public void run() {
    try {
      AdvertisingIdClient.Info idInfo = AdvertisingIdClient.getAdvertisingIdInfo(getApplicationContext());
      Braze.getInstance(getApplicationContext()).setGoogleAdvertisingId(idInfo.getId(), idInfo.isLimitAdTrackingEnabled());
    } catch (Exception e) {
      e.printStackTrace();
    }
  }
}).start();

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

suspend fun fetchAndSetAdvertisingId(
  context: Context,
  scope: CoroutineScope = GlobalScope
) {
  scope.launch(Dispatchers.IO) {
    try {
      val idInfo = AdvertisingIdClient.getAdvertisingIdInfo(context)
      Braze.getInstance(context).setGoogleAdvertisingId(
        idInfo.id,
        idInfo.isLimitAdTrackingEnabled
      )
    } catch (e: Exception) {
      e.printStackTrace()
    }
  }
}

位置情報の追跡

Brazeの位置情報収集のイネーブルメントを行うには、設定braze.xmlファイルで``true\を``にcom_braze_enable_location_collection設定する。

1

<bool name="com_braze_enable_location_collection">true</bool>

ロギング

デフォルトでは、Braze Android SDK のログレベルは INFO に設定されています。これらのログを抑制したり、別のログレベルを設定 (VERBOSE、DEBUG、または WARN など) したりすることができます。

ログのイネーブルメント

アプリの問題をトラブルシューティングしたり、Brazeサポートの対応時間を短縮したりするには、SDKの詳細ログをイネーブルメントできる。Brazeサポートに冗長ログを送信する場合は、アプリケーションを起動したらすぐにログを開始し、問題が発生してからずっと後にログを終了するようにする。集中管理された概要については、詳細ログ記録を参照せよ。ログ出力の解釈方法の学習については、「詳細ログの読み方」を参照せよ。

詳細なログは開発環境のみを対象としているため、アプリをリリースする前に無効にする必要があります。

アプリで直接ログを有効にするには、他のメソッドの前に、以下をアプリケーションの onCreate() メソッドに追加します。

1

BrazeLogger.setLogLevel(Log.MIN_LOG_LEVEL);

1

BrazeLogger.logLevel = Log.MIN_LOG_LEVEL

MIN_LOG_LEVEL を、最小ログレベルとして設定するログレベルの定数に置き換えます。設定したMIN_LOG_LEVEL のレベル>= のログはすべて、Androidのデフォルトの Logメソッドに転送される。設定した MIN_LOG_LEVEL 未満の (<) すべてのログは破棄されます。

たとえば、以下のコードはログレベル2、3、4、5、6、7を Log メソッドに転送します。

1

BrazeLogger.setLogLevel(Log.VERBOSE);

1

BrazeLogger.logLevel = Log.VERBOSE

braze.xml でログを有効にするには、ファイルに以下を追加する：

1

<integer name="com_braze_logger_initial_log_level">MIN_LOG_LEVEL</integer>

MIN_LOG_LEVEL を、最小ログレベルとして設定するログレベルの値に置き換えます。設定したMIN_LOG_LEVEL のレベル>= のログはすべて、Androidのデフォルトの Logメソッドに転送される。設定した MIN_LOG_LEVEL 未満の (<) すべてのログは破棄されます。

たとえば、以下のコードはログレベル2、3、4、5、6、7を Log メソッドに転送します。

1

<integer name="com_braze_logger_initial_log_level">2</integer>

冗長ログを検証する

ログが VERBOSE に設定されていることを確認するには、V/Braze がログのどこかで発生するかどうかを確認します。もしそうなら、冗長ログは正常に有効になっている。以下に例を示します。

1

2077-11-19 16:22:49.591 ? V/Braze v9.0.01 .bo.app.d3: Request started

ログの抑制

Braze Android SDKのログを全て抑制するには、アプリケーションの`setLogLevelonCreate()()メソッドで、他のメソッド_よりも先に_BrazeLogger.SUPPRESSログレベルを\0`に設定する。

1

BrazeLogger.setLogLevel(BrazeLogger.SUPPRESS);

1

BrazeLogger.setLogLevel(BrazeLogger.SUPPRESS)

複数の API キー

複数の API キーの最も一般的なユースケースは、デバッグおよびリリースビルドバリアントの API キーを分離することです。

ビルド内の複数の API キーを簡単に切り替えられるように、関連するビルドバリアントごとに個別の braze.xml ファイルを作成することをお勧めします。ビルドバリアントは、ビルドタイプと製品フレーバーの組み合わせです。デフォルトでは、新しいAndroidプロジェクトは とrelease のdebugビルドタイプで構成され、プロダクトフレーバーは設定されていない。

関連する各ビルドバリアントについて、ディレクトリsrc/<build variant name>/res/values/内にbraze.xml新しいを作成する。ビルドバリアントがコンパイルされると、新しい API キーが使用されます。

1
2
3
4

<?xml version="1.0" encoding="utf-8"?>
<resources>
<string name="com_braze_api_key">REPLACE_WITH_YOUR_BUILD_VARIANT_API_KEY</string>
</resources>

アプリ内メッセージ「トークバック」

Androidアクセシビリティガイドラインに準拠し、Braze Android SDKはデフォルトでAndroidのTalkbackを提供する。アプリ内のメッセージの内容のみを読み上げさせ、アプリタイトルバーやナビゲーションなどの他の画面要素を含めないようにするには、TalkBackの排他モードをイネーブルメントできる。

アプリ内メッセージの排他モードをイネーブルメントするには：

1

<bool name="com_braze_device_in_app_message_accessibility_exclusive_mode_enabled">true</bool>

1
2
3

val brazeConfigBuilder = BrazeConfig.Builder()
brazeConfigBuilder.setIsInAppMessageAccessibilityExclusiveModeEnabled(true)
Braze.configure(this, brazeConfigBuilder.build())

1
2
3

BrazeConfig.Builder brazeConfigBuilder = new BrazeConfig.Builder()
brazeConfigBuilder.setIsInAppMessageAccessibilityExclusiveModeEnabled(true);
Braze.configure(this, brazeConfigBuilder.build());

R8とProGuard

コード圧縮設定は、Braze 統合に自動的に含まれます。

Braze コードを難読化するクライアントアプリでは、Braze がスタックトレースを解釈するためのリリースマッピングファイルを保存する必要があります。すべての Braze コードを引き続き保持する場合は、ProGuard ファイルに以下を追加します。

1
2

-keep class bo.app.** { *; }
-keep class com.braze.** { *; }

Swift SDKの統合

Braze Swift SDKは、Swift Package Manager（SPM）、CocoaPods、または手動での統合方法を使って統合しカスタマイズできる。各種SDKシンボルに関する詳細情報は、Braze SWIFTリファレンスドキュメントを参照せよ。

前提条件

始める前に、最新のBraze SWIFT SDKバージョンが環境をサポートしていることを確認せよ。

ステップ 1: Braze SWIFT SDKをインストールする

Braze Swift SDKのインストールには、Swift Package Manager（SwiftPM）またはCocoaPodsの使用を推奨する。あるいは、SDKを手動でインストールすることもできる。

ステップ1.1：SDK バージョンのインポート

プロジェクトを開き、プロジェクトの設定に移動します。[Swift パッケージ] タブを選択し、パッケージリストの下にある [追加] ボタンをクリックします。

iOS Swift SDK リポジトリーのURL https://github.com/braze-inc/braze-swift-sdk をテキストフィールドに入力します。依存関係ルールセクションで、SDKバージョンを選択します。最後に、パッケージを追加をクリックします。

ステップ1.2：パッケージを選択せよ

Braze Swift SDK は、開発者がどの機能をプロジェクトにインポートするかをより詳細に制御できるように、機能をスタンドアロンライブラリーに分離しています。

パッケージ 詳細
BrazeKit 分析とプッシュ通知をサポートする主な SDK ライブラリー
BrazeLocation 位置情報ライブラリーは、位置情報分析とジオフェンス監視をサポートします。
BrazeUI アプリ内メッセージ、コンテンツカード、バナー用のBraze提供ユーザーインターフェイスライブラリー。デフォルトのUIコンポーネントを使用する場合は、このライブラリーをインポートせよ。
拡張ライブラリーについて
パッケージ 詳細
BrazeNotificationService リッチプッシュ通知をサポートする通知サービス拡張ライブラリー。
BrazePushStory プッシュストーリーをサポートする通知コンテンツ拡張ライブラリーを提供します。

ご自身のニーズに最も適したパッケージを選択し、パッケージを追加をクリックしてください。必ず最低でもBrazeKitを選択してください。

ステップ1.1：CocoaPods をインストールする

完全な手順については、CocoaPodsの入門ガイドを参照せよ。そうでなければ、以下のコマンドを実行すればすぐに始められる：

1

$ sudo gem install cocoapods

行き詰まったら、CocoaPodsのトラブルシューティングガイドを確認しろ。

ステップ1.2：ポッドファイルの構築

次に、Xcodeプロジェクトディレクトリ内に「Podfile.」という名前のファイルを作成する。

次の行を Podfile に追加します。

1
2
3

target 'YourAppTarget' do
  pod 'BrazeKit'
end

BrazeKit にはメイン SDK ライブラリーが含まれており、分析とプッシュ通知のサポートが提供されています。

ポッドの更新がマイナー バージョンの更新よりも小さいものを自動的に取得するように、Braze をバージョン管理することをお勧めします。これは pod 'BrazeKit' ~> Major.Minor.Build のように見えます。大きな変更があっても、Braze SDK の最新バージョンを自動的に統合したい場合は、Podfile で pod 'BrazeKit' を使用できます。

追加ライブラリーについて

Braze Swift SDK は、開発者がどの機能をプロジェクトにインポートするかをより詳細に制御できるように、機能をスタンドアロンライブラリーに分離しています。BrazeKit に加えて、以下のライブラリーを Podfile に追加できます。

図書館 詳細
pod 'BrazeLocation' 位置情報ライブラリーは、位置情報分析とジオフェンス監視をサポートします。
pod 'BrazeUI' アプリ内メッセージ、コンテンツカード、バナー用のBraze提供ユーザーインターフェイスライブラリー。デフォルトのUIコンポーネントを使用する場合は、このライブラリーをインポートせよ。
拡張ライブラリ

BrazeNotificationService と BrazePushStory は、追加機能を提供するエクステンションモジュールであり、メインアプリケーションターゲットに直接追加すべきではありません。その代わりに、これらのモジュールごとに個別の拡張ターゲットを作成し、対応するターゲットにBrazeモジュールをインポートする必要がある。

図書館 詳細
pod 'BrazeNotificationService' リッチプッシュ通知をサポートする通知サービス拡張ライブラリー。
pod 'BrazePushStory' プッシュストーリーをサポートする通知コンテンツ拡張ライブラリーを提供します。

ステップ1.3：SDK をインストール

Braze SDK CocoaPod をインストールするには、ターミナル内で Xcode アプリプロジェクトのディレクトリに移動し、次のコマンドを実行します。

1

pod install

この時点で、CocoaPods によって作成された新しい Xcode プロジェクトワークスペースを開くことができるはずです。Xcode プロジェクトの代わりに、必ずこの Xcode ワークスペースを使用してください。

Brazeのサンプルフォルダが展開され、新しい「BrazeExample.workspace.」が表示された。

CocoaPodsを使ってSDKを更新する

CocoaPod を更新するには、プロジェクトディレクトリ内で以下のコマンドを実行するだけです。

1

pod update

ステップ1.1：Braze SDKをダウンロード

GitHubのBraze SDKリリースページに移動し、braze-swift-sdk-prebuilt.zipをダウンロードします。

GitHub上のBraze SDKリリースページ。

ステップ1.2：フレームワークを選択してください

Braze SWIFT SDK には、さまざまなスタンドアロンの XCFramework が含まれており、すべてを統合する必要はなく、必要な機能を自由に統合できます。次の表を参照して、XCFrameworksを選択してください:

パッケージ 必要か 説明
BrazeKit はい メインSDKライブラリーは、分析とプッシュ通知をサポートします。
BrazeLocation いいえ 位置情報ライブラリーは、位置情報分析とジオフェンス監視をサポートします。
BrazeUI いいえ アプリ内メッセージ、コンテンツカード、バナー用のBraze提供ユーザーインターフェイスライブラリー。デフォルトのUIコンポーネントを使用する場合は、このライブラリーをインポートせよ。
BrazeNotificationService いいえ リッチプッシュ通知をサポートする通知サービス拡張ライブラリー。このライブラリーを直接メインアプリケーションターゲットに追加しないでください。代わりにこのBrazeNotificationServiceライブラリーを別々に追加してください。
BrazePushStory いいえ 通知コンテンツ拡張ライブラリーは、プッシュストーリーをサポートします。このライブラリーを直接メインアプリケーションターゲットに追加しないでください。代わりにこのBrazePushStoryライブラリーを別々に追加してください。
BrazeKitCompat いいえ Appboy-iOS-SDK バージョン 4.X.X で使用可能だったすべての Appboy および ABK* クラスとメソッドを含む互換性ライブラリ。使用の詳細については、移行ガイドの最小限の移行シナリオを参照してください。
BrazeUICompat いいえ Appboy-iOS-SDK バージョン4.X.Xの AppboyUIライブラリで使用可能だったすべてのABK* クラスとメソッドを含む互換性ライブラリ。使用の詳細については、移行ガイドの最小限の移行シナリオを参照してください。
SDWebImage いいえ 最小限の移行シナリオで BrazeUICompat によってのみ使用される依存関係。

静的 XCFrameworks または動的 XCFrameworks のどちらを使用するかを決定してから、ファイルを準備します。

  1. XCFrameworks 用の一時ディレクトリーを作成します。
  2. braze-swift-sdk-prebuilt で、dynamic ディレクトリを開き、BrazeKit.xcframework を自分のディレクトリに移動します。あなたのディレクトリは次のようになります: 
    1
2

     temp_dir
 └── BrazeKit.xcframework
  3. 選択した各 XCFramework を一時ディレクトリに移動します。あなたのディレクトリは次のようになります: 
    1
2
3
4
5

     temp_dir
 ├── BrazeKit.xcframework
 ├── BrazeKitCompat.xcframework
 ├── BrazeLocation.xcframework
 └── SDWebImage.xcframework

ステップ1.4:フレームワークを統合する

次に、以前に準備した動的な XCFrameworks または静的な XCFrameworks を統合します。

Xcodeプロジェクトでビルドターゲットを選択し、次に一般を選択します。フレームワーク、ライブラリ、および埋め込みコンテンツの下に、以前に準備したファイルをドラッグ＆ドロップします。

各Brazeライブラリーが「Embed&Sign」に設定されたXcodeプロジェクトの例。

Objective-Cプロジェクトの一般的なエラー

XcodeプロジェクトにOBJECTIVE-Cファイルのみが含まれている場合、プロジェクトのビルドを試みると「シンボルが見つかりません」というエラーが発生することがあります。これらのエラーを修正するには、プロジェクトを開封し、ファイルツリーに空のSWIFTファイルを追加します。これにより、ビルドツールチェーンがSWIFTランタイムを埋め込み、ビルド時に適切なフレームワークにリンクするようになります。

1

FILE_NAME.swift

任意のスペースのない文字列でFILE_NAMEを置き換えます。ファイルは次のようになります。

1

empty_swift_file.swift

ステップ 2:遅延初期化を設定する（任意）

Braze SWIFT SDKの初期化を遅らせる選択ができる。これは、アプリが設定を読み込む必要がある場合や、SDKを開始する前にユーザーの同意を待つ必要がある場合に有用だ。遅延初期化により、SDK初期化前に受信したBrazeプッシュ通知とプッシュトークンは、SDKが初期化された時点でキューに入れられ処理される。

遅延初期化を使用するには、最低限のBraze SDKバージョンが必要だ。

ステップ 2.1: 初期化が遅れることに備えよ

アプリのライフサイクルにおいて、できるだけ早いBraze.prepareForDelayedInitialization()段階で呼び出すこと。理想的には、またはそれ以前にapplication(_:didFinishLaunchingWithOptions:)呼び出すこと。これにより、SDKが初期化される前に受信したプッシュ通知が確実に捕捉され、後で適切に処理される。

1
2
3
4
5
6
7
8

func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey: Any]?) -> Bool {
  // Prepare the SDK for delayed initialization
  Braze.prepareForDelayedInitialization()

  // ... Additional non-Braze setup code

  return true
}

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

@main
struct MyApp: App {
  @UIApplicationDelegateAdaptor var appDelegate: AppDelegate

  var body: some Scene {
    WindowGroup {
      ContentView()
    }
  }
}

class AppDelegate: NSObject, UIApplicationDelegate {
  func application(_ application: UIApplication, didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil) -> Bool {
    // Prepare the SDK for delayed initialization
    Braze.prepareForDelayedInitialization()

    // ... Additional non-Braze setup code

    return true
  }
}

1
2
3
4
5
6
7
8

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // Prepare the SDK for delayed initialization
  [Braze prepareForDelayedInitialization];
  
  // ... Additional non-Braze setup code

  return YES;
}

遅延初期化を使用する場合、プッシュ通知のオートメーションは暗黙的にイネーブルメントされる。パラメータpushAutomationを渡すことで、プッシュオートメーションの設定をカスタマイズできる。

ステップ 2.2:プッシュ分析の動作を設定する（任意）

遅延初期化のイネーブルメントが有効な場合、プッシュ分析はデフォルトでキューに格納される。ただし、代わりにプッシュ分析を明示的にキューに入れるか破棄するかを選択できる。

明示的にキューに入れる

明示的にキューにプッシュ分析を送信するには（デフォルト動作）、analyticsBehaviorパラメータに .queueを渡す。初期化前にキューに追加されたプッシュ分析イベントは、初期化時に処理されサーバーに送信される。

1

Braze.prepareForDelayedInitialization(analyticsBehavior: .queue)

1

[Braze prepareForDelayedInitializationWithAnalyticsBehavior:BRZPushEnqueueBehaviorQueue];
落とす

SDK初期化前に受信したプッシュ分析を破棄するには、analyticsBehaviorパラメータに.drop を渡す。このオプションでは、SDKが初期化されていない間に発生したプッシュ分析イベントはすべて無視される。

1

Braze.prepareForDelayedInitialization(analyticsBehavior: .drop)

1

[Braze prepareForDelayedInitializationWithAnalyticsBehavior:BRZPushEnqueueBehaviorDrop];

ステップ 2.3:プッシュ通知のオートメーションをカスタマイズする（任意）

パラメータpushAutomationを渡すことで、プッシュオートメーションの設定をカスタマイズできる。デフォルトでは、すべてのオートメーション機能がイネーブルされている。requestAuthorizationAtLaunchただし、以下を除く。

1
2
3
4
5
6
7
8

// Enable all push automation
featuresBraze.prepareForDelayedInitialization(pushAutomation: true)

// Or customize specific automation options
let automation = Braze.Configuration.Push.Automation()
automation.automaticSetup = true
automation.requestAuthorizationAtLaunch = false
Braze.prepareForDelayedInitialization(pushAutomation: automation)

1
2
3
4
5
6
7
8

// Enable all push automation features
[Braze prepareForDelayedInitializationWithPushAutomation:[[BRZConfigurationPushAutomation alloc] initWithAutomationEnabled:YES]];

// Or customize specific automation options
BRZConfigurationPushAutomation *automation = [[BRZConfigurationPushAutomation alloc] init];
automation.automaticSetup = YES;
automation.requestAuthorizationAtLaunch = NO;
[Braze prepareForDelayedInitializationWithPushAutomation:automation analyticsBehavior:BRZPushEnqueueBehaviorQueue];

ステップ 2.4:SDK の初期化

選択した遅延期間の後（例えば、サーバーから設定を取得した後やユーザーの同意を得た後）、通常通りSDKを初期化する：

1
2
3
4
5
6
7
8
9
10

func initializeBraze() {  
  let configuration = Braze.Configuration(apiKey: "YOUR-API-KEY", endpoint: "YOUR-ENDPOINT")    
  
  // Enable push automation to match the delayed initialization configuration  
  configuration.push.automation = true    
  let braze = Braze(configuration: configuration)    
  
  // Store the Braze instance for later use 
  AppDelegate.braze = braze
}

1
2
3
4
5
6
7
8
9
10

- (void)initializeBraze {
  BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:@"YOUR-API-KEY" endpoint:@"YOUR-ENDPOINT"];
  
  // Enable push automation to match the delayed initialization configuration
  configuration.push.automation = [[BRZConfigurationPushAutomation alloc] initWithAutomationEnabled:YES];
  Braze *braze = [[Braze alloc] initWithConfiguration:configuration];
  
  // Store the Braze instance for later use
  AppDelegate.braze = braze;
}

ステップ 3:アプリデリゲートを更新する

AppDelegate.swift ファイルに以下のコード行を追加して Braze Swift SDK に含まれる機能をインポートします。

1

import BrazeKit

次に、AppDelegate クラスに static プロパティを追加し、アプリケーションの有効期間を通して Braze インスタンスへの強い参照を保持します。

1
2
3

class AppDelegate: UIResponder, UIApplicationDelegate {
  static var braze: Braze? = nil
}

最後に、AppDelegate.swift で、application:didFinishLaunchingWithOptions: メソッドに次のスニペットを追加します。

1
2
3
4
5
6

let configuration = Braze.Configuration(
    apiKey: "YOUR-APP-IDENTIFIER-API-KEY",
    endpoint: "YOUR-BRAZE-ENDPOINT"
)
let braze = Braze(configuration: configuration)
AppDelegate.braze = braze

アプリの設定ページから、YOUR-APP-IDENTIFIER-API-KEY とYOUR-BRAZE-ENDPOINT を正しい値に更新する。アプリ識別子のAPIキーがどこにあるかについては、API識別子の種類をチェックしてほしい。

次のコード行を AppDelegate.m ファイルに追加します。

1

@import BrazeKit;

次に、AppDelegate.m ファイルに静的変数を追加して、アプリケーションのライフタイムを通してBrazeインスタンスへの参照を保持する：

1
2
3
4
5
6
7
8
9
10
11

static Braze *_braze;

@implementation AppDelegate
+ (Braze *)braze {
  return _braze;
}

+ (void)setBraze:(Braze *)braze {
  _braze = braze;
}
@end

最後に、AppDelegate.m ファイル内で、application:didFinishLaunchingWithOptions: メソッド内に以下のスニペットを追加する：

1
2
3
4

BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:"YOUR-APP-IDENTIFIER-API-KEY"
                                                                  endpoint:"YOUR-BRAZE-ENDPOINT"];
Braze *braze = [[Braze alloc] initWithConfiguration:configuration];
AppDelegate.braze = braze;

Manage Settingsページから、YOUR-APP-IDENTIFIER-API-KEY とYOUR-BRAZE-ENDPOINT を正しい値で更新する。アプリ識別子の API キーの場所について詳しくは、API ドキュメントをご覧ください。

オプション設定

ロギング

すべてのプラットフォームにわたる一元的な概要については、詳細ログを参照せよ。ログ出力の解釈方法の学習については、「詳細ログの読み方」を参照せよ。

ログレベル

Braze SWIFT SDKのデフォルトのログレベルは.error—である。ログのイネーブルメントが有効化されている場合、これがサポートされる最低レベルでもある。これがログレベルの一覧だ：

Swift Objective-C 説明
.debug BRZLoggerLevelDebug ログにデバッグ情報を記録.infoする.error。
.info BRZLoggerLevelInfo 一般的なSDK情報（ユーザーの変更など）を記録する +.error 。
.error BRZLoggerLevelError エラーをロギングする。
.disabled BRZLoggerLevelDisabled ロギングは行われない。

実行時にオブジェクトBraze.Configuration内でログレベルを割り当てることができる。完全な使用方法の詳細については、を参照せよBraze.Configuration.Logger。

1
2
3
4
5
6
7

let configuration = Braze.Configuration(
  apiKey: "<BRAZE_API_KEY>",
  endpoint: "<BRAZE_ENDPOINT>"
)
// Enable logging of general SDK information (such as user changes, etc.)
configuration.logger.level = .info
let braze = Braze(configuration: configuration)

1
2
3
4
5

BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:self.APIKey
                                                                  endpoint:self.apiEndpoint];
// Enable logging of general SDK information (such as user changes, etc.)
[configuration.logger setLevel:BRZLoggerLevelInfo];
Braze *braze = [[Braze alloc] initWithConfiguration:configuration];

Cordova SDK の統合

前提条件

始める前に、お使いの環境が最新の Braze Cordova SDK バージョンでサポートされていることを確認せよ。

ステップ 1: SDK をプロジェクトに追加する

Cordova 6 以降では、GitHub から直接 SDK を追加できます。または、GitHub リポジトリの ZIP をダウンロードして、SDK を手動で追加することもできます。

ロケーションコレクションとジオフェンスを使用する予定がない場合は、GitHub の master ブランチを使用してください。

1

cordova plugin add https://github.com/braze-inc/braze-cordova-sdk#master

位置情報の収集とジオフェンスの使用を計画している場合は、GitHub の を使用します geofence-branch 。

1

cordova plugin add https://github.com/braze-inc/braze-cordova-sdk#geofence-branch

ステップ 2:プロジェクトを構成する

次に、プロジェクトの config.xml ファイル内の platform 要素に次の環境設定を追加します。

1
2

<preference name="com.braze.ios_api_key" value="BRAZE_API_KEY" />
<preference name="com.braze.ios_api_endpoint" value="CUSTOM_API_ENDPOINT" />

1
2

<preference name="com.braze.android_api_key" value="BRAZE_API_KEY" />
<preference name="com.braze.android_api_endpoint" value="CUSTOM_API_ENDPOINT" />

次のように置き換えます。

config.xml ファイルの platform 要素は次のようになります。

1
2
3
4

<platform name="ios">
    <preference name="com.braze.ios_api_key" value="BRAZE_API_KEY" />
    <preference name="com.braze.ios_api_endpoint" value="sdk.fra-01.braze.eu" />
</platform>

1
2
3
4

<platform name="android">
    <preference name="com.braze.android_api_key" value="BRAZE_API_KEY" />
    <preference name="com.braze.android_api_endpoint" value="sdk.fra-01.braze.eu" />
</platform>

プラットフォーム固有の構文

次のセクションでは、iOS または Android で Cordova を使用する場合のプラットフォーム固有の構文について説明する。

整数

整数の設定は、次の例のように文字列表現として読み取られます。

1
2
3
4

<platform name="ios">
    <preference name="com.braze.ios_flush_interval_seconds" value="10" />
    <preference name="com.braze.ios_session_timeout" value="5" />
</platform>

Cordova 8.0.0 以降のフレームワークによる設定の処理方法に従って、整数のみの設定 (送信者 ID など) は、次の例のように先頭に str_ が付加された文字列に設定する必要があります。

1
2
3
4

<platform name="android">
    <preference name="com.braze.android_fcm_sender_id" value="str_64422926741" />
    <preference name="com.braze.android_default_session_timeout" value="str_10" />
</platform>

ブール値

ブール値の設定は、次の例のように、YES および NO キーワードを文字列表現として使用して SDK によって読み取られます。

1
2
3
4

<platform name="ios">
    <preference name="com.braze.should_opt_in_when_push_authorized" value="YES" />
    <preference name="com.braze.ios_disable_automatic_push_handling" value="NO" />
</platform>

ブール値の設定は、次の例のように、true および false キーワードを文字列表現として使用して SDK によって読み取られます。

1
2
3
4

<platform name="android">
    <preference name="com.braze.should_opt_in_when_push_authorized" value="true" />
    <preference name="com.braze.is_session_start_based_timeout_enabled" value="false" />
</platform>

オプション設定

次の設定をプロジェクトの config.xml ファイルの platform 要素に追加できます。

以下は、追加構成を含む config.xml ファイルの例です。

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

<platform name="ios">
    <preference name="com.braze.ios_disable_automatic_push_registration" value="NO"/"YES" />
    <preference name="com.braze.ios_disable_automatic_push_handling" value="NO"/"YES" />
    <preference name="com.braze.ios_enable_idfa_automatic_collection" value="YES"/"NO" />
    <preference name="com.braze.enable_location_collection" value="NO"/"YES" />
    <preference name="com.braze.geofences_enabled" value="NO"/"YES" />
    <preference name="com.braze.ios_session_timeout" value="5" />
    <preference name="com.braze.sdk_authentication_enabled" value="YES"/"NO" />
    <preference name="com.braze.display_foreground_push_notifications" value="YES"/"NO" />
    <preference name="com.braze.ios_disable_un_authorization_option_provisional" value="NO"/"YES" />
    <preference name="com.braze.trigger_action_minimum_time_interval_seconds" value="30" />
    <preference name="com.braze.ios_push_app_group" value="PUSH_APP_GROUP_ID" />
    <preference name="com.braze.ios_forward_universal_links" value="YES"/"NO" />
    <preference name="com.braze.ios_log_level" value="2" />
    <preference name="com.braze.ios_use_uuid_as_device_id" value="YES"/"NO" />
    <preference name="com.braze.ios_flush_interval_seconds" value="10" />
    <preference name="com.braze.ios_use_automatic_request_policy" value="YES"/"NO" />
    <preference name="com.braze.should_opt_in_when_push_authorized" value="YES"/"NO" />
</platform>

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

<platform name="android">
    <preference name="com.braze.android_small_notification_icon" value="RESOURCE_ENTRY_NAME_FOR_ICON_DRAWABLE" />
    <preference name="com.braze.android_large_notification_icon" value="RESOURCE_ENTRY_NAME_FOR_ICON_DRAWABLE" />
    <preference name="com.braze.android_notification_accent_color" value="str_ACCENT_COLOR_INTEGER" />
    <preference name="com.braze.android_default_session_timeout" value="str_SESSION_TIMEOUT_INTEGER" />
    <preference name="com.braze.android_handle_push_deep_links_automatically" value="true"/"false" />
    <preference name="com.braze.android_log_level" value="str_LOG_LEVEL_INTEGER" />
    <preference name="com.braze.firebase_cloud_messaging_registration_enabled" value="true"/"false" />
    <preference name="com.braze.android_fcm_sender_id" value="str_YOUR_FCM_SENDER_ID" />
    <preference name="com.braze.enable_location_collection" value="true"/"false" />
    <preference name="com.braze.geofences_enabled" value="true"/"false" />
    <preference name="com.braze.android_disable_auto_session_tracking" value="true"/"false" />
    <preference name="com.braze.sdk_authentication_enabled" value="true"/"false" />
    <preference name="com.braze.trigger_action_minimum_time_interval_seconds" value="str_MINIMUM_INTERVAL_INTEGER" />
    <preference name="com.braze.is_session_start_based_timeout_enabled" value="false"/"true" />
    <preference name="com.braze.default_notification_channel_name" value="DEFAULT_NAME" />
    <preference name="com.braze.default_notification_channel_description" value="DEFAULT_DESCRIPTION" />
    <preference name="com.braze.does_push_story_dismiss_on_click" value="true"/"false" />
    <preference name="com.braze.is_fallback_firebase_messaging_service_enabled" value="true"/"false" />
    <preference name="com.braze.fallback_firebase_messaging_service_classpath" value="FALLBACK_FIREBASE_MESSAGING_CLASSPATH" />
    <preference name="com.braze.is_content_cards_unread_visual_indicator_enabled" value="true"/"false" />
    <preference name="com.braze.is_firebase_messaging_service_on_new_token_registration_enabled" value="true"/"false" />
    <preference name="com.braze.is_push_deep_link_back_stack_activity_enabled" value="true"/"false" />
    <preference name="com.braze.push_deep_link_back_stack_activity_class_name" value="DEEPLINK_BACKSTACK_ACTIVITY_CLASS_NAME" />
    <preference name="com.braze.should_opt_in_when_push_authorized" value="true"/"false" />
</platform>

自動セッショントラッキングを無効にする（Androidのみ）

デフォルトでは、Android Cordova プラグインは自動的にセッションを追跡します。自動セッショントラッキングを無効にするには、プロジェクトの config.xml ファイル内の platform 要素に次の設定を追加します。

1
2
3

<platform name="android">
    <preference name="com.braze.android_disable_auto_session_tracking" value="true" />
</platform>

トラッキングセッションを再開するには、BrazePlugin.startSessionTracking() を呼び出します。次回の Activity.onStart() 以降に開始されたセッションのみが追跡されることに注意してください。

Flutter Braze SDKについて

AndroidとiOSでBraze Flutter SDKを統合した後、Dartで書かれたFlutterアプリ内でBraze APIを利用できるようになる。このプラグインには、基本的な分析機能が用意されており、iOS と Android 両方のアプリ内メッセージとコンテンツカードを1つのコードベースで統合できます。

Flutter SDKの統合

前提条件

Braze Flutter SDKを統合する前に、以下の手順を完了する必要がある：

ステップ1:Braze ライブラリーを統合する

コマンドラインから Braze Flutter SDK パッケージを追加します。これにより、適切な行がpubspec.yaml に追加されます。

1

flutter pub add braze_plugin

ステップ 2:ネイティブSDKの設定を完了する

Braze サーバーに接続するには、プロジェクトの android/res/values フォルダで braze.xml ファイルを作成します。以下のコードを貼り付けて、API 識別子キーとエンドポイントを値で置き換えます。

1
2
3
4
5

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string translatable="false" name="com_braze_api_key">YOUR_APP_IDENTIFIER_API_KEY</string>
  <string translatable="false" name="com_braze_custom_endpoint">YOUR_CUSTOM_ENDPOINT_OR_CLUSTER</string>
</resources>

必要な権限をファイル AndroidManifest.xml に追加します。

1
2

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

AppDelegate.swift ファイルの先頭にBraze SDK インポートを追加します。

1
2

import BrazeKit
import braze_plugin

同じファイルで、application(_:didFinishLaunchingWithOptions:) メソッドで Braze 構成オブジェクトを作成し、API キーとエンドポイントをアプリの値に置き換えます。次に、構成を使用して Braze インスタンスを作成し、簡単にアクセスできるよう AppDelegate で静的プロパティを作成します。

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

static var braze: Braze? = nil

override func application(
  _ application: UIApplication,
  didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil
) -> Bool {
  // Setup Braze
  let configuration = Braze.Configuration(
    apiKey: "<BRAZE_API_KEY>",
    endpoint: "<BRAZE_ENDPOINT>"
  )
  // - Enable logging or customize configuration here
  configuration.logger.level = .info
  let braze = BrazePlugin.initBraze(configuration)
  AppDelegate.braze = braze

  return true
}

AppDelegate.m ファイルの先頭に BrazeKit をインポートします。

1

@import BrazeKit;

同じファイルで、application:didFinishLaunchingWithOptions: メソッドで Braze 構成オブジェクトを作成し、API キーとエンドポイントをアプリの値に置き換えます。次に、構成を使用して Braze インスタンスを作成し、簡単にアクセスできるよう AppDelegate で静的プロパティを作成します。

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

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // Setup Braze
  BRZConfiguration *configuration =
      [[BRZConfiguration alloc] initWithApiKey:@"<BRAZE_API_KEY>"
                                      endpoint:@"<BRAZE_ENDPOINT>"];
  // - Enable logging or customize configuration here
  configuration.logger.level = BRZLoggerLevelInfo;
  Braze *braze = [BrazePlugin initBraze:configuration];
  AppDelegate.braze = braze;

  [self.window makeKeyAndVisible];
  return YES;
}

#pragma mark - AppDelegate.braze

static Braze *_braze = nil;

+ (Braze *)braze {
  return _braze;
}

+ (void)setBraze:(Braze *)braze {
  _braze = braze;
}

ステップ 3:プラグインを設定する

Dart コードにプラグインをインポートするには、以下を使用します。

1

import 'package:braze_plugin/braze_plugin.dart';

次に、サンプルアプリのように new BrazePlugin() を呼び出して、Braze プラグインのインスタンスを初期化します。

統合のテスト

ダッシュボードでセッション統計を確認すれば、SDKが統合されていることを確認できる。いずれかのプラットフォームでアプリケーションを実行すると、ダッシュボード ([概要] セクション) に新しいセッションが表示されます。

アプリ内で以下のコードを呼び出すことで、特定のユーザーに対してセッションを開く。

1
2

BrazePlugin braze = BrazePlugin();
braze.changeUser("{some-user-id}");

ダッシュボードの{some-user-id}「オーディエンス」＞「ユーザー検索」で、ユーザーを検索する。そこで、セッションとデバイスデータがロギングされていることを確認できます。

React Native Braze SDKについて

React Native Braze SDKを統合すると、基本的な分析機能を利用できる。さらに、iOSとAndroidの両プラットフォーム向けに、単一のコードベースでアプリ内メッセージとコンテンツカードを導入できる。

新しいアーキテクチャの互換性

以下の最小SDKバージョンは、React Nativeの新しいアーキテクチャを使用する全てのアプリと互換性がある：

SDKバージョン6.0.0以降、BrazeはReact Native Turbo Moduleを採用している。これは新アーキテクチャと従来のブリッジアーキテクチャの両方と互換性があるため、追加の設定は不要だ。

React Native SDKの統合

前提条件

SDKを統合するには、React Nativeバージョン0.71以降が必要だ。サポートされているバージョンの完全なリストについては、 React Native SDK GitHub リポジトリを参照してください。

ステップ 1: Braze ライブラリーの統合

1

npm install @braze/react-native-sdk

1

yarn add @braze/react-native-sdk

ステップ 2:設定オプションを選ぶ

Braze SDKは、Braze Expoプラグインかネイティブレイヤーのいずれかを使って管理できる。Expoプラグインを使えば、ネイティブレイヤーでコードを書かずに特定のSDK機能を設定できる。アプリに最も適したオプションを選べ。

ステップ2.1: Braze Expo プラグインのインストール

Braze React Native SDK のバージョンが1.37.0以降であることを確認してください。サポートされているバージョンの完全なリストについては、Braze React Nativeリポジトリを確認せよ。

Braze Expoプラグインをインストールするには、次のコマンドを実行する：

1

npx expo install @braze/expo-plugin

ステップ 2.2:app.json にプラグインを追加する

app.json で、Braze Expo プラグインを追加します。次の構成オプションを指定できます。

構成例:

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

{
  "expo": {
    "plugins": [
      [
        "@braze/expo-plugin",
        {
          "androidApiKey": "YOUR-ANDROID-API-KEY",
          "iosApiKey": "YOUR-IOS-API-KEY",
          "baseUrl": "YOUR-SDK-ENDPOINT",
          "sessionTimeout": 60,
          "enableGeofence": false,
          "enableBrazeIosPush": false,
          "enableFirebaseCloudMessaging": false,
          "firebaseCloudMessagingSenderId": "YOUR-FCM-SENDER-ID",
          "androidHandlePushDeepLinksAutomatically": true,
          "enableSdkAuthentication": false,
          "logLevel": 0,
          "minimumTriggerIntervalInSeconds": 0,
          "enableAutomaticLocationCollection": false,
          "enableAutomaticGeofenceRequests": false,
          "dismissModalOnOutsideTap": true,
          "androidPushNotificationHtmlRenderingEnabled": true,
          "androidNotificationAccentColor": "#ff3344",
          "androidNotificationLargeIcon": "@drawable/custom_app_large_icon",
          "androidNotificationSmallIcon": "@drawable/custom_app_small_icon",
          "iosRequestPushPermissionsAutomatically": false,
          "enableBrazeIosPushStories": true,
          "iosPushStoryAppGroup": "group.com.example.myapp.PushStories",
          "iosForwardUniversalLinks": false
        }
      ],
    ]
  }
}
Androidのプッシュ通知アイコンの設定

とandroidNotificationLargeIconを使用するandroidNotificationSmallIcon際は、アイコンを正しく表示するために以下のベストプラクティスに従うこと：

アイコンの配置と形式

Braze Expoプラグインでカスタムプッシュ通知アイコンを使用するには：

  1. Androidの要件に従ってアイコンファイルを作成せよ。詳細は「アイコンの要件」に記載されている。
  2. それらをプロジェクトのAndroidネイティブディレクトリに配置する（例えば、android/app/src/main/res/drawable-mdpi/、drawable-hdpi/、または類似のディレクトリ）android/app/src/main/res/drawable-<density>/。
  3. あるいは、React Nativeディレクトリ内でアセットを管理している場合、Expoのapp.jsonアイコン設定を使用するか、Expo設定プラグインを作成して、プリビルド時にアイコンをAndroidのdrawableフォルダにコピーできる。

Braze Expoプラグインは、Androidのdrawableリソースシステムを使ってこれらのアイコンを参照している。

アイコンの要件
  • 小さなアイコン：透明なバックグラウンドに白いシルエットでなければならない（これはAndroidプラットフォームの要件である）
  • 大きなアイコン：フルカラーの画像, 写真である場合がある
  • フォーマット：PNG形式が推奨される
  • 命名：小文字、数字、アンダースコアのみを使用する（例：my_large_icon.png）
設定 app.json

ファイル拡張子_を除いた_ファイル名に、プレフィックスを@drawable/付けて使用する。例えば、アイコンファイルの名前が の場合large_icon.png、次のように参照@drawable/large_iconする：

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

{
  "expo": {
    "plugins": [
      [
        "@braze/expo-plugin",
        {
          "androidNotificationLargeIcon": "@drawable/large_icon",
          "androidNotificationSmallIcon": "@drawable/small_icon"
        }
      ]
    ]
  }
}
仕組み

Braze Expoプラグインは、Androiddrawableディレクトリからアイコンファイルを参照する。実行するとnpx expo prebuild、ExpoはネイティブのAndroidプロジェクト構造を生成する。ビルドプロセス前に、アイコンはdrawableAndroidフォルダ内に存在しなければならない（手動で配置するか、設定プラグイン経由でコピーするかのいずれか）。プラグインはその後、これらの描画可能リソースを名前（パスや拡張子なし）で利用するようBraze SDKを設定する。これが設定で@drawable/プレフィックスが必要な理由だ。

Androidの通知アイコンに関する詳細情報は、Androidの通知アイコンガイドラインを参照のこと。

ステップ 2.3:アプリケーションのビルドおよび実行

アプリケーションを事前ビルドすると、Braze Expoプラグインが動作するために必要なネイティブファイルが生成される。

1

npx expo prebuild

Expo ドキュメントの指定に従い、アプリケーションを実行します。設定オプションを変更した場合、アプリケーションを再ビルドして再度実行する必要があることを覚えておいてほしい。

ステップ2.1: リポジトリの追加

最上位プロジェクト build.gradle で、buildscript > dependencies から以下を追加します。

1
2
3
4
5
6
7

buildscript {
    dependencies {
        ...
        // Choose your Kotlin version
        classpath("org.jetbrains.kotlin:kotlin-gradle-plugin:1.8.10")
    }
}

これでプロジェクトにKotlinが追加される。

ステップ 2.2:Braze SDK の構成

Braze サーバーに接続するには、プロジェクトの res/values フォルダで braze.xml ファイルを作成します。次のコードを貼り付け、API キーおよびエンドポイントを実際の値に置き換えます。

1
2
3
4
5

<?xml version="1.0" encoding="utf-8"?>
<resources>
  <string translatable="false" name="com_braze_api_key">YOU_APP_IDENTIFIER_API_KEY</string>
  <string translatable="false" name="com_braze_custom_endpoint">YOUR_CUSTOM_ENDPOINT_OR_CLUSTER</string>
</resources>

必要な権限をファイル AndroidManifest.xml に追加します。

1
2

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

ステップ2.3: ユーザーセッショントラッキングの実装

openSession() および closeSession() への呼び出しは自動的に処理されます。 MainApplication クラスの onCreate() メソッドに次のコードを追加します。

1
2
3
4
5
6
7
8

import com.braze.BrazeActivityLifecycleCallbackListener;

@Override
public void onCreate() {
    super.onCreate();
    ...
    registerActivityLifecycleCallbacks(new BrazeActivityLifecycleCallbackListener());
}

1
2
3
4
5
6
7

import com.braze.BrazeActivityLifecycleCallbackListener

override fun onCreate() {
    super.onCreate()
    ...
    registerActivityLifecycleCallbacks(BrazeActivityLifecycleCallbackListener())
}

ステップ2.4: インテント更新の処理

MainActivity で android:launchMode が singleTask に設定されている場合は、次のコードを MainActivity クラスに追加します。

1
2
3
4
5

@Override
public void onNewIntent(Intent intent) {
    super.onNewIntent(intent);
    setIntent(intent);
}

1
2
3
4

override fun onNewIntent(intent: Intent) {
    super.onNewIntent(intent)
    setIntent(intent)
}

ステップ2.1: (オプション) ダイナミック XCFramework に関する Podfile の構成

特定のBrazeライブラリー（例：BrazeUI）をObjective C++ファイルにインポートするには、`#import#import`構文を使用しなければならない。Braze Swift SDKのバージョン7.4.0以降、バイナリにはこの構文と互換性のあるダイナミック XCFramework としてのオプションの配布チャネルがあります。

この配布チャネルを使用する場合は、Podfile で CocoaPods のソースの場所を手動で上書きします。以下のサンプルを参照し、インポートする関連バージョンで {your-version} を置き換えてください。

1
2
3

pod 'BrazeKit', :podspec => 'https://raw.githubusercontent.com/braze-inc/braze-swift-sdk-prebuilt-dynamic/{your-version}/BrazeKit.podspec'
pod 'BrazeUI', :podspec => 'https://raw.githubusercontent.com/braze-inc/braze-swift-sdk-prebuilt-dynamic/{your-version}/BrazeUI.podspec'
pod 'BrazeLocation', :podspec => 'https://raw.githubusercontent.com/braze-inc/braze-swift-sdk-prebuilt-dynamic/{your-version}/BrazeLocation.podspec'

ステップ 2.2:ポッドのインストール

React Native ではライブラリーがネイティブプラットフォームに自動でリンクされるため、CocoaPods を使用して SDK をインストールできます。

プロジェクトのルートフォルダから:

1
2
3
4
5

# To install using the React Native New Architecture
cd ios && pod install

# To install using the React Native legacy architecture
cd ios && RCT_NEW_ARCH_ENABLED=0 pod install

ステップ 2.3:Braze SDK の構成

AppDelegate.swift ファイルの先頭にある Braze SDK をインポートします。

1
2

import BrazeKit
import braze_react_native_sdk

application(_:didFinishLaunchingWithOptions:) メソッドで、API キーおよびエンドポイントをアプリの値に置き換えます。次に、構成を使用して Braze インスタンスを作成し、簡単にアクセスできるよう AppDelegate で静的プロパティを作成します。

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

func application(
    _ application: UIApplication,
    didFinishLaunchingWithOptions launchOptions: [UIApplication.LaunchOptionsKey : Any]? = nil
) -> Bool {
    // Setup Braze
    let configuration = Braze.Configuration(
        apiKey: "{BRAZE_API_KEY}",
        endpoint: "{BRAZE_ENDPOINT}")
    // Enable logging and customize the configuration here.
    configuration.logger.level = .info
    let braze = BrazeReactBridge.perform(
      #selector(BrazeReactBridge.initBraze(_:)),
      with: configuration
    ).takeUnretainedValue() as! Braze

    AppDelegate.braze = braze

    /* Other configuration */

    return true
}

// MARK: - AppDelegate.braze

static var braze: Braze? = nil

AppDelegate.m ファイルの先頭にある Braze SDK をインポートします。

1
2

#import <BrazeKit/BrazeKit-Swift.h>
#import "BrazeReactBridge.h"

application:didFinishLaunchingWithOptions: メソッドで、API キーおよびエンドポイントをアプリの値に置き換えます。次に、構成を使用して Braze インスタンスを作成し、簡単にアクセスできるよう AppDelegate で静的プロパティを作成します。

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

- (BOOL)application:(UIApplication *)application
    didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  // Setup Braze
  BRZConfiguration *configuration = [[BRZConfiguration alloc] initWithApiKey:@"{BRAZE_API_KEY}"
                                                                    endpoint:@"{BRAZE_ENDPOINT}"];
  // Enable logging and customize the configuration here.
  configuration.logger.level = BRZLoggerLevelInfo;
  Braze *braze = [BrazeReactBridge initBraze:configuration];
  AppDelegate.braze = braze;

  /* Other configuration */

  return YES;
}

#pragma mark - AppDelegate.braze

static Braze *_braze = nil;

+ (Braze *)braze {
  return _braze;
}

+ (void)setBraze:(Braze *)braze {
  _braze = braze;
}

ステップ 3:ライブラリーをインポートする

次に、React importNativeコード内のライブラリーだ。詳細については、サンプルプロジェクトを参照せよ。

1

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

ステップ 4: 統合をテストする（任意）

SDKの統合をテストするには、アプリ内で以下のコードを呼び出して、いずれかのプラットフォームでユーザーの新規セッションを開始する。

1

Braze.changeUser("userId");

たとえば、アプリの起動時にユーザー ID を割り当てることができます。

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

import React, { useEffect } from "react";
import Braze from "@braze/react-native-sdk";

const App = () => {
  useEffect(() => {
    Braze.changeUser("some-user-id");
  }, []);

  return (
    <div>
      ...
    </div>
  )

Brazeのダッシュボードで、ユーザー検索に移動し、ユーザー IDが一致するユーザーsome-user-idを探す。ここで、セッションとデバイスデータが記録されたことを確認できる。

次のステップ

Braze SDKを統合した後、一般的なメッセージング機能の実装を開始できる：

六SDKの統合

ステップ 1: ファイルの追加

Braze SDK ファイルは、Braze Roku SDK リポジトリ の sdk_files ディレクトリにあります。

  1. source ディレクトリで、アプリに BrazeSDK.brs を追加します。
  2. components ディレクトリで、アプリに BrazeTask.brs と BrazeTask.xml を追加します。

ステップ 2:参照の追加

次の script 要素を使用して、メインシーンに BrazeSDK.brs への参照を追加します。

1

<script type="text/brightscript" uri="pkg:/source/BrazeSDK.brs"/>

ステップ3:構成

main.brs 内で、グローバルノードにBrazeのコンフィギュレーションを設定する：

1
2
3
4
5
6
7
8

globalNode = screen.getGlobalNode()
config = {}
config_fields = BrazeConstants().BRAZE_CONFIG_FIELDS
config[config_fields.API_KEY] = {YOUR_API_KEY}
' example endpoint: "https://sdk.iad-01.braze.com/"
config[config_fields.ENDPOINT] = {YOUR_ENDPOINT}
config[config_fields.HEARTBEAT_FREQ_IN_SECONDS] = 5
globalNode.addFields({brazeConfig: config})

SDK エンドポイントと API キーは、Braze ダッシュボード内にあります。

ステップ4: Braze の初期化

Braze インスタンスを初期化します。

1
2

m.BrazeTask = createObject("roSGNode", "BrazeTask")
m.Braze = getBrazeInstance(m.BrazeTask)

オプション構成

ロギング

Braze 統合をデバッグするため、Braze ログの Roku デバッグコンソールを表示できます。詳細については、Roku Developers の Debugging code を参照してください。

Unity Braze SDKについて

型、関数、変数などの完全なリストについては、Unity宣言ファイルを参照のこと。さらに、すでにUnityをiOS用に手動で統合している場合は、代わりに自動統合に切り替えることができる。

Unity SDKを統合する

前提条件

開始する前に、お使いの環境が最新のBraze Unity SDKバージョンでサポートされていることを確認する。

ステップ 1: Braze Unity パッケージの選択

Braze .unitypackage は、Android プラットフォームと iOS プラットフォーム向けのネイティブバインディングを C# インターフェイスとともにバンドルします。

Braze Unity リリースページでいくつかの Braze Unity パッケージをダウンロードできます。

  • Appboy.unitypackage
    • このパッケージは、Braze Android および iOS SDK と、iOS SDK の SDWebImage 依存関係をバンドルします。これは、Braze アプリ内メッセージングと、iOS 上のコンテンツカード機能を適切に機能させるために必要です。SDWebImage フレームワークは、GIF を含む画像のダウンロードと表示に使用されます。完全なBraze機能を使用する場合は、このパッケージを読み込むしてインポートします。
  • Appboy-nodeps.unitypackage
    • このパッケージは Appboy.unitypackage に似ていますが、SDWebImage フレームワークが存在しない点が異なります。このパッケージは、iOS アプリに SDWebImage フレームワークが存在しないようにする場合に便利です。

Braze .unitypackage は、Android プラットフォームと iOS プラットフォーム向けのネイティブバインディングを C# インターフェイスとともにバンドルします。

Braze Unity パッケージは、次の2種類の統合オプションを使用して、Braze Unity リリースページでダウンロードできます。

  1. Appboy.unitypackage のみ
    • このパッケージは、Braze Android と iOS SDK を追加の依存関係なしでバンドルします。この統合方法では、Braze アプリ内メッセージングと、iOS 上のコンテンツカード機能が適切に機能しません。カスタムコードなしで完全なBraze機能を使用する場合は、代わりに以下のオプションを使用してください。
    • この統合オプションを使用する場合は、[Braze 構成] の下にある Unity UI で Import SDWebImage dependency の横にあるボックスにチェックマークが入れられていないことを確認してください。
  2. SDWebImage を含む Appboy.unitypackage
    • この統合オプションは、Braze Android および iOS SDK と、iOS SDK の SDWebImage 依存関係をバンドルします。これは、Braze アプリ内メッセージングと、iOS 上のコンテンツカード機能を適切に機能させるために必要です。SDWebImage フレームワークは、GIF を含む画像のダウンロードと表示に使用されます。完全なBraze機能を使用する場合は、このパッケージを読み込むしてインポートします。
    • SDWebImage を自動的にインポートするには、[Braze 構成] の下にある Unity UIで Import SDWebImage dependency の横にあるボックスにチェックマークが入れられていることを確認してください。

ステップ 2:パッケージをインポートする

Unity エディターで Unity プロジェクトにパッケージをインポートするには、[アセット] > [パッケージをインポート] > [カスタムパッケージ] の順に移動します。次に、Importをクリックします。

または、カスタム Unity パッケージのインポートに関して詳しくは、Unity アセットパッケージのインポートの説明を参照してください。

Unity エディターで Unity プロジェクトにパッケージをインポートするには、[アセット] > [パッケージをインポート] > [カスタムパッケージ] の順に移動します。次に、Importをクリックします。

または、カスタム Unity パッケージのインポートに関して詳しくは、Unity アセットパッケージのインポートの説明を参照してください。

ステップ 3:SDKを設定する

ステップ 3.1:設定する AndroidManifest.xml

機能する AndroidManifest.xmlを機能させる。アプリにAndroidManifest.xml がない場合は、以下をテンプレートとして使用できます。それ以外の場合、すでにAndroidManifest.xml がある場合は、次のいずれかの欠落セクションが既存のAndroidManifest.xml に追加されていることを確認します。

  1. Assets/Plugins/Android/ ディレクトリに移動し、AndroidManifest.xml ファイルを開封する。これはUnityエディタのデフォルトの場所である。
  2. AndroidManifest.xml に、以下のテンプレートにある必要な権限とアクティビティを追加する。
  3. 終了後、AndroidManifest.xml には、"android.intent.category.LAUNCHER" が存在するアクティビティが1つだけ含まれているはずだ。
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

<?xml version="1.0" encoding="utf-8"?>
<manifest xmlns:android="http://schemas.android.com/apk/res/android"
          package="REPLACE_WITH_YOUR_PACKAGE_NAME">

  <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
  <uses-permission android:name="android.permission.INTERNET" />

  <application android:icon="@drawable/app_icon" 
               android:label="@string/app_name">

    <!-- Calls the necessary Braze methods to ensure that analytics are collected and that push notifications are properly forwarded to the Unity application. -->
    <activity android:name="com.braze.unity.BrazeUnityPlayerActivity" 
      android:theme="@style/UnityThemeSelector"
      android:label="@string/app_name" 
      android:configChanges="fontScale|keyboard|keyboardHidden|locale|mnc|mcc|navigation|orientation|screenLayout|screenSize|smallestScreenSize|uiMode|touchscreen" 
      android:screenOrientation="sensor">
      <meta-data android:name="android.app.lib_name" android:value="unity" />
      <meta-data android:name="unityplayer.ForwardNativeEventsToDalvik" android:value="true" />
      <intent-filter>
        <action android:name="android.intent.action.MAIN" />
        <category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
    </activity>

    <!-- A Braze specific FirebaseMessagingService used to handle push notifications. -->
    <service android:name="com.braze.push.BrazeFirebaseMessagingService"
      android:exported="false">
      <intent-filter>
        <action android:name="com.google.firebase.MESSAGING_EVENT" />
      </intent-filter>
    </service>
  </application>
</manifest>

ステップ 3.2:AndroidManifest.xml をパッケージ名で更新する。

パッケージ名を確認するには、[ファイル] > [ビルド設定] > [プレーヤー設定] > [Android タブ]を選択します。

AndroidManifest.xml では、REPLACE_WITH_YOUR_PACKAGE_NAME のすべてのインスタンスを前のステップの Package Name に置き換える必要があります。

ステップ3.3：gradleの依存関係を追加する

Unity プロジェクトに gradle の依存関係を追加するには、まず公開設定で [Custom Main Gradle テンプレート] を有効にします。これにより、プロジェクトで使用するテンプレートグラドルファイルが作成されます。gradle ファイルは、依存関係の設定やその他のビルド時のプロジェクト設定を処理します。詳細については、Braze Unity サンプルアプリのmainTemplate.gradle を参照してください。

次の依存関係が必要です。

1
2
3
4
5
6

implementation 'com.google.firebase:firebase-messaging:22.0.0'
implementation "androidx.swiperefreshlayout:swiperefreshlayout:1.1.0"
implementation "androidx.recyclerview:recyclerview:1.2.1"
implementation "org.jetbrains.kotlin:kotlin-stdlib:1.6.0"
implementation "org.jetbrains.kotlinx:kotlinx-coroutines-android:1.6.1"
implementation 'androidx.core:core:1.6.0'

これらの依存関係は、External Dependency Managerを使用して設定することもできます。

ステップ 3.4:UnityのAndroidインテグレーションを自動化する

Braze は、Unity Android 統合を自動化するためのネイティブ Unity ソリューションを提供しています。

  1. Unity エディターで [Braze] > [Braze 構成] の順に移動して、[Braze 構成設定] を開きます。
  2. [Unity Android 統合の自動化] ボックスにチェックマークを入れます。
  3. Braze API キーフィールドで、設定の管理にあるアプリアプリケーションのAPI キーをBraze ダッシュボードから入力します。

ステップ 3.1:API キーの設定

Braze は、Unity iOS 統合を自動化するためのネイティブ Unity ソリューションを提供しています。このソリューションは、Unity の PostProcessBuildAttribute を使用してビルドされた Xcode プロジェクトを変更し、IMPL_APP_CONTROLLER_SUBCLASS マクロを使用して UnityAppController をサブクラス化します。

  1. Unity エディターで [Braze] > [Braze 構成] の順に移動して、[Braze 構成設定] を開きます。
  2. [Unity iOS 統合の自動化] ボックスにチェックマークを入れます。
  3. Braze API キー フィールドで、設定の管理 にあるアプリアプリケーションのAPI キーを入力します。

アプリですでに別の UnityAppController サブクラスが使用されている場合、サブクラスの実装を AppboyAppDelegate.mm とマージする必要があります。

Unityパッケージをカスタマイズする

ステップ 1: リポジトリを複製する

ターミナルで、Braze Unity SDK GitHubリポジトリを複製し、そのフォルダに移動する：

1
2

git clone [email protected]:braze-inc/braze-unity-sdk.git
cd ~/PATH/TO/DIRECTORY/braze-unity-sdk

1
2

git clone git@github.com:braze-inc/braze-unity-sdk.git
cd C:\PATH\TO\DIRECTORY\braze-unity-sdk

ステップ 2:リポジトリからパッケージをエクスポートする

まずUnityを起動し、バックグラウンドで起動しておく。次に、リポジトリのルートで以下のコマンドを実行して、パッケージをbraze-unity-sdk/unity-package/ にエクスポートする。

1

/Applications/Unity/Unity.app/Contents/MacOS/Unity -batchmode -nographics -projectPath "$(pwd)" -executeMethod Appboy.Editor.Build.ExportAllPackages -quit

1

"%UNITY_PATH%" -batchmode -nographics -projectPath "%PROJECT_ROOT%" -executeMethod Appboy.Editor.Build.ExportAllPackages -quit

ステップ 3:Unityにパッケージをインポートする

  1. Unityで、Assets>Import Package>Custom Packageと進み、目的のパッケージをUnityプロジェクトにインポートする。
  2. インポートしたくないファイルがあれば、今すぐ選択を解除する。
  3. Assets/Editor/Build.cs にあるエクスポートされたUnityパッケージをカスタマイズする。

自動統合に切り替える（Swiftのみ）

Braze Unity SDKで提供される自動化されたiOSインテグレーションを利用するには、手動から自動化されたインテグレーションに移行するための以下のステップに従う。

  1. XcodeプロジェクトのUnityAppController サブクラスから、Braze関連のコードをすべて削除する。
  2. UnityまたはXcodeプロジェクトからBraze iOSライブラリを削除する（Appboy_iOS_SDK.framework やSDWebImage.framework など）。
  3. Braze Unityパッケージをプロジェクトに再度インポートする。完全なウォークスルーは、ステップ2を参照のこと： パッケージをインポートする。
  4. APIキーを再度設定する。完全なウォークスルーは、ステップ3.1を参照のこと：APIキーを設定する.

オプション構成

詳細なログ記録

Unityエディターで冗長ロギングを有効にするには、以下のようにする：

  1. [Braze] > [Braze 構成] の順に移動して、[Braze 構成設定] を開きます。
  2. [Braze Android 設定を表示する] ドロップダウンをクリックします。
  3. [SDK ログレベル] フィールドに値「0」を入力します。

Prime 31 の互換性

Prime31 プラグインで Braze Unity プラグインを使用するには、Prime31 互換の Activity クラスを使用するようにプロジェクトの AndroidManifest.xml を編集します。の参照をすべて変更する。 com.braze.unity.BrazeUnityPlayerActivity から com.braze.unity.prime31compatible.BrazeUnityPlayerActivity

アマゾン・デバイス・メッセージング（ADM）

Brazeは、UnityアプリへのADMプッシュの統合をサポートしている。ADMプッシュを統合したい場合は、ADM APIキーを含むapi_key.txt というファイルを作成し、Plugins/Android/assets/ フォルダに置く。 ADMとBrazeの統合の詳細については、ADMプッシュ統合の説明を参照のこと。

Braze Unityプレーヤーの拡張（Androidのみ）

提供されている AndroidManifest.xml ファイルの例では、1つの Activity クラス BrazeUnityPlayerActivity が登録されています。このクラスは Braze SDK と統合され、セッション処理、アプリ内メッセージ登録、プッシュ通知分析ログなどを使用して UnityPlayerActivity を拡張します。UnityPlayerActivity クラスの拡張の詳細については、「Unity」を参照してください。

ライブラリやプラグインプロジェクトで独自のカスタムUnityPlayerActivity を作成する場合は、カスタム機能をBrazeと統合するために、当社のBrazeUnityPlayerActivity を拡張する必要がある。BrazeUnityPlayerActivity を拡張する作業を始める前に、Unity プロジェクトに Braze を統合するための手順に従ってください。

  1. Braze Android SDK統合の説明に従って、Braze Android SDK をライブラリまたはプラグインプロジェクトに依存関係として追加します。
  2. Unity 固有の機能を含む Unity .aar を、Unity 用に構築している Android ライブラリプロジェクトに統合します。appboy-unity.aar は、公開リポジトリから入手できます。Unity ライブラリがうまく統合されたら、BrazeUnityPlayerActivity を拡張するように UnityPlayerActivity を変更します。
  3. ライブラリまたはプラグインプロジェクトをエクスポートし、通常どおり /<your-project>/Assets/Plugins/Android にドロップします。ライブラリやプラグインにBrazeのソースコードを含めないこと。それらはすでに/<your-project>/Assets/Plugins/Android に存在するからである。
  4. /<your-project>/Assets/Plugins/Android/AndroidManifest.xml を編集し、BrazeUnityPlayerActivity のサブクラスをメイン・アクティビティとして指定する。

これでUnity IDEから、Brazeと完全に統合され、カスタムUnityPlayerActivity 機能を含む.apk をパッケージできるようになるはずだ。

トラブルシューティング

エラー:「ファイルが読み込めなかった

以下のようなエラーは無視して問題ありません。アップルのソフトウェアはCgBIと呼ばれる独自のPNG拡張子を使用しているが、Unityはこれを認識しない。これらのエラーは、iOSのビルドやBrazeバンドルの関連画像の適切な表示には影響しない。

1

Could not create texture from Assets/Plugins/iOS/AppboyKit/Appboy.bundle/...png: File could not be read

.NET MAUI SDKの統合

Braze .NET MAUI（旧称Xamarin）SDKを統合すると、基本的な分析機能に加え、ユーザーとのエンゲージメントに活用できる機能的なアプリ内メッセージが利用可能になる。

前提条件

.NET MAUI Braze SDKを統合する前に、以下の要件を満たしていることを確認せよ：

  • version 3.0.0 以降、この SDK では、NET 6以降を使用する必要があり、Xamarin フレームワークを使用するプロジェクトのサポートが削除されます。
  • このSDKはversion 4.0.0、Xamarinのサポートを終了し、.NET &Xamarin.FormsMAUIのサポートを追加した。Xamarinのサポート終了前後のMicrosoftのポリシーを参照してください。

ステップ 1: .NET MAUI バインディングを入手する

.NET MAUIバインディングとは、.NET MAUIアプリでネイティブライブラリーを利用する方法である。バインディングの実装は、ライブラリに対して C# インターフェイスを構築し、アプリケーションでそのインターフェイスを使用することから構成されます。 .NET MAUI のドキュメントを参照せよ。Braze SDK バインディングを含めるには、NuGet を使用する方法と、ソースからコンパイルする方法の2つがあります。

最も単純な統合方式では、NuGet.org中央リポジトリーからBraze SDKを取得します。Visual Studio サイドバーで、Packages フォルダを右クリックし、Add Packages... をクリックします。 ‘Braze’ を検索し、BrazePlatform.BrazeAndroidBinding パッケージをプロジェクトにインストールします。

Brazeの位置情報サービスとジオフェンスを使用するには、パッケージBrazePlatform.BrazeAndroidLocationBindingもインストールする必要がある。

2 番目の統合方法は、バインディングソース を含めることです。以下にバインディングappboy-component/src/androidnet6のコードがある。.NET MAUIアプリケーションでBrazeAndroidBinding.csprojプロジェクト参照をこれに追加すると、バインディングがプロジェクトと共にビルドされ、Braze Android SDKを利用できるようになる。

Brazeの位置情報サービスとジオフェンスを使用するには、プロジェクトにBrazeAndroidLocationBinding.csproj以下の参照を追加する必要があるappboy-component/src/androidnet6/BrazeAndroidLocationBinding。

.NET MAUIバインディングとは、.NET MAUIアプリでネイティブライブラリーを利用する方法である。バインディングの実装は、ライブラリに対して C# インターフェイスを構築し、アプリケーションでそのインターフェイスを使用することから構成されます。Braze SDK バインディングを含めるには、NuGet を使用する方法と、ソースからコンパイルする方法の2つがあります。

最も単純な統合方式では、NuGet.org中央リポジトリーからBraze SDKを取得します。Visual Studio サイドバーで、Packages フォルダを右クリックし、Add Packages... をクリックします。 「Braze」を検索し、最新の.NET MAUI iOS NuGetパッケージであるBraze.iOS.BrazeKit、Braze.iOS.BrazeUI、およびBraze.iOS.BrazeLocationをプロジェクトにインストールする。

.NET MAUI への移行を容易にするために、互換性ライブラリパッケージ Braze.iOS.BrazeKitCompat および Braze.iOS.BrazeUICompat も提供しています。

2 番目の統合方法は、バインディングソース を含めることです。以下にバインディングappboy-component/src/iosnet6のコードがある。.NET MAUIアプリケーションBrazeiOSBinding.csprojでプロジェクト参照として追加すると、バインディングがプロジェクトと共にビルドされ、Braze iOS SDKを利用できるようになる。プロジェクトの「リファレンス」フォルダに BrazeiOSBinding.csproj が表示されていることを確認します。

ステップ2:Brazeインスタンスの設定

ステップ 2.1: Braze.xmlでBraze SDKを構成する

ライブラリが統合されたので、プロジェクトのResources/values フォルダにBraze.xml ファイルを作成する必要があります。ファイルの内容は、次のコードスニペットのようになります。

1
2
3
4
5
6
7
8
9

  <?xml version="1.0" encoding="utf-8"?>
  <resources>
    <string translatable="false" name="com_braze_api_key">YOUR_API_KEY</string>
    <string translatable="false" name="com_braze_custom_endpoint">YOUR_CUSTOM_ENDPOINT_OR_CLUSTER</string>
    <string-array name="com_braze_internal_sdk_metadata">
      <item>XAMARIN</item>
      <item>NUGET</item>
    </string-array>
  </resources>

バインディングソースを手動で含める場合は、コードから <item>NUGET</item> を削除します。

ステップ 2.2:Androidマニフェストに必要な権限を追加する

API キーを追加したので、次の権限を AndroidManifest.xml ファイルに追加する必要があります。

1

<uses-permission android:name="android.permission.INTERNET" />

AndroidManifest.xml の例については、Android MAUI サンプルアプリケーションを参照してください。

ステップ 2.3:ユーザー セッションs の追跡とアプリ内メッセージs の登録

ユーザーセッショントラッキングを有効にし、アプリ内メッセージ用にアプリを登録するには、アプリの Application クラスの OnCreate() ライフサイクルメソッドに次の呼び出しを追加します。

1

RegisterActivityLifecycleCallbacks(new BrazeActivityLifecycleCallbackListener());

Braze インスタンスを設定したら、次のスニペットを追加して、インスタンスを設定します。

1
2
3

var configuration = new BRZConfiguration("YOUR_API_KEY", "YOUR_ENDPOINT");
configuration.Api.AddSDKMetadata(new[] { BRZSDKMetadata.Xamarin });
braze = new Braze(configuration);

iOS MAUIサンプルアプリライケーションのApp.xaml.csファイルを参照してください。

ステップ3: 統合をテストする

これで、アプリケーションを起動して、セッションが Braze ダッシュボードに (デバイス情報やその他の分析と共に) 記録されているのを確認できます。基本的なSDKインテグレーションのベストプラクティスの詳細については、Androidインテグレーション命令を参照してください。

これで、アプリケーションを起動して、セッションが Braze ダッシュボードに記録されているのを確認できます。基本的なSDKインテグレーションのベストプラクティスの詳細については、iOSインテグレーションの手順を参照してください。

ChatGPTアプリの統合

設定

ステップ 1: Brazeの統合ファイルを取得する

ChatGPTアプリ統合リポジトリからファイルをbraze.jsプロジェクトにコピーせよ。このファイルには、必要なすべてのBraze SDK設定と補助関数が含まれている。

ステップ 2:依存関係をインストールする

Brazeの最新機能を利用するには、当社のWeb SDKを導入せよ。

クライアントサイド統合については：

1

npm install @braze/web-sdk

実装

BrazeをChatGPTアプリに統合する方法は、ユースケースに応じて2通りある：

クライアントサイド統合（カスタムウィジェット）

カスタムChatGPTアプリウィジェット内でBrazeメッセージングを表示し、ユーザーインタラクションをトラッキングするには、Web SDK統合を使用する。完全なメッセージングの例は、こちらのサンプルリポジトリで見つけることができる。

ウィジェットのメタデータを設定する

MCPサーバーファイルに以下のメタデータを追加し、Brazeドメインを許可する。CDNドメインは地域に応じて更新すること：

1
2
3
4
5
6
7
8
9

"openai/widgetCSP": {
  connect_domains: ["https://YOUR-SDK-ENDPOINT"],
  resource_domains: [
    "https://appboy-images.com",
    "https://braze-images.com",
    "https://cdn.braze.eu",
    "https://use.fontawesome.com"
  ],
}

実際のBraze SDKエンドポイントでYOUR-SDK-ENDPOINT置き換える。

useBrazeフックを設定する

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import { useBraze } from "./utils/braze";

function YourWidget() {
  const braze = useBraze({
    apiKey: "your-braze-api-key",
    baseUrl: "your-braze-endpoint.braze.com",
  });

  useEffect(() => {
    if (!braze.isInitialized) {
      return;
    }

    // Set user identity
    braze.changeUser("user-id-123");
    
    // Log widget interactions
    braze.logCustomEvent("viewed_pizzaz_list");
  }, [braze.isInitialized]);

  return (
    // Your widget JSX
  );
}

Brazeコンテンツカードを表示する

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

const [cards, setCards] = useState([]);

useEffect(() => {
  // Get cached content cards
  setCards(braze.getCachedContentCards()?.cards ?? []);

  // Subscribe to content card updates
  braze.subscribeToContentCardsUpdates((contentCards) => {
    setCards(contentCards.cards);
  });

  // Open session
  braze.openSession();

  return () => {
    braze.removeAllSubscriptions();
  }
}, []);

ウィジェットのイベントのトラッキング

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

// Track user interactions within your widget
const handleButtonClick = () => {
  braze.logCustomEvent("widget_button_clicked", {
    button_type: "save_list",
    widget_name: "pizza_list"
  });
};

const handleItemInteraction = (itemId) => {
  braze.logCustomEvent("item_interacted", {
    item_id: itemId,
    interaction_type: "view_details"
  });
};

サーバーサイド統合（MCPサーバー）

MCPサーバー上でメッセージング機能のサーバーサイド統合も必要なら、に連絡せよ[email protected]。MCPサーバーからのイベントや購入のトラッキング, 追跡には、当社のREST APIを使用する。

Braze Vega SDKについて

Braze Vega SDKを使えば、ユーザー向けの分析データを収集し、アプリ内でリッチなアプリ内メッセージを表示できる。Braze Vega SDK のメソッドの大半は非同期であり、await または resolve すべき Promise を返す。

Braze Vega SDKの統合

ステップ 1: Brazeライブラリをインストールする

お好みのパッケージマネージャーを使って、Braze Vega SDKをインストールする。

プロジェクトでNPMを使用している場合、Braze Vega SDKを依存関係として追加できる。

1

npm install @braze/vega-sdk --save

インストール後、必要なメソッドをインポートできる：

1

import { initialize, changeUser, openSession } from "@braze/vega-sdk";

プロジェクトでYarnを使用している場合、Braze Vega SDKを依存関係として追加できる。

1

yarn add @braze/vega-sdk

インストール後、必要なメソッドをインポートできる：

1

import { initialize, changeUser, openSession } from "@braze/vega-sdk";

ステップ2:SDK の初期化

プロジェクトにBraze Vega SDKを追加した後、ライブラリーを初期化する。その際、Brazeダッシュボードの「設定」＞「アプリ設定」にあるAPI キーとSDKエンドポイントURLを使用する。

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

import { useEffect } from "react-native";
import {
  initialize,
  changeUser,
  logCustomEvent,
  openSession,
  setCustomUserAttribute,
  setUserCountry
} from "@braze/vega-sdk";

const App = () => {
  useEffect(() => {
    const initBraze = async () => {
      // Initialize the SDK
      await initialize("YOUR-API-KEY", "YOUR-SDK-ENDPOINT", {
        sessionTimeoutInSeconds: 60,
        appVersionNumber: "1.2.3.4",
        enableLogging: true, // set to `true` for debugging
      });

      // Change user
      await changeUser("user-id-123");
      
      // Start a session
      await openSession();
      
      // Log custom events and set user attributes
      logCustomEvent("visited-page", { pageName: "home" });
      setCustomUserAttribute("my-attribute", "my-attribute-value");
      setUserCountry("USA");
    };
    
    initBraze();
  }, []);
  
  return (
    // Your app components
  );
};

オプション設定

ロギング

SDKのログ記録のイネーブルメントを有効にすれば、デバッグやトラブルシューティングに役立つ。ログ記録のイネーブルメントは複数ある。

初期化中にログ記録をイネーブルメントする

デバッグメッセージをコンソールに記録するにはinitialize()、enableLogging: true以下を実行する:

1
2
3

initialize("YOUR-API-KEY", "YOUR-SDK-ENDPOINT", {
  enableLogging: true
});

初期化後にログ記録をイネーブルメントする

初期化後にSDKのログ出力をイネーブルメントまたは無効toggleLogging()にするには、以下を使用する：

1
2
3
4

import { toggleLogging } from "@braze/vega-sdk";

// Enable logging
toggleLogging();

カスタムロギング

SDKのログ処理をより細かくコントロールするために、カスタムロガー関数をsetLogger()指定するには``を使用する。

1
2
3
4
5
6

import { setLogger } from "@braze/vega-sdk";

setLogger((message) => {
  console.log("Braze Custom Logger: " + message);
  // Add your custom logging logic here
});

設定オプション

SDKの動作をカスタマイズするためにinitialize()、追加の設定オプションを渡すことができる：

1
2
3
4
5

await initialize("YOUR-API-KEY", "YOUR-SDK-ENDPOINT", {
  sessionTimeoutInSeconds: 60,        // Configure session timeout (default is 30 seconds)
  appVersionNumber: "1.2.3.4",        // Set your app version
  enableLogging: true,                 // Enable SDK logging
});

SDKをアップグレードする

NPMやYarnからBraze Vega SDKを参照している場合、パッケージ依存関係を更新することで最新版にアップグレードできる：

1
2
3

npm update @braze/vega-sdk
# or, using yarn:
yarn upgrade @braze/vega-sdk

統合のテスト

SDKの統合が正しく動作しているか確認するには：

  1. コンソールにデバッグメッセージを表示するにはenableLogging: true、SDKを初期化する。
  2. 他のSDKメソッドを呼び出す前にawait changeUser()必ず確認すること
  3. セッションを開始するにはawait openSession()電話をかけろ
  4. Brazeダッシュボードの「概要」で、セッションデータが記録されていることを確認せよ。
  5. カスタムイベントのテスト記録を行い、それがダッシュボードに表示されることを確認する
Github   GitHub でこのページを編集
New Stuff!