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

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

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);

ユースケース

このセクションでは、Select URL API で利用可能なすべてのユースケースについて説明します。フィードバックや新しいテストケースの検出に応じて、例を追加していきます。

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

Select URL API の提案は現在、活発な議論と開発の途上にあるため、変更される可能性があります。

Select URL API について、皆様のご意見をお聞かせください。