Topics API 데모

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

구현 상태

Topics API 데모는 호스트 이름에서 주제를 추론하는 방법을 보여줍니다. 데모 사이트를 방문하면 어떤 주제가 관찰되는지 미리 볼 수 있으며, 설정을 거의 하지 않아도 됩니다.

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

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

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

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

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

  • chrome://flags/#privacy-sandbox-ads-apis Chrome 페이지에서 API를 사용 설정합니다.

    chrome://flags/#privacy-sandbox-ads-apis 페이지를 사용하여 Topics API를 사용 설정합니다.
    API를 사용 설정 또는 중지할 수 있는 chrome://flags/#privacy-sandbox-ads-apis 페이지

  • 명령줄에서 다음 플래그를 사용하여 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 요청 헤더에 액세스

API 호출자는 iframe에서 document.browsingTopics()를 사용하여 사용자의 주제를 보는 대신 옵션 매개변수에 {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 호스트 이름에서 관찰된 주제를 나열하는 Sec-Browsing-Topics 헤더가 포함됩니다(이 예시에서는 topics-server.glitch.me).

이 호스트 이름과 이 사용자에 대해 주제가 관찰되지 않는 경우 헤더가 포함되지만 값은 비어 있습니다. 즉, 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"

이 예에는 주제 분류의 두 주제(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로 실험하고 참여해 보세요. 자세한 리소스는 개발자 가이드를 참고하세요.

참여 및 의견 공유