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

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

แหล่งที่มาของการระบุแหล่งที่มาคือเหตุการณ์ที่เกี่ยวข้องกับโฆษณา (การคลิกหรือการดู) ซึ่งเทคโนโลยีโฆษณาสามารถแนบข้อมูลประเภทต่อไปนี้ได้

  • ข้อมูลการรายงานตามบริบท เช่น รหัสครีเอทีฟโฆษณา ข้อมูลเกี่ยวกับแคมเปญ หรือภูมิศาสตร์
  • ปลายทาง 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]"
}

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

เมื่อใช้องค์ประกอบ 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()

การใช้แท็ก 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">Click me</a>

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

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

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

attributionsrc สามารถใช้รายการ URL ที่คั่นด้วยช่องว่างได้ตามที่แสดงให้เห็นแทนแท็ก <a> ดังนี้

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

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

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

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

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

ตัวอย่างเช่น หากคุณต้องลงทะเบียนแหล่งที่มาสำหรับการคลิกบนองค์ประกอบ Anchor คุณอาจไม่สามารถควบคุมปลายทางได้ ในกรณีนี้ คุณจะต้องมีการกำหนดค่าที่คุณส่งส่วนหัวของการลงทะเบียนต้นทางเป็นการตอบกลับคำขอที่แยกต่างหากจากการนำทาง และคุณสามารถควบคุมได้อย่างสมบูรณ์ การระบุค่าที่ชัดเจนสำหรับ 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>

นอกจากนี้ คุณยังระบุค่า URL สำหรับ 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()

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

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 });

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

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

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