Topics API のデモ

最小限の設定でホスト名からトピックがどのように推論されるかをテストしましょう。

実装ステータス

Topics API のデモでは、ホスト名からトピックがどのように推定されるかをご覧いただけます。ほとんど設定を行わなくても、デモサイトにアクセスすると、どのようなトピックを観察するかをプレビューできます。

このデモは、Topics API のほとんどの機能を紹介するプレビューで、API の実装方法を理解していただくためのものです。

また、Topics Colab を実行して、Topics 分類モデルを試すこともできます。

次の動画では、このデモの仕組みについて説明しています。

chrome://flags または機能フラグを使用してテストする

1 人のユーザーとして Topics API を試すには、Chrome 101 以降を使用する必要があります。

  • Chrome ページの chrome://flags/#privacy-sandbox-ads-apis で 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 ベースのブラウザを実行するときにフラグを設定する方法を説明します。ただし、このデモは Google 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 の 2 つのトピックと、各トピックのバージョン情報が含まれています。

XHR リクエストへのトピック ヘッダーの追加は一時的なもので、今後サポートは終了する予定です。

Observe-Browsing-Topics でトピックをモニタリング対象としてマークする

リクエストに Sec-Browsing-Topics ヘッダーが含まれ、そのリクエストへのレスポンスに Observe-Browsing-Topics: ?1 ヘッダーが含まれている場合、リクエスト ヘッダーからのトピックはブラウザによって「観測された」とマークされます。観測されたトピックは、Topics API による計算の対象になります。このメカニズムは、iframe から JavaScript API を使用して提供される機能に合わせて設計されています。

以下のスクリーンショットは、API のデモページでサイトにアクセスしてから録画されたトピックを示しています。

glitch.me の Topics API デモページ
API を試すための glitch.me のデモ。

このリストには、デモからアクセスできるサイトが表示され、関心のあるトピックを録画できます。ご覧のとおり、スクリーンショットの「アート、エンターテインメント/ユーモア」カテゴリはこれらのウェブサイトの 1 つのトピックではないため、この記録されたトピックは、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 State] タブで確認できます。このスクリーンショットは、さまざまなブラウジング セッションの例を示しています。

[トピックの状態] タブには、確認されたトピックの情報が表示されます。
実際のトピックとランダムなトピックが表示されている [トピックの状態] タブ。

次のステップ

広告テクノロジー デベロッパーの方は、Topics API をテストして参加してください。詳細なリソースについては、デベロッパー ガイドをご覧ください。

フィードバックを共有