Topics API 데모

최소한의 설정으로 호스트 이름에서 주제를 추론하는 방법을 실험하고 알아보세요.

구현 상태

Topics API 데모는 호스트 이름에서 주제를 추론하는 방법을 보여줍니다. 아주 적은 설정만으로 데모 사이트를 방문할 때 관찰되는 주제를 미리 볼 수 있습니다.

데모는 API 구현 방법을 숙지할 수 있도록 Topics API의 기능 대부분을 보여주는 미리보기입니다.

Topics colab을 실행하여 Topics 분류 기준 모델을 사용해 볼 수도 있습니다.

다음 동영상은 데모의 작동 방식을 보여줍니다.

chrome://flags 또는 기능 플래그로 테스트

단일 사용자로 Topics API를 사용해 보는 방법에는 두 가지가 있습니다. Chrome 101 이상을 실행해야 합니다.

  • chrome://settings/adPrivacy에서 모든 광고 개인 정보 보호 API를 사용 설정합니다.

  • 명령줄에서 다음 플래그를 사용하여 Chrome을 실행합니다.

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

Topics API 데모

Topics 데모에서는 추가 플래그를 사용하여 에포크 길이와 같은 설정을 조정하는 방법을 보여줍니다. 명령줄 플래그로 Chrome을 실행하여 Topics API에 액세스하는 경우 chrome://flags가 명령줄 설정을 재정의할 수 있으므로 설정하지 마세요.

플래그를 사용하여 Chromium 실행에서는 명령줄에서 Chrome 및 기타 Chromium 기반 브라우저를 실행할 때 플래그를 설정하는 방법을 설명합니다. 이 데모는 Chrome에만 적용됩니다.

Topics API 헤더 데모

topics-fetch-demo.glitch.me의 데모는 fetch() 요청 및 응답 헤더를 사용하여 주제에 액세스하고 관찰된 것으로 표시하는 방법을 보여줍니다.

Sec-Browsing-Topics 요청 헤더에 액세스

iframe의 document.browsingTopics()를 사용하여 사용자의 주제를 보는 대신 API 호출자는 옵션 매개변수에 {browsingTopics: true}가 포함된 fetch() 요청의 Sec-Browsing-Topics 요청 헤더 또는 deprecatedBrowsingTopics 속성을 true로 설정하는 XHR 요청의 동일한 헤더에서 관찰된 주제에 액세스할 수 있습니다.

예를 들면 다음과 같습니다.

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

API를 지원하는 브라우저에서는 fetch() 요청에 요청 URL 호스트 이름(이 예에서는 topics-server.glitch.me)에서 관찰된 주제를 나열하는 Sec-Browsing-Topics 헤더가 포함됩니다.

이 호스트 이름과 사용자에 대한 주제가 관찰되지 않은 경우 헤더는 포함되지만 값은 비어 있습니다. 즉, fetch() 요청의 Sec-Browsing-Topics 헤더에는 요청 URL의 호스트 이름과 출처가 일치하는 호출자가 현재 사용자의 브라우저에서 관찰한 주제만 포함됩니다. 이는 iframe에서 document.browsingTopics()를 호출하여 현재 사용자의 관찰된 주제를 보는 것과 같습니다.

요청 헤더는 적절한 권한 정책이 실행되고 컨텍스트가 안전하며 사용자 설정에서 허용하는 한 요청에 대해 전송됩니다. 탐색 요청의 헤더에는 주제가 제공되지 않습니다.

Topics 요청 헤더는 다음과 같습니다.

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"

이 예는 Topics 분류에 있는 두 가지 주제(186 및 265)와 각 주제의 버전 정보를 포함합니다.

XHR 요청에 주제 헤더를 포함하는 기능은 일시적으로만 사용할 수 있으며, 향후 지원이 중단될 예정입니다.

Observe-Browsing-Topics로 주제를 관찰됨으로 표시

요청에 Sec-Browsing-Topics 헤더가 포함되어 있고 해당 요청에 대한 응답에 Observe-Browsing-Topics: ?1 헤더가 포함되어 있는 경우 브라우저에서는 요청 헤더의 주제를 관찰됨으로 표시합니다. 관찰된 주제는 Topics API로 계산할 수 있습니다. 이 메커니즘은 iframe에서 JavaScript API를 사용하여 제공되는 기능과 일치하도록 설계되었습니다.

아래 스크린샷은 API 데모 페이지에서 사이트를 방문하여 기록된 주제를 보여줍니다.

glitch.me의 Topics API 데모 페이지
API를 사용해 보기 위한 glitch.me 데모

이 목록에는 데모를 통해 관심 주제를 기록하기 위해 방문할 수 있는 사이트가 표시됩니다. 스크린샷에 있는 예술 및 엔터테인먼트/유머 카테고리는 이러한 웹사이트의 주제가 아니므로 이 녹화된 주제는 가능한 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.

chrome://topics-internals 페이지의 주제 상태 탭에서 어떤 주제가 진짜인지 무작위인지 확인할 수 있습니다. 이 스크린샷은 여러 탐색 세션의 예를 보여줍니다.

주제 상태 탭에는 관찰된 주제에 대한 정보가 표시됩니다.
실제 주제와 임의의 주제가 표시되는 주제 상태 탭

다음 단계

광고 기술 개발자라면 Topics API를 실험하고 참여해 보세요. 자세한 리소스는 개발자 가이드를 참고하세요.

참여 및 의견 공유