Selecciona una URL con almacenamiento compartido

Selecciona una URL según los datos recopilados en el almacenamiento compartido y renderiza el contenido en un marco protegido.

Con la API de Shared Storage, puedes seleccionar una URL para que se renderice en un marco cercado con datos entre sitios. Usa JavaScript para leer y escribir datos entre sitios y, luego, selecciona una URL de una lista proporcionada según tus datos almacenados. Puedes renderizar esa URL en un marco con cerca.

La selección de URLs puede incluir cualquier tipo de contenido: anuncios, artículos, imágenes, HTML, llamados a la acción (como botones) y mucho más.

Por ejemplo, supongamos que administras un sitio de viajes y publicas una campaña publicitaria con tres creatividades publicitarias diferentes. Deseas crear una secuencia de estas creatividades según las interacciones del usuario (vista o clic).

Tres creatividades de anuncios, que se muestran a los usuarios en función de su interacción anterior
La primera creatividad para un usuario nuevo dice: “Comienza tu próxima aventura”. Con solo una vista y sin hacer clic, el usuario vería "Explorar escapadas de fin de semana". Después de ver la creatividad o hacer clic en ella, la tercera creatividad les pide a los usuarios que hagan clic para obtener un descuento en el hotel. Si el usuario hace clic en el primer anuncio, el siguiente que verá es la tercera creatividad.

Cuando un usuario observa por primera vez un espacio de anuncio ganador, puedes almacenar un ID y el estado de clic de esa creatividad en el almacenamiento compartido. Esto significa que, cuando ganes una subasta de anuncios en otros sitios que visite este usuario, podrás mostrar un anuncio diferente según esos datos.

Explicación del almacenamiento compartido con tres creatividades de anuncios y la interacción del usuario.

Tu código JavaScript se ejecuta en un worklet para recuperar esta información, pero no puede interactuar con el marco de iframe ni con el marco cercado de la página superior ni comunicarse fuera de ellos.

Veamos otro ejemplo. Supongamos que te interesa probar qué artículo tendría un mejor rendimiento en un contexto incorporado. Puedes asignar un usuario a un grupo de experimentos cuando lo veas en tu sitio y, luego, almacenar ese ID de grupo en el almacenamiento compartido para acceder a él en un contexto de varios sitios. En otro sitio, tu marco delimitado puede seleccionar una URL según el grupo de experimentos de ese usuario como se almacena con el almacenamiento compartido.

El almacenamiento compartido te permite tomar decisiones fundamentadas en datos de varios sitios sin compartir información del usuario (como el historial del navegador o cualquier otro detalle personal) con un sitio de incorporación ni extraer datos a tus propios servidores.

Casos de uso

La selección de URLs con el almacenamiento compartido admite casos de uso como los siguientes:

  • Rota las creatividades de anuncios: Puedes almacenar datos, como el ID de la creatividad y la interacción del usuario, para determinar qué creatividades ven los usuarios en diferentes sitios.
    • Frecuencia: Los recuentos de vistas del navegador se pueden almacenar en el almacenamiento compartido y usarse para decidir qué creatividad se muestra a un usuario.
  • Ejecuta pruebas A/B: Asigna un usuario a un grupo de experimentos y, luego, almacena ese ID de grupo con el almacenamiento compartido para acceder a él en varios sitios.
  • Personaliza la experiencia del usuario: comparte contenido personalizado y llamados a la acción según el estado de registro o de verificación de un usuario.

Presupuestos

Para mitigar el riesgo de filtración de datos entre sitios, la API de Select URL usa un sistema de asignación de presupuestos con una combinación de presupuestos a largo y corto plazo:

  • Presupuesto a largo plazo: 12 bits por sitio de llamador por día cuando se usa selectURL(). Este presupuesto solo se cobra si el marco que aloja la URL seleccionada realiza una navegación de nivel superior, en la que el costo se calcula como log2(number of URLs). Por lo tanto, si proporcionas 8 URLs para elegir, el costo es de 3 bits. El presupuesto restante del día se calcula como 12 - (sum of bits deducted in the last 24 hours) y, si no hay suficiente presupuesto, se muestra la URL predeterminada (la primera URL de la lista) y se registra 1 bit si se navega a la URL predeterminada.

  • Presupuestos a corto plazo: Son límites adicionales por carga de página. Hay un presupuesto de 6 bits por carga de página por sitio de llamada que limita la cantidad de información que un solo sitio de llamada puede filtrar con selectURL(). También hay un presupuesto de 12 bits de carga general por página, que es un límite combinado para todos los sitios de llamada en una página.

    Las consultas guardadas te permiten volver a usar un resultado selectURL() anterior en la misma página, lo que reduce el uso del presupuesto a corto plazo. Cuando se llame a selectURL() con un nombre de consulta guardado por primera vez, el índice resultante se almacenará durante el ciclo de vida de la página. Cuando se llame a selectURL() con el mismo nombre de consulta guardado para las llamadas de seguimiento, se mostrará el índice almacenado y no se ejecutará la operación registrada. En este caso, el presupuesto solo se cobrará en el primer uso, pero no en los reusos dentro de la misma carga de página, ya que no se revela información nueva.

    Para implementar las consultas guardadas, agrega la propiedad savedQuery, con el nombre de la consulta que elegiste, al objeto de opciones, como se muestra en el siguiente ejemplo.

    const topProductUrls = [
  { url: 'https://ad.example/default-top-product.html' },
  { url: 'https://ad.example/experiment-top-product.html' }];
const relatedProductUrls = [
  { url: 'https://ad.example/default-related-product.html' },
  { url: 'https://ad.example/experiment-related-product.html' }];

// This is the first call to `selectURL()` with `savedQuery: 'control_or_experiment'`
// on this page, so it will be charged to both per-page budgets.
const topProductsConfig = await sharedStorage.selectURL(
  'productExperiment', topProductUrls, {
    savedQuery: 'control_or_experiment',
    keepAlive: true,
    resolveToConfig: true
});
document.getElementById('topProductsFencedFrame').config = topProductsConfig;

// This next call with this savedQuery won't charge either of the per-page budgets.
const relatedProductConfig = await sharedStorage.selectURL(
  'productExperiment', relatedProductUrls, {
    savedQuery: 'control_or_experiment',
    resolveToConfig: true
});
document.getElementById("relatedProductFencedFrame").config = relatedProductConfig;

Prueba la selección de URLs

La selección de URLs con la API de Shared Storage está disponible para pruebas en Chrome Canary/Dev/Beta M105 y versiones posteriores. Para probar la selección de URLs, habilita todas las APIs de privacidad en los anuncios en chrome://settings/adPrivacy.

Experimenta con la demostración

Hay una demo disponible, y puedes revisar el código en GitHub.

Esta demostración se crea desde la perspectiva de un anunciante, una tecnología publicitaria, un distribuidor de contenido o cualquier otro servicio de terceros que desee almacenar información en diferentes sitios de publicadores. En la demostración, el mismo código de terceros se ejecuta en los sitios del publicador A y del publicador B para cada caso de uso. Visita la página de cada publicador para ver cómo se comparten los datos en un contexto entre sitios.

Interactúa y comparte tus comentarios

La propuesta de almacenamiento compartido se está debatiendo y está sujeta a cambios en el futuro. Si pruebas esta API y tienes comentarios, nos encantaría recibirlos.