Cara Memasang Kode Iklan AMP Responsive Adsense Pada Blog AMP

Ditulis oleh: Adhy Suryadi

Ditulis pada: 3/09/2018

Sebenarnya di halaman AMPProject sudah disediakan panduan untuk memasang iklan AMP resposive dengan amp-ad yang mendukung beberapa layout seperti layout fill, fixed, fixed-height, flex-item, nodisplay, dan responsive. Hal ini (amp-ad) mendukung banyak provider iklan termasuk Adsense.

Dan sekarang Adsense melakukan deteksi otomatis pada kode iklan yang dipasang pada halaman AMP dan memberikan atau menyarankan pemasangan kode iklan AMP responsive dari Adsense yang sedikit berbeda dari kode iklan AMP dari AMPProject.

Namun masih banyak Blogger yang kebingungan untuk memasang kode iklan AMP responsive dari Adsense karena ketika dipasang untuk mengganti kode iklan AMP yang sebelumnya malam menjadi tampil tidak karuan.

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 == &quot;false&quot;'>

<!-- 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 == &quot;true&quot;'>

<!-- 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.

UPDATE

Ternyata setelah saya melakukan percobaan dengan dengan menggunakan tag media untuk menambahkan media query seperti 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 membuat tampilan blog tetap rapih tanpa dirusak space blank yang cukup besar karena iklan AMP responsive ini jika pengguna desktop mengakses URL mobile blog kita.

Silahkan tambahkan kode media="(max-width: 414px)" (kode max-width: 414px bisa diatur sesuai yang dikehendaki) pada kode iklan AMP responsive Adsense menjadi seperti 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>