Web Braze SDKについて

Web Braze SDKを使用すると、分析データを収集し、リッチなアプリ内メッセージ、プッシュ通知、Content Cardsメッセージを Web ユーザーに表示できます。詳しくは、Braze JavaScriptリファレンスドキュメントを参照してください。

注

このガイドでは、Braze Web SDK 4.0.0+ のコードサンプルを使用します。最新の Web SDK バージョンにアップグレードするには、SDK アップグレードガイドを参照してください。

Web SDKを統合する

以下の方法でWeb Braze SDKを統合できます。その他のオプションについては、その他の統合方法を参照してください。

• コードベースの統合： お好みのパッケージマネージャーまたはBraze CDNを使用して、Web Braze SDKをコードベースに直接統合します。これにより、SDKの読み込みと設定を完全にコントロールできます。
• Google Tag マネージャー： サイトのコードを変更せずにWeb Braze SDKを統合できるノーコードソリューションです。詳しくは、Google Tag マネージャー with the Braze SDKを参照してください。

重要

NPM統合方法の使用を推奨します。この方法には、SDKライブラリをWebサイトにローカル保存できること、広告ブロッカー拡張機能の影響を受けないこと、バンドラーサポートの一部として読み込み時間の短縮に貢献することなどのメリットがあります。

• コードベースの統合
• google tag マネージャー

ステップ1：Brazeライブラリをインストールする

以下のいずれかの方法でBrazeライブラリをインストールできます。ただし、WebサイトでContent-Security-Policyを使用している場合は、続行する前にContent Security Policyを確認してください。

重要

ほとんどの広告ブロッカーはBraze Web SDKをブロックしませんが、一部のより制限の厳しい広告ブロッカーでは問題が発生することが知られています。

• package マネージャー
• braze cdn

サイトでNPMまたはYarnパッケージマネージャーを使用している場合は、Braze NPMパッケージを依存関係として追加できます。

Typescriptの型定義はv3.0.0から含まれています。2.xから3.xへのアップグレードに関する注意事項については、変更ログを参照してください。

1
2
3
npm install --save @braze/web-sdk
# or, using yarn:
# yarn add @braze/web-sdk

インストール後、通常の方法でライブラリをimportまたはrequireできます：

1
2
3
import * as braze from "@braze/web-sdk";
// or, using `require`
const braze = require("@braze/web-sdk");

CDNでホストされているスクリプトを参照して、Braze Web SDKをHTMLに直接追加します。これにより、ライブラリが非同期で読み込まれます。

重要

Safariのデフォルトのクロスサイトトラッキング防止設定により、CDN統合方法を使用するとバナーやContent Cardsなどのアプリ内メッセージタイプが表示されない場合があります。この問題を回避するには、NPM統合方法を使用してください。これにより、Safariがこれらのメッセージをクロスサイトトラフィックとして分類せず、すべてのサポートされているブラウザでWebユーザーがメッセージを表示できるようになります。

ステップ2：SDKを初期化する

Braze Web SDKをWebサイトに追加した後、Brazeダッシュボードの設定 > アプリ設定にあるAPIキーとSDKエンドポイントURLを使用してライブラリを初期化します。braze.initialize()のオプションの完全なリストやその他のJavaScriptメソッドについては、Braze JavaScriptドキュメントを参照してください。

注

Web SDKリクエストのカスタムドメインはサポートされていません： Web SDKのbaseUrlはBraze SDKエンドポイント（例：sdk.iad-05.braze.com）である必要があります。BrazeはCNAMEレコードを介した顧客所有ドメイン経由でのWeb SDKトラフィックのルーティングをサポートしていません。Web SDKリクエストを独自のドメインから発信する必要がある場合は、Brazeサポートにお問い合わせください。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
// initialize the SDK
braze.initialize('YOUR-API-KEY-HERE', {
    baseUrl: "YOUR-SDK-ENDPOINT-HERE",
    enableLogging: false, // set to `true` for debugging
    allowUserSuppliedJavascript: false, // set to `true` to support custom HTML messages
});

