Demostraciones de la API de Topics

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

Estado de implementación

La demostración de la API de Topics proporciona una vista de 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, que requiere muy poca configuración.

Nuestra demostración es una vista previa en la que se muestran la mayoría de las funciones de la API de Topics para que te familiarices con su implementación.

También puedes ejecutar colab de Topics para probar el modelo clasificador de Topics.

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

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

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

  • Habilita todas las APIs de privacidad en los anuncios de chrome://settings/adPrivacy.

  • 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

La demostración de Topics 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 mediante la ejecución de Chrome con marcas de línea de comandos, no configures 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 marcas cuando se ejecuta Chrome y otros navegadores basados en Chromium desde la línea de comandos, aunque esta demostración es específica para Google Chrome.

Demostración de los encabezados de la API de Topics

La demostración en topics-fetch-demo.glitch.me muestra cómo usar los encabezados de solicitud y respuesta fetch() para acceder a 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 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 establezca el atributo deprecatedBrowsingTopics en true.

Por ejemplo:

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

En 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 el navegador del usuario actual observó para un llamador cuyo origen coincide con el nombre de host de la URL de la solicitud. 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 tenga la política de permisos adecuada en juego, 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 como observados. Los temas observados son aptos para el cálculo con la API de Topics. Este mecanismo está diseñado para coincidir con la funcionalidad proporcionada por el uso de la API de JavaScript desde un iframe.

La captura de pantalla a continuación muestra los temas registrados al visitar los sitios en 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.

En esta lista, se muestran los sitios que puedes visitar de la demostración para grabar temas de interés. Como puedes ver, la categoría Arte y entretenimiento/Humor que aparece en la captura de pantalla no es el tema de uno de estos sitios web, por lo que este tema grabado es uno que se agregó como los posibles temas aleatorios del 5%.

  • 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 Topics proporciona información sobre los temas observados.
Pestaña Estado de temas, que muestra temas reales y aleatorios.

Próximos pasos

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

Interactúa y comparte comentarios