Cara Memasang Iklan Responsive Adsense Blog AMP

Dulu ketika akan berganti template dari non AMP ke template AMP saya berfikir ulang, memikirkan beberapa faktor kesulitan yang mungkin akan dihadapi, salah satu faktor kesulitannya adalah tentang masalah pemasangan iklan Adsense.

Seperti telah kita ketahui bahwa untuk menampilkan iklan adsense disuatu blog yaitu dengan cara menyimpan kode iklan adsende didalam tema HTML atau didalam widget Blog. Kode iklan biasanya terlihat seperti ini:

 
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:120px;height:600px"
     data-ad-client="ca-pub-1234567891234567"
     data-ad-slot="1234567890"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Kode iklan diatas tentu tidak bisa diterapkan dalam blog AMP karena akan menyebabkan invalid AMP seperti gambar dibawah ini:

Untuk memasang kode iklan Adsense di Blog AMP, sekarang google sudah memberikan panduan dan kode iklan Adsense khusus amp Caranya adalah sebagai berikut:

Pertama pastikan di Tema HTML blog sudah ada kode berikut ini:

<script async custom-element="amp-ad" src="https://cdn.ampproject.org/v0/amp-ad-0.1.js"></script>

jika belum ada kopoi paste kode tersebut dan simpan sebelum kode &lt/head&gt di halaman HTML blog Agan

Kode Unit Iklan Responsif

Kode iklan responsive untuk blog AMP adalah seperti ini:

<amp-ad width="100vw" height="320"
     type="adsense"
     data-ad-client="ca-pub-1234567891234567"
     data-ad-slot="987654321"
     data-auto-format="rspv"
     data-full-width="">
  <div overflow=""></div>
</amp-ad>

Yangdimaksud unit iklan responsive disini adalah unit iklan yang hanya muncul dalam tampilan mobile, maksudnya unit iklan ini hanya akan muncul jika blog dibuka melalui smartphone atau tablet sedangkan jika Blog dibuka melalui PC / komputer biasa, maka iklan ini tidak akan muncul yang ada hanya tampilan kosong saja.

Supaya dapat memasang kode iklan responsive untuk blog AMP tanpa muncul kotak ruang kosong ketika blog dibuka dengan PC/komputer, caranya cukup menambahkan tag conditional <b:if cond='data:blog.isMobileRequest == "true"'> dalam tema HTML blog.

Memasang Iklan Responsive Adsense di Blog AMP

• Masuk ke Blogger >> Tata Letak
• Tambah sebuah Gadget / Widget Baru >> Plih HTML/JavaScript
• Beri nama Widget tersebut dengan nama Iklan Responsive ( nama iklan responsive untuk memudahkan mencari widget di tema HTML setelah itu bisa dihapus lagi )
• Kopi kode Iklan Responsive AMP diatas dan paste didalam widget tersebut. Jangan lupa untuk mengganti kode data-ad-client="ca-pub-1234567891234567" dan data-ad-slot="987654321" dengan kode milik Agan lalu simpan.
• Kemudian masuk ke >> TEMA >> Edit HTML
• Cari Iklan Responsive dengan menggunakan CTRL+F
• Jika sudah ketemu tambahkan tag conditional dibawah kode <b:includable id='main'> penampakannya lihat gambar dibawah ini




• tag conditional tersebut jangan lupa untuk ditutup dengan </b:if> kemudian Save HTML kemudian kembali lagi ke Tata Letak hapus nama Iklan Responsive agar tidak menggangu pemandangan pada saat blog ditampilkan

Dengan begitu kita sudah berhasil memasang Iklan Responsive di Blog AMP. Mudah bukan cara memasang iklan responsive di Blog HTML? Terimakasih sudah berkunjung.