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の外部ホストコピーを使用する場合は、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>

バックグラウンドスクリプト(マニフェスト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 reference を参照してください。

プッシュ

拡張ポップアップダイアログでは、プッシュプロンプトは使用できません(ナビゲーションにURL バーはありません)。そのため、拡張のポップアップダイアログ内でプッシュ許可を登録して要求するには、代替プッシュドメイン.

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