ลงทะเบียนแหล่งที่มาของการระบุแหล่งที่มา

ดูวิธีบันทึกแหล่งที่มาเพื่อระบุแหล่งที่มาของการคลิกและการดูเป็นเหตุการณ์ที่เหมาะสม

แหล่งที่มาของการระบุแหล่งที่มาคือเหตุการณ์ที่เกี่ยวข้องกับโฆษณา (คลิกหรือข้อมูลพร็อพเพอร์ตี้) ซึ่งเทคโนโลยีโฆษณาจะแนบข้อมูลประเภทต่อไปนี้ได้ - ข้อมูลการรายงานตามบริบท เช่น รหัสครีเอทีฟโฆษณา ข้อมูลเกี่ยวกับแคมเปญ หรือภูมิศาสตร์ - ปลายทาง Conversion เช่นในเว็บไซต์ที่คุณคาดหวังว่าผู้ใช้จะทำ Conversion

เมื่อทําตามขั้นตอนในเอกสารฉบับนี้ คุณจะสามารถบันทึกแหล่งที่มาต่างๆ (การแสดงโฆษณาหรือการคลิก) ซึ่งเบราว์เซอร์จะระบุแหล่งที่มาของ Conversion ได้

วิธีการจดทะเบียน

หากต้องการลงทะเบียนแหล่งที่มาของการระบุแหล่งที่มา ให้ใช้องค์ประกอบ 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]"
}

แอตทริบิวต์ที่ต้องระบุและไม่บังคับ

คุณอาจต้องใช้ attributionsrc หรือ attributionReporting ขณะใช้องค์ประกอบ HTML หรือเรียกใช้ JavaScript เพื่อลงทะเบียนแหล่งที่มา ดูรายละเอียดเกี่ยวกับเวลาที่จำเป็นต้องใช้สิ่งเหล่านี้ในตารางต่อไปนี้

หาก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() เพื่อลงทะเบียนแหล่งที่มาของการระบุแหล่งที่มาสําหรับคลิกได้

การใช้แท็ก Anchor

เพิ่ม attributionsrc ในแท็ก <a> ที่มีอยู่ที่คุณต้องการวัดการแสดงผลหรือการคลิก:

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

ดูโค้ดตัวอย่างสำหรับข้อมูลเพิ่มเติม

การใช้สคริปต์

โทรหา window.open() ด้วย attributionsrc:

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

ในการนำมาพิจารณา จะต้องเรียกใช้เมธอดนี้ภายใน 5 วินาทีนับจากการโต้ตอบของผู้ใช้

แทนที่จะเพิ่ม attributionsrc เพียงอย่างเดียว คุณระบุค่า URL เดียวสำหรับรูปภาพหรือสคริปต์ได้ดังนี้

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

ในกรณีของ JavaScript หากคุณระบุค่า attributionsrc อย่าลืมเข้ารหัส URL นั้นในกรณีที่มีสัญลักษณ์พิเศษ เช่น '=' ซึ่งจะทําให้พารามิเตอร์ได้รับการแยกวิเคราะห์อย่างไม่ถูกต้อง

เข้ารหัสดังนี้ 

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

attributionsrc สามารถใช้รายการ URL ที่คั่นด้วยช่องว่างตามที่แสดงไว้ที่นี่พร้อมด้วยแท็ก Anchor:

<!-- 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 ทั้ง 2 รายการจะได้รับคำขอ navigation-source-eligible attributionsrc รายการ (คำขอที่มีส่วนหัว Attribution-Reporting-Eligible)

attributionsrc ที่มีหรือไม่มีค่า

อย่างที่เห็นก่อนหน้านี้ คุณสามารถระบุ attributionsrc ได้โดยไม่ต้องมี URL คุณสามารถระบุ URL เดียวได้เช่นกัน นอกจากนี้ สำหรับแหล่งที่มาเท่านั้น (ใช้ไม่ได้กับทริกเกอร์) คุณสามารถใช้รายการ URL ที่คั่นด้วยการเว้นวรรคได้

การใช้ URL จะทำให้เบราว์เซอร์เริ่มคำขอดึงข้อมูล Keepalive แยกต่างหาก โดยใช้ 1 คำขอต่อ URL 1 รายการ ซึ่งรวมถึงส่วนหัวของคำขอ Attribution-Reporting-Eligible

ซึ่งจะเป็นประโยชน์หากคุณต้องการสร้างการลงทะเบียนต้นทางโดยการตอบกลับคำขอที่แยกจากคำขอหลักขององค์ประกอบ

ตัวอย่างเช่น หากคุณจำเป็นต้องลงทะเบียนแหล่งที่มาสำหรับการคลิกองค์ประกอบ Anchor จริงๆ แล้วคุณอาจไม่ได้เป็นผู้ควบคุมปลายทาง ซึ่งในกรณีนี้ คุณจะต้องกำหนดค่าที่ส่งส่วนหัวการลงทะเบียนแหล่งที่มาเป็นการตอบกลับคำขอที่แยกจากการนำทาง และคุณจะควบคุมได้โดยสมบูรณ์ การระบุค่าที่ชัดเจนสำหรับ attributionsrc จะเป็นการสั่งให้เบราว์เซอร์สร้างคำขอเพิ่มเติมและกำหนดค่าปลายทาง

สำหรับขั้นตอนที่ 1 ของการบันทึกมุมมอง ให้ไปที่แท็บ และเลือกมุมมองขั้นตอนที่ 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=..."/>

หรือคุณจะระบุค่า URL สำหรับ attributionsrc แบบเดียวกันกับการคลิกก็ได้ กล่าวคือ สำหรับรูปภาพหรือสคริปต์ คุณจะตั้งค่า URL ของ attributionsrc หรือ URL ได้ดังนี้

ด้วย URL เดียว:

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

รายการ URL

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

ใช้ fetch() หรือ XMLHttpRequest()

โค้ดนี้จะจำลองว่าคำขอ HTML ด้วย attributionsrc ควรทำอย่างไรอย่างมีประสิทธิภาพ:

// 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"}

ขั้นตอนถัดไป

ดูวิธีลงทะเบียนทริกเกอร์การระบุแหล่งที่มา