เทคโนโลยี Privacy Sandbox บางอย่างกำลังจะเลิกใช้งาน

ดูข้อมูลอัปเดตเกี่ยวกับแผนสำหรับเทคโนโลยี Privacy Sandbox

สถานะฟีเจอร์ Privacy Sandbox ให้ข้อมูลเพิ่มเติมเกี่ยวกับสถานะของ API และฟีเจอร์แพลตฟอร์มแต่ละรายการ

หน้านี้ได้รับการแปลโดย Cloud Translation API

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

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

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

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

การใช้จุดยึด

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

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

ดูข้อมูลเพิ่มเติมได้ที่โค้ดตัวอย่าง

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

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

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

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

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

<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 จะทําให้เบราว์เซอร์เริ่มคําขอการดึงข้อมูล Keep-Alive แยกต่างหาก ซึ่งมี 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 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"}

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

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