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

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

API общего хранилища -это предложение по конфиденциальности песочницы для общего назначения, Cross-Site Storage, которое поддерживает много возможных вариантов использования. Одним из примеров является выявление известных клиентов, которые доступны для тестирования в Chrome 104.0.5086.0, а затем.

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

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

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

Вы также можете включить общее хранилище с помощью флага --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames в командной строке.

Экспериментируйте с примерами кода

Вы можете захотеть отобразить другой элемент в зависимости от того, был ли пользователь замечен на другом сайте. Например, поставщик платежных услуг может захотеть отобразить кнопку «Зарегистрироваться» или «Купить сейчас» в зависимости от того, зарегистрировался ли пользователь на сайте поставщика платежных услуг. Общее хранилище может использоваться для установки статуса пользователя и настройки его пользовательского опыта в зависимости от этого статуса.

В этом примере:

  • known-customer.js встроен в фрейм. Этот скрипт устанавливает параметры для того, какая кнопка должна отображаться на сайте: «Зарегистрироваться» или «Купить сейчас».
  • known-customer-worklet.js — это общий ворклет хранилища, который определяет, известен ли пользователь. Если пользователь известен, возвращается информация. Если пользователь неизвестен, возвращается эта информация для отображения кнопки «Зарегистрироваться», а пользователь помечается как известный на будущее.

известный-клиент.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();

известный-клиент-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 выбора URL.

Будьте в курсе

  • Список рассылки : подпишитесь на нашу рассылку , чтобы получать последние обновления и объявления, связанные с API выбора URL-адреса и общего хранилища.

Нужна помощь?