Demostraciones de la API de Topics

Experimenta y aprende cómo se infieren los temas de los nombres de host con una configuración mínima.

Estado de implementación

En la demostración de la API de Topics, se muestra cómo se infieren los temas de los nombres de host. Puedes obtener una vista previa de los temas que se observan cuando visitas un sitio de demostración, el cual requiere muy poca configuración.

Nuestra demostración es una versión preliminar que muestra la mayoría de las funciones de la API de Topics para que te familiarices con la forma en que se implementa la API.

También puedes ejecutar la colab de Topics para probar el modelo de clasificación de Topics.

En el siguiente video, se muestra cómo funciona la demostración.

Cómo realizar pruebas con chrome://flags o con las marcas de función

Existen dos maneras de probar la API de Topics como un solo usuario. Deberás ejecutar Chrome 101 o una versión posterior:

  • Habilita la API en la página de Chrome chrome://flags/#privacy-sandbox-ads-apis:

    Habilita la API de Topics desde la página chrome://flags/#privacy-sandbox-ads-apis.
    La página chrome://flags/#privacy-sandbox-ads-apis, en la que puedes habilitar o inhabilitar la API.

  • Ejecuta Chrome desde la línea de comandos con las siguientes marcas:

    --enable-features=BrowsingTopics,BrowsingTopicsParameters:time_period_per_epoch/15s/browsing_topics_max_epoch_introduction_delay/3s,PrivacySandboxAdsAPIsOverride,PrivacySandboxSettings3,OverridePrivacySandboxSettingsLocalTesting

La demostración de la API de Topics

En la demostración de Topics, se muestra cómo usar marcas adicionales para ajustar la configuración, como la duración de la época. Si accedes a la API de Topics ejecutando Chrome con marcas de línea de comandos, no establezcas chrome://flags, ya que estas pueden anular la configuración de la línea de comandos.

En Cómo ejecutar Chromium con marcas, se explica cómo configurar funciones experimentales cuando se ejecutan Chrome y otros navegadores basados en Chromium desde la línea de comandos, aunque esta demostración es específica de Google Chrome.

La demostración de los encabezados de la API de Topics

En la demostración de topics-fetch-demo.glitch.me, se muestra cómo usar los encabezados de solicitud y respuesta de fetch() para acceder a los temas y marcarlos como observados.

Accede al encabezado de la solicitud Sec-Browsing-Topics

En lugar de usar document.browsingTopics() desde un iframe para ver los temas de un usuario, los llamadores de la API pueden acceder a los temas observados desde el encabezado de la solicitud Sec-Browsing-Topics de una solicitudfetch() que incluya {browsingTopics: true} en su parámetro de opciones, o desde el mismo encabezado de una solicitud XHR que establece el atributo deprecatedBrowsingTopics en true.

Por ejemplo:

fetch('https://topics-server.glitch.me', {browsingTopics: true})
    .then((response) => {
        // Process the response
 })

En los navegadores compatibles con la API, la solicitud fetch() incluirá un encabezado Sec-Browsing-Topics que enumera los temas observados para el nombre de host de la URL de la solicitud: en este ejemplo, topics-server.glitch.me.

Si no se observaron temas para este nombre de host y este usuario, se incluye el encabezado, pero el valor está vacío. En otras palabras, el encabezado Sec-Browsing-Topics en una solicitud fetch() solo incluye temas que un llamador con un origen que coincide con el nombre de host de la URL de la solicitud observó para el navegador del usuario actual. Esto es lo mismo que si llamaras a document.browsingTopics() desde un iframe para ver los temas observados del usuario actual.

El encabezado de la solicitud se envía en una solicitud, siempre que incluya la política de permisos adecuada, que el contexto sea seguro y que la configuración del usuario lo permita. No se proporcionan temas en los encabezados de las solicitudes de navegación.

El encabezado de la solicitud de Topics se ve de la siguiente manera:

Sec-Browsing-Topics: 186;version="chrome.1:1:2206021246";config_version="chrome.1";model_version="2206021246";taxonomy_version="1", 265;version="chrome.1:1:2206021246";config_version="chrome.1";model_version="2206021246";taxonomy_version="1"

En este ejemplo, se incluyen dos temas de la taxonomía de Topics, 186 y 265, junto con la información de la versión de cada tema.

La inclusión del encabezado de temas en las solicitudes XHR solo está disponible temporalmente y se quitará la compatibilidad en el futuro.

Marcar los temas como observados con Observe-Browsing-Topics

Si una solicitud incluye un encabezado Sec-Browsing-Topics y la respuesta a esa solicitud incluye un encabezado Observe-Browsing-Topics: ?1, el navegador marcará los temas del encabezado de la solicitud tal como se observen. Los temas observados son aptos para el cálculo de la API de Topics. Este mecanismo está diseñado para coincidir con la funcionalidad proporcionada mediante la API de JavaScript desde un iframe.

La siguiente captura de pantalla muestra los temas registrados cuando se visitaron los sitios de la página de demostración de la API.

Página de demostración de la API de Topics en glitch.me
La demostración de glitch.me para probar la API.

Esta lista muestra los sitios que puedes visitar de la demostración para registrar temas de interés. Como puedes ver, la categoría Arte y entretenimiento/Humor de la captura de pantalla no es el tema de uno de estos sitios web. Por lo tanto, este tema registrado es el que se agregó como el 5% posible de temas aleatorios.

  • pets-animals-pets-cats.glitch.me
  • cats-cats-cats-cats.glitch.me
  • cats-pets-animals-pets.glitch.me
  • cats-feline-meow-purr-whiskers-pet.glitch.

Puedes verificar qué temas son reales y cuáles son aleatorios en la pestaña Estado de los temas de la página chrome://topics-internals. En esta captura de pantalla, se muestra un ejemplo de diferentes sesiones de navegación.

La pestaña Estado de temas proporciona información sobre los temas observados.
Pestaña Estado de temas que muestra temas reales y aleatorios

Próximos pasos

Si desarrollas tecnología publicitaria, experimenta y participa con la API de Topics. Consulta la guía para desarrolladores si deseas obtener recursos más detallados.

Interactúa y comparte comentarios