Skip to content

ブラウザ拡張機能

この記事では、Braze Web SDKをブラウザ拡張機能（Google Chrome、Firefox）内で使用する方法について説明します。

Braze Web SDKをブラウザ拡張機能内に統合し、分析を収集して、リッチなメッセージをユーザーに表示します。これには、Google Chrome ExtensionsとFirefox Add-Onsの両方が含まれます。

サポートされるもの

通常、拡張機能はHTMLおよびJavaScriptであるため、以下にBrazeを使用できます。

  • 分析:カスタムイベント、属性をキャプチャし、拡張機能内のリピートユーザーの識別も行います。これらのプロファイル特性を使用して、クロスチャネルメッセージングを強化します。
  • アプリ内メッセージ:ネイティブまたはカスタムのHTMLメッセージングを使用して、ユーザーが拡張機能内でアクションを取ったときにアプリ内メッセージをトリガーします。
  • Content Cards:オンボーディングまたはプロモーションコンテンツ用に、拡張機能にネイティブカードのフィードを追加します。
  • Webプッシュ:Webページが現在開かれていない場合でも、タイムリーに通知を送信します。

サポートされていないもの

  • サービスワーカーはBraze Web SDKではサポートされていませんが、将来的なサポートについてはロードマップで検討されています。

拡張機能の種類

Brazeは、拡張機能の以下の領域に含めることができます。

エリア 詳細 サポートされるもの
ポップアップページ ポップアップページは、ブラウザのツールバーで拡張機能のアイコンをクリックするとユーザーに表示されるダイアログです。 分析、アプリ内メッセージ、およびContent Cards
バックグラウンドスクリプト バックグラウンドスクリプト（Manifest v2のみ）は、拡張機能でユーザーナビゲーションの調査および操作や、Webページの変更を行えるようにします（広告ブロッカーがページ上のコンテンツを検出および変更する方法など）。 分析、アプリ内メッセージ、およびContent Cards。

バックグラウンドスクリプトはユーザーには表示されないため、メッセージングを行う場合は、メッセージを表示するときにブラウザのタブやポップアップページと通信する必要があります。
オプションページ オプションページを使用すると、ユーザーは拡張機能内で設定を切り替えることができます。これは、新しいタブを開くスタンドアロンのHTMLページです。 分析、アプリ内メッセージ、およびContent Cards

権限

Braze SDK（braze.min.js）を拡張機能にバンドルされたローカルファイルとして統合する場合、manifest.jsonで追加の権限は必要ありません。

ただし、Google Tag Managerを使用するか、外部URLからBraze SDKを参照するか、拡張機能に厳密なコンテンツセキュリティポリシーを設定した場合は、manifest.jsonのcontent_security_policy設定を調整して、リモートスクリプトソースを許可する必要があります。

はじめに

Braze Web SDKを統合するには、まず最新のJavaScriptライブラリーのコピーをダウンロードする必要があります。これは、NPMを使用するか、Braze CDNから直接ダウンロードすることで実行できます。

または、Google Tag Managerを使用するか、Braze SDKの外部ホストされたコピーを使用する場合は、外部リソースを読み込むにはmanifest.jsonのcontent_security_policy設定を調整する必要があることに注意してください。

ダウンロードしたら、braze.min.jsファイルを拡張機能のディレクトリー内の任意の場所にコピーします。

拡張機能のポップアップにBrazeを追加するには、通常のWebサイトと同様に、popup.htmlでローカルJavaScriptファイルを参照します。Google Tag Managerを使用している場合は、代わりにGoogle Tag Managerテンプレートを使用してBrazeを追加できます。

1
2
3
4
5
6
7
8

<html>
    <title>popup.html</title>
    <!-- Add the Braze library -->
    <script src="/relative/path/to/braze.min.js"></script>
    <script>
    // Initialize Braze here
    </script>
</html>

バックグラウンドスクリプト（Manifest v2のみ）

拡張機能のバックグラウンドスクリプト内でBrazeを使用するには、Brazeライブラリーをmanifest.jsonのbackground.scripts配列に追加します。これにより、グローバルbraze変数がバックグラウンドスクリプトコンテキストで使用できるようになります。

1
2
3
4
5
6
7
8
9

{
    "manifest_version": 2,
    "background": {
        "scripts": [
            "relative/path/to/braze.min.js",
            "background.js"
        ]
    }
}

オプションページ

オプションページを（optionsまたはoptions_uiマニフェストプロパティを介して）使用する場合、popup.htmlの説明と同じ方法でBrazeを組み込むことができます。

初期化

SDKが組み込まれると、通常どおりにライブラリーを初期化できます。

Cookieはブラウザ拡張機能ではサポートされていないため、noCookies: trueで初期化することでCookieを無効にできます。

braze.initialize("YOUR-API-KEY-HERE", {
    baseUrl: "YOUR-API-ENDPOINT",
    enableLogging: true,
    noCookies: true
});

サポートされている初期化オプションの詳細については、Web SDKリファレンスを参照してください。

プッシュ

拡張機能のポップアップダイアログではプッシュプロンプトを使用できません（ナビゲーションにURLバーがありません）。そのため、拡張機能のポップアップダイアログ内でプッシュ通知の権限を登録してリクエストするには、代替プッシュドメインで説明されているように、代替ドメインの回避策を使用する必要があります。
New Stuff!