Настройте пользовательский интерфейс для известных клиентов

Используйте модуль «Общее хранилище» для идентификации известных клиентов.

API общего хранилища — это предложение в рамках «песочницы конфиденциальности» для универсального межсайтового хранилища, поддерживающее множество возможных вариантов использования. Один из примеров — идентификация известных клиентов, которую можно протестировать в Chrome 104.0.5086.0 и более поздних версиях.

Вы можете сохранить информацию о том, зарегистрирован ли пользователь на вашем сайте, в общем хранилище (Shared Storage), а затем отображать отдельный элемент в зависимости от сохраненного статуса пользователя (является ли пользователь «известным» клиентом).

Установить известных клиентов

Чтобы поэкспериментировать с идентификацией известных клиентов в общем хранилище, убедитесь, что вы используете Chrome версии 104.0.5086.0 или более поздней. Включите все API для обеспечения конфиденциальности рекламы в chrome://settings/adPrivacy .

Также можно включить общее хранилище с помощью флага --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.

Привлекайте и делитесь отзывами

Обратите внимание, что предложение Select URL API находится в стадии активного обсуждения и разработки и может быть изменено.

Мы с нетерпением ждем вашего мнения об API Select URL.