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

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

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

Варианты использования

Все доступные варианты использования Select URL API можно найти в этом разделе. Мы продолжим добавлять примеры по мере получения отзывов и обнаружения новых тестовых случаев.

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

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

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