Skip to content

ブラウザ拡張子

この記事では、Braze Web SDK をブラウザーエクステンション (Google Chrome、Firefox) 内で使用する方法について説明します。

Braze Web SDK をブラウザーエクステンション内に統合し、分析を収集して、豊富なメッセージをユーザーに表示します。これには、Google Chrome ExtensionsとFirefox Add-Onsの両方が含まれます。

サポートされるもの

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

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

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

  • サービスワーカーは Braze Web SDK ではサポートされていませんが、このサポートについては将来検討される予定です。

拡張子の種類

Braze は、エクステンションの以下の領域に含めることができます。

権限

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 の外部でホストされたコピーを使用する場合は、外部リソースを読み込むには content_security_policy 設定を manifest.json で調整する必要があることに注意してください。

ダウンロードしたら、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>

バックグラウンドスクリプト(マニフェストv2 のみ)

エクステンションのバックグラウンドスクリプト内で Braze を使用するには、Braze ライブラリーを background.scripts 配列の manifest.json に追加します。これにより、グローバル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 を無効にできます。

1
2
3
4
5

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

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

プッシュ

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

Github   GitHub でこのページを編集
「このページはどの程度役に立ちましたか?」
New Stuff!