Demo Topics API

Lakukan eksperimen dan pelajari cara topik disimpulkan dari nama host dengan penyiapan minimal.

Status penerapan

  • Topics API telah menyelesaikan fase diskusi publik dan saat ini tersedia untuk 99 persen pengguna, dengan peningkatan skala hingga 100 persen.
  • Untuk memberikan masukan tentang Topics API, buat Masalah di Penjelasan topik atau berpartisipasi dalam diskusi di Meningkatkan Grup Bisnis Periklanan Web. Penjelasan memiliki sejumlah pertanyaan terbuka yang masih memerlukan definisi lebih lanjut.
  • Linimasa Privacy Sandbox memberikan linimasa penerapan untuk Topics API dan proposal Privacy Sandbox lainnya.
  • Topics API: update terbaru menjelaskan perubahan dan peningkatan kualitas Topics API dan implementasinya.

Demo Topics API menunjukkan cara topik disimpulkan dari nama host. Anda dapat melihat pratinjau topik yang diamati saat membuka situs demo, yang hanya memerlukan sedikit penyiapan.

Demo kami adalah pratinjau yang menunjukkan sebagian besar fitur Topics API, agar Anda dapat memahami cara penerapan API ini.

Anda juga dapat menjalankan colab Topics untuk mencoba model pengklasifikasi Topics.

Video berikut menunjukkan cara kerja demo.

Uji dengan chrome://flags atau tombol fitur

Ada dua cara untuk mencoba Topics API sebagai satu pengguna; Anda harus menjalankan Chrome 101 atau yang lebih baru:

  • Aktifkan semua API privasi iklan di chrome://settings/adPrivacy.

  • Jalankan Chrome dari command line dengan tanda berikut:

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

Demo Topics API

Demo Topik menunjukkan cara menggunakan tanda tambahan untuk menyesuaikan setelan, seperti panjang epoch. Jika Anda mengakses Topics API dengan menjalankan Chrome menggunakan tanda command line, jangan tetapkan chrome://flags, karena hal ini dapat mengganti setelan command line.

Menjalankan Chromium dengan tanda menjelaskan cara menyetel tanda saat menjalankan Chrome dan browser berbasis Chromium lainnya dari command line, meskipun demo ini khusus untuk Google Chrome.

Demo header Topics API

Demo di topics-fetch-demo.glitch.me menunjukkan cara menggunakan header permintaan dan respons fetch() untuk mengakses topik dan menandainya sebagai diamati.

Mengakses header permintaan Sec-Browsing-Topics

Daripada menggunakan document.browsingTopics() dari iframe untuk melihat topik bagi pengguna, pemanggil API dapat mengakses topik yang diamati dari header permintaan Sec-Browsing-Topics dari permintaan fetch() yang menyertakan {browsingTopics: true} dalam parameter opsinya—atau dari header yang sama dalam permintaan XHR yang menetapkan atribut deprecatedBrowsingTopics ke true.

Contoh:

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

Di browser yang mendukung API, permintaan fetch() akan menyertakan header Sec-Browsing-Topics yang mencantumkan topik yang diamati untuk nama host URL permintaan: dalam contoh ini, topics-server.glitch.me.

Jika tidak ada topik yang diamati untuk nama host ini dan pengguna ini, header akan disertakan tetapi nilainya kosong. Dengan kata lain, header Sec-Browsing-Topics pada permintaan fetch() hanya menyertakan topik yang telah diamati untuk browser pengguna saat ini oleh pemanggil yang asalnya cocok dengan nama host URL permintaan. Ini sama seperti ketika Anda memanggil document.browsingTopics() dari iframe untuk melihat topik yang diamati untuk pengguna saat ini.

Header permintaan dikirim berdasarkan permintaan selama memiliki kebijakan izin yang sesuai, konteksnya aman, dan setelan pengguna mengizinkannya. Topik tidak disediakan di header untuk permintaan navigasi.

Header permintaan Topics terlihat seperti ini:

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"

Contoh ini mencakup dua topik dari Taksonomi topik, 186 dan 265, beserta informasi versi setiap topik.

Penyertaan header topik dalam permintaan XHR hanya tersedia untuk sementara, dan dukungan akan dihapus pada masa mendatang.

Tandai topik sebagai diamati dengan Observe-Browsing-Topics

Jika permintaan menyertakan header Sec-Browsing-Topics dan respons atas permintaan tersebut menyertakan header Observe-Browsing-Topics: ?1, topik dari header permintaan akan ditandai oleh browser sebagai diamati. Topik yang diamati memenuhi syarat untuk dihitung oleh Topics API. Mekanisme ini dirancang agar cocok dengan fungsi yang diberikan menggunakan JavaScript API dari iframe.

Screenshot di bawah menampilkan topik yang direkam saat mengunjungi situs di halaman demo API.

Halaman demo Topics API di glitch.me
Demo glitch.me untuk mencoba API.

Daftar ini menampilkan situs yang dapat Anda buka dari demo untuk merekam topik yang diminati. Seperti yang Anda lihat, kategori Seni & Hiburan/Humor di screenshot bukanlah topik salah satu situs tersebut. Jadi, topik yang direkam ini adalah topik yang ditambahkan sebagai kemungkinan topik acak 5 persen.

  • 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.

Anda dapat memeriksa untuk melihat topik mana yang nyata dan acak di tab Status Topik pada halaman chrome://topics-internals. Screenshot ini menampilkan contoh dari berbagai sesi penjelajahan.

Tab Status topik memberikan informasi tentang topik yang diamati.
Tab Status Topik menampilkan topik yang nyata dan acak.

Langkah berikutnya

Jika Anda adalah developer teknologi iklan, lakukan eksperimen dan berpartisipasi dengan Topics API. Baca panduan developer untuk mengetahui referensi yang lebih mendalam.

Berinteraksi dan berbagi masukan