การสาธิต Topics API

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

สถานะการใช้งาน

  • Topics API ได้เข้าสู่ช่วงการสนทนาแบบสาธารณะแล้ว และขณะนี้พร้อมให้บริการแก่ผู้ใช้ 99 เปอร์เซ็นต์ ซึ่งขยายได้สูงสุดถึง 100 เปอร์เซ็นต์
  • หากต้องการแสดงความคิดเห็นเกี่ยวกับ Topics API โปรดแจ้งปัญหาในคำอธิบาย Topics หรือเข้าร่วมการสนทนาในการปรับปรุงกลุ่มธุรกิจการโฆษณาบนเว็บ คำถามอธิบายมีคําถามที่ยังไม่ได้หลายข้อซึ่งยังต้องการคําจํากัดความเพิ่มเติม
  • ไทม์ไลน์ Privacy Sandbox แสดงลําดับเวลาการติดตั้งใช้งาน Topics API และข้อเสนออื่นๆ ของ Privacy Sandbox
  • Topics API: อัปเดตล่าสุด มีรายละเอียดการเปลี่ยนแปลงและการปรับปรุง Topics API และการใช้งาน

การสาธิต Topics API แสดงให้เห็นว่าหัวข้อมีการอนุมานจากชื่อโฮสต์อย่างไร คุณสามารถดูตัวอย่างหัวข้อที่สังเกตได้เมื่อคุณเข้าชมเว็บไซต์เดโม ซึ่งแทบไม่ต้องตั้งค่าอะไรเลย

เดโมของเราเป็นพรีวิวที่แสดงให้เห็นฟีเจอร์ส่วนใหญ่ของ Topics API เพื่อให้คุณได้ทำความคุ้นเคยกับวิธีนำ API ไปใช้

คุณเรียกใช้ colab ของ Topics เพื่อลองใช้โมเดลตัวแยกประเภทของ Topics ได้เช่นกัน

วิดีโอต่อไปนี้จะแสดงวิธีการทำงานของเดโม

ทดสอบด้วย chrome://flags หรือแฟล็กฟีเจอร์

มี 2 วิธีในการลองใช้ Topics API ในฐานะผู้ใช้รายเดียว คุณจะต้องใช้ Chrome 101 ขึ้นไป

  • เปิดใช้ API ในหน้า Chrome ของ chrome://flags/#privacy-sandbox-ads-apis:

    เปิดใช้ Topics API โดยใช้หน้า chrome://flags/#privacy-sandbox-ads-apis
    หน้า chrome://flags/#privacy-sandbox-ads-apis ที่คุณจะเปิดหรือปิดใช้ API ได้

  • เรียกใช้ Chrome จากบรรทัดคำสั่งโดยใช้แฟล็กต่อไปนี้

    --enable-features=BrowsingTopics,BrowsingTopicsParameters:time_period_per_epoch/15s/browsing_topics_max_epoch_introduction_delay/3s,PrivacySandboxAdsAPIsOverride,PrivacySandboxSettings3,OverridePrivacySandboxSettingsLocalTesting

การสาธิต Topics API

การสาธิตหัวข้อจะแสดงวิธีใช้แฟล็กเพิ่มเติมเพื่อปรับการตั้งค่า เช่น ความยาวของ Epoch หากคุณเข้าถึง Topics API ด้วยการเรียกใช้ Chrome พร้อมแฟล็กบรรทัดคำสั่ง อย่าตั้งค่า chrome://flags เนื่องจากอาจลบล้างการตั้งค่าบรรทัดคำสั่งได้

เรียกใช้ Chromium ด้วยแฟล็ก อธิบายวิธีการตั้งค่าแฟล็กเมื่อเรียกใช้ Chrome และเบราว์เซอร์อื่นๆ ที่ใช้ Chromium จากบรรทัดคำสั่ง แม้ว่าการสาธิตนี้จะใช้สำหรับ Google Chrome โดยเฉพาะ

การสาธิตส่วนหัว Topics API

การสาธิตที่ topics-fetch-demo.glitch.me แสดงวิธีใช้ส่วนหัวคำขอและการตอบกลับของ fetch() เพื่อเข้าถึงหัวข้อและทำเครื่องหมายเป็นสังเกตการณ์

เข้าถึงส่วนหัวของคำขอ Sec-Browsing-Topics

แทนที่จะใช้ document.browsingTopics() จาก iframe เพื่อดูหัวข้อของผู้ใช้ ผู้โทร API จะสามารถเข้าถึงหัวข้อที่สังเกตการณ์ได้จากส่วนหัวคำขอ Sec-Browsing-Topics ของคำขอfetch() ที่มี {browsingTopics: true} ในพารามิเตอร์ตัวเลือก หรือจากส่วนหัวเดียวกันของคำขอ XHR ซึ่งตั้งค่าแอตทริบิวต์ deprecatedBrowsingTopics เป็น true

