Topics API デモ

# 実装ステータス

• Topics API 提案は公開ディスカッション段階を完了しており、現在オリジントライアルで利用可能です。 API は現在、大規模な導入でのリリースに近づいています。
• Topics API に関するフィードバックを提供するには、Topics Explainer でイシューを作成するか、 Improving Web Advertising Business Group のディスカッションに参加してください。Explainer には、さらに定義が必要とされている未解決の質問が多数あります。
• プライバシーサンドボックスのタイムラインには、Topics API やその他のプライバシーサンドボックス提案の実装タイムラインが記載されています。
• Topics API: 最新アップデートでは、Topics API と実装の変更点と強化機能について説明されています。

Topics API のデモでは、ホスト名からトピックがどのように推測されるかを確認できます。デモ サイトにアクセスすると、どのようなトピックが観察されるかをプレビューできます。セットアップはほとんど必要ありません。

ユーザーと一緒に API をテストする場合は、広告関連のオリジントライアルに登録してください。

このデモは、Topics API の実装を学習できるように、ほとんどの機能を実演するプレビュー版です。

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

以下の動画では、デモの動作を説明しています。

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

Chrome 101 以降を実行する際に、シングルユーザーとして以下の 2 つの方法で Topics API を試すことができます。

• chrome://flags/#privacy-sandbox-ads-apis Chrome ページで 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 は設定しないでください。

Run Chromium with flags には、コマンドラインから Chrome やその他の Chromium ベースブラウザを実行する際にフラグを設定する方法が説明されています。ただしこのデモは、Google Chrome に特化しています。

# Topics API ヘッダーのデモ

topics-fetch-demo.glitch.me のデモでは、fetch() リクエストとレスポンスヘッダーを使用してトピックにアクセスし、観察済みとしてマークする方法を示しています。

# Sec-Browsing-Topics リクエストヘッダーにアクセスする

iframe から document.browsingTopics() を使ってユーザーのトピックを閲覧する代わりに、API 呼び出し元は options パラメーターに {browsingTopics: true} を含む fetch() リクエストか、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() リクエストの code0}Sec-Browsing-Topics ヘッダーには、リクエスト URL のホスト名と一致するオリジンの呼び出し元が現在のユーザーのブラウザで観察したトピックのみが含まれます。これは、iframe から document.browsingTopics() を呼び出して、現在のユーザーの観察済みトピックを閲覧する場合と同じです。

リクエストヘッダーは、適切な権限ポリシーが有効であり、コンテキストが安全であり、ユーザー設定が許可している限り、リクエストで送信されます。Topics は、ナビゲーションリクエストのヘッダーには提供されません。

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 デモ ページのサイトへのアクセスから記録されたトピックを示しています。

このリストには、デモからアクセスして興味のあるトピックを記録できるサイトが表示されます。ご覧のとおり、スクリーンショットの Arts & Entertainment/Humor のカテゴリは、これらのウェブサイトのトピックではないため、この記録されたトピックは、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 を試して参加してください。さらに詳しいリソースについては、開発者ガイドをお読みください。

# 貢献とフィードバックの共有

• GitHub: Topics API の Explainer を読み、提案リポジトリで質問したり、イシューに関するディスカッションを読んだりできます。
• W3C: Improving Web Advertising Business Group で業界のユースケースについて議論できます。
• お知らせ: メーリングリストに参加するか、閲覧できます。
• プライバシーサンドボックス開発者サポート: Privacy Sandbox Developer Support リポジトリで質問したり、ディスカッションに参加したりできます。
• Chromium: 現在 Chrome でテストできる実装について質問するには、Chromium のバグを報告してください。