// Enable automatic display of in-app messages
// Required if you want in-app messages to display automatically when triggered
braze.automaticallyShowInAppMessages();

// if you use Content Cards
braze.subscribeToContentCardsUpdates(function(cards){
    // cards have been updated
});

// optionally set the current user's external ID before starting a new session
// you can also call `changeUser` later in the session after the user logs in
if (isLoggedIn){
    braze.changeUser(userIdentifier);
}

// `openSession` should be called last - after `changeUser` and `automaticallyShowInAppMessages`
braze.openSession();

重要

アプリ内メッセージの表示： トリガーされたアプリ内メッセージを自動的に表示するには、braze.automaticallyShowInAppMessages()を呼び出す必要があります。この呼び出しがないと、アプリ内メッセージは自動的に表示されません。メッセージの表示を手動で管理する場合は、この呼び出しを削除し、代わりにbraze.subscribeToInAppMessage()を使用してください。詳しくは、自動トリガーの無効化を参照してください。

匿名ユーザーのセッションが欠落する場合のトラブルシューティング

「セッションが欠落」する動作が見られる場合、またはWebで匿名のままのユーザーのセッションをトラッキングできない場合は、統合で初期化時にbraze.openSession()を呼び出していることを確認してください。

• シナリオ： 匿名ユーザーはBraze IDを返すことができますが、セッションデータが空または欠落しています。
• 原因： 実装でbraze.openSession()が呼び出されていません。
• 解決方法： 初期化後（およびexternal IDを設定する場合はbraze.changeUser()の後）に、常にbraze.openSession()を呼び出してください。

詳しくは、ステップ2：SDKを初期化するを参照してください。

重要

モバイルまたはWebデバイスの匿名ユーザーは、MAUにカウントされる場合があります。その結果、MAUカウントからこれらのユーザーを除外するために、SDKの読み込みまたは初期化を条件付きで行うことを検討してください。

前提条件

この連携方法を使用する前に、Google Tag マネージャーのアカウントとコンテナを作成する必要があります。

ステップ 1: タグテンプレートギャラリーを開く

Google Tag マネージャーでワークスペースを選択し、Templatesを選びます。Tag Templateペインで、Search Galleryを選択します。

ステップ 2: 初期化タグのテンプレートを追加する

テンプレートギャラリーで braze-inc を検索し、Braze Initialization Tagを選択します。

Add to workspace > Addを選択します。

ステップ 3: タグを設定する

Templatesセクションから、新しく追加したテンプレートを選択します。

鉛筆アイコンを選択して、Tag Configurationのドロップダウンを開きます。

必要な最低限の情報を入力します。

フィールド	説明
API Key	Braze APIキー。BrazeダッシュボードのSettings > App Settingsにあります。
API Endpoint	RESTエンドポイントのURLです。エンドポイントは、インスタンスのBraze URLによって異なります。
SDK Version	変更ログに記載されている最新のWeb Braze SDKの MAJOR.MINOR バージョンです。たとえば、最新バージョンが 4.1.2 の場合、4.1 と入力します。詳細については、SDKのバージョン管理についてを参照してください。

追加の初期化設定を行うには、Braze Initialization Optionsを選択し、必要なオプションを選びます。

ステップ 4: 初期化オプションを選択する

Braze Initialization Tagは以下のオプションを公開しています。これらのほとんどはWeb SDKの InitializationOptionsに直接対応しており、一部はタグが初期化時に呼び出すWeb SDKメソッドに対応しています。連携のニーズに合うオプションを選択してください。

