Permasalahan Cloudflare “Cache Everything” dan Unit AdSense

Menerapkan rule “cache everything” di Cloudflare, saat website menyajikan Google AdSense merupakan ide yang bagus. Tujuannya yaitu untuk membantu meningkatkan kinerja situs kita tanpa mempengaruhi pendapatan melalui iklan AdSense. Tapi rupanya, hal itu hanya bisa kita lakukan dengan kode AdSense Auto Ads. Di sisi lain, menggunakan kode unit iklan manual, akan menyebabkan kesalahan TagError: adsbygoogle.push(). Selanjutnya, AdSense tidak menampilkan iklan apa pun.

Rule “cache everything” di Cloudflare

CDN Cloudflare tidak melakukan cache pada berkas HTML dinamis secara default. Oleh karena itu, Cloudflare CDN akan mengabaikan halaman HTML pada CMS seperti WordPress.

Namun, blog WordPress biasanya memiliki banyak konten yang bisa kita anggap statis (tidak sering berubah). Itulah sebabnya, beberapa orang menggunakan Cloudflare dan mengaktifkan cache secara menyeluruh dengan rule “cache everything“nya. Ini adalah strategi caching yang memberi tahu Cloudflare untuk melakukan cache pada semua berkas, termasuk halaman HTML, gambar, skrip, dan stylesheet.

Saat kita mengaktifkan rule ini, Cloudflare melakukan cache pada semua berkas yang melewati jaringannya, baik statis maupun dinamis. Alhasil, Cloudflare dapat menyajikannya berkas kepada pengunjung dengan cepat, tanpa perlu mengambilnya berulang kali dari server asal. Hal ini juga membantu mengurangi beban pada server asal dan meningkatkan kinerja situs secara keseluruhan.

AdSense tidak menampilkan iklan

Biasanya, tidak ada masalah dalam menampilkan iklan AdSense sekaligus menggunakan rule “cache everything” di Cloudflare. Secara teori, rule ini tidak memengaruhi konten eksternal. Sehingga, hal ini tidak akan memengaruhi iklan AdSense, karena AdSense menggunakan JavaScript untuk memanggil konten eksternal (dari server Google).

Namun nyatanya, hal itu benar hanya jika kita menggunakan Iklan Otomatis AdSense (Auto Ads). Sedangkan penggunaan kode unit iklan manual, ternyata dapat menyebabkan masalah, seperti:

TagError: adsbygoogle.push() error: No slot size for availableWidth=0

Akhirnya, situs web akan menampilkan iklan kosong dari AdSense. Selanjutnya, hal itu dapat memengaruhi pendapatan dari iklan.

Solusi

Anda memerlukan solusi ini hanya jika menggunakan unit iklan manual AdSense. Ada tiga langkah mudah, yaitu mengonfigurasi ulang plugin (jika ada), mengubah kode AdSense, dan menguji hasilnya.

1. Mengonfigurasi ulang plugin (jika ada)

Sebagian dari kita mungkin menggunakan plugin WordPress (misalnya Ad Inserter) untuk menambahkan kode AdSense secara dinamis pada posisi tertentu. Proses ini dilakukan di server, dan kemudian hasilnya dikirim sebagai HTML yang sudah jadi. Itu sebabnya penggunaan rule “cache everything” dapat memengaruhi situs dan memberikan hasil yang tidak terduga.

Dalam hal ini, kita perlu mengubah perilaku plugin tersebut. Intinya, plugin harus dapat memberikan skrip yang akan menambahkan objek dinamis, hanya setelah HTML selesai dikirim ke klien. Artinya HTML akan diubah nanti pada komputer klien. Sebagai contoh, jika kita menggunakan plugin Ad Inserter, kita dapat mengubah perilaku ini dengan melakukan beberapa langkah:

Di Ad Inserter, buka Setting (atau simbol ⚙) > tab General > tab Frontend Gunakan nilai sisipan sisi klien dalam opsi Blok dinamis.

1. Pada halaman Ad Inserter, buka Setting (atau simbol ⚙) > pilih tab General > pilih tab Frontend
2. Gunakan opsi client-side insert pada pilihan Dynamic blocks.

2. Mengubah kode unit AdSense

Ketika menggunakan cache, HTML mungkin belum sepenuhnya dirender saat AdSense memanggil iklan. Alhasil, hal ini dapat mengakibatkan kesalahan “TagError: adsbygoogle.push() error: No slot size for availableWidth=0.” Penyelesaian masalah ini yaitu dengan mengubah skrip pemanggil iklan.

Kita hanya perlu mengubah:

(adsbygoogle = window.adsbygoogle || []).push({});

menjadi

window.addEventListener("load", function() {
    (adsbygoogle = window.adsbygoogle || []).push({});
});

Jadi, pada unit iklan AdSense, hasilnya menjadi seperti berikut:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-XXXXXXXXXXXXXXXX"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true">
</ins>

<script>
    window.addEventListener("load", function() {
      (adsbygoogle = window.adsbygoogle || []).push({});
    });
</script>

3. Menguji hasilnya

Setelah kamu menyelesaikan langkah-langkah di atas, kamu harus menguji AdSense pada situsmu. Periksa apakah mereka telah menampilkan iklan dengan benar. Artinya, kamu dapat mengunjungi situsmu, dan memeriksa apakah iklan telah muncul di tempat yang tepat. Kami harap kamu tidak lagi melihat kesalahan “TagError: adsbygoogle.push()” lagi.