Skip to content

ブラウザ拡張機能

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

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

サポート対象

一般に、拡張機能はHTMLとJavaScriptであるため、Brazeは次の目的で使用できます。

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

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

  • Manifest v3 Service Worker は、Web 環境向けのモジュールのインポートをサポートしていません。

拡張機能の種類

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

エリア 詳細 サポート対象
ポップアップページ ポップアップ ページは、ブラウザツールバーの拡張機能のアイコンをクリックしたときにユーザーに表示できるダイアログです。 アナリティクス、アプリ内メッセージ、コンテンツカード
バックグラウンド スクリプト バックグラウンド スクリプト (Manifest v2 のみ) を使用すると、拡張機能でユーザー ナビゲーションを検査して操作したり、Web ページを変更したりできます (たとえば、広告ブロッカーがページ上のコンテンツを検出して変更する方法)。 分析、アプリ内メッセージ、コンテンツカード。

バックグラウンドスクリプトはユーザーには表示されないため、メッセージングの場合、メッセージを表示するときにブラウザーのタブまたはポップアップページと通信する必要があります。
オプション ページ [オプション] ページで は、ユーザーは拡張機能内の設定を切り替えることができます。これは、新しいタブを開くスタンドアロンの HTML ページです。 アナリティクス、アプリ内メッセージ、コンテンツカード

権限

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_policymanifest.jsonを読み込むには、.

ダウンロードしたら、必ずファイルを拡張機能のディレクトリのどこかにコピー braze.min.js してください。

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

```html

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

### バックグラウンド スクリプト (マニフェスト v2 のみ) {#background-script}

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


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

[オプション] ページ

オプションページ(またはoptionsoptions_uiマニフェストプロパティを使用)を使用する場合は、手順と同じようにpopup.htmlBrazeを含めることができます。

初期化

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 でこのページを編集
「このページはどの程度役に立ちましたか?」
New Stuff!