Topics API を使用して、特定の広告テクノロジーのユースケースに対応する方法を学びます。
始める前に
最初のステップは、Topics API とサービスについてよく理解することです。
- デベロッパー向けドキュメントを確認する:
<ph type="x-smartling-placeholder">
- </ph>
- まず概要を読み、Topics API とその機能について理解します。
- Topics デモのチュートリアル(動画)を見る。
- Topics ヘッダーと JavaScript API のデモをお試しください。
- デモをフォークして(両方ともコードへのリンクを提供しています)、自分のサイトからデモを実行します。
- 詳しくは、API の説明をご覧ください。
- Topics API の実装ステータスとタイムラインを確認します。
- Cookie のない未来において広告の関連性をサポートするうえでの API の役割について理解する。
- API のステータス変更について通知を受け取るには、デベロッパー向けメーリング リストに登録して、Topics の最新情報をご確認ください。
- Topics API に関する最新ニュースをご確認ください。
- GitHub の問題または W3C 呼び出しを介して会話に貢献します。
- なじみのない用語については、プライバシー サンドボックスの用語集をご確認ください。
- Chrome のコンセプト(Chrome のフラグなど)について詳しくは、goo.gle/cc の短い動画や記事をご覧ください。
ローカルでのビルドとテスト
このセクションでは、個々のデベロッパーとして Topics API を試す方法について説明します。
- ローカルでのテストとデプロイ(推定所要時間: 約 2 日)
<ph type="x-smartling-placeholder">
- </ph>
- ローカル ブラウザで、フィーチャー トグルを使用してコマンドラインから API を有効にします。ヘッダーと JavaScript API のデモをテストして、Topics の動作を確認しましょう(チュートリアル動画)。
- Topics Colab を実行し、Topics ML モデルを使用してトピック推論をテストします。
ブラウザで Topics を有効にする
ローカルテストのために独自の Chrome インスタンスで Topics API を有効にするには、次の 2 つの方法があります。
chrome://settings/adPrivacy
で、すべての広告プライバシー API を有効にします。- (推奨)Topics API 固有のパラメータを使用して、Chromium フラグを指定してコマンドラインから Chrome を実行し、必要に応じて設定します。
コマンドラインから Chrome を実行することで、Topics 機能をより詳細に制御できます。たとえば、Topics エポック(API がユーザーの興味 / 関心を計算するために使用する期間)を設定し、ニーズに応じて API の動作を設定できます。
Preview Topics API の仕組み
chrome://topics-internals ツールを使用すると、基盤となる Topics API の仕組みをローカルで見ることができます。
<ph type="x-smartling-placeholder">Topics API Internals ツールを使用して、アクセスするサイトに基づいて分類器をローカルでテストします。
このツールを使って、以下を確認できます。
- Topics State: 現在のユーザーについて確認されたトピックを表示します。
- 分類器: ホスト名から推測されるトピックをプレビューします。
- 機能とパラメータ: API パラメータ値を表示して、フィーチャー トグルが意図したとおりに機能していることを確認できます。
Internals ツールを使用して Topics をデバッグする方法を学習する。
API がトピックを返す仕組み
エポック(1 週間)の上位 5 つのトピックを作成するのに十分な数のモニタリングされたトピックがない場合、Topics API はランダムなトピックを追加して上位 5 つを完成させます。「Real or Random」という見出しのある Topics Internals 列は、そのトピックが実際の観察に基づいたものか、追加のランダムな「パディング」に基づくものかを示します。上位 5 つの回答は以上ですこのメカニズムの詳細については、説明をご覧ください。
エポックごとに選ばれるトピックは、その期間にユーザーが最も関心を持っている 5 つのトピックからランダムに抽出したものとなります。エポックで十分な数のトピックが確認されなかった場合は、合計 5 つとなるように追加のトピックがランダムに選択されます。ランダムに選択されたトピックはフィルタリングの対象となります。
プライバシーをさらに強化し、すべてのトピックが代表されるようにするために、エポックに選択されるトピックが、確認されたトピックから選択されるのではなく、すべてのトピックからランダムに選択される確率が 5% になります。確認されたトピックが少なすぎる上記のケースと同様に、ランダムに選択されたトピックはフィルタリングの対象になりません。
トピックの選択方法について詳しくは、トピックの分類をご覧ください。
主な推奨事項
- フラグを使用して、新しいプロセスを開始する前に、すべての Chrome プロセスを閉じて(そして停止)してください。
chrome://settings/adPrivacy
で、すべての広告プライバシー API が有効になっていることを確認します。- デバッグページで、Topics がローカルでどのように機能しているかをご確認ください。
- ご不明な点がございましたら、GitHub の問題に関する説明をご覧ください。
- API が期待どおりに動作しない場合は、トラブルシューティングのヒントをお試しください。
MVP のデプロイを計画する
Topics API により、ユーザーがアクセスしたサイトをトラッキングしたり、ナビゲーション履歴を公開したりすることなく、ユーザーが確認した関心のあるトピックにアクセスできます。
Topics API の呼び出し元は、document.browsingTopics()
JavaScript メソッドを呼び出すか、HTTP リクエスト ヘッダーを使用してトピックを監視し、アクセスするエンティティです。この場合は、作成したコードとそのコードの呼び出し元の eTLD+1 が呼び出し元です。Topics API を呼び出すと、ユーザーがウェブサイトにアクセスしたときに関心のあるトピックを監視するよう、ユーザーのブラウザに指示することになります。このアクセスは、次のエポックのトピック計算で考慮されます。
Topics API は、呼び出し元コンテキストの呼び出し元別または eTLD+1 別に結果をフィルタするように設計されています。つまり、iframe のオリジン(JavaScript API を使用する場合)またはフェッチ リクエストの URL(ヘッダーを使用する場合)が呼び出し元と見なされ、トピックはその呼び出し元に基づいて計算されます。
次の図は、この方法を示しています。
<ph type="x-smartling-placeholder">この図について:
- ユーザーが Chrome を開き、広告テクノロジーの iframe(ソース: iframe.adtech.example)を含む複数のウェブサイト(customerA.example、customerB.example.br など)にアクセスするか、呼び出しの受け渡しヘッダーを取得します。
- Chrome では、このユーザーの興味 / 関心のあるトピックが記録されます。
- Topics API によって関心のあるトピックが確認された状態で 7 日間移動した後、同じデバイスの同じユーザーがターゲットのウェブサイト(publisher-e.example)にアクセスします。Topics API により、トピックのリストが返されます。この例では、このユーザーの前週の観測値から計算された 1 つのトピックが返されます。
- ステップ 1 で adtech.example がモニタリングしたサイトにアクセスしたユーザーのブラウザのみが、ステップ 2 でトピックの結果を返します(このモニタリング フィルタリングを、これまで見たことのないユーザーのトピックを参照することはできません)。
- このリスト(現時点では 1 つのトピック)を使用して、バックエンド API(ads.adtech.example/topics-backend)を呼び出して、コンテキスト データセットの一部としてトピックデータを使用できます。
- ユースケースによっては、過去数週間に確認した関心のあるトピックにアクセスすることで、よりパーソナライズされたエクスペリエンスをユーザーに提供できます。
Topics API を呼び出す
ユーザーのトピックを監視してアクセスするには 2 つの方法があります。誰かと話す必要がある場合などに
- iframe 内から JavaScript API を使用する場合:
<ph type="x-smartling-placeholder">
- </ph>
- ターゲット ウェブサイト(パブリッシャーのウェブサイト)に iframe を追加します。この iframe には、
document.browsingTopics()
を使用して Topics API を呼び出す JavaScript コードが含まれています。
- ターゲット ウェブサイト(パブリッシャーのウェブサイト)に iframe を追加します。この iframe には、
- ヘッダー オプション:
<ph type="x-smartling-placeholder">
- </ph>
- 取得(推奨)または XHR(非推奨、完了済みのオリジン トライアルでのみ利用可能):
<ph type="x-smartling-placeholder">
- </ph>
- 広告テクノロジー バックエンドへのリクエストの
Sec-Browsing-Topics
ヘッダーからトピックにアクセスできます。これは最もパフォーマンスの高いオプションです(特定の 1 人のユーザーのトピックをモニタリングするための低レイテンシです)。
- 広告テクノロジー バックエンドへのリクエストの
browsingtopics
属性を指定した iframe タグを使用する場合: <ph type="x-smartling-placeholder">- </ph>
browsingtopics
属性を使用して iframe を追加すると、Chrome は iframe のリクエストのSec-Browsing-Topics
ヘッダーにトピック(iframe の eTLD+1 で観測される)を含めます。
- 取得(推奨)または XHR(非推奨、完了済みのオリジン トライアルでのみ利用可能):
<ph type="x-smartling-placeholder">
JavaScript と iframe を使用して実装する
Topics JavaScript API デモまたはヘッダーデモをフォークして、コードの出発点として使用することをおすすめします。
HTML に <iframe>
要素を含めるか、JavaScript を使用して iframe を動的に追加できます。iframe を動的に作成する方法の一つとして、次の JavaScript があります。
const iframe = document.createElement('iframe');
iframe.setAttribute('src', 'https://...');
document.body.appendChild(iframe);
機能検出を使用して、このデバイスで Topics API がサポートされ、使用可能かどうかを確認します。
'browsingTopics' in document && document.featurePolicy.allowsFeature('browsing-topics') ?
console.log('document.browsingTopics() is supported on this page') :
console.log('document.browsingTopics() is not supported on this page');
その iframe 内から Topics API を呼び出します。
const topics = await document.browsingTopics();
過去 3 週間にこのユーザーが確認したトピックのリストが表示されます。このリストは空欄でもかまいません。過去 3 週間までのトピックを 1 つ、2 つ、3 つ指定することもできます。
API から返される内容の例を次に示します。
[{'configVersion': String,
'modelVersion': String,
'taxonomyVersion': String,
'topic': Number,
'version': String}]
- configVersion: 現在の構成を識別する文字列。
- modelVersion: トピックを推測するために使用される機械学習分類器を識別する文字列。
- taxonomyVersion: ブラウザで現在使用されているトピックのセットを識別する文字列。
- topic: 分類内でトピックを識別する番号。
- version:
configVersion
とmodelVersion
を組み合わせた文字列。
HTTP ヘッダーを使用して実装する
トピックには、fetch()/XHR リクエストまたは iframe
リクエストの Sec-Browsing-Topics
ヘッダーからアクセスできます。
リクエスト ヘッダーで提供されたトピックをモニタリング対象としてマークするには、リクエストのレスポンスに Observe-Browsing-Topics: ?1
ヘッダーを設定します。ブラウザはこれらのトピックを使用して、ユーザーの興味 / 関心のあるトピックを計算します。
API が 1 つ以上のトピックを返す場合、トピックが観測された eTLD+1 に対するフェッチ リクエストには、次のような Sec-Browsing-Topics
ヘッダーが含まれます。
(325);v=chrome.1:1:1, ();p=P000000000
API からトピックが返されない場合、ヘッダーは次のようになります。
();p=P0000000000000000000000000000000
Sec-Browsing-Topics
ヘッダー値はパディングされます。これにより、呼び出し元をスコープとするトピックの数を攻撃者がヘッダーの長さに基づいて知るリスクを軽減できます。
fetch()
を使用して実装する
パブリッシャーのページで、取得リクエストのコードを追加します。その際、必ず {browsingTopics: true}
を含めます。
fetch('<topics_caller_eTLD+1>', {browsingTopics: true})
.then((response) => {
// Process the response
})
API をサポートするブラウザでは、fetch()
リクエストに Sec-Browsing-Topics
ヘッダーが含まれ、リクエスト URL のホスト名で観測されたトピックのリストが示されます。
iframe を使用して実装する
fetch()
リクエストと同様に、iframe で browsingtopics
属性を使用すると Sec-Browsing-Topics
ヘッダーが送信されます。
<iframe src="<topics_caller_eTLD+1>" browsingtopics></iframe>
この場合、フェッチ呼び出しと同様に、
が呼び出し元になります。
サーバーサイド - すべてのケースで同一
Sec-Browsing-Topics
リクエスト ヘッダー内のトピックをブラウザでモニタリング対象としてマークすると同時に、現在のページ訪問をユーザーの次のエポック トップ トピック計算に含めるには、サーバーのレスポンスに Observe-Browsing-Topics: ?1
を含める必要があります。
setHeader()
を使用した JavaScript の例を次に示します。
res.setHeader('Observe-Browsing-Topics', '?1');
Topics のバックエンドの実装
Topics のバックエンドの追加は任意です。どちらを選択するかは、デバイス上(ブラウザ内)で計算されたトピックを、どこでどのように使用するかによって異なります。
// Use the language/framework/stack of your preference
function processTopicsBackendAPI(topics, user, domain, caller) {
// Validate inputs
// If the list is not empty, continue
// Use topics as an additional contextual signal
}
トピックをコンテキスト データとして使用する
トピックのデータは、オーディエンスに関する追加のシグナルとして、URL やキーワード、さらにはタグなどの他のシグナルと合わせて検討できます。
サードパーティ Cookie のない環境で広告の関連性を最大限に高めるで説明したように、Topics を活用して関連性の高い広告を配信するには、いくつかの方法があります。その中には、トピックを使用してオーディエンスを構築する方法もあれば、トピックをとりわけシグナルの一つとして使用して、オーディエンスの新たな興味 / 関心を推測したり、入札ロジックを最適化したりするために機械学習モデルをトレーニングするための方法を提案するものもあります。
ビルドとデプロイ
- まだスケーリングしていない本番環境のユーザーを観察してトピックを収集する(推定所要時間: 約 1 週間)
<ph type="x-smartling-placeholder">
- </ph>
- 選択肢を理解する: iframe と JavaScript、または HTTP ヘッダー
- iframe のドメインを定義します。
- デモアプリをコード リファレンスとして使用して JavaScript コードを作成するか、ヘッダー オプションを実装します。
- Topics を、制御された環境(いくつかの本番環境サイト)にデプロイします。
- いくつかのターゲット サイトに Topics の実装を追加します(現時点では 5 つ以下のサイト)。
- 機能テストと検証。
- [省略可] Topics データをコンテキスト シグナル(URL やタグなど)として使用する(所要時間: 約 3 日)。
- トピックのリストを受け取ったら、他のコンテキスト シグナルとともにバックエンドに送信できます。
いくつかのターゲット サイトにデプロイする
コードが用意できたので、そのコードをいくつかのターゲット サイトに追加して最初のテストを行い、この制御された環境で API が安定していて動作することを確認しましょう。
次のようなウェブサイトをターゲットに設定することをおすすめします。
- 毎月の訪問数を少なくする(1 か月あたり約 100 万件未満): まず、少数のユーザーに API をデプロイすることから始めます。
- お客様が所有および管理する: 必要に応じて、複雑な承認を得ずに、実装をすばやく無効にできます。
- ビジネス クリティカルでない: ユーザー エクスペリエンスを損なうおそれがあるため、リスクの低いターゲット サイトから始めてください。
- 合計 5 サイト以内: 現時点ではそれほど多くのトラフィックや表示サイトは必要ありません。
- 異なるテーマを表す: さまざまなカテゴリ(スポーツ、ニュース、フード、ドリンクなど)を表すウェブサイトを選択します。Chrome の内部トピックツールを使用して、ドメインと、機械学習による Topics 分類器による分類方法を検証できます。デバッグの詳細については、Topics API デベロッパー ガイドをご覧ください。
機能をテストして確認する
この限られた環境で Topics API を呼び出すと、次のことが予想されます。
- 過去 7 日間にこのサイトと発信者に対するこのデバイスの最初の呼び出しだった場合は、トピック
[]
の空の配列。 - このユーザーの興味や関心を表す 0 ~ 3 個のトピックのリスト。
- 7 日間の観察の後、以下が表示されます。
<ph type="x-smartling-placeholder">
- </ph>
- その週のナビゲーション履歴から計算された、そのユーザーの関心を表す 1 つのトピック。
- 重要な点の一つとして、ユーザーが Topics API でその週の上位 5 つのトピックを計算できるだけの十分なトピックがない場合、Topics は必要な数のトピックをランダムに追加して合計 5 とします。API の詳細を確認する。
- その週のナビゲーション履歴から計算された、そのユーザーの関心を表す 1 つのトピック。
- 4 週間の観察後に呼び出す場合は、3 つのうち 1 つを置き換える新しいトピック エントリ。
- これは、Topics API が今後数週間にわたって安定しており、ユーザーの興味 / 関心が公開されすぎないようにするためです。GitHub で詳細を確認する
- ユーザーのトピックが 3 週間以上モニタリングされていない場合、Topics API は空の配列
[]
を再度返します。
ユーザー エクスペリエンスのパフォーマンスと指標を測定します。
- クロスオリジンの iframe 内で行われる Topics API の JavaScript 呼び出しの実行時間は、今後のパフォーマンス分析で使用するために測定する必要があります。バックエンドでテレメトリー データを適切に収集して保存するようにしてください。
- トピックを受信してから iframe トピックと
postMessage()
トピックを作成するのにかかる時間も、計算対象となるもう 1 つの指標です。
- トピックを受信してから iframe トピックと
トラブルシューティング
- Topics API を呼び出していますが、結果として null が返されます。どうすればよいですか?
- ユーザーの観察から 1 週間以内に Topics API を呼び出している場合、これは想定内です。
主な推奨事項
フロントエンド コードをテストして、JavaScript が想定どおりに動作することを確認します。
バックエンドをテストして、トピックの結果を受け取ります。
- データ型とバックエンド API のパラメータが正しく設定されていることを確認してください。
- バックエンドが適切にスケーリングされるように構成されていることを確認します。
これまでの経験から、より関連性の高いトピックの結果を得るには、少なくとも 3 週間は待つ必要があります。
すべてのユーザーが Topics を有効にできるわけではありません。
- ユーザーは Topics API を明示的に無効にできます。
- ニュース メディアのページで権限ポリシーを管理できます。Topics API デベロッパー ガイドの「オプトアウト」をご覧ください。
- 詳しくは、chromestatus.com をご確認ください。
この環境に指標とオブザーバビリティを追加します。これらは最初の結果を分析するために必要です。指標の例:
- 通話のレイテンシ
- トピック呼び出しでの HTTP エラー
実装の変更は、最初の 3 週間に限定するようにしてください。
本番環境へのスケーリング
本番環境にスケーリングする手順の概要を以下に示します。手順は次のとおりです。
- 実装をスケーリングする(本番環境)。以下で説明します。
- 複数のパブリッシャーのウェブサイトに iframe を追加する。
- トピックデータを処理して使用します(推定所要時間: 約 4 週間)。
- トピックデータは、他のデータとともに付加的なシグナルとして組み込みます。
- リアルタイム ビッダーのテスト パートナーに協力を依頼する。
- トピックを他のデータへの付加シグナルとしてユーティリティ テストを実行します。
実装をスケーリングする
この時点で、制御された環境にある一部のサイトからトピック・データが収集され、ソリューション全体について高い信頼度で収集できるはずです。
次は、同じコードをより多くのターゲット ウェブサイトにデプロイして、この実装を拡張します。これにより、より多くのユーザーを監視し、より多くのトピックデータを収集し、オーディエンスに対する理解を深めることができます。
次のようにすることをおすすめします。
- 特にトラフィックが多い場合は、サイト全体に段階的にデプロイします。
- 予想されるトラフィックに応じて、トピックデータの負荷テストを実施します。
- バックエンドが大量の通話を処理できることを確認します。
- 分析用の指標の収集とログを設定する。
- Topics API をデプロイしたらすぐに指標を確認し、エンドユーザーの重大な問題がないか確認します。指標を定期的にご確認ください。
- 中断や予期しない動作が発生した場合は、デプロイをロールバックしてログを分析し、問題を把握して修正します。
フィードバックを共有
- GitHub: Topics API の説明を読み、API リポジトリで問題の投稿とディスカッションのフォローを行います。
- W3C: 「ウェブ広告ビジネスの改善」グループで、業界のユースケースについてご確認ください。
- お知らせ: メーリング リストへの参加や表示を行います。
- プライバシー サンドボックスのデベロッパー サポート: プライバシー サンドボックス デベロッパー サポート リポジトリで質問したり、ディスカッションに参加したりできます。
- Chromium: 現在 Chrome でテストできる実装について質問がある場合は、Chromium のバグを報告してください。