GTMオプション	Web SDKの設定またはメソッド	説明
Allow HTML In-App Messages	allowUserSuppliedJavascript	HTMLアプリ内メッセージ、バナー、およびユーザー提供のJavaScriptクリックアクションを有効にします。カスタムHTMLを使用するHTMLアプリ内メッセージやバナーに必須です。HTMLとJavaScriptのコンテンツを信頼できる場合にのみ有効にしてください。ユーザー提供のJavaScript実行を許可するためです。
App Version Number	appVersion, appVersionNumber	セグメンテーション用のアプリバージョン（例: 1.2.3.4）。
Automatically Open New Session	braze.openSession()	このメソッドを呼び出すことで、SDKの初期化後に新しいセッションを自動的に開きます。
Automatically show new in app messages	braze.automaticallyShowInAppMessages()	初期化後にこのメソッドを呼び出すことで、サーバーから新しいアプリ内メッセージが届いた際に自動的に表示します。
Disable Automatic プッシュトークン Maintenance	disablePushTokenMaintenance	新しいセッションでSDKがプッシュトークンをBrazeバックエンドと同期するのを停止します。
Disable Automatic Service Worker Registration	manageServiceWorkerExternally	サービスワーカーを自分で登録・制御する場合に使用します。
Disable Cookies	noCookies	ユーザー/セッションデータにCookieではなくlocalStorageを使用します。クロスサブドメイン認識を防ぎます。
Disable Font Awesome	doNotLoadFontAwesome	SDKがCDNからFont Awesomeを読み込むのを防ぎます。サイトに独自のFont Awesomeがある場合に使用します。
Enable SDK Authentication	enableSdkAuthentication	SDK認証を有効にします。
Enable Web SDK Logging	enableLogging	デバッグ用のコンソールログを有効にします。本番環境では削除してください。
Minimum Interval Between Triggered Messages	minimumIntervalBetweenTriggerActionsInSeconds	トリガーアクション間の最小秒数（デフォルト: 30）。
Open Cards in New Tab	openCardsInNewTab	デフォルトのフィードUIを使用している場合、Content Cardsのリンクを新しいタブで開きます。
Service Worker Location	serviceWorkerLocation	サービスワーカーファイルのカスタムパス（デフォルト: /service-worker.js）。
Session Timeout (seconds)	sessionTimeoutInSeconds	セッションタイムアウト（秒単位）（デフォルト: 1800）。

注

Google Tag マネージャーのBraze Initialization Tagを使用する際にカスタムHTMLアプリ内メッセージを有効にするには、Braze Initialization OptionsでAllow HTML In-App Messagesを選択します。このチェックボックスは braze.initialize() の allowUserSuppliedJavascript 初期化オプションに対応し、true に設定します。Google Tag マネージャーのBraze Initialization Tagは、オプション名ではなくこのラベルを使用します。

GTMテンプレートで公開されていないオプション（contentSecurityNonce、localization、devicePropertyAllowlist など）については、代わりにランタイム初期化を使用してください。

ステップ 5: すべてのページでトリガーされるように設定する

初期化タグはサイトのすべてのページで実行する必要があります。これにより、Braze SDKメソッドを使用し、Webプッシュの分析を記録できるようになります。

重要

タグの順序付け: Braze Initialization Tagは、Braze SDKメソッドを呼び出す他のすべてのタグ（braze.getUser() や braze.logCustomEvent() など）よりも先に発火する必要があります。SDKが初期化される前にカスタムイベント、ユーザー属性、またはその他のBrazeメソッド呼び出しが発火すると、Uncaught TypeError: Cannot read properties of undefined (reading 'getUser') のようなエラーが発生する可能性があります。適切な順序を確保するには、Braze Initialization Tagをセットアップタグとして設定するか、GTMのタグ順序付け機能を使用して最初に発火するようにしてください。詳細については、Brazeアクションタグのタグ順序付けを参照してください。

ステップ 6: 連携を確認する

以下のいずれかの方法で連携を確認できます。

• オプション 1: Google Tag マネージャーのデバッグツールを使用して、設定したページやイベントでBraze Initialization Tagが正しくトリガーされているか確認できます。
• オプション 2: Webページからのネットワークリクエストを確認し、Brazeへのリクエストが行われているか確認します。さらに、グローバルの window.braze ライブラリが定義されていることを確認してください。

