Cookieレス広告技術FLEDGEを試す

京都研究所・TechLabの今村です、本記事ではGoogleが提案するCookieレス広告技術FLEDGEについて簡単な実装コードを交えて説明します。

FLEDGEとは
FLEDGEでの広告表示フロー
- WebAssemblyについて
FLEDGEの広告入札を実装する
まとめ

FLEDGEとは

GoogleはChromeでの3rd party cookieの廃止を2023年後半に予定しています。¹

3rd party cookieの廃止はプライバシーの保護に役立つ一方、広告への依存度が高い無料サイト・サービスはビジネス的に大きな影響を受けます。そこでGoogleはユーザのプライバシーを保護しつつ、広告ビジネスを維持するための代替技術をプライバシーサンドボックスとして提案しており、 FLEDGE²はその1つになります。

FLEDGEはWeb広告の中で「リターゲティング広告³」を3rd party cookieを利用せずに実現するための技術です。リターゲティング広告は過去にWebサイトを訪問したことのあるユーザーに対して配信される広告で、現在は広告事業者が3rd party cookieを利用して収集した行動履歴を用いてこれを実現しています。 FLEDGEの基本的なアイデアは行動履歴と広告のマッチングをブラウザ内部で行うことにより、外部に行動履歴を渡すことなくリターティング広告を実現する仕組みです。

Chrome101以降ではchrome://flags/#privacy-sandbox-ads-apisで設定を有効にすることでFLEDGEを試すことができます。

FLEDGEでの広告表示フロー

次にどのようにFLEDGEが動作するのかについて簡単に説明します。詳細はFLEDGE API developer guideをご覧ください。

広告事業者は広告主のサイトAに設置したタグからjoinAdInterestGroup という新しく追加された組み込みのJavaScript関数を実行します。この関数はユーザのブラウザ内部のストレージに「広告事業者（owner）と広告（ad）の組み合わせ」を登録します。現在のリターゲティング広告では3rd party cookieを通じて広告事業者のサーバで行動履歴の収集するプロセスに相当します。

同じユーザが広告枠設置サイトBにアクセスすると、サイトBの広告枠管理者が設置した広告タグから runAdAuction というこれも組み込みのJavaScript関数が実行されます。この関数は前述の joinAdInterestGroup で保存した「広告事業者と広告の組み合わせ」から「価値の高い」広告を選択する処理をブラウザ側で行って表示する広告の情報を返します。これで「サイトBの広告枠に過去サイトAへアクセスしたユーザを対象にした広告を表示する」ことがアクセス履歴を第三者に渡さず実現できます。

次にどのようにして「価値の高い」広告を判断するのかですが、現在のWeb広告ではRTB（Real Time Bidding）と呼ばれる仕組みが広く用いられています。

広告枠の管理者（SSP）が広告事業者（DSP）に広告枠やユーザに関する情報を提示してオークション形式で広告を入札する。
広告事業者は機械学習など様々な手法を用いて広告の価値を判断し最適な広告を選択して応札する。
オークションに勝った広告が広告枠に表示される。

以上がRTBの簡単な流れです。

FLEDGEでは広告事業者が広告を登録する際に広告の価値を計算するためのロジックを合わせて登録する仕組みになってます。 FLEDGEが導入されると広告事業者がサーバサイドで行っていた機能の一部がユーザのブラウザで実行されることになります。

しかしブラウザ内で複雑なアルゴリズムを用いた計算処理を実行すると、ユーザの端末に負荷をかける可能性があります。 FLEDGEではこの負荷を軽減するためにWebAssemblyを利用できるようになっています。

WebAssemblyについて

WebAssemblyはブラウザ上でネイティブアプリ相当の高速な処理を実現するための低水準言語です⁴。直接テキストで記述できますが、一般的にはC、C++、Rustなどの言語からバイナリ形式にコンパイルして使われます。 JavaScriptと連携して利用できるので、JavaScriptでは高負荷な演算処理を代替することが主なユースケースとして考えられます。

利用事例としてはネイティブアプリを移植したGoogleEarth⁵や、動画処理にWebAssemblyを用いたDisney+⁶などの事例があり、ゲームや機械学習などの分野でも活用が見込まれています。

FLEDGEの広告入札を実装する

ここで実際にFLEDGEを利用したコードを動かしてみます。以下はjoinAdInterestGroupの実装例です。

<html>
<head>
  <script>
    const interestGroup = {
      name: "demo",
      owner: "https://siteA.jp/",
      biddingLogicUrl: "https://siteA.jp/static/bidding_logic.js",
      biddingWasmHelperUrl: "https://siteA.jp/static/bidding_helper.wasm",
      ads: [{
        renderUrl: "https://siteA.jp/sampleAd1.html",
        metadata: {
          key: "value"
        }
      }, {
        renderUrl: "https://siteB.jp/sampleAd2.html",
        metadata: {
          key: "value"
        }
      }]
    }
    const expireSec = 3600 * 24 * 30
    navigator.joinAdInterestGroup(interestGroup, expireSec)
  </script>
</head>
<body>
...
</body>
</html>

interestGroupに登録される内容は以下の通りです。

name: interestGroupの名前
owner: interestGroupの所有者。サンプルではサイトの所有者で登録していますが、実際には代理店やDSPのドメインで登録されます。（呼び出し元ページのドメインと一致している必要があるのでiframeを経由）
biddingLogicUrl: 広告の価値を計算する処理（bidding_logic, 入札関数）を含んだスクリプトのURL
biddingWasmHelperUrl: 入札関数の中で計算量の多い処理を行うためのWebAssemblyバイナリ
ads: 表示したい広告の情報

interestGroupが登録されたことはChromeのdeveloper画面から確認できます。

biddingLogicUrlに登録するスクリプトはgenerateBidという関数を含む必要があります。

function generateBid(interestGroup, auctionSignals, perBuyerSignals, trustedBiddingSignals, browserSignals) {
    ...
    /* 広告の価値を決定するロジック */
    ...
    return { ad: xxx, bid: price, render: "https://...." }
}

引数にはinterestGroupに登録した情報や配信媒体から渡される情報などが含まれるのですが、ここでは詳しい説明は省略します。

interestGroupが登録された状態で広告枠を含むサイトにアクセスしてrunAdAuction関数が呼ばれると上の入札関数が実行されてブラウザ内部でオークションが実行されます。

<html>
<head></head>
<body>
...
<div>
<script>
  const auctionConfig = {
    seller: "https://siteB.jp",
    decisionLogicUrl: "https://siteB.jp/static/decisionLogic.js",
    interestGroupBuyers: ["https://siteA.jp"],
    auctionSignals: {},
    sellerTimeout: 1000,
    perBuyerSignals: {},
    perBuyerTimeouts: {}
  }
  const url = await navigator.runAdAuction(auctionConfig)
  const $iframe = document.createElement('iframe')
  $iframe.width = 300
  $iframe.height = 250
  $iframe.src = url
  document.body.appendChild($iframe)
</script>
</div>
</body>
</html>

ここでも広告枠を持つsiteBが直接sellerとしてrunAdAuctionを実行していますが、実際にはSSPなどを通して実行されるケースが多いと思われます。オークションの実行オプションとして表示する広告を選択するためのロジック、選択対象の広告事業者（owner）、タイムアウト時間などを指定します。

以上でFLEDGEのオークションを経由したリターゲティング広告の動作が確認できます。