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

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

アトリビューション ソースは、広告関連のイベント（クリックまたはビュー）です。広告テクノロジーでは、アトリビューション ソースに次の種類の情報を関連付けることができます。

  • コンテキスト レポートのデータ（広告クリエイティブ ID、キャンペーンに関する情報、地域など）。
  • コンバージョンの最終的な到達地（ユーザーがコンバージョンに至ると想定されるサイトなど）。

このドキュメントの手順に沿って、コンバージョンの割り当て先となるソース（広告インプレッションまたはクリック）を登録できます。

登録方法

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

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

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

クリックまたは視聴のソースを登録する

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

  1. ソースの登録を開始します。HTML 要素または JavaScript 呼び出しを使用してリクエストを行います。この手順は、クリックと視聴で異なります。以降のセクションで説明します。

  2. ソース登録ヘッダーで応答して、ソース登録を完了します。このリクエストを受信したら、ヘッダー Attribution-Reporting-Register-Source で応答します。そのヘッダーで、選択したアトリビューション レポートの構成を指定します。この手順は、クリックと視聴の両方で同じです。

    概要レポートの例:

    {
  "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 が省略可の場合、このパラメータを使用すると、リクエストがアトリビューション レポートの対象であることを示します。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 を単独で追加する代わりに、画像またはスクリプトに対して単一の URL 値を指定できます。

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

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

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

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

attributionsrc には、<a> タグで示されているように、スペース区切りの URL リストを指定することもできます。

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

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

window.open("...", "_blank", `attributionsrc=${encodedUrl1}
  attributionsrc=${encodedUrl2}`)

このような場合、両方の URL は、ナビゲーション ソースの対象となる attributionsrc リクエスト（Attribution-Reporting-Eligible ヘッダーを含むリクエスト）を受信します。

attributionsrc（値ありまたはなし）

前述のとおり、URL なしで attributionsrc を指定できます。1 つの URL を指定することもできます。また、スペース区切りの URL リストを使用することもできます。

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

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

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

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

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

画像あり

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

スクリプトを使用する

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

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

単一の URL の場合:

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

URL のリストを使用する場合:

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

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

このコードは、attributionsrc を含む HTML リクエストが行う処理を効果的にシミュレートします。

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

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

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

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

ステップ 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"}

次のステップ

アトリビューション トリガーを登録する方法を学習する。