アトリビューション ソースを登録する

ソースを登録して、クリックとビューを適切なイベントに関連付ける方法について学習します。

アトリビューション ソースは広告関連のイベント（クリックまたはビュー）であり、広告テクノロジーはこれに次のような情報を追加できます。 - コンテキスト レポートデータ（広告クリエイティブ ID、キャンペーンに関する情報、地域など）。- ユーザーがコンバージョンに至ると期待するサイトなどのリンク先。

このドキュメントの手順に従って、ブラウザがコンバージョンを関連付けたソース（広告のインプレッションまたはクリック）を登録できます。

登録方法

アトリビューション ソースを登録するには、HTML 要素または JavaScript 呼び出しを使用します。

  • <a> タグ
  • <img> タグ
  • <script> タグ
  • fetch 個の電話番号
  • XMLHttpRequest
  • window.open

これにより、ネットワーク リクエストが生成され、ソース登録の HTTP レスポンス ヘッダーで応答します。

クリックまたはビューのソースを登録する

クリックまたは視聴のアトリビューション ソースを登録する手順は次のとおりです。詳しい手順については、こちらをご覧ください。概要は次のとおりです。

  1. ソースの登録を開始する。HTML 要素または JavaScript 呼び出しを使用して、リクエストを送信します。以降のセクションで説明するように、この手順はクリック数と表示数とで異なります。

  2. ソース登録ヘッダーで応答して、ソース登録を完了します。そのリクエストを受け取ったら、ヘッダー Attribution-Reporting-Register-Source で応答します。このヘッダーで、目的の Attribution Reporting 構成を指定します。この手順はクリックと表示のどちらでも同じです。

    概要レポートの例:

    {
  "aggregation_keys": {
    "campaignCounts": "0x159", 
    "geoValue": "0x5" 
  },
  "aggregatable_report_window": "86400",
  "destination": "https://example.com"
}

    イベントレベル レポートの例:

    {
  "source_event_id": "12340873456",
  "destination": "[eTLD+1]",
  "expiry": "[64-bit signed integer]",
  "priority": "[64-bit signed integer]",
  "event_report_window": "[64-bit signed integer]"
}

必須属性とオプション属性

HTML 要素を使用するか、JavaScript 呼び出しでソースを登録する場合は、attributionsrc または attributionReporting の使用が必要になる場合があります。どのような場合にこれらが必要になるかについて詳しくは、次の表をご覧ください。

attributionsrc が任意の場合、そのリクエストは Attribution Reporting の対象であることを示します。attributionsrc を使用した場合、ブラウザは Attribution-Reporting-Eligible ヘッダーを送信します。また、アプリからウェブの測定にも役立ちます。attributionsrc が存在する場合、ブラウザは Attribution-Reporting-Support ヘッダーを送信します。

登録方法 ソース
<a> タグ （ナビゲーション ソース）
attributionsrc は必須です。
<img> タグ （イベントソース）
attributionsrc は必須です。
<script> タグ （イベントソース）
attributionsrc は必須です。
fetch 個の電話番号 attributionReporting オプションは必須です。
XMLHttpRequest attributionReporting オプションは必須です。
window.open() （ナビゲーション ソース）
attributionsrc は必須です。

ステップ 1: ソースの登録を開始する

ステップ 1 はクリック数と視聴回数で異なります。それぞれに対応するタブを開きます。

クリックのアトリビューション ソースを登録するには、<a> タグまたは JavaScript の window.open() を使用します。

アンカーの使用

インプレッションまたはクリックを測定する既存の <a> タグに attributionsrc を追加します。

<a href="https://shoes.example/..." 
  attributionsrc>Click me</a>

詳しくは、サンプルコードをご覧ください。

スクリプトの使用

attributionsrc を使用して window.open() を呼び出します。

window.open(
  "https://shoes.example/...",
  "_blank",
  "attributionsrc");

考慮されるため、このメソッドは、ユーザー操作から 5 秒以内に呼び出す必要があります。

attributionsrc を単独で追加するのではなく、1 つの画像またはスクリプトに 1 つの URL 値を指定できます。

<a href=... attributionsrc="https://a.example/register-source">

JavaScript の場合、attributionsrc に値を設定する場合は、URL に「=」などの特殊文字が含まれているとパラメータが正しく解析されない可能性があるため、URL をエンコードします。

次のようにエンコードします。 

