Cara Memasang Instruksi Iklan Amp Responsive Adsense Pada Blog Amp

Sekarang Adsense otomatis mendeteksi arahan iklan yang dipasang pada halaman AMP dan akan menyarankan untuk pemasangan arahan iklan AMP responsive dengan eksklusif memperlihatkan arahan iklan AMP responsive Adsense yang sedikit berbeda dari arahan amp-ad dari AMPProject.

Ternyata arahan iklan AMP responsive dari Adsense ini memakai satuan lebar viewwidth atau vw atau menyesuaikan lebar layar (pada arahan tampak arahan width="100vw"). Makara dikala dipasang begitu saja untuk mengganti arahan amp-ad yang sebelumnya sudah dipasang, iklan tampak memenuhi lebar layar. Hal ini menjadi tidak manis dikala iklan dilihat pada layar desktop alasannya yakni iklan akan bertabrakan dengan sidebar dan lainnya alasannya yakni iklan tampil selebar layar.

Kode iklan AMP responsive dari Adsense ini menyerupai 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 jikalau dipasang di Blogger, ada beberapa arahan yang harus diadaptasi supaya arahan dapat disimpan di Edit HTML. Kode yang akan di pasang di Edit HTML tampak menyerupai 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 arahan yang diterima Edit HTML Blogger. Karena pada arahan iklan AMP responsive ini Adsense menyarankan untuk tidak mengedit atau merubah arahan supaya iklan dapat tampil di halaman AMP.

Dan dengan tinggi iklan 320 pixel, Adsense juga menjelaskan bahwa ukuran iklan AMP responsive ini kondusif untuk disimpan above the fold dan below the fold.

Dan perlu diketahui bahwa iklan AMP responsive Adsense ini dikhususkan untuk mobile saja, jadi supaya arahan iklan AMP responsive Adsense ini tidak mengganggu tampilan desktop, kita perlu trik untuk memasangnya.

Dalam hal ini kita memasang 2 arahan iklan dari slot yang sama yang akan tampil di desktop saja dan mobile saja dengan memakai conditional tag mobile dan desktop. Makara ada iklan yang tampil di desktop saja dan ada iklan yang tampil di mobile saja.

Silahkan gunakan arahan menyerupai berikut ini.

 <b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
 <!-- arahan 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 == &quot;true&quot;'>
 <!-- arahan 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 alasannya yakni memang tampilan blog di mobile juga full layar.

Jika ada yang kurang dimengerti silahkan tanyakan di kolom komentar. Semoga bermanfaat.

UPDATE

Ternyata sesudah saya melaksanakan percobaan dengan dengan memakai tag media untuk menambahkan media query menyerupai yang berlaku pada image, iklan tetap tampil pada batas media query yang kita tentukan. Sehingga dengan ini iklan tidak tampak di luar media query yang kita tampilkan, ini akan menciptakan tampilan blog tetap rapih tanpa dirusak space blank yang cukup besar alasannya yakni iklan AMP responsive ini jikalau pengguna desktop mengakses URL mobile blog kita.

Silahkan tambahkan arahan media="(max-width: 414px)" (kode max-width: 414px dapat diatur sesuai yang dikehendaki) pada arahan iklan AMP responsive Adsense menjadi menyerupai berikut ini.

 <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' media='(max-width: 414px)'>
   <div overflow=''/>
 </amp-ad>

Sumber https://www.kompiajaib.com/

Share this post