为已知客户定制用户体验

使用共享存储空间 worklet 识别已知客户。

Shared Storage API 是一项 Privacy Sandbox 提案，旨在提供通用的跨网站存储空间，支持许多可能的用例。一个示例是识别已知客户，此功能可在 Chrome 104.0.5086.0 及更高版本中进行测试。

您可以将用户是否已在您的网站上注册的信息存储到 Shared Storage 中，然后根据用户存储的状态（用户是否为“已知”客户）呈现不同的元素。

设置已知客户

如需尝试在共享存储空间中识别已知客户，请确认您使用的是 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.