Personaliza la experiencia del usuario para clientes conocidos

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

La API de Shared Storage es una propuesta de Privacy Sandbox para el almacenamiento de uso general en varios sitios, 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 en Shared Storage si el usuario se registró en tu sitio y, luego, renderizar un elemento independiente según si el estado almacenado del usuario indica que es un cliente "conocido".

Cómo establecer clientes conocidos

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

También puedes habilitar Shared Storage 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 se vio al usuario en otro sitio. Por ejemplo, un proveedor de pagos podría querer renderizar un botón de "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. Este código establece las opciones para el botón que se debe mostrar en un sitio: "Registrarse" o "Comprar ahora".
  • known-customer-worklet.js es el worklet de almacenamiento compartido que determina si se conoce al usuario. Si se conoce al usuario, se devuelve la información. Si el usuario es desconocido, se devuelve esa información para mostrar el botón "Registrarse" y se marca al usuario 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 debate y desarrollo activos, y está sujeta a cambios.

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