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

Use um worklet de armazenamento compartilhado para identificar clientes conhecidos.

A API Shared Storage é uma proposta do Sandbox de privacidade para armazenamento entre sites de finalidade geral, que oferece suporte a muitos casos de uso. 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 (se ele é um cliente "conhecido").

Definir clientes conhecidos

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

Também é possível 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 na informação de que o usuário foi visto em um site diferente. Por exemplo, um provedor de pagamentos pode renderizar um botão "Registrar" ou "Comprar agora" com base no registro do usuário 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 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 compartilhamento de feedback

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

Queremos saber sua opinião sobre a API Select URL.

Fique por dentro

  • Lista de e-mails: inscreva-se na nossa lista de e-mails para receber as atualizações e os avisos mais recentes relacionados às APIs Select URL e Shared Storage.

Precisa de ajuda?