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

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

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 に関する皆様のご意見をぜひお聞かせください。