Personalize a experiência do usuário para clientes conhecidos

Use um objeto de armazenamento compartilhado para identificar clientes conhecidos.

A API Shared Storage é uma proposta do Sandbox de privacidade para armazenamento entre sites de uso geral, que oferece suporte a muitos casos de uso possíveis. Um exemplo é a identificação de clientes conhecidos, que está disponível para teste no Chrome 104.0.5086.0 e versões mais recentes.

Você pode armazenar se o usuário se registrou no seu site na Shared Storage e renderizar um elemento separado com base no status armazenado do usuário (ele é um cliente "conhecido"?).

Definir clientes conhecidos

Para testar a identificação de clientes conhecidos no armazenamento compartilhado, confirme se você está usando o Chrome 104.0.5086.0 ou uma versão mais recente. Ative todas as APIs de privacidade de anúncios em chrome://settings/adPrivacy.

Você também pode ativar o armazenamento compartilhado com a flag --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames na linha de comando.

Testar exemplos de código

Talvez você queira renderizar um elemento diferente com base em se o usuário foi visto em outro site. Por exemplo, um provedor de pagamentos pode querer renderizar um botão "Registrar" ou "Comprar agora" com base no fato de o usuário ter se registrado no site do provedor de pagamentos. O armazenamento compartilhado pode ser usado para definir o status do usuário e personalizar a experiência dele com base nesse status.

Neste exemplo:

  • known-customer.js está incorporado em um frame. Esse script define as opções de qual botão deve ser exibido em um site: "Registrar" ou "Comprar agora".
  • known-customer-worklet.js é o worklet de armazenamento compartilhado que determina se o usuário é conhecido. Se o usuário for conhecido, as informações serão retornadas. Se o usuário for desconhecido, essas informações serão retornadas para mostrar o botão "Registrar", e o usuário será marcado como conhecido para o futuro.

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

Casos de uso

Todos os casos de uso disponíveis para a API Select URL podem ser encontrados nesta seção. Vamos continuar adicionando exemplos à medida que recebermos feedback e descobrirmos novos casos de teste.

Engajamento e como compartilhar feedback

A proposta da API Select URL está em discussão e desenvolvimento ativos e está sujeita a mudanças.

Queremos saber o que você acha da API Select URL.