Menangani Intervensi Iklan Berat

Rowan Merewood

Iklan yang menggunakan resource dalam jumlah yang tidak proporsional di perangkat akan berdampak buruk pada pengalaman pengguna—mulai dari efek yang jelas berupa penurunan performa hingga konsekuensi yang kurang terlihat seperti menghabiskan baterai atau menghabiskan kuota bandwidth. Iklan ini berkisar dari yang secara aktif berbahaya, seperti penambang mata uang kripto, hingga konten asli dengan bug atau masalah performa yang tidak disengaja.

Chrome menetapkan batas pada resource yang dapat digunakan iklan dan menghapus iklan tersebut jika batas terlampaui. Anda dapat membaca pengumuman di blog Chromium untuk mengetahui detail selengkapnya. Mekanisme yang digunakan untuk menghapus muatan iklan adalah Intervensi Iklan Berat.

Kriteria Iklan Berat

Iklan dianggap berat jika pengguna belum berinteraksi dengannya (misalnya, belum mengetuk atau mengkliknya) dan memenuhi salah satu kriteria berikut:

• Menggunakan thread utama selama total lebih dari 60 detik
• Menggunakan thread utama selama lebih dari 15 detik dalam jendela 30 detik
• Menggunakan bandwidth jaringan lebih dari 4 megabyte

Semua resource yang digunakan oleh iframe turunan dari frame iklan akan dihitung terhadap batas untuk melakukan intervensi pada iklan tersebut. Perhatikan bahwa batas waktu thread utama tidak sama dengan waktu yang berlalu sejak memuat iklan. Batasnya adalah berapa lama waktu yang dibutuhkan CPU untuk mengeksekusi kode iklan.

Menguji intervensi

Intervensi dikirimkan di Chrome 85, tetapi secara default ada beberapa derau dan variabilitas yang ditambahkan ke nilai minimum untuk melindungi privasi pengguna.

Menetapkan chrome://flags/#heavy-ad-privacy-mitigations ke Nonaktif akan menghapus perlindungan tersebut, yang berarti pembatasan diterapkan secara deterministik, murni sesuai dengan batas. Hal ini akan mempermudah proses debug dan pengujian.

Saat intervensi dipicu, Anda akan melihat konten dalam iframe untuk iklan berat yang diganti dengan pesan Ad removed. Jika Anda mengikuti link Detail yang disertakan, Anda akan melihat pesan yang menjelaskan: "Iklan ini menggunakan terlalu banyak resource untuk perangkat Anda, sehingga Chrome menghapusnya."

Anda dapat melihat intervensi yang diterapkan ke konten contoh di weight-ads.glitch.me Anda juga dapat menggunakan situs pengujian ini untuk memuat URL arbitrer sebagai cara cepat untuk menguji konten Anda sendiri.

Berhati-hatilah saat menguji bahwa ada sejumlah alasan yang dapat mencegah intervensi diterapkan.

• Memuat ulang iklan yang sama dalam halaman yang sama akan mengecualikan kombinasi tersebut dari intervensi. Menghapus histori penjelajahan dan membuka halaman di tag baru dapat membantu.
• Pastikan halaman tetap dalam fokus - menempatkan halaman di latar belakang (beralih ke jendela lain) akan menjeda task queue untuk halaman, sehingga tidak akan memicu intervensi CPU.
• Pastikan Anda tidak mengetuk atau mengklik konten iklan selama pengujian - intervensi tidak akan diterapkan pada konten yang menerima interaksi pengguna.

Apa yang perlu Anda lakukan?

Anda menampilkan iklan dari penyedia pihak ketiga di situs Anda

Tidak perlu tindakan apa pun, tetapi perlu diketahui bahwa pengguna mungkin melihat iklan yang melebihi batas yang dihapus saat berada di situs Anda.

Anda menampilkan iklan pihak pertama di situs Anda atau Anda menyediakan iklan untuk ditampilkan oleh pihak ketiga

Lanjutkan membaca untuk memastikan Anda menerapkan pemantauan yang diperlukan melalui Reporting API untuk intervensi Iklan Berat.

Anda membuat konten iklan atau mengelola alat untuk membuat konten iklan