const encodedUrl = encodeURIComponent(
  'https://adtech.example/attribution_source?ad_id=...');
window.open(
  "https://shoes.example/landing",
   "_blank",
   attributionsrc=${encodedUrl});

attributionsrc では、次に示すアンカータグのように、スペースで区切られた URL のリストを受け取ることもできます。

<!-- With an anchor tag -->
<a href=... attributionsrc="https://a.example/register-source 
  https://b.example/register-source">

または window.open() を使用して、このままにします。

// With window.open()
window.open('...', '_blank', attributionsrc=${encodedUrl1}
  attributionsrc=${encodedUrl2})

この場合、どちらの URL も navigation-source-eligible attributionsrc リクエスト（Attribution-Reporting-Eligible ヘッダーを含むリクエスト）を受け取ります。

attributionsrc（値あり / なし）

前述のように、URL なしで attributionsrc を指定できます。単一の URL を指定することもできます。また、ソースのみ（トリガーには適用されない）には、スペース区切りの URL リストを使用できます。

URL を使用すると、ブラウザは個別のキープアライブ取得リクエスト（URL ごとに 1 つ）を開始します。リクエストには Attribution-Reporting-Eligible リクエスト ヘッダーが含まれます。

これは、要素のメイン リクエストとは別のリクエストに応答してソースを登録する場合に便利です。

たとえば、アンカー要素のクリックのソースを登録する必要がある場合、実際にはデスティネーションを制御できない可能性があります。この場合、ナビゲーションとは別のリクエストに対するレスポンスとしてソース登録ヘッダーを送信し、完全に制御できる構成が必要になります。attributionsrc の明示的な値を指定することで、ブラウザはその追加リクエストを行い、その宛先を構成することになります。

ビューを登録するステップ 1 の場合は、タブに移動し、[Views] ステップ 1 を選択します。

ビューのアトリビューション ソースを登録するには、attributionsrc 属性を追加する画像タグまたはスクリプトタグを使用します。

あるいは、JavaScript fetch() または XMLHttpRequest() を使用することもできます。

画像あり

<img attributionsrc
src="https://adtech.example/attribution_source?ad_id=..."/>

スクリプトを使用する場合

<script attributionsrc
  src="https://adtech.example/attribution_source?ad_id=..."/>

必要に応じて、クリックの場合と同じ方法で attributionsrc の URL 値を指定できます。つまり、画像またはスクリプトの場合、attributionsrc URL を次のように設定できます。

URL が 1 つの場合:

 attributionsrc="https://adtech.example/attribution_source?ad_id=123"

URL のリストを使用した場合:

  attributionsrc="https://a.example/register-source
    https://b.example/register-source"

fetch() または XMLHttpRequest() の使用

次のコードは、attributionsrc を含む HTML リクエストの動作を効果的にシミュレートします。

// With fetch
const attributionReporting = {
  eventSourceEligible: true,
  triggerEligible: false,
};

// Optionally set keepalive to ensure the request outlives the page.
window.fetch("https://adtech.example/attribution_source?my_ad_id=123", { 
  keepalive: true, attributionReporting });

// With XHR
const attributionReporting = {
  eventSourceEligible: true,
  triggerEligible: false,
};

const req = new XMLHttpRequest();
  req.open('GET', url);
  req.setAttributionReporting(
    attributionReporting);
  req.send();

クリックを登録するステップ 1 については、[タブ] に移動し、[クリック数] のステップ 1 を選択します。

ステップ 2: ヘッダー（クリック数と表示数）で応答

クリックとビューの両方に対する次のステップは、Attribution-Reporting-Register-Source ヘッダーで応答することです。

詳しくは、サンプルコードをご覧ください。

サーバーでブラウザ リクエストを受信すると、レスポンスに Attribution-Reporting-Register-Source ヘッダーを含めます。

 res.set(
  'Attribution-Reporting-Register-Source',    
  JSON.stringify({
    // Use source_event_id to map it to any granular information
      // you need at ad-serving time
      source_event_id: '412444888111012',
      destination: 'https://advertiser.example',
      // Optional fields
      expiry: '604800',
      priority: '100',
      debug_key: '122939999'
    })
 );

文字列化すると、ヘッダーは次のようになります。

{"source_event_id":"412444888111012","destination":"https://advertiser.example","expiry":"604800","priority":"100","debug_key":"122939999"}

次のステップ

詳しくは、アトリビューション トリガーを登録する方法をご覧ください。