ブラウザ拡張子

この記事では、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 は、エクステンションの以下の領域に含めることができます。

エリア	詳細	サポートされるもの
ポップアップページ	ポップアップページは、ブラウザーのツールバーで拡張機能のアイコンをクリックするとユーザーに表示されるダイアログです。	分析、アプリ内メッセージ、およびコンテンツカード
バックグラウンドスクリプト	バックグラウンドスクリプト (マニフェスト v2のみ) は、エクステンションで、ユーザーナビゲーションの調査および相互作用や、Web ページの変更を行えるようにします (広告ブロッカーがページ上のコンテンツを検出および変更する方法など)。	分析、アプリ内メッセージ、コンテンツカード。バックグラウンドスクリプトはユーザーには表示されないため、メッセージングを行う場合は、メッセージを表示するときにブラウザーのタブやポップアップページで通信する必要があります。
オプションページ	[オプションページ ] を使用して、ユーザーはエクステンション内で設定を切り替えることができます。これは、新しいタブを開封するスタンドアロンのHTMLページです。	分析、アプリ内メッセージ、およびコンテンツカード

権限

Braze SDK (braze.min.js) をエクステンションとバンドルされたローカルファイルとして統合する場合、manifest.json で追加の権限は必要ありません。

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

はじめに

tip:

作業を始める前に、Web SDKの初期SDK設定ガイドを読んで、JavaScriptの統合全般について理解してください。

また、JavaScript SDK リファレンスをブックマークして、さまざまなSDK方法と設定オプションの詳細を確認することもできます。

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 を追加できます。

<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 変数がバックグラウンドスクリプトコンテキストで使用できるようになります。

{
    "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 reference を参照してください。

プッシュ

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

GitHub でこのページを編集

「このページはどの程度役に立ちましたか?」

クッキーと保存

Google Tag Manager