Lanjutkan membaca untuk memastikan Anda mengetahui cara menguji konten untuk menemukan masalah performa dan penggunaan resource. Sebaiknya Anda juga merujuk ke panduan tentang platform iklan pilihan Anda karena platform tersebut dapat memberikan saran atau batasan teknis tambahan, misalnya, lihat Panduan Google untuk materi iklan display. Pertimbangkan untuk membuat nilai minimum yang dapat dikonfigurasi langsung ke dalam alat pembuatan untuk mencegah iklan berperforma buruk agar tidak ditayangkan.

Apa yang terjadi jika iklan dihapus?

Intervensi di Chrome dilaporkan melalui Reporting API yang diberi nama tepat dengan jenis laporan intervention. Anda dapat menggunakan Reporting API untuk mendapatkan notifikasi tentang intervensi, baik melalui permintaan POST ke endpoint pelaporan atau dalam JavaScript Anda.

Laporan ini dipicu di iframe bertag iklan root beserta semua turunan, yaitu setiap frame yang di-unload oleh intervensi. Artinya, jika iklan berasal dari sumber pihak ketiga, yaitu iframe lintas situs, pihak pihak ketiga tersebut (misalnya, penyedia iklan) yang akan menangani laporan.

Untuk mengonfigurasi halaman untuk laporan HTTP, responsnya harus menyertakan header Report-To:

Report-To: { "url": "https://example.com/reports", "max_age": 86400 }

Permintaan POST yang dipicu akan menyertakan laporan seperti ini:

POST /reports HTTP/1.1
Host: example.com
…
Content-Type: application/report

[{
 "type": "intervention",
 "age": 60,
 "url": "https://example.com/url/of/ad.html",
 "body": {
   "sourceFile": null,
   "lineNumber": null,
   "columnNumber": null,
   "id": "HeavyAdIntervention",
   "message": "Ad was removed because its CPU usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384"
 }
}]

JavaScript API menyediakan ReportingObserver dengan metode observe() yang dapat digunakan untuk memicu callback yang disediakan pada intervensi. Hal ini dapat berguna jika Anda ingin melampirkan informasi tambahan ke laporan untuk membantu proses debug.

// callback that will handle intervention reports
function sendReports(reports) {
  for (let report of reports) {
    // Log the `report` json via your own reporting process
    navigator.sendBeacon('https://report.example/your-endpoint', report);
  }
}

// create the observer with the callback
const observer = new ReportingObserver(
  (reports, observer) => {
    sendReports(reports);
  },
  { buffered: true }
);

// start watching for interventions
observer.observe();

Namun, karena intervensi benar-benar akan menghapus halaman dari iframe, Anda harus menambahkan alat pengaman untuk memastikan laporan benar-benar diambil sebelum halaman sepenuhnya ditutup, misalnya, iklan dalam iframe. Untuk melakukannya, Anda dapat mengaitkan callback yang sama ke peristiwa pagehide.

window.addEventListener('pagehide', (event) => {
  // pull all pending reports from the queue
  let reports = observer.takeRecords();
  sendReports(reports);
});

Perlu diingat bahwa, untuk melindungi pengalaman pengguna, peristiwa pagehide membatasi jumlah pekerjaan yang dapat terjadi di dalamnya. Misalnya, mencoba mengirim permintaan fetch() dengan laporan akan menyebabkan permintaan tersebut dibatalkan. Anda harus menggunakan navigator.sendBeacon() untuk mengirim laporan tersebut, dan meskipun demikian, hal ini hanya merupakan upaya terbaik oleh browser, bukan jaminan.

JSON yang dihasilkan dari JavaScript mirip dengan yang dikirim pada permintaan POST:

[
  {
    type: 'intervention',
    url: 'https://example.com/url/of/ad.html',
    body: {
      sourceFile: null,
      lineNumber: null,
      columnNumber: null,
      id: 'HeavyAdIntervention',
      message:
        'Ad was removed because its network usage exceeded the limit. See https://www.chromestatus.com/feature/4800491902992384',
    },
  },
];

Mendiagnosis penyebab intervensi

Konten iklan hanyalah konten web, jadi gunakan alat seperti Lighthouse untuk mengaudit keseluruhan performa konten Anda. Audit yang dihasilkan memberikan panduan inline tentang peningkatan. Anda juga dapat merujuk ke koleksi web.dev/fast.

