Personaliza la experiencia del usuario para clientes conocidos

Usa una worklet de Shared Storage para identificar a los clientes conocidos.

La API de Shared Storage es una propuesta de Privacy Sandbox para el almacenamiento multisitio de uso general, que admite muchos casos de uso posibles. Un ejemplo es la identificación de clientes conocidos, que está disponible para probar en Chrome 104.0.5086.0 y versiones posteriores.

Puedes almacenar si el usuario se registró en tu sitio en Shared Storage y, luego, renderizar un elemento independiente según el estado almacenado del usuario (si es un cliente "conocido").

Cómo configurar clientes conocidos

Para experimentar con la identificación de clientes conocidos en el almacenamiento compartido, confirma que estás usando Chrome 104.0.5086.0 o una versión posterior. Habilita todas las APIs de privacidad en los anuncios en chrome://settings/adPrivacy.

También puedes habilitar el almacenamiento compartido con la marca --enable-features=PrivacySandboxAdsAPIsOverride,OverridePrivacySandboxSettingsLocalTesting,SharedStorageAPI,FencedFrames en la línea de comandos.

Experimenta con muestras de código

Es posible que desees renderizar un elemento diferente según si el usuario se vio en un sitio diferente. Por ejemplo, un proveedor de pagos puede renderizar un botón "Registrarse" o "Comprar ahora" según si el usuario se registró en el sitio del proveedor de pagos. El almacenamiento compartido se puede usar para establecer el estado del usuario y personalizar su experiencia en función de ese estado.

En este ejemplo:

  • known-customer.js está incorporado en un marco. Esta secuencia de comandos establece las opciones para el botón que se debe mostrar en un sitio, "Registrarse" o "Comprar ahora".
  • known-customer-worklet.js es la tarea del almacenamiento compartido que determina si el usuario es conocido. Si se conoce al usuario, se muestra la información. Si el usuario es desconocido, se muestra esa información para mostrar el botón "Registrarse" y se marca como conocido para el 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 prácticos

En esta sección, encontrarás todos los casos de uso disponibles para la API de Select URL. Seguiremos agregando ejemplos a medida que recibamos comentarios y descubramos nuevos casos de prueba.

Interactúa y comparte comentarios

Ten en cuenta que la propuesta de la API de Select URL está en discusión y desarrollo activo, y está sujeta a cambios.

Nos encantaría conocer tu opinión sobre la API de Select URL.

Mantente al tanto

  • Lista de distribución: Suscríbete a nuestra lista de distribución para recibir las actualizaciones y los anuncios más recientes relacionados con las APIs de Select URL y Shared Storage.

¿Necesitas ayuda?