เช่น

fetch('https://topics-server.glitch.me', {browsingTopics: true})
    .then((response) => {
        // Process the response
 })

ในเบราว์เซอร์ที่รองรับ API คำขอ fetch() จะมีส่วนหัว Sec-Browsing-Topics ที่แสดงหัวข้อที่สังเกตได้สำหรับชื่อโฮสต์ของ URL คำขอ ในตัวอย่างนี้คือ topics-server.glitch.me

หากไม่พบหัวข้อสำหรับชื่อโฮสต์นี้และผู้ใช้รายนี้ ระบบจะรวมส่วนหัวไว้แต่ค่าจะว่างเปล่า กล่าวคือ ส่วนหัว Sec-Browsing-Topics ในคำขอ fetch() จะรวมเฉพาะหัวข้อที่ผู้โทรสังเกตได้สำหรับเบราว์เซอร์ของผู้ใช้ปัจจุบันซึ่งมีต้นทางตรงกับชื่อโฮสต์ของ URL คำขอ ซึ่งจะเหมือนกับที่คุณเรียก document.browsingTopics() จาก iframe เพื่อดูหัวข้อที่สังเกตได้ของผู้ใช้ปัจจุบัน

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

ส่วนหัวของคำขอ Topics จะมีลักษณะดังนี้

Sec-Browsing-Topics: 186;version="chrome.1:1:2206021246";config_version="chrome.1";model_version="2206021246";taxonomy_version="1", 265;version="chrome.1:1:2206021246";config_version="chrome.1";model_version="2206021246";taxonomy_version="1"

ตัวอย่างนี้มี 2 หัวข้อจากการจัดหมวดหมู่ Topics ได้แก่ 186 และ 265 รวมถึงข้อมูลเวอร์ชันของแต่ละหัวข้อ

การรวมส่วนหัวในคำขอ XHR จะใช้ได้ชั่วคราวเท่านั้น และเราจะนำการสนับสนุนออกในอนาคต

ทำเครื่องหมายหัวข้อเป็นสังเกตการณ์ด้วย Observe-Browsing-Topics

หากคำขอมีส่วนหัว Sec-Browsing-Topics และการตอบกลับคำขอนั้นมีส่วนหัว Observe-Browsing-Topics: ?1 เบราว์เซอร์จะทำเครื่องหมายหัวข้อจากส่วนหัวของคำขอเป็นสังเกตการณ์ หัวข้อที่สังเกตการณ์มีสิทธิ์ได้รับการคำนวณโดย Topics API กลไกนี้ได้รับการออกแบบมาให้จับคู่กับฟังก์ชันการทำงานที่ให้บริการโดยใช้ JavaScript API จาก iframe

ภาพหน้าจอด้านล่างแสดงหัวข้อที่บันทึกไว้จากการเข้าชมเว็บไซต์บนหน้าสาธิต API

หน้าการสาธิต Topics API ใน glitch.me
การสาธิตการลองใช้ glitch.me กับ API

รายการนี้แสดงเว็บไซต์ที่คุณเข้าชมได้จากการสาธิตเพื่อบันทึกหัวข้อที่สนใจ ดังที่คุณเห็น หมวดหมู่ "ศิลปะและบันเทิง/เรื่องขำขัน" ในภาพหน้าจอไม่ใช่หัวข้อของเว็บไซต์ใดเว็บไซต์หนึ่งเหล่านี้ ดังนั้นหัวข้อที่บันทึกไว้นี้เป็นหัวข้อที่ได้รับการเพิ่มเป็นหัวข้อแบบสุ่ม 5 เปอร์เซ็นต์ที่เป็นไปได้

  • pets-animals-pets-cats.glitch.me
  • cats-cats-cats-cats.glitch.me
  • cats-pets-animals-pets.glitch.me
  • cats-feline-meow-purr-whiskers-pet.glitch.

คุณสามารถตรวจสอบว่าหัวข้อใดเป็นจริงและสุ่มขึ้นได้ที่แท็บสถานะของหัวข้อในหน้า chrome://topics-internals ภาพหน้าจอนี้แสดงตัวอย่างจากเซสชันการท่องเว็บต่างๆ

แท็บสถานะหัวข้อให้ข้อมูลเกี่ยวกับหัวข้อที่สังเกตได้
แท็บสถานะหัวข้อที่แสดงหัวข้อจริงและสุ่ม

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

หากคุณเป็นนักพัฒนาเทคโนโลยีโฆษณา ให้ทดสอบและเข้าร่วมกับ Topics API อ่านคู่มือนักพัฒนาซอฟต์แวร์เพื่อดูแหล่งข้อมูลแบบเจาะลึก

มีส่วนร่วมและแชร์ความคิดเห็น