Pada umumnya, penggunaan pemasaran iklan Google Adsense dapat berjalan dengan lancar di berbagai platform, termasuk desktop dan mobile. Namun, kadang-kadang kita menemui masalah ketika mencoba memasang iklan tersebut pada perangkat mobile.

Masalah yang saya hadapi adalah seperti berikut: saat loading halaman web melalui desktop, dua slot warna merah dan iklan itu sendiri ditampilkan tanpa terjadi error JavaScript. Namun, ketika loading halaman web melalui mobile, hanya slot warna hijau yang ditampilkan, iklan tidak diload, dan saya menemukan error JavaScript sebagai berikut:

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

Setelah mencari tahu masalah ini di forum, saya memahami bahwa masalah tersebut timbul dari kenyataan bahwa "adslot_mobile" tidak memiliki lebar. Namun, setelah memeriksa browser (Chrome DevTools, mengaktifkan fitur) saya menemukan bahwa slot hijau itu sendiri memiliki nilai minimum lebar 400px.

Jadi, apa yang salah?

Penyelesaian

Untuk mencari penyelesaian, saya akan memberikan beberapa tips untuk mengatasi masalah-masalah yang muncul ketika memasang iklan Google Adsense pada perangkat mobile:

1. Pastikan bahwa Anda telah load library adsbygoogle dengan benar:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-myid" crossorigin="anonymous"></script>

2. Gunakan wrapper parent yang memiliki lebar minimum:

<div className='adparent' align='center' min-width='320px'>
 <ins className="adsbygoogle"
 style={{ display: 'block' }}
 data-ad-client="ca-pub-clientid"
 data-ad-slot="slotid"
 data-ad-format="auto"
 data-full-width-responsive="true">
 </ins>
</div>

3. Jika Anda menggunakan React atau NextJs, Anda dapat menggunakan sintaks sebagai berikut:

<div className='adparent' align='center' style={{minwidth:'320px', margin: 'auto', textAlign: 'center'}}>
 <ins className="adsbygoogle"
 style={{ display: 'block' }}
 data-ad-client="ca-pub-clientid"
 data-ad-slot="slotid"
 data-ad-format="auto"
 data-full-width-responsive="true">
 </ins>
</div>

4. Jika Anda menemukan error "data-ad-status unfilled", Anda dapat menggunakan CSS sebagai berikut untuk menghilangkan ruang kosong:

ins.adsbygoogle[data-ad-status="unfilled"] {
 display: none !important;
}

Dengan demikian, Anda dapat memperbaiki masalah-masalah yang timbul ketika memasang iklan Google Adsense pada perangkat mobile.