Topics API のデモ

最小限の設定でホスト名からトピックがどのように推測されるのか、実験して学びましょう。

実装ステータス

Topics API のデモでは、ホスト名からトピックを推測する方法を確認できます。デモサイトにアクセスしたときに確認されるトピックをプレビューできます。そのための設定はほとんど必要ありません。

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

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

次の動画では、このデモの仕組みを紹介しています。

chrome://flags またはフィーチャー トグルを使用してテストする

1 人のユーザーとして Topics API を試すには、次の 2 つの方法があります。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 ベースのブラウザをコマンドラインから実行する際にフラグを設定する方法について説明します（このデモは Google 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() リクエストに Sec-Browsing-Topics ヘッダーが含まれます。このヘッダーには、リクエスト URL のホスト名で観測されたトピックのリストが含まれています（この例では 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"

この例には、Topics の分類のうち 186 と 265 の 2 つのトピックと、各トピックのバージョン情報が含まれています。

XHR リクエストにトピック ヘッダーを含めるのは一時的なものであり、将来的にはサポートされなくなります。

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

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

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

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> glitch.me の Topics API デモページ をご覧ください。
API を試用するための glitch.me デモ。

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

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder"></ph> [トピックの状態] タブには、確認されたトピックに関する情報が表示されます。 をご覧ください。
実際のトピックとランダムなトピックを表示する [Topics State] タブ。

次のステップ

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

フィードバックを共有