ボットトラフィックのフィルタリング

MAUにはボットユーザーの割合が含まれる場合があり、月間アクティブユーザー数が水増しされることがあります。Braze Web SDKには、検索エンジンのボットやソーシャルメディアのプレビューボットなど、一般的なWebクローラーの検出機能が組み込まれていますが、SDKの更新だけでは常にすべての新しいボットを検出できるわけではないため、ボットを検出するための堅牢なソリューションを積極的に導入することが特に重要です。

SDK側のボット検出の限界

Web SDKには、既知のクローラーを除外する基本的なユーザーエージェントベースのボット検出機能が組み込まれています。しかし、この方法には限界があります。

• 新しいボットが次々と出現する： AI企業やその他の関係者は、検出を回避するために偽装する可能性のある新しいボットを定期的に作成しています。
• ユーザーエージェントの偽装： 高度なボットは、正当なブラウザーのユーザーエージェントを模倣できます。
• カスタムボット： 技術的知識のないユーザーでも、大規模言語モデル（LLM）を使って簡単にボットを作成できるようになり、ボットの挙動は予測不能になっています。

ボットフィルタリングの実装

重要

以下に述べるソリューションは一般的な提案です。ボットフィルタリングのロジックを、独自の環境とトラフィックパターンに合わせて調整してください。

最も堅牢なソリューションは、Braze SDKを初期化する前に独自のボットフィルタリングロジックを実装することです。一般的な手法には以下が含まれます。

ユーザー操作を必須にする

ユーザーがCookie同意バナーの承諾、スクロール、クリックなどの意味のある操作を行うまで、SDKの初期化を遅らせることを検討してください。この手法は実装が容易な場合が多く、ボットトラフィックのフィルタリングに非常に効果的です。

重要

SDKの初期化をユーザー操作まで遅らせると、バナーやContent Cardsもその操作が行われるまで表示されない可能性があります。

カスタムボット検出

特定のボットトラフィックパターンに基づいてカスタム検出を実装します。例えば：

• トラフィックで識別したパターンについて、ユーザーエージェント文字列を分析する
• ヘッドレスブラウザーの指標を確認する
• サードパーティのボット検出サービスを利用する
• サイト固有の行動シグナルを監視する

条件付き初期化の例：

1
2
3
4
5
6
7
8
// Only initialize Braze if your custom bot detection determines this is not a bot
if (!isLikelyBot()) {
  braze.initialize('YOUR-API-KEY-HERE', {
    baseUrl: "YOUR-SDK-ENDPOINT-HERE"
  });
  braze.automaticallyShowInAppMessages();
  braze.openSession();
}

ベストプラクティス

• MAUデータとWebトラフィックのパターンを定期的に分析し、新たなボットの行動を識別してください。
• ボットフィルタリングが正当なユーザーのトラッキングを妨げないよう、徹底的にテストしてください。
• 環境内で観察されるボットのトラフィックパターンに基づいて、フィルタリングロジックを更新してください。

オプションの設定

ロギング

ロギングを素早く有効にするには、Webサイトの URL にパラメーターとして ?brazeLogging=true を追加します。または、基本ロギングやカスタムロギングを有効にすることもできます。すべてのプラットフォームにわたる一元的な概要については、詳細ログを参照してください。

基本ロギング

• 初期化前
• 初期化後

1
enableLogging: true

1
2
3
4
5
braze.initialize('API-KEY', {
    baseUrl: 'API-ENDPOINT',
    enableLogging: true
});
braze.openSession();

1
2
3
4
5
6
braze.initialize('API-KEY', {
    baseUrl: 'API-ENDPOINT',
});
braze.openSession();
...
braze.toggleLogging();

重要

基本ログはすべてのユーザーに表示されるため、コードを本番環境にリリースする前に、無効にするか、setLogger に切り替えることを検討してください。