Sebaiknya uji iklan dalam konteks yang lebih terisolasi. Anda dapat menggunakan opsi URL kustom di https://heavy-ads.glitch.me untuk mengujinya dengan iframe siap pakai yang diberi tag iklan. Anda dapat menggunakan Chrome DevTools untuk memvalidasi konten yang telah diberi tag sebagai iklan. Di panel Rendering (dapat diakses melalui menu tiga titik ⋮, lalu More Tools > Rendering), pilih "Highlight Ad Frames". Jika menguji konten di jendela tingkat teratas atau konteks lain yang tidak diberi tag sebagai iklan, intervensi tidak akan dipicu, tetapi Anda masih dapat memeriksa nilai minimum secara manual.

Status iklan frame juga ditampilkan di panel Elemen tempat anotasi ad ditambahkan setelah tag <iframe> pembuka. Hal ini juga terlihat di panel Aplikasi pada bagian Frame, tempat frame yang diberi tag iklan akan menyertakan atribut "Status Iklan".

Penggunaan jaringan

Buka panel Jaringan di Chrome DevTools untuk melihat aktivitas jaringan secara keseluruhan untuk iklan. Anda harus memastikan opsi "Disable cache" dicentang untuk mendapatkan hasil yang konsisten selama pemuatan berulang.

Nilai yang ditransfer di bagian bawah halaman akan menampilkan jumlah yang ditransfer untuk seluruh halaman. Sebaiknya gunakan input Filter di bagian atas untuk membatasi permintaan hanya ke permintaan yang terkait dengan iklan.

Jika Anda menemukan permintaan awal untuk iklan, misalnya, sumber untuk iframe, Anda juga dapat menggunakan tab Initiator dalam permintaan untuk melihat semua permintaan yang dipicunya.

Mengurutkan daftar permintaan secara keseluruhan menurut ukuran adalah cara yang baik untuk menemukan resource yang terlalu besar. Penyebab umum mencakup gambar dan video yang belum dioptimalkan.

Selain itu, pengurutan menurut nama dapat menjadi cara yang baik untuk menemukan permintaan berulang. Hal ini mungkin bukan satu resource besar yang memicu intervensi, tetapi sejumlah besar permintaan berulang yang secara bertahap melebihi batas.

Penggunaan CPU

Panel Performa di DevTools akan membantu mendiagnosis masalah penggunaan CPU. Langkah pertama adalah membuka menu Setelan Perekaman. Gunakan dropdown CPU untuk memperlambat CPU sebanyak mungkin. Intervensi untuk CPU jauh lebih mungkin dipicu pada perangkat dengan daya lebih rendah daripada mesin pengembangan kelas atas.

Selanjutnya, klik tombol Record untuk mulai merekam aktivitas. Sebaiknya lakukan eksperimen terkait waktu dan durasi perekaman, karena rekaman aktivitas yang panjang dapat memerlukan waktu yang cukup lama untuk dimuat. Setelah rekaman dimuat, Anda dapat menggunakan linimasa atas untuk memilih bagian rekaman. Fokuskan pada area pada grafik berwarna kuning, ungu, atau hijau solid yang mewakili pembuatan skrip, rendering, dan gambar.

Jelajahi tab Bottom-Up, Call Tree, dan Event Log di bagian bawah. Mengurutkan kolom tersebut berdasarkan Self Time dan Total Time dapat membantu mengidentifikasi bottleneck dalam kode.

File sumber terkait juga ditautkan di sana, sehingga Anda dapat mengikutinya ke panel Sumber untuk memeriksa biaya setiap baris.

Masalah umum yang perlu dicari di sini adalah animasi yang tidak dioptimalkan dengan baik yang memicu tata letak dan gambar yang berkelanjutan atau operasi mahal yang tersembunyi dalam library yang disertakan.

Cara melaporkan intervensi yang salah

Chrome memberi tag pada konten sebagai iklan dengan mencocokkan permintaan resource dengan daftar filter. Jika konten non-iklan telah diberi tag, sebaiknya ubah kode tersebut agar tidak cocok dengan aturan pemfilteran. Jika Anda mencurigai bahwa intervensi telah diterapkan dengan tidak benar, Anda dapat mengajukan masalah melalui template ini. Pastikan Anda telah mengambil contoh laporan intervensi dan memiliki URL contoh untuk mereproduksi masalah tersebut.