Membuat Iklan AdSense Responsive di Blogger AMP HTML
Cara agar iklan AMP responsive full width di halaman AMP blogspot
Inovasi AdSense untuk publisher AMP HTML semakin baik. Beberapa waktu yang lalu, saya mendapatkan notifikasi untuk mengaktifkan iklan responsive khusus halaman AMP HTML.
Iklan responsif dianggap dapat meningkatkan nilai klik pada sebuah iklan website. Untuk itulah, membuat sebuah iklan responsive sangatlah penting bagi sebuah website. Namun ketika saya ingin mengaktifkan dan menempatkan kode AdSense yang diberikan dari dashboard Google AdSense, ada masalah karena saya menggunakan platform Blogger. Kode tersebut tidak diterima oleh halaman blogger.
Akhirnya saya coba mempelajari kode tersebut, dan menemukan alternatif untuk memasang kode tersebut.
Namun, ada masalah lain ketika mencoba mengaktifkannya. Halaman blog saya justru rusak dan iklan malah tidak responsif.
Ternyata masalahnya, kode iklan AMP responsive tersebut hanya bisa diterima dan terbaca dengan baik di tampilan mobile. Dan jawaban masalah ini adalah mengakalinya dengan menggunakan tag conditional Blogger.
Cara Membuat Iklan AdSense Responsif untuk Blogger AMP
Dibawah ini adalah contoh kode yang diberikan Google di dashboard AdSense:
<amp-ad width="100vw" height=320 type="adsense" data-ad-client="ca-pub-1234567890004" data-ad-slot="123456789" data-auto-format="rspv" data-full-width> <div overflow></div></amp-ad> Kode di atas tidak diterima di halaman xml Blogger.com, jadi saya coba mengkonversinya menjadi seperti di bawah ini:
Agar tampilan iklan bekerja dengan baik baik di dekstop dan tampilan mobile, silahkan gunakan kode iklan AMP di bawah ini:
<amp-ad data-ad-client='ca-pub-1234567890004' data-ad-slot='123456789' data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'> <div overflow=''/> </amp-ad>Agar tampilan iklan bekerja dengan baik baik di dekstop dan tampilan mobile, silahkan gunakan kode iklan AMP di bawah ini:
<b:if cond='data:blog.isMobileRequest == "false" and not data:blog.searchQuery'>
<!-- desktop -->
<amp-ad data-ad-client='ca-pub-1234567890004'
data-ad-slot='123456789'
height='250' layout='fixed-height' type='adsense'>
</b:if>
<b:if cond='data:blog.isMobileRequest == "true" and not data:blog.searchQuery'>
<!-- AMP/mobile -->
<amp-ad data-ad-client='ca-pub-1234567890004'
data-ad-slot='123456789'
data-auto-format='rspv' data-full-width='' height='320' media='(max-width: 736px)' type='adsense' width='100vw'>
<div overflow=''/>
</amp-ad>
</b:if>
Silahkan copy kode diatas, dan tempatkan iklan responsif AMP tersebut sesuai yang anda inginkan. Jangan lupa untuk mengganti ad-client dan ad-slot sesuai iklan AdSense anda.
Semoga berguna :)