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

Use cases

All available use cases for Select URL API can be found in this section. We'll continue to add examples as we receive feedback and discover new test cases.

Engage and share feedback

Note that the Select URL API proposal is under active discussion and development and subject to change.

We're eager to hear your thoughts on the Select URL API.

Stay Informed

  • Mailing List: Subscribe to our mailing list for the latest updates and announcements related to the Select URL and Shared Storage APIs.

Need Help?