ユーザーの興味関心を取得するGoogle Chrome Topics APIの概要

[Supership](https://supership.jp/)の名畑です。「[鬼太郎誕生 ゲゲゲの謎](https://www.kitaro-tanjo.com/)」は鬼太郎ファンはもちろんのこと、鬼太郎を知らない方にもぜひ見て[水木しげる](https://www.mizukipro.com/)の世界への入り口としてほしい映画でした。ただし[PG12](https://www.eirin.jp/img/4ratings.pdf)なのでご注意を。

## はじめに

2月1日に「[Google Chrome プライバシーサンドボックス Topics APIの概要と試し方](https://qiita.com/nabata/items/023beb585949aa69fef3)」という記事を書きました。

あれから10ヵ月近くが経ち状況も変わりましたので、改めてまとめます。

## プライバシーサンドボックスとは？

> ウェブ向けのプライバシー サンドボックスは、サードパーティ Cookieを段階的に廃止し、隠されたトラッキングも制限します。新しいウェブ基準（英語）を策定することで、データのプライバシー保護を強化しながらデジタル事業の構築を可能にします。
>
> Android向けのプライバシー サンドボックスは、ユーザーのプライバシー保護を優先しながら、アプリの開発者が事業のサポートや成長に必要なツールを提供します。広告ID
などの複数アプリ共通の識別子を使用しないことでサードパーティとのデータ共有を制限します。
> 
> [プライバシーサンドボックス(The Privacy Sandbox)](https://privacysandbox.com/intl/ja_jp/)より引用

Chromeにおける[サードパーティークッキー](https://atmarkit.itmedia.co.jp/ait/articles/2105/10/news018.html)の完全廃止は2024年7月以降で予定されています。その前段階として、1%の廃止は2024年の1月〜3月で予定されています。

## Topics APIとは？

> Topics API は、ブラウザがユーザーの興味に関する情報をサードパーティと共有できるようにしながら、プライバシーを保護するように設計されたプライバシー サンドボックスメカニズムです。これにより、ユーザーが訪問するサイトをトラッキングせずに、インタレストベース広告（IBA）が可能になります。
> 
> [Topics APIの概要](https://developer.chrome.com/ja/docs/privacy-sandbox/topics/overview/)より

つまり、Webサイトに広告を出稿する人たちは

- それが誰かはわからない
- しかしその誰かがどのような興味関心を持っているかはわかる

ということになります。

**Topics API**のアップデート情報は[Topics API latest updates](https://developer.chrome.com/docs/privacy-sandbox/topics/latest/)にまとめられています。

## トピックとは？

ユーザーが興味関心を示している項目を**トピック**と呼びます。

**トピック**の分類は現在は **taxonomy\_v2** なので「[topics/taxonomy_v2.md at main · patcg-individual-drafts/topics · GitHub](https://github.com/patcg-individual-drafts/topics/blob/main/taxonomy_v2.md)」の通りです。現時点では469種類です。

## エポックとは？

ユーザーの興味関心の分析期間です。この期間毎に集計が行われます。

デフォルトでは**7日間**です。

## 自分のトピックの確認方法は？

Chromeのアドレスバーに下記を打ち込んでEnterです。

```
chrome://topics-internals/
```

直近4つの**エポック**それぞれでの**トピック**が5つずつ、順番に並びます。
下記スクリーンショットはそのうちの**1エポック**のものです。

![privacy_topics_1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/869934/f3756446-14bc-37a9-9778-79a747bce272.png)

これがChromeが推測した「**ユーザー(ここでは私)が関心を持っているトピックス**」ということになります。

この画面で**Calculate Now**を押すと、そのタイミングでの再計算が行われます。

分析する情報が少ないと**Random**なものが表示されるようです。

また、下記の通りで、APIでの取得においては5%の割合でランダムな情報が含まれます。

> プライバシーをさらに強化し、すべてのトピックが表現されることを保証するために、トピックは、興味の分類に含まれるすべての可能なトピックから 5% の確率でランダムに選択されます。
> 
> [Topics API の概要](https://developer.chrome.com/ja/docs/privacy-sandbox/topics/overview/)より


## Developer登録

現在、開発者として**Privacy Sandbox**周辺技術や関連APIにアクセスするためには登録が必要です。

- [Enroll for the Privacy Sandbox](https://github.com/privacysandbox/attestation/blob/main/how-to-enroll.md)

## トピックを取得するコード例

```html
<!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')
  }
}

getTopics();
</script>
</body>
</html>
```

長いですが、エラー判定やhtmlタグが主なので、実質は下記の一行だけです。

```JavaScript
const topics = await document.browsingTopics();
```

ちなみに

```JavaScript
document.browsingTopics({observe: false})
```

というように **{observe: false}** を引数として渡すと、状態を変更せずに(つまりは現在のページ閲覧が**エポック**計算に用いられずに)**トピック**の取得を行えます。

## 最後に

1年後の今頃にはサードパーティークッキーの量が格段に減った世界になっている、はず。

## 宣伝

[SupershipのQiita Organization](https://qiita.com/organizations/supership-inc)を合わせてご覧いただけますと嬉しいです。他のメンバーの記事も多数あります。

Supershipではプロダクト開発やサービス開発に関わる方を絶賛募集しております。
興味がある方は[Supership株式会社 採用サイト](https://supership.jp/recruit/)よりご確認ください。