ソースを登録して、クリックとビューを適切なイベントに関連付ける方法について学習します。
アトリビューション ソースは広告関連のイベント(クリックまたはビュー)であり、広告テクノロジーはこれに次のような情報を追加できます。 - コンテキスト レポートデータ(広告クリエイティブ ID、キャンペーンに関する情報、地域など)。- ユーザーがコンバージョンに至ると期待するサイトなどのリンク先。
このドキュメントの手順に従って、ブラウザがコンバージョンを関連付けたソース(広告のインプレッションまたはクリック)を登録できます。
登録方法
アトリビューション ソースを登録するには、HTML 要素または JavaScript 呼び出しを使用します。
<a>
タグ<img>
タグ<script>
タグfetch
個の電話番号XMLHttpRequest
window.open
これにより、ネットワーク リクエストが生成され、ソース登録の HTTP レスポンス ヘッダーで応答します。
クリックまたはビューのソースを登録する
クリックまたは視聴のアトリビューション ソースを登録する手順は次のとおりです。詳しい手順については、こちらをご覧ください。概要は次のとおりです。
- ソースの登録を開始する。HTML 要素または JavaScript 呼び出しを使用して、リクエストを送信します。以降のセクションで説明するように、この手順はクリック数と表示数とで異なります。
ソース登録ヘッダーで応答して、ソース登録を完了します。そのリクエストを受け取ったら、ヘッダー
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"}
次のステップ
詳しくは、アトリビューション トリガーを登録する方法をご覧ください。