Mengatasi Iklan AMP Yang Tidak Tampil Di Desktop - 3 hari ini saya dan mungkin juga blogger lain yang menggunakan AMP cukup dipusingkan dengan adanya beberapa slot iklan termasuk dengan matched content Adsense tidak tampil atau blank terutama pada tampilan desktop.
Anehnya tidak semua slot iklan Adsense AMP ini nge-blank, tetapi ada slot iklan yang tetap tampil seperti iklan yang ada di sidebar blog ini. Padahal sebelumnya tidak ada masalah, semua iklan tampil sempurna.
Awalnya saya kira ini mungkin sedang ada update AMP untuk amp-ad atau untuk iklan Adsense. Namun setelah ditunggu 1-2 hari kemarin, iklan masih saja blank. Dari pihak Google sebagai pengembang AMP dan juga Adsense juga belum ada keterangan apa pun mengenai hal ini.
Dan yang menyulitkannya yaitu tidak adanya dokumentasi yang benar-benar komplit untuk implementasi kode amp-ad untuk Adsense ini. Adsense pun hanya memberikan kode amp-ad untuk iklan mobile saja, tidak untuk desktop.
Hal ini mungkin bisa dipahami, karena memang pada awalnya AMP didesain hanya untuk perangkat mobile saja.
Namun tentu saja web selalu berkembang, begitu pun dengan AMP. Yang awalnya hanya untuk mobile saja, namun sekarang AMP juga digunakan untuk desktop.
Tidak mungkin pengembang AMP tidak mengetahui hal tersebut, situs mereka saja menggunakan AMP di desktop dan mobile. Dan yang membuat heran, kenapa Google tidak membuatkan kode iklan AMP Adsense untuk desktop juga?
Penyebab Iklan AMP Blank
Yah, akhirnya kita harus putar otak lagi untuk memperbaiki ini agar iklan AMP muncul kembali, karena selain mengganggu pemandangan dari slot iklan yang kosong, tentunya merugikan kita sendiri sebagai penerbit Adsense.
Setelah mencoba dengan berbagai kode yang saya pahami untuk kode amp-ad, ternyata penyebab tidak munculnya iklan Adsense AMP ini yaitu iklan responsive yang menggunakan elemen layout fixed-height.
Entah kenapa Adsense tidak support lagi layout fixed-height, padahal dengan ini iklan menjadi tampil rapih di blog dan sesuai dengan semua ukuran layar.
Kita harapkan saja ini mungkin hanya bug dan berharap untuk diperbaiki agar dapat digunakan lagi.
Memperbaiki Masalah Iklan AMP Blank
Untuk memperbaiki masalah iklan AMP yang blank ini agar bisa tampil kembali, tentunya kita harus menghilangkan layout fixed-height dari kode iklan dengan menggantinya menggunakan ukuran width dan height yang ditentukan.
Jadi, kita tidak bisa menggunakan kode responsive khususnya fixed-height untuk saat ini. Sementara untuk layout responsive sendiri tetap jalan, namun tampilan iklannya tidak bagus.
Untuk itu, saya buatkan kode-kode iklan AMP untuk disimpan di beberapa tempat yang bisa dicoba. Kode-kode ini juga yang sekarang digunakan di blog Kompi Ajaib ini, dan alhamdulillah iklan bisa tampil lagi.
Iklan di Header
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-full-width='' height='90' media='(min-width: 1025px)' type='adsense' width='970'/>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-full-width='' height='90' media='(max-width: 1024px) and (min-width: 737px)' type='adsense' width='728'/>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-full-width='' height='60' media='(max-width: 736px) and (min-width: 601px)' type='adsense' width='468'/>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 600px)' type='adsense' width='100vw'>
<div overflow=''/>
</amp-ad>Iklan di Sidebar
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-full-width='' height='600' type='adsense' width='300'>
</amp-ad>Atau
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-full-width='' height='600' type='adsense' width='160'>
</amp-ad>Atau
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-full-width='' height='250' type='adsense' width='300'>
</amp-ad>Iklan di Atas dan Bawah Post
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-full-width='' height='250' media='(min-width: 737px)' type='adsense' width='300'/>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
<div overflow=''/>
</amp-ad>Atau
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-full-width='' height='280' media='(min-width: 737px)' type='adsense' width='336'/>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
<div overflow=''/>
</amp-ad>Unit Iklan Link
Untuk unit iklan link masih bisa pakai layout fixed-height seperti berikut.
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-auto-format='rspv' data-full-width='' height='250' layout='fixed-height' media='(min-width: 737px)' type='adsense'/>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
<div overflow=''/>
</amp-ad>Unit Iklan Matched Content
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-format='autorelaxed' data-ad-slot='xxxxxxxx' data-full-width='' height='700' layout='responsive' media='(min-width: 601px)' type='adsense' width='700'/>
<amp-ad data-ad-client='ca-pub-xxxxxxxxxxxxxx' data-ad-slot='xxxxxxxx' data-auto-format='mcrspv' data-full-width='' height='320' media='(max-width: 600px)' type='adsense' width='100vw'>
<div overflow=''/>
</amp-ad>Untuk ukuran unit iklan matched content untuk tampilan desktop (kode yang atas) ini silahkan bisa coba rubah dan sesuaikan ukurannya, yang penting perbandingan 1:1 atau 4:3.
Kode-kode di atas tidak baku, silahkan coba dan sesuaikan dengan blog Anda.
Semoga bermanfaat ya...