デバイス ID を使用してクロスドメインの Web SDK ユーザーをリンクする
2つのドメインでCookieを共有できない場合、Braze Web SDKのデバイス ID をリンク先 URL に渡すことで、両方のサイトの匿名セッションを同じ Braze ユーザープロファイルにマッピングできます。
この例について
架空のキッチン用品小売店 Kitchenerie は、マーケティングサイト（kitchenerie.com）とショップ（kitchenerie.shop）を運営しています。各ドメインにはそれぞれ独自の Braze Web SDK統合があります。ブラウザのCookieはドメインをまたがないため、同じユーザーがマーケティングサイトからショップに移動すると、Braze は別々のデバイス ID（および別々の匿名プロファイル）を割り当てます。
このパターンでは、以下を行います。
- SDKの初期化後に、ソースドメインで
getDeviceIdを使用してデバイス ID を読み取ります - アウトバウンドリンクにクエリパラメーターとして追加します（例:
brazeDeviceId） - 送信先ドメインで、そのパラメーターを読み取り、
deviceIdオプションを通じてbraze.initializeに渡します
このハンドオフは、匿名ユーザーにとって最も重要です。ユーザーがショップでログインした後は、external_id を使用した changeUser がデバイスをまたぐ永続的な識別子になります。ユーザー ID の設定を参照してください。
イベントが1つのプロファイルに記録されるように、両方のドメインで同じ Braze ワークスペースAPIキーとSDKエンドポイントを使用する必要があります。
考慮事項
- デバイス IDはブラウザごとに割り当てられます。このパターンは、異なるブラウザ、デバイス、またはプロファイル間のアクティビティをリンクしません。認証済みのクロスデバイスIDには、
changeUserを通じてexternal_idを使用してください。 - デバイス IDは、ソースドメインでWeb SDKが初期化された後にのみ取得してください。
initializeの前にgetDeviceIdを呼び出しても、値は返されません。 - Web SDKは
initialize時にdeviceIdを一度読み取ります。初期化後にアクティブなデバイス IDを変更するsetDeviceIdはありません。initializeを呼び出す前に、宛先ドメインでURLパラメーターを読み取ってください。 brazeDeviceIdなしでショップへの直接アクセス、ブックマーク、またはサードパーティからの参照があった場合は、デフォルトのデバイス ID割り当てにフォールバックする必要があります。これは、継承するソースドメインのIDがない場合に想定される動作です。- クエリパラメーターはブラウザの履歴やサーバーログに表示されます。
- クエリパラメーターはリファラーヘッダーを通じて漏洩する可能性があります。デバイス ID単体ではPIIではありませんが、プライバシーチームが求める場合は、使用後にパラメーターを削除してください（ステップ2を参照）。
- エンドツーエンドのテストを行ってください。ドメイン2のイベントが期待されるデバイス IDを使用していることを、ネットワークインスペクションで確認してください。
- ホスト名、リンクセレクター、エラーハンドリングをお使いのサイトに合わせて調整してください。本番環境にデプロイする前に、開発環境でテストしてください。
セットアップ
ステップ1: ソースドメインでクロスドメインリンクにデバイスIDを付加する
kitchenerie.com（ドメイン1）で、通常どおりWeb SDKを初期化し、kitchenerie.shop（ドメイン2）へのリンクに現在のデバイスIDを付加します。
サイトと競合しないクエリパラメータ名を選択してください（この例ではbrazeDeviceIdを使用しています）。同じアイデアは、サーバーレンダリングされたリンク、クライアントサイドのナビゲーション、または制御可能なiframeのsrc値にも適用されます。
import * as braze from "@braze/web-sdk";
braze.initialize("YOUR-API-KEY-HERE", {
baseUrl: "YOUR-SDK-ENDPOINT-HERE",
});
braze.openSession();
const destinationHost = "kitchenerie.shop";
braze.getDeviceId(function (deviceId) {
if (!deviceId) {
return;
}
const links = document.querySelectorAll('a[href*="' + destinationHost + '"]');
links.forEach(function (link) {
try {
const url = new URL(link.href);
url.searchParams.set("brazeDeviceId", deviceId);
link.href = url.toString();
} catch (e) {
// Skip malformed hrefs (for example, javascript:, mailto:, or unparsable relative paths).
}
});
});
お使いのSDKバージョンがgetDeviceIdを同期的に公開している（コールバックなし）場合は、初期化後に呼び出してください。
const deviceId = braze.getDeviceId();
Web SDKリポジトリガイド — デバイスIDの取得および初期化オプション — deviceIdを参照してください。
ステップ2: 送信先ドメインでデバイスIDを読み取りWeb SDKを初期化する
kitchenerie.shop（ドメイン2）で、initializeの前にクエリ文字列からbrazeDeviceIdを読み取り、値が存在する場合は初期化オプションに渡します。
import * as braze from "@braze/web-sdk";
const urlParams = new URLSearchParams(window.location.search);
const passedDeviceId = urlParams.get("brazeDeviceId");
const initOptions = {
baseUrl: "YOUR-SDK-ENDPOINT-HERE",
};
if (passedDeviceId) {
initOptions.deviceId = passedDeviceId;
}
braze.initialize("YOUR-API-KEY-HERE", initOptions);
braze.openSession();
// Optional: remove the parameter from the visible URL after consumption.
if (passedDeviceId) {
const cleanUrl = new URL(window.location.href);
cleanUrl.searchParams.delete("brazeDeviceId");
window.history.replaceState({}, document.title, cleanUrl.toString());
}
ユーザーがログインしたら、external_idを指定してchangeUserを呼び出し、以降のアクティビティが識別済みプロファイルに紐づくようにします。
ステップ3: ハンドオフを検証する
- ログインしていないブラウザでドメイン1を開きます。
- クロスドメインリンクをたどってドメイン2に移動します。
- ブラウザのネットワークタブで、ドメイン2がドメイン1と同じデバイスIDでイベントを送信していることを確認します。
- ドメイン2に直接アクセス（クエリパラメータなし）して、新しいデバイスIDが割り当てられることを確認します。