Sekarang Adsense otomatis mendeteksi kode iklan yang dipasang pada halaman AMP dan akan menyarankan untuk pemasangan kode iklan AMP responsive dengan langsung memberikan kode iklan AMP responsive Adsense yang sedikit berbeda dari kode amp-ad dari AMPProject.Ternyata kode iklan AMP responsive dari Adsense ini menggunakan satuan lebar viewwidth atau
vw atau menyesuaikan lebar layar (pada kode tampak kode width="100vw"). Jadi ketika dipasang begitu saja untuk mengganti kode amp-ad yang sebelumnya sudah dipasang, iklan tampak memenuhi lebar layar. Hal ini menjadi tidak bagus ketika iklan dilihat pada layar desktop karena iklan akan bertabrakan dengan sidebar dan lainnya karena iklan tampil selebar layar.Kode iklan AMP responsive dari Adsense ini seperti berikut:
<amp-ad width="100vw" height=320
type="adsense"
data-ad-client="ca-pub-3597723085513015"
data-ad-slot="8128208329"
data-auto-format="rspv"
data-full-width>
<div overflow></div>
</amp-ad>Namun jika dipasang di Blogger, ada beberapa kode yang harus disesuaikan agar kode bisa disimpan di Edit HTML. Kode yang akan di pasang di Edit HTML tampak seperti di bawah ini.
<amp-ad width="100vw" height="320"
type="adsense"
data-ad-client="ca-pub-3597723085513015"
data-ad-slot="8128208329"
data-auto-format="rspv"
data-full-width="">
<div overflow=""></div>
</amp-ad>Kode di atas tidak dirubah, hanya menyesuaikan dengan kode yang diterima Edit HTML Blogger. Karena pada kode iklan AMP responsive ini Adsense menyarankan untuk tidak mengedit atau merubah kode agar iklan bisa tampil di halaman AMP.
Dan dengan tinggi iklan 320 pixel, Adsense juga menjelaskan bahwa ukuran iklan AMP responsive ini aman untuk disimpan above the fold dan below the fold.
Dan perlu diketahui bahwa iklan AMP responsive Adsense ini dikhususkan untuk mobile saja, jadi agar kode iklan AMP responsive Adsense ini tidak mengganggu tampilan desktop, kita perlu trik untuk memasangnya.
Dalam hal ini kita memasang 2 kode iklan dari slot yang sama yang akan tampil di desktop saja dan mobile saja dengan menggunakan conditional tag mobile dan desktop. Jadi ada iklan yang tampil di desktop saja dan ada iklan yang tampil di mobile saja.
Silahkan gunakan kode seperti berikut ini.
<b:if cond='data:blog.isMobileRequest == "false"'>
<!-- kode iklan ini tampil hanya di desktop saja -->
<amp-ad data-ad-client='ca-pub-1234567890' data-ad-slot='1234567890' height='250' layout='fixed-height' type='adsense'>
</amp-ad>
</b:if>
<b:if cond='data:blog.isMobileRequest == "true"'>
<!-- kode iklan ini tampil hanya di mobile saja -->
<amp-ad data-ad-client='ca-pub-1234567890' data-ad-slot='1234567890' data-auto-format='rspv' data-full-width='' height='320' type='adsense' width='100vw'>
<div overflow=''/>
</amp-ad>
</b:if>Dengan begitu tampilan desktop tidak akan berubah sementara di mobile akan tampak iklan dengan lebar full layar ponsel karena memang tampilan blog di mobile juga full layar.
Jika ada yang kurang dimengerti silahkan tanyakan di kolom komentar. Semoga bermanfaat.