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

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

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.

Engage and share feedback

Note that the Select URL API proposal is under active discussion and development and subject to change.

We're eager to hear your thoughts on the Select URL API.