created_at
updated_at
tags
toc

3rd Party Cookie 調査のための Web 広告導入

Intro

昨今、特に広告サービスを中心に 3rd Party Cookie を用いたトラッキングについての議論が多く行われている。

Safari による ITP や、Chrome による Privacy Sandbox への移行など、技術的な変化も著しい。

こうした技術の変遷を観測し、調査検証を行うために、これまで避けていた Web 広告を本サイトに導入することにした。

Motivation

本サイトは、様々な Web に関する技術を調査し、実際に試すためにサイト自体に適用しながらそれを記事にまとめるという目的で運用してきた。

様々な技術を試したり、そのパフォーマンスやセキュリティへの影響を評価する上で、一般的なサイトの構成とかけ離れていれば、あまり意味をなさない。

そのため、本サイトでは以下のように、別に必要はない機能やサービスをあえて導入している。

  • AMP
    • AMP より Origin の方が速く、SEO は特に気にしてないので本来は必要無い
    • AMP 自体の評価のために対応している
  • Google Analytics
    • Access Log や Reporting も手元にあるため、ダッシュボードを見ることはほぼない
    • 多くのサイトに ga.js が入っているため入れている
  • Web Font
    • タイポグラフィにこだわりがあるわけではなく、フォントはユーザが決めれば良いと考えている
    • 日本語フォントなど入れなければ早いに決まってるので、あえて鉄下駄として入れている
  • Youtube
    • 手元に動画ファイルがあるので <video> で貼れば良い
    • 3rd Party の <iframe> を埋め込む場合の挙動を見たいので入れいている
  • human.txt, ads.txt, security.txt
    • だれが見ることもないと思うが入れている

こうした、特に必要もないがよく使われている技術やサービスを入れておくことは、例えば以下のような指標を測定する際に、多くの発見がある。

  • Performance
    • 日本語 WebFont の影響や、サブセッティングの効果
    • AMP が速いとは限らないこと
  • CSP
    • 特に Analytics や AMP で発生するエラー
    • human.txt や ads.txt が CSP に違反するケース
  • Feature Policy
    • Youtube iframe で発生するエラー
  • etc,etc,etc

しかし、一般的なサービスが行っており、本サイトで行っていなかった大きな差異が一つある。それが 広告の掲載 だ。

本サイトは、収益化を目的としてやってるわけではないし、広告があっても邪魔なだけなので、サイトの設立時から導入するつもりは一切なかった。

ところが、昨今の Web において、3rd Party Cookie の扱いやトラッキングの議論を考える上で、広告の存在は無視することができなくなっている。

広告を設置してない状態では、広告があることによって起こると予想される様々な事象を見落としてる可能性が考えられるだろう。

  • 3rd Party Cookie がブロックされたとき、広告収益には具体的にどの程度の影響があるのか
    • これを正確に比較して知るためには、本来 ITP よりも前に本サイトに広告があれば理想だったが、それは遅いのでしょうがない
  • ブラウザに 3rd Party Cookie に対する制限が実装された時、広告のあるサイトでは実際どういう挙動を引き起こすのか
    • 特に Reporting API に Intervention Report が送られてくるのかどうか
    • CSP や Feature Policy に 3rd Party Cookie などに関する directive が増えるのかどうか
  • 広告ベンダがそうした制限に対する対策を講じるとしたら、それはどういう形で配信者に提供されるのか
    • アナウンスには、どういう説明が送られてくるのか
    • Privacy Sandbox などはどういう API として提供されるのか
  • その他
    • 広告があることによって起こる未知の事象

そこで、本サイトにも広告を導入することを検討した。

これ以上検証が不要とわかれば消すが、少なくとも Google が 3rd Party Cookie の無効化と Privacy Sandbox への以降を掲げている 2 年後までは運用していく。

といっても邪魔なので Footer に置くため、目につくこともあまり無いだろう。仮に収益が出たら、このサイトのドメイン代やサーバ代の足しにする。

プロバイダ選定

プロバイダの選定は以下のように行う。

  • 個人でも広告が掲載できる
  • やめたい時にすぐやめられる
  • 3rd Party Cookie を利用している
  • 一般的なサイトでの採用率が高い
  • 広告の掲載場所がある程度自分でコントロールできる

特に最後の掲載場所は重要だ。

広告を設置するとはいえ、収益よりもサイトのコンテンツを重要視しているので、広告はページの下部にでも表示できればそれでよい。

逆を言えば、そういう設置場所のコントロールもできないと、採用は難しい。

いくつか検討した結果、最終的に最も一般的に使われているであろう Google AdSense を導入することにした。

Google AdSense 導入

基本の流れは以下になる。

  • 導入申請
  • 広告のカスタマイズ
  • AMP 対応
  • ads.txt 対応
  • Privacy Policy 対応
  • CSP 対応

ここでは、導入時の備忘録を記す。

広告のカスタマイズ

設置できる広告にはいくつか種類がある。

  • ディスプレイ広告
  • インフィード広告
  • 記事内広告

最初は AMP も対応されているディスプレイ広告を検討したが、スタイルの自由度的に記事内広告の方が扱いやすかったため記事内広告を採用した。

背景や文字色も変更できるため、本サイトに合わせて変更しているが、本サイトが対応している Dark Mode には対応できない ようだ。

AMP 対応

AMP 対応は <amp-ad> を用いることになる。

これも貼るだけなので特に問題はなかった。

ads.txt 対応

本サイトは既に ads.txt を提供し Ad が無いことを記述していた。

AdSense から ads.txt への記載内容が提供されたため、それを素直に転記した。

AdSense は blog.jxck.io にしか掲載しないが、ads.txt は jxck.io レベルで提供する必要があり、そこは気に食わないがおとなしく従うことにした。

Privacy Policy 対応

AdSense の利用には Privacy Policy の記載が必要となる。

Analytics の規約については本サイト Footer に記載していたが、これを機にページを分け、本サイトの Policy をまとめる構成に変更した。

具体的には以下の構成になる。

blog.jxck.io
  `-- /policies
        |-- privacy.html # privacy policy
        `-- site.html    # site policy

各ページへは、本サイト Footer からリンクしている。

CSP 対応

本サイトでは、長らく CSP-Report-Only を運用している。

適用が昔からの継ぎ足しなため、未だに v1 時代のセーフリスト形式を採用したままだ。

v3 の nonce + strict-dynamic ベースにへの以降は前々から計画していたため、これを機に v3 に移行しつつ対応しようと考えた。

しかし、nonce + strict-dynamic にしても、AdSense のスクリプトが生成するどこかの <script> タグが CSP に違反してしまい、うまく適用ができなかった。

strict-dynamic であれば動的生成の <script> も対応できるはずだったが、これが仕様や実装の問題なのか、適用方法の問題なのか検証しきれなかった。

そこで、既存の v1 ベースで、引っかかるドメインを追加することで暫定対応を実施した。

どこかで v3 ベースにうまく移行できるように再調査したい。

Outro

本サイトに、Google AdSense を導入した。

ここを起点に、今後 3rd Party Cookie を取り巻く Web の変遷を観察し、調査/検証を行っていく。