このページはAIにより自動翻訳されており、不正確な内容が含まれている可能性があります。翻訳の誤りを報告するには、ページ右側の目次の下にあるフィードバックをご利用ください。

デバイス 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 を読み取ります
そのデバイス 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 が割り当てられることを確認します。

New Stuff!