Demonstrações da API Topics

Faça testes e saiba como os temas são inferidos de nomes de host com configuração mínima.

Status da implementação

A demonstração da API Topics fornece uma visão de como os temas são inferidos de nomes de host. Você pode saber quais temas são observados em um site de demonstração, o que requer pouca configuração.

Nossa demonstração é uma prévia da maioria dos recursos da API Topics para que você se familiarize com a implementação dela.

Você também pode executar o Colab da API Topics para testar o modelo de classificador da API.

O vídeo a seguir mostra como a demonstração funciona.

Testar com chrome://flags ou flags de recursos

Há duas maneiras de testar a API Topics como um único usuário. É necessário executar o Chrome 101 ou mais recente:

  • Ative a API na página do Chrome chrome://flags/#privacy-sandbox-ads-apis:

    Ative a API Topics usando a página chrome://flags/#privacy-sandbox-ads-apis
    A página do chrome://flags/#privacy-sandbox-ads-apis em que você pode ativar ou desativar a API.

  • Execute o Chrome na linha de comando com as seguintes sinalizações:

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

Demonstração da API Topics

A Demonstração de tópicos mostra como usar sinalizações adicionais para ajustar as configurações, como a duração da época. Se você acessar a API Topics executando o Chrome com sinalizações de linha de comando, não defina chrome://flags, porque elas podem substituir as configurações de linha de comando.

Executar o Chromium com sinalizações explica como definir sinalizações ao executar o Chrome e outros navegadores baseados no Chromium na linha de comando, embora essa demonstração seja específica para o Google Chrome.

Demonstração de cabeçalhos da API Topics

A demonstração em topics-fetch-demo.glitch.me mostra como usar cabeçalhos de solicitação e resposta fetch() para acessar tópicos e marcá-los como observados.

Acessar o cabeçalho da solicitação Sec-Browsing-Topics

Em vez de usar document.browsingTopics() de um iframe para visualizar temas para um usuário, os autores de chamadas da API podem acessar temas observados no cabeçalho da solicitação Sec-Browsing-Topics de uma solicitaçãofetch() que inclui {browsingTopics: true} no parâmetro de opções ou no mesmo cabeçalho de uma solicitação XHR que define o atributo deprecatedBrowsingTopics como true.

Exemplo:

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

Em navegadores compatíveis com a API, a solicitação fetch() vai incluir um cabeçalho Sec-Browsing-Topics que lista os temas observados para o nome do host do URL da solicitação (neste exemplo, topics-server.glitch.me).

Se nenhum tópico for observado para esse nome de host e para o usuário, o cabeçalho será incluído, mas o valor ficará vazio. Em outras palavras, o cabeçalho Sec-Browsing-Topics em uma solicitação fetch() inclui apenas temas que foram observados no navegador do usuário atual por um autor de chamada com origem correspondente ao nome do host do URL da solicitação. Isso é o mesmo que se você estivesse chamando document.browsingTopics() em um iframe para ver os temas observados para o usuário atual.

O cabeçalho da solicitação é enviado em uma solicitação desde que ela tenha a política de permissão adequada em execução, o contexto seja seguro e as configurações do usuário permitam isso. Os tópicos não são fornecidos nos cabeçalhos das solicitações de navegação.

O cabeçalho da solicitação da API Topics fica assim:

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"

Este exemplo inclui dois temas da taxonomia de temas, 186 e 265, além das informações da versão de cada um.

A inclusão do cabeçalho de temas em solicitações XHR está disponível apenas temporariamente, e o suporte será removido no futuro.

Marcar temas como observados com Observe-Browsing-Topics

Se uma solicitação incluir um cabeçalho Sec-Browsing-Topics e a resposta a essa solicitação incluir um cabeçalho Observe-Browsing-Topics: ?1, os temas do cabeçalho da solicitação serão marcados pelo navegador, conforme observado. Os temas observados podem ser calculados pela API Topics. Esse mecanismo foi criado para corresponder à funcionalidade fornecida pelo uso da API JavaScript de um iframe.

A captura de tela abaixo mostra os tópicos gravados no acesso aos sites na página de demonstração da API.

Página de demonstração da API Topics em glitch.me
Demonstração do glitch.me para testar a API
.

Esta lista mostra os sites que você pode acessar pela demonstração para registrar temas de interesse. Como você pode ver, a categoria "Artes e entretenimento/humor" na captura de tela não é o tema de um desses sites. Por isso, esse tema gravado foi adicionado como os possíveis 5% de temas aleatórios.

  • 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.

É possível verificar quais temas são reais e quais são aleatórios na guia "Estado da API" da página chrome://topics-internals. Esta captura de tela mostra um exemplo de diferentes sessões de navegação.

A guia Estado de temas fornece informações sobre os temas observados.
Guia "Estado dos temas" mostrando temas reais e aleatórios.

Próximas etapas

Se você é um desenvolvedor de adtech, faça testes e participe da API Topics. Leia o guia do desenvolvedor para ver recursos mais detalhados.

Interaja e compartilhe feedback