การสาธิต 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 หรือแฟล็กฟีเจอร์

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

  • เปิดใช้ API ความเป็นส่วนตัวเกี่ยวกับโฆษณาทั้งหมดใน chrome://settings/adPrivacy

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

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

การสาธิต Topics API

การสาธิตของ Topics จะแสดงวิธีใช้แฟล็กเพิ่มเติมเพื่อปรับการตั้งค่า เช่น ความยาว 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 ของคำขอดึงข้อมูล() ที่มี {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 อ่านคู่มือนักพัฒนาซอฟต์แวร์เพื่อดูแหล่งข้อมูลเชิงลึกเพิ่มเติม

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