Menambahkan Kode Iklan Responsive AMP Pada Blog AMP

gacerindo.com - Saat mamang membuka dahsboard adsense, dan melihat menu Opportunities atau menu peluang, terdapat tulisan Switch to responsive AMP ad-units. Itu pertanda google menyarankan untuk menempatkan iklan responsive pada halaman blog AMP.
Masalah yang timbul yaitu ketika blog memiliki tampilan yang berbeda ketika diakses melalui desktop dan mobile. Kalau penempatan kode iklan responsive diterapkan begitu saja, maka kemungkinan tampilan iklan pada desktop akan acak-acakan.
Sebelum google, penempatan iklan responsive ini sudah dianjurkan oleh AMP Project. Tapi kode untuk penempatan iklan pada AMP Project bersifat global, bukan hanya untuk adsense saja.


Khusus untuk google adsense, maka penempatan kode iklan responsive AMP sedikit berbeda dengan yang diberikan oleh AMP Project. Bagi sobat yang sudah memiliki adsense dan mempunyai blog AMP, silahkan lihat oppotunities atau peluang pada dashboard adsense kalian.
Nanti pasti akan disuruh untuk menempatkan kode iklan adsense, seperti berikut ini.

<amp-ad width="100vw" height=320

     type="adsense"

     data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxx"

     data-ad-slot="xxxxxxxxx"

     data-auto-format="rspv"

     data-full-width>

 <div overflow></div>

</amp-ad>

Namun, kode ini tidak bisa diterima oleh blogger, karena HTMLnya sedikit berbeda. Bagi sobat yang memiliki tampilan AMP desktop dan mobile-nya sama, silahkan ganti kode adsense yang lama dengan kode iklan AMP adsense berikut ini.

<amp-ad width="100vw" height="320"

     type="adsense"

     data-ad-client="ca-pub-xxxxxxxxxxxxxxxxxx"

     data-ad-slot="xxxxxxxxx"

     data-auto-format="rspv"

     data-full-width="">

 <div overflow=""></div>

</amp-ad>

Bagi kamu yang memiliki tampilan desktop dan mobile berbeda seperi blog mamang ini, pemasangan kode iklan responsivenya harus diakali kembali. Karena kalu tidak diakali kembali, kemungkinan tampilan desktop bisa sedikit terganggu.
Silahkan gunakan kode dibawah 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>

Kode ini hanya memakai tag conditional saja, tanpa merubah struktur utama kode iklan responsive AMP yang disarankan oleh google.
Jadi dengan ditempatkannya kode diatas, tampilan iklan didesktop akan normal seperti biasanya. Sedangkan pada tampilan mobile akan menjadi responsive, sesuai dengan mobile device yang dipakai.
Jika ada yang mau menambahkan silahkan tanyakan pada kolom komentar ya sob.