เรียนรู้วิธีบันทึกแหล่งที่มาเพื่อระบุแหล่งที่มาของการคลิกและการดูไปยังเหตุการณ์ที่เหมาะสม
แหล่งที่มาของการระบุแหล่งที่มาคือเหตุการณ์ที่เกี่ยวข้องกับโฆษณา (การคลิกหรือการดู) ซึ่งเทคโนโลยีโฆษณาสามารถแนบข้อมูลประเภทต่อไปนี้ได้
- ข้อมูลการรายงานตามบริบท เช่น รหัสครีเอทีฟโฆษณา ข้อมูลเกี่ยวกับแคมเปญ หรือภูมิศาสตร์
- ปลายทาง Conversion เช่น ในเว็บไซต์ที่คุณคาดว่าผู้ใช้จะทำ Conversion
เมื่อทำตามขั้นตอนในเอกสารนี้ คุณจะสามารถบันทึกแหล่งที่มา เช่น การแสดงโฆษณาหรือการคลิก ที่เบราว์เซอร์จะระบุแหล่งที่มาของ Conversion ได้
วิธีการลงทะเบียน
หากต้องการลงทะเบียนแหล่งที่มาของการระบุแหล่งที่มา ให้ใช้องค์ประกอบ HTML หรือการเรียก JavaScript ดังนี้
- แท็ก
<a>
- แท็ก
<img>
- แท็ก
<script>
- การโทร
fetch
รายการ XMLHttpRequest
- การโทร
window.open
รายการ
การดำเนินการนี้จะสร้างคำขอเครือข่ายที่คุณตอบกลับด้วยส่วนหัวการตอบกลับ HTTP ของการลงทะเบียนต้นทาง
แหล่งที่มาการลงทะเบียนสำหรับการคลิกหรือการดู
หากต้องการลงทะเบียนแหล่งที่มาของการระบุแหล่งที่มาสำหรับการคลิกหรือการดู ให้ทำตามขั้นตอนที่ระบุไว้ที่นี่ จากนั้นทำตามขั้นตอนที่สมบูรณ์ ข้อมูลสรุปมีดังนี้
- เริ่มการลงทะเบียนแหล่งที่มา ใช้องค์ประกอบ HTML หรือการเรียก JavaScript เพื่อส่งคำขอ ขั้นตอนนี้มีความแตกต่างสำหรับการคลิกและการดู คุณจะเห็นในส่วนต่อไปนี้
ดำเนินการลงทะเบียนต้นทางโดยตอบกลับด้วยส่วนหัวของการลงทะเบียนต้นทาง เมื่อได้รับคำขอดังกล่าว ให้ตอบกลับด้วยส่วนหัว
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"}