ดูวิธีลงทะเบียนทริกเกอร์การระบุแหล่งที่มาเพื่อนับ Conversion
ทริกเกอร์การระบุแหล่งที่มาคือเหตุการณ์ที่บอกให้เบราว์เซอร์บันทึก Conversion
เมื่อทำตามขั้นตอนในเอกสารนี้ คุณจะสามารถบันทึกทริกเกอร์เพื่อลงทะเบียน Conversion ที่เบราว์เซอร์ระบุแหล่งที่มาไปยังเหตุการณ์แหล่งที่มาที่เกี่ยวข้อง ซึ่งได้แก่ การแสดงโฆษณาหรือการคลิกโฆษณา
วิธีการลงทะเบียน
หากต้องการลงทะเบียนทริกเกอร์ ให้ใช้องค์ประกอบ HTML หรือการเรียก JavaScript ดังนี้
- แท็ก
<img>
- แท็ก
<script>
- การโทร
fetch
รายการ XMLHttpRequest
การดำเนินการนี้จะสร้างคำขอเครือข่าย ซึ่งคุณจะตอบกลับด้วยส่วนหัวการตอบกลับ HTTP ของการลงทะเบียนทริกเกอร์
ลงทะเบียนทริกเกอร์เพื่อระบุแหล่งที่มาของ Conversion
การลงทะเบียนทริกเกอร์นั้นคล้ายกับการลงทะเบียนเหตุการณ์แหล่งที่มาของการระบุแหล่งที่มา เราจะอธิบายขั้นตอนที่สมบูรณ์ในภายหลัง ข้อมูลสรุปมีดังนี้
- เริ่มการลงทะเบียนทริกเกอร์ ใช้พิกเซลหรือการเรียก
fetch()
เพื่อส่งคำขอ ดำเนินการลงทะเบียนทริกเกอร์ให้เสร็จสมบูรณ์โดยตอบกลับด้วยส่วนหัวการลงทะเบียนทริกเกอร์
เมื่อได้รับคำขอพิกเซล ซึ่งส่งไปยังปลายทางที่กำหนดไว้ในแอตทริบิวต์
src
ปกติ หรือส่งไปยังปลายทางที่กำหนดไว้ในattributionsrc
หากเลือกใช้attributionsrc
และระบุค่าแล้ว ให้ตอบกลับด้วยส่วนหัวAttribution-Reporting-Register-Trigger
ในส่วนหัวนี้ ระบุข้อมูลทริกเกอร์ที่คุณต้องการให้แสดงในรายงานในท้ายที่สุด ทุกการตอบสนองสามารถตั้งค่าส่วนหัวนี้ได้ ตราบใดที่เป็นการตอบกลับคำขอจากเว็บไซต์ที่ตรงกับ
destination
ระบบจะจับคู่แหล่งที่มา เมื่อได้รับส่วนหัวแล้ว เบราว์เซอร์จะมองหาแหล่งที่มาที่ตรงกันและตั้งเวลาการสร้างรายงานตัวอย่างสําหรับรายงานระดับเหตุการณ์
{ "event_trigger_data": [{ "trigger_data": "[unsigned 64-bit integer]", "priority": "[signed 64-bit integer]", "deduplication_key": "[unsigned 64-bit integer]" }] }
ตัวอย่างรายงานสรุป
{ ... // existing fields, such as "event_trigger_data" "aggregatable_trigger_data": [ { "key_piece": "0x400", "source_keys": ["campaignCounts"] }, { "key_piece": "0xA80", "source_keys": ["geoValue", "nonMatchingKeyIdsAreIgnored"] } ], "aggregatable_values": { "campaignCounts": 32768, "geoValue": 1664 } }
การจัดการกับโดเมนย่อย
หาก destination
คือ https://advertiser.example
ระบบจะระบุแหล่งที่มาของ Conversion ทั้งใน https://advertiser.example
และโดเมนย่อย เช่น https://shop.advertiser.example
ได้
หาก destination
คือ https://shop.advertiser.example
ระบบจะระบุแหล่งที่มาของ Conversion ทั้งใน https://advertiser.example
และ https://shop.advertiser.example
ได้
แอตทริบิวต์ที่ต้องระบุและไม่บังคับ
เมื่อใช้องค์ประกอบ HTML หรือเรียกใช้ JavaScript เพื่อลงทะเบียนทริกเกอร์ คุณอาจต้องใช้ attributionsrc
หรือ attributionReporting
ดูรายละเอียดเกี่ยวกับกรณีที่จำเป็นต้องดำเนินการดังกล่าวได้ในตารางต่อไปนี้
เมื่อ attributionsrc
เป็นไม่บังคับ การใช้จะบ่งชี้ว่าคำขอมีสิทธิ์ใช้การรายงานการระบุแหล่งที่มา หากคุณใช้ attributionsrc
เบราว์เซอร์จะส่งส่วนหัว Attribution-Reporting-Eligible
และมีประโยชน์ในการวัดผลจากแอปไปยังเว็บด้วย กล่าวคือ หากมี attributionsrc
อยู่ เบราว์เซอร์จะส่งส่วนหัว Attribution-Reporting-Support
วิธีการลงทะเบียน | ทริกเกอร์ |
---|---|
แท็ก <a> |
ไม่มี: แท็ก Anchor จะลงทะเบียนทริกเกอร์ไม่ได้ |
แท็ก <img> |
attributionsrc เป็นตัวเลือก ส่วนหัวนั้นเพียงพอที่จะลงทะเบียนทริกเกอร์ |
แท็ก <script> |
attributionsrc เป็นแบบไม่บังคับ ส่วนหัวนั้นเพียงพอที่จะลงทะเบียนทริกเกอร์ |
การโทร fetch รายการ |
ต้องระบุตัวเลือก attributionReporting |
XMLHttpRequest |
ต้องระบุตัวเลือก attributionReporting |
window.open() |
ไม่มี: window.open ไม่สามารถลงทะเบียนทริกเกอร์ได้ |
ขั้นตอนที่ 1: เริ่มการลงทะเบียนทริกเกอร์
คุณสามารถลงทะเบียนทริกเกอร์โดยใช้พิกเซล (แท็ก <img>
) หรือแท็กสคริปต์
การใช้พิกเซล Conversion ใหม่หรือที่มีอยู่
ตัวอย่างต่อไปนี้จะทริกเกอร์การระบุแหล่งที่มาในรูปภาพที่มีอยู่ด้วยการเพิ่มแอตทริบิวต์ attributionsrc
ต้นทางสำหรับ attributionsrc
ต้องตรงกับต้นทางที่ลงทะเบียนได้
<img src="https://advertiser.example/conversionpixel"
attributionsrc="https://adtech.example/attribution_trigger?purchase=13">
ตัวอย่างถัดไปจะเรียกใช้การระบุแหล่งที่มาด้วยการเพิ่มแอตทริบิวต์พิกเซล Conversion attributionsrc
ใหม่
ต้นทางสำหรับ src
ต้องตรงกับต้นทางที่ลงทะเบียนได้
<img src="https://adtech.example/conversionpixel"
attributionsrc>
การใช้แท็กสคริปต์
คุณลงทะเบียนทริกเกอร์ด้วยแท็กสคริปต์ได้ โดยแท็กจะทำงานเหมือนกับ <img>
ตัวอย่างโค้ดต่อไปนี้แสดงการใช้ fetch()
และ XMLHttpRequest()
(XHR)
โค้ดนี้จะจำลองสิ่งที่คำขอ HTML ที่มี attributionsrc
จะทำอย่างมีประสิทธิภาพ:
const attributionReporting = {
eventSourceEligible: false,
triggerEligible: true,
};
// 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: false,
triggerEligible: true,
};
const req = new XMLHttpRequest();
req.open("GET", url);
req.setAttributionReporting(attributionReporting);
req.send();
attributionsrc
ที่มีหรือไม่มีค่า
คุณจะเพิ่ม attributionsrc
แบบระบุหรือไม่ใส่ก็ได้
<!-- Without a value -->
<img src="..." width="1" height="1" attributionsrc>
<!-- With a value (URL) -->
<img src="..." width="1" height="1" attributionsrc="https://...">
หากคุณตั้งค่าให้กับ attributionsrc
ค่านั้นอาจเป็น URL ที่คั่นด้วยช่องว่างอย่างน้อย 1 รายการ
การใช้ URL จะทำให้เบราว์เซอร์เริ่มต้นคำขอดึงข้อมูล Keepalive แยกต่างหาก โดยใช้ 1 รายการต่อ URL แต่ละรายการ ซึ่งรวมถึงส่วนหัวของคำขอ Attribution-Reporting-Eligible
ซึ่งจะเป็นประโยชน์ในกรณีที่คุณต้องการสร้างการลงทะเบียนทริกเกอร์โดยการตอบกลับคำขอที่แยกต่างหากจากคำขอหลักขององค์ประกอบ
ตัวอย่างเช่น หากคุณต้องลงทะเบียนทริกเกอร์บนองค์ประกอบรูปภาพ คุณอาจไม่สามารถควบคุมการตอบสนองของรูปภาพได้ ในกรณีนี้ คุณจะต้องมีการกำหนดค่าโดยส่งส่วนหัวการลงทะเบียนทริกเกอร์เพื่อตอบกลับคำขอที่แยกต่างหากจากรูปภาพ ซึ่งคุณควบคุมได้อย่างสมบูรณ์ การระบุค่าที่ชัดเจนสำหรับ attributionsrc
เป็นการสั่งให้เบราว์เซอร์ส่งคำขอเพิ่มเติมและกำหนดค่าปลายทาง
ขั้นตอนที่ 2: ตอบกลับด้วยส่วนหัว
เมื่อได้รับคำขอเบราว์เซอร์ ให้ตอบกลับและรวมส่วนหัว Attribution-Reporting-Register-Trigger
ไว้ในการตอบกลับของคุณ:
JSON.stringify({
event_trigger_data: [{
trigger_data: "412444888111012",
// Optional
priority: "1000000000000",
deduplication_key: "2345698765"
}],
debug_key: "1115698977"
});