カスタムロギング

カスタムデバッグメッセージをJavaScriptコンソールに記録するには、setLogger を使用します。基本ログとは異なり、これらのログはユーザーには表示されません。

1
setLogger(loggerFunction: (message: STRING) => void): void

STRING を単一の文字列パラメーターとしてメッセージに置き換えます。メソッドは以下のようになります：

1
2
3
4
5
braze.initialize('API-KEY');
braze.setLogger(function(message) {
    console.log("Braze Custom Logger: " + message);
});
braze.openSession();

SDKのアップグレード

注

このガイドでは、Braze Web SDK 4.0.0+ のコードサンプルを使用します。最新の Web SDK バージョンにアップグレードするには、SDK アップグレードガイドを参照してください。

BrazeのコンテンツデリバリーネットワークからBraze Web SDKを参照している場合（例：https://js.appboycdn.com/web-sdk/a.a/braze.min.js、デフォルトの統合手順で推奨されています）、ユーザーがサイトを更新すると、マイナーアップデート（バグ修正や後方互換性のある機能、この例ではa.a.aからa.a.zのバージョン）が自動的に適用されます。

ただし、メジャーチェンジがリリースされた場合は、破壊的変更が統合に影響しないよう、Braze Web SDKを手動でアップグレードする必要があります。また、SDKをダウンロードしてご自身でホストしている場合は、バージョン更新が自動的に行われないため、最新の機能やバグ修正を受け取るには手動でアップグレードする必要があります。

最新リリースの情報は、お好みのRSSリーダーやサービスでリリースフィードをフォローすることで確認できます。また、Web SDKのリリース履歴の全記録については、変更ログを参照してください。Braze Web SDKをアップグレードするには、以下の手順を行います。

• https://js.appboycdn.com/web-sdk/[OLD VERSION NUMBER]/braze.min.jsのバージョン番号を変更するか、パッケージマネージャーの依存関係を更新して、Brazeライブラリのバージョンを更新します。
• Webプッシュを統合している場合は、サイト上のService Workerファイルを更新します。デフォルトでは、このファイルはサイトのルートディレクトリの/service-worker.jsに配置されていますが、統合によってはカスタマイズされている場合があります。Service Workerファイルをホストするには、ルートディレクトリにアクセスする必要があります。

正常に機能させるためには、これら2つのファイルを連携して更新する必要があります。

その他の統合方法

Accelerated Mobile Pages (AMP)

1
<script async custom-element="amp-web-push" src="https://cdn.ampproject.org/v0/amp-web-push-0.1.js"></script>

1
2
3
4
5
6
7
8
9
<!-- A subscription widget -->
<amp-web-push-widget visibility="unsubscribed" layout="fixed" width="250" height="80">
  <button on="tap:amp-web-push.subscribe">Subscribe to Notifications</button>
</amp-web-push-widget>

<!-- An unsubscription widget -->
<amp-web-push-widget visibility="subscribed" layout="fixed" width="250" height="80">
  <button on="tap:amp-web-push.unsubscribe">Unsubscribe from Notifications</button>
</amp-web-push-widget>

1
2
3
4
5
6
7
<amp-web-push
layout="nodisplay"
id="amp-web-push"
helper-iframe-url="FILE_PATH_TO_YOUR_HELPER_IFRAME"
permission-dialog-url="FILE_PATH_TO_YOUR_PERMISSION_DIALOG"
service-worker-url="FILE_PATH_TO_YOUR_SERVICE_WORKER?apiKey={YOUR_API_KEY}&baseUrl={YOUR_BASE_URL}"
>

Asynchronous Module Definition (AMD)

サポートの無効化

サイトがRequireJSやその他のAMDモジュールローダーを使用しているが、このリストの他のオプションを通じてBraze Web SDKを読み込みたい場合は、AMDサポートを含まないバージョンのライブラリを読み込むことができます。このバージョンのライブラリは以下のCDNから読み込めます：

