Switching Untuk Google Adsense Pada Blog yang Valid AMP HTML

Lucky Bachtiar Friday, September 30, 2016

Judul di atas tentu membingungkan, dan memang jujur saja saya sendiri bingung memilih kata-kata. Semoga saja setelah pembaca Kalamitra menyimak ulasannya, judul di atas terjelaskan. Hehehe.

Kasus

Hingga tulisan ini diturunkan, pemasangan Google Adsense pada blog berplatform Blogspot Valid AMP, belum bisa responsive. Kalaupun ada di antara trik-trik yang bertebaran di internet, maka itu tidak ampuh untuk blog berplatform Blogspot tadi. Jika diterapkan akan muncul warning tidak valid AMP.

Memang, penerapan AMP HTML pada blog berplatform Blogspot cukup rumit, tidak semudah pada blog berplatform Wordpress misalnya.

Solusi

Ada masalah tentu ada jalan, demikian jika kita mau optimis. Jadi untuk kasus di ataspun ada solusinya. Caranya adalah dengan menerapkan tag conditional dengan cara kerja sebagai berikut :

Jika blog dibuka pada device beresolusi 1024 x 768 ke atas, maka yang tampil adalah iklan berukuran 728 x 90. Ukuran ini di dalam Adsense dikenal sebagai spanduk utama. Dan termasuk jenis iklan yang direkomendasikan karena peluang revenue yang bagus.

Lalu bila blog dibuka pada media beresolusi di bawah 1024 x 768 maka yang tampil adalah iklan 300 x 250. Dan yang inipun termasuk jenis iklan yang direkomendasikan oleh Google Adsense.

Bila dicermati, maka solusi ini bukanlah responsive murni melainkan hanya melakukan switch di antara kedua ukuran iklan tadi. karena itulah pada judul di atas saya menggunakan istilah switching.

Implementasi

Pada bagian header tambahkan dua widget dengan script Google  Adsense masing-masing sebagai berikut :

<amp-ad width="728" height="90" type="adsense" data-ad-client="ca-pub-xxx" data-ad-slot="xxx" /></amp-ad>

<amp-ad width="300" height="250" type="adsense" data-ad-client="ca-pub-xxx" data-ad-slot="xxx" /></amp-ad>

Anggap saja widget pertama id-nya adalah HTML1 dan widget kedua adalah HTML2. Lalu untuk data-ad-client dan data-ad-slot disesuaikan dengan kode yang anda miliki.

Selanjutnya terapkan sintaks css di bawah ini :

<b:if cond='data:blog.isMobileRequest == &quot;true&quot;'>
#HTML1 {display:none;}
</b:if>

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
#HTML2 {display:none;}
</b:if>

Demikian trik kita kali ini yang berjudul Switching Untuk Google Adsense Pada Blog yang Valid AMP HTML.