SupershipでVPoEをしている名畑です。銀河鉄道999はまったくもって明るい内容ではないのですが、幼少期にたくさん夢を見せてもらった作品でした。
こちらの記事の内容は古くなっておりますので「ユーザーの興味関心を取得するGoogle Chrome Topics APIの概要」をご覧ください。
はじめに
プライバシーサンドボックス(The Privacy Sandbox)という取り組みがあります。
ウェブ向けのプライバシーサンドボックスは、サードパーティ Cookie を段階的に廃止し、隠されたトラッキングも制限します。新しいウェブ基準（英語）を策定することで、データのプライバシー保護を強化しながらデジタル事業の構築を可能にします。
Android向けのプライバシーサンドボックスは、ユーザーのプライバシー保護を優先しながら、アプリの開発者が事業のサポートや成長に必要なツールを提供します。広告IDなどの複数アプリ共通の識別子を使用しないことでサードパーティとのデータ共有を制限します。
プライバシーサンドボックスでは様々な開発が並行して進んでいますが、その中にWeb向けの一つとしてTopics APIというものがあります。Topics APIの詳細はGithubのpatcg-individual-draftsのtopicsリポジトリにまとめられています。
今回の記事ではTopicsについてデモを動かしてみたり、JavaScript向けAPI経由で実際に値を取得してみたりした結果を記しています。
Topics APIとは？
Google Japan Blog: プライバシー サンドボックスの新しい Topics API について には下記のように書かれています。
Topics は、ブラウザが、閲覧履歴に基づいて、たとえば「フィットネス」や「旅行」などといったその週に関心の高い項目（トピック）を選びます。
Topics API: 開発者ガイドの「この API が必要な理由」には下記のように書かれています。
Topics APIは、ユーザーがアクセスしたサイトを追跡せずに、インタレストベース広告を可能にするメカニズムに関するプライバシーサンドボックス提案です。
インタレストベース広告（IBA） は、ユーザーが最近アクセスしたサイトから推測された、ユーザーの興味に基づいて広告が選択されるパーソナライズされた広告の形態です。これは、ユーザーがアクセスしているページのコンテンツと照合することを目的としたコンテンツターゲット広告とは異なります。
IBA は、広告主が潜在的な顧客にリーチするのを支援し、コンテンツターゲット広告だけでサイトへのアクセスを簡単に収益化できない Web サイトに資金を提供するのに役立ちます。 IBA は、現在のページのコンテキスト情報を補足して、ユーザーにとって適切な広告を表示できるようにします。
つまりは今ページを閲覧しているユーザーの関心が高い項目をトピックとしてブラウザから取得できるというものですが、トピックが実際にどのような値をとるか、どのようなカテゴライズがされるかはこちらのmardownファイルで確認することができます。
ただ、2023年2月18日時点でのトピック数は349ですが「現在の提案は約 350 ですが、最終的なトピックの数は数百から数千になると想定されています」とTopics API: 開発者ガイドの「トピックの分類と選択の方法」に書かれています。
トピックがいかにして求められるかについてはTopics API: 開発者ガイドの「Topics API でどの呼び出し元がどのトピックを表示できるのかを決定する方法」」あたりをご覧ください。一定期間毎の上位のトピックを返すだけではなく「5% の確率で分類上のすべてのトピックからランダムに選択されます」とあるのでノイズも差し込まれるようです。
どのようなトピックが自分に紐づけられているかを確認する方法は後述いたします。
公式デモの実行
前提として私の環境はMac版Chrome バージョン110です。
Chromeの起動
まず、ChromeでPrivacy SandBox Ads APIsを有効にします。
アドレスバーにchrome://flags/#privacy-sandbox-ads-apisと入力します。
このDisabledをEnabledに切り替えてChromeを再起動します。
Chromeの画面上ではなくコマンドラインからオプション指定して起動することも可能です。下記はコマンド例です。
$ open "/Applications/Google Chrome.app" --args --enable-features=BrowsingTopics:time_period_per_epoch/15s,PrivacySandboxAdsAPIsOverride,PrivacySandboxSettings3,OverridePrivacySandboxSettingsLocalTesting --flag-switches-begin --flag-switches-end
ちなみに私はいつもコマンドラインからの起動をしています。値を細かく指定できるためです。たとえばtime_period_per_epochはデフォルトだと1週間のため、このコマンドラインでは15sにしています。time_period_per_epochはエポックと呼ばれる期間を決めるためのものです。この期間の行動履歴を元にトピックが生成されます。今回の記事で用いるdocument.browsingTopicsというメソッドは直近3つのエポックを参照します。
オプションについて詳しくはTopics API: 開発者ガイドの「Topics API の表示を表示する」をご参照ください。
Chromeのアドレスバーにchrome://versionと入力すればコマンドラインで指定されたオプションが確認できます。
公式デモページを開く
Topics API demoをChromeで開いてください。
読み進めながら下の方にスクロールしていくと薄黄色い長方形の領域があります。
No topics observed yet: try visiting one of the sites above.
と書かれています。topicsがないので上記のサイトの一つを訪問しましょうとあります。
スクロールして上に戻ると下記4つのリンクが用意されています。
- 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.me
これらのうちの一つpets-animals-pets-cats.glitch.meを別タブで開いてみます。
元のタブに戻って少し待ってみると先ほどの薄黄色の領域に取得できたトピックが表示されます(setIntervalされているのでリロードは不要です)。
Pets & Animals/Petsと書かれた箇所です（必ずしもこれが表示されるとは限りません）。
しばらく待っても表示されない時もあるかと思います。そのときは4つのリンクの他のページも開いてみましょう。
The epoch length is set to 15 seconds using the flags above (the default length is one week).
と書かれていますし、time_period_per_epochを短くセットしておいた方がトピックス生成の更新頻度が上がるので、今回のような値が取得できるかというテストはやりやすそうですかね。
トピックを取得するコードを書いてみる
トピックを取得するコードを実際に書いてみました。
<!doctype html>
<html lang="ja">
<head>
</head>
<body>
<script>
async function getTopics() {
if('browsingTopics' in document && document.featurePolicy.allowsFeature('browsing-topics')) {
try {
const topics = await document.browsingTopics();
if (topics.length > 0) {
for (const topic of topics) {
console.log(topic.topic)
}
} else {
console.log('there are no topics')
}
} catch (error) {
console.log('exception with browsing topics')
}
} else {
console.log('document.browsingTopics() is not supported on this page')
}
}
const intervalId = setInterval(getTopics, 1000);
</script>
</body>
</html>
htmlでかつログを差し込んでいるので長く見えますが、要点はかなり少ないです。
以降、要点です。
環境判定
'browsingTopics' in document && document.featurePolicy.allowsFeature('browsing-topics')
まず、この条件式でトピックの取得が可能かをチェックしています。ただ、ユーザー側がオプトアウトをしていてもTrueとなるのでそこはご注意下さい。
Topics API: 開発者ガイドの「機能サポートの検出」には下記の通り書かれています。
現在のページで機能がサポートされていても、API が使用可能であることは保証されません。ユーザーがブラウザの設定で API を無効にしたり、API の使用を妨げる他の設定が使用されていたりする可能性があるためです。ユーザーのプライバシーを保護する理由から、このことをプログラムでチェックする方法は存在しません。
トピックの取得
const topics = await document.browsingTopics();
この1行です。
ちなみに
document.browsingTopics({observe: false})
というように {observe: false} を引数として渡すと、状態を変更せずに(つまりは現在のページ閲覧がエポック計算に用いられずに)トピックの取得を行えます。
これをfor文で回しています。
if (topics.length > 0) {
for (const topic of topics) {
console.log(topic.topic)
}
}
topic.topicにIDが入ります。
setIntervalで1秒毎に呼び出しを行なって、トピックの取得ができなかったときはthere are no topicsと、取得できたときはそのIDをログに表示しています。
先述した公式デモではこちらのjsのマッピングに従ってIDを文字列に変換しています。
1ならArts & Entertainment、2ならArts & Entertainment/Acting & Theater……といった感じです。
自身に紐づいたトピックの確認
アドレスバーにchrome://topics-internalsと入力すると自身に紐づいたトピックの確認ができます。
データ量が5個のトピック生成に満たないためランダムな値が入っています。
分析に用いられたサイト、Chromeに指定されているオプション(time_period_per_epochなど)もここで確認できます。
オリジントライアルへの参加
トライアルに正しく登録できたら、有効なトライアルトークンを提供するページで Topics JavaScript API を試すことができます。
Topics API: 開発者ガイドの「Topics オリジントライアルに参加する」にはこう書かれているのですが、トークンを取得しなくてもTopics APIの呼び出し自体は可能なようです。
参考までにトークンの取得方法を記載しておきます。
Origin Trialsを開く
オリジントライアルは、ウェブプラットフォームの新しい機能や実験的な機能が一般公開されるより先に、使いやすさ、実用性、そして有効性についてテストし、ウェブ標準コミュニティにフィードバックできる方法です。
オリジンという単語が初耳という方は「same-site」と「same-origin」を理解するをご参照ください
Chrome Origin Trialsを開くと、登録可能なオリジントライアルの一覧が確認できます(完了したトライアルと自分が登録済みのトライアルも確認できます)。
Privacy Sandbox Relevance and Measurementへの登録
Privacy Sandbox Relevance and Measurementという項目があるので、REGISTERをクリックします。
遷移先のページでサイトのURLの入力等をしてREGISTERを押します。
するとトークンが発行されます。
発行したトークンの設定方法はTopics API: 開発者ガイドの「Topics オリジントライアルに参加する」をご覧ください。
宣伝
SupershipのQiita Organizationを合わせてご覧いただけますと嬉しいです。他のメンバーの記事も多数あります。
Supershipではプロダクト開発やサービス開発に関わる方を絶賛募集しております。
興味がある方はSupership株式会社 採用サイトよりご確認ください。