モジュールローダー

RequireJSやその他のAMDモジュールローダーを使用する場合は、ライブラリのコピーをセルフホスティングし、他のリソースと同様に参照することを推奨します：

1
2
3
4
5
6
require(['path/to/braze.min.js'], function(braze) {
  braze.initialize('YOUR-API-KEY-HERE', { baseUrl: 'YOUR-SDK-ENDPOINT' });
  // Required if you want in-app messages to display automatically
  braze.automaticallyShowInAppMessages();
  braze.openSession();
});

Electron

ElectronはWebプッシュ通知を公式にはサポートしていません（このGitHubイシューを参照）。Brazeではテストされていませんが、試すことができる他のオープンソースの回避策があります。

Jestフレームワーク

Jestを使用する際、SyntaxError: Unexpected token 'export'のようなエラーが表示されることがあります。これを修正するには、package.jsonの設定を調整してBraze SDKを無視するようにします：

1
2
3
4
5
"jest": {
  "transformIgnorePatterns": [
    "/node_modules/(?!@braze)"
  ]
}

SSRフレームワーク

Web SDKはブラウザ環境で動作します。SSRフレームワークでは、サーバーがSDKコードを実行しないように、クライアント専用コンポーネントでBrazeを初期化します。

フレームワークに依存しないダイナミックインポート

このセクションにフレームワークが記載されていない場合は、クライアント専用のライフサイクルフックからBrazeをダイナミックインポートできます。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// MyComponent/braze-exports.js
// Export the parts of the SDK that you need.
export { initialize, openSession } from "@braze/web-sdk";

// MyComponent/MyComponent.js
useEffect(() => {
    import("./braze-exports.js").then(({ initialize, openSession }) => {
        initialize("YOUR-API-KEY-HERE", {
            baseUrl: "YOUR-SDK-ENDPOINT",
            enableLogging: true,
        });
        openSession();
    });
}, []);

webpackを使用している場合は、特定のSDKエクスポートのみをダイナミックインポートできます。

1
2
3
4
5
6
7
8
9
10
11
12
13
// MyComponent.js
useEffect(() => {
    import(
        /* webpackExports: ["initialize", "openSession"] */
        "@braze/web-sdk"
    ).then(({ initialize, openSession }) => {
        initialize("YOUR-API-KEY-HERE", {
            baseUrl: "YOUR-SDK-ENDPOINT",
            enableLogging: true,
        });
        openSession();
    });
}, []);

Next.jsとRemix用の共有フック

再利用可能なuseBrazeフックを作成し、アプリのルート付近で呼び出します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
// hooks/useBraze.ts
import { useEffect, useRef } from "react";

export function useBraze() {
  const didInit = useRef(false);

  useEffect(() => {
    if (didInit.current) {
      return;
    }
    didInit.current = true;

    import("@braze/web-sdk")
      .then((braze) => {
        const initialized = braze.initialize("YOUR-API-KEY-HERE", {
          // Use your Braze Web SDK endpoint, such as sdk.iad-01.braze.com.
          baseUrl: "YOUR-SDK-ENDPOINT",
          enableLogging: false,
        });
        if (!initialized) {
          return;
        }

        // Optional: Identify signed-in users before opening a session.
        // braze.changeUser("external-id");

        // Optional: Automatically display in-app messages.
        // braze.automaticallyShowInAppMessages();
        braze.openSession();
      })
      .catch((error) => {
        console.error("Unable to load Braze SDK:", error);
      });
  }, []);
}

Next.js（App Router）

クライアントコンポーネントでuseBrazeを呼び出し、アプリをラップします。

1
2
3
4
5
6
7
8
9
10
// app/components/AppRoot.tsx
"use client";

import type { ReactNode } from "react";
import { useBraze } from "../hooks/useBraze";

export function AppRoot({ children }: { children: ReactNode }) {
  useBraze();
  return <>{children}</>;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// app/layout.tsx
import type { ReactNode } from "react";
import { AppRoot } from "./components/AppRoot";

export default function RootLayout({
  children,
}: {
  children: ReactNode;
}) {
  return (
    <html lang="en">
      <body>
        <AppRoot>{children}</AppRoot>
      </body>
    </html>
  );
}

Next.js（Pages Router）

カスタムアプリコンポーネントの先頭でuseBrazeを呼び出します。

1
2
3
4
5
6
7
8
9
10
11
// pages/_app.tsx
import type { AppProps } from "next/app";
import { useBraze } from "../hooks/useBraze";

export default function App({ Component, pageProps }: AppProps) {
  useBraze();

  return (
    <Component {...pageProps} />
  );
}

Remix

ルートルートコンポーネントの先頭でuseBrazeを呼び出します。

ローカルのRemix検証例を実行するには、PORT=4013 npm run devを使用します。

1
2
3
4
5
6
7
8
9
// app/root.tsx
import { Outlet } from "@remix-run/react";
import { useBraze } from "./hooks/useBraze";

export default function App() {
  useBraze();

  return <Outlet />;
}

イベントのログとユーザーの更新

useBrazeがアプリのルートでSDKを初期化した後、他のクライアントコンポーネントからBrazeのメソッドを呼び出すことができます。一般的なパターンは、onClickやonSubmitなどのユーザーアクション内でメソッドを呼び出すことです。この例では、SDKメソッドはファイルの先頭ではなくクリックハンドラー内で読み込まれます。これにより、Web SDKをサーバーコードから分離し、そのアクションに必要なものだけを読み込みます。webpackExportsコメントは、どのメソッドを含めるかをwebpackに指示するため、バンドルサイズが小さくなります。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// app/components/BuyButton.tsx
"use client";

export function BuyButton() {
  const handleClick = async () => {
    const { logCustomEvent, logPurchase, getUser } = await import(
      /* webpackExports: ["logCustomEvent", "logPurchase", "getUser"] */
      "@braze/web-sdk"
    );

    getUser()?.setCustomUserAttribute("last_purchase_date", "2026-05-04");
    logCustomEvent("clicked_buy", { source: "product_page" });
    logPurchase("sku_123", 19.99, "USD");
  };

  return <button onClick={handleClick}>Buy</button>;
}

この例は、ユーザーがBuyをクリックしたときにアクティビティをログするBuyButtonコンポーネントを示しています。まず、クリック時にlogCustomEvent、logPurchase、getUserのみをインポートします。次に、ユーザー属性を更新し、カスタムイベントをログし、購入をログします。このパターンにより、初期化をuseBrazeに集中させつつ、任意のクライアントコンポーネントから意味のあるアクションをトラッキングできます。

RemixとViteを使用していて、パッケージルートインポートがランタイムで失敗する場合は、既存のViteの回避策を使用してください。詳細については、Viteを参照してください。

利用可能なメソッドの完全なリストについては、Braze JavaScriptリファレンスドキュメントを参照してください。

Tealium iQ

Tealium iQは、基本的なターンキーのBraze統合を提供しています。統合を設定するには、Tealiumタグ管理インターフェイスでBrazeを検索し、ダッシュボードからWeb SDK APIキーを入力します。

詳細やTealiumの設定サポートについては、統合ドキュメントを確認するか、Tealiumのアカウントマネージャーにお問い合わせください。

Vite

Viteを使用していて、循環依存関係に関する警告やUncaught TypeError: Class extends value undefined is not a constructor or nullが表示される場合は、Braze SDKをViteの依存関係の検出から除外する必要があるかもしれません：

1
2
3
optimizeDeps: {
    exclude: ['@braze/web-sdk']
},

その他のタグマネージャー

Brazeは、カスタムHTMLタグ内で統合手順に従うことで、他のタグ管理ソリューションとも互換性がある場合があります。これらのソリューションの評価についてサポートが必要な場合は、Brazeの担当者にお問い合わせください。