既知の顧客向けにユーザーエクスペリエンスをカスタマイズする

共有ストレージワークレットを使用して、既知の顧客を特定します。

Shared Storage API は、汎用のクロスサイトストレージに関するプライバシーサンドボックスの提案で、多くのユースケースに対応できます。たとえば、既知のユーザーを識別する機能は、Chrome 104.0.5086.0 以降でテストできます。

ユーザーがサイトに登録したかどうかを共有ストレージに保存し、ユーザーの保存されたステータス（ユーザーが「既知」の顧客かどうか）に基づいて別の要素をレンダリングできます。

既知の顧客を設定する

共有ストレージで既知のユーザーを識別するテストを行うには、Chrome 104.0.5086.0 以降を使用していることを確認してください。chrome://settings/adPrivacy で広告プライバシー API をすべて有効にします。

コマンドラインで --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames フラグを使用して共有ストレージを有効にすることもできます。

コードサンプルを試す

ユーザーが別のサイトで確認されたかどうかに基づいて、異なる要素をレンダリングすることがあります。たとえば、ユーザーが決済プロバイダのサイトに登録しているかどうかに基づいて、決済プロバイダが [登録] ボタンや [今すぐ購入] ボタンを表示したい場合があります。共有ストレージを使用して、ユーザーのステータスを設定し、そのステータスに基づいてユーザーエクスペリエンスをカスタマイズできます。

この例では、次のようになります。

known-customer.js がフレームに埋め込まれています。このスクリプトは、サイトに表示するボタン（[登録] または [今すぐ購入]）のオプションを設定します。
known-customer-worklet.js は、ユーザーが既知かどうかを判断する共有ストレージワークレットです。ユーザーが既知の場合、情報が返されます。ユーザーが不明な場合は、その情報が返されて [登録] ボタンが表示され、ユーザーは今後既知としてマークされます。

known-customer.js

// The first URL for the "register" button is rendered for unknown users.
const BUTTON_URLS = [
  { url: `https://${advertiserUrl}/ads/register-button.html` },
  { url: `https://${advertiserUrl}/ads/buy-now-button.html` },
];

async function injectButton() {
  // Load the worklet module
  await window.sharedStorage.worklet.addModule('known-customer-worklet.js');

  // Set the initial status to unknown ('0' is unknown and '1' is known)
  window.sharedStorage.set('known-customer', 0, {
    ignoreIfPresent: true,
  });

  // Run the URL selection operation to choose the button based on the user status
  const fencedFrameConfig = await window.sharedStorage.selectURL('known-customer', BUTTON_URLS, {
    resolveToConfig: true
  });

  // Render the opaque URL into a fenced frame
  document.getElementById('button-slot').src = fencedFrameConfig;
}

injectButton();

known-customer-worklet.js

class SelectURLOperation {
  async run(urls) {
    const knownCustomer = await sharedStorage.get('known-customer');

    // '0' is unknown and '1' is known
    return parseInt(knownCustomer);
  }
}

register('known-customer', SelectURLOperation);

Use cases

All available use cases for Select URL API can be found in this section. We'll continue to add examples as we receive feedback and discover new test cases.

Rotate ad creatives: Store data, such as creative ID and user interaction, to determine which creative users' see across different sites.
Select ad creatives by frequency: Use view count data to determine which creative users' see across different sites.
Run A/B testing: You can assign a user to an experiment group, then store that group in Shared Storage to be accessed cross-site.
Customize experience for known customers: Share custom content and calls-to-action based on a user's registration status or other user states.

意見交換とフィードバックの提供

Select URL API の提案は現在、活発な議論と開発が進められており、今後変更される可能性があります。

Select URL API に関する皆様のご意見をぜひお聞かせください。

提案: 詳細な提案内容を確認のうえ、ご検討ください。
ディスカッション: 進行中のディスカッションに参加して、質問したり、インサイトを共有したりしてください。