Cara Memasang Iklan Responsive Adsense Blog Amp

Dulu ketika akan berganti template dari non AMP ke template AMP aku berfikir ulang, memikirkan beberapa faktor kesulitan yang mungkin akan dihadapi, salah satu faktor kesulitannya yaitu wacana problem pemasangan iklan Adsense.

Seperti telah kita ketahui bahwa untuk menampilkan iklan adsense disuatu blog yaitu dengan cara menyimpan instruksi iklan adsende didalam tema HTML atau didalam widget Blog. Kode iklan biasanya terlihat ibarat 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 sanggup diterapkan dalam blog AMP alasannya yaitu akan menyebabkan invalid AMP ibarat gambar dibawah ini:

Untuk memasang instruksi iklan Adsense di Blog AMP, kini google sudah menawarkan panduan dan instruksi iklan Adsense khusus amp Caranya yaitu sebagai berikut:

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

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

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

Kode Unit Iklan Responsif

Kode iklan responsive untuk blog AMP yaitu ibarat 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 yaitu unit iklan yang hanya muncul dalam tampilan mobile, maksudnya unit iklan ini hanya akan muncul jikalau blog dibuka melalui smartphone atau tablet sedangkan jikalau Blog dibuka melalui PC / komputer biasa, maka iklan ini tidak akan muncul yang ada hanya tampilan kosong saja.

Supaya sanggup memasang instruksi 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 sesudah itu sanggup dihapus lagi )
• Kopi instruksi 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 instruksi milik Agan kemudian simpan.
• Kemudian masuk ke >> TEMA >> Edit HTML
• Cari Iklan Responsive dengan memakai CTRL+F
• Jika sudah ketemu tambahkan tag conditional dibawah instruksi <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 semoga tidak menggangu pemandangan pada ketika blog ditampilkan

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