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

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

ทริกเกอร์การระบุแหล่งที่มาคือเหตุการณ์ที่บอกให้เบราว์เซอร์บันทึก Conversion

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

วิธีการลงทะเบียน

หากต้องการลงทะเบียนทริกเกอร์ ให้ใช้องค์ประกอบ HTML หรือการเรียก JavaScript ดังนี้

  • แท็ก <img>
  • แท็ก <script>
  • การโทร fetch ครั้ง
  • XMLHttpRequest

ซึ่งจะสร้างคำขอเครือข่ายที่คุณตอบกลับด้วยส่วนหัวการตอบกลับ HTTP ของการลงทะเบียนทริกเกอร์

ลงทะเบียนทริกเกอร์เพื่อระบุแหล่งที่มาของ Conversion

การลงทะเบียนทริกเกอร์คล้ายกับการลงทะเบียนเหตุการณ์แหล่งที่มาของการระบุแหล่งที่มา ขั้นตอนทั้งหมดจะอธิบายในภายหลัง สรุปได้ดังนี้

  1. เริ่มการลงทะเบียนทริกเกอร์ ใช้พิกเซลหรือfetch()การเรียกเพื่อส่งคำขอ
  2. ลงทะเบียนทริกเกอร์ให้เสร็จสมบูรณ์โดยตอบกลับด้วยส่วนหัวการลงทะเบียนทริกเกอร์

    เมื่อได้รับคำขอพิกเซลที่ส่งไปยังปลายทางที่กำหนดไว้ในแอตทริบิวต์ 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> ไม่สามารถใช้ได้: แองเคอร์ลงทะเบียนทริกเกอร์ไม่ได้
แท็ก <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 make sure 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 จะทําให้เบราว์เซอร์เริ่มคําขอแบบดึงข้อมูล Keep-Alive แยกต่างหาก ซึ่งมี 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"
});

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

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