Membuat Tampilan Iklan Google Adsense Responsif (CSS Media Queries)

Masih bicara dilema responsive nih, ceritanya. Karena kini sudah jamannya responsif, maka Google balasannya secara resmi mengeluarkan satu fitur gres lagi sebagai salah satu opsi/pilihan instruksi yang sanggup di set di dashboard Google Adsense. Beberapa waktu lalu, Google meluncurkan asynchronous code untuk memperbaiki performa website yang menampilkan iklan Adsense, iklan tampil lebih cepat dan muncul sehabis semua elemen web termuat oleh browser. Responsivitas unit iklan juga memastikan iklan yang tampil sanggup dilihat dengan baik oleh pengguna media lain (non desktop user) sehingga potensi klik dan optimalisasi pendapatan Adsense tidak berkurang. 

Sebelum unit iklan responsive dirilis, instruksi iklan masih dalam bentuk synchronous (kode unit iklan lama), sehingga saya harus mengakali tampilan responsifnya dengan javascript. Ada beberapa slot iklan yang dipakai sekaligus dalam satu area iklan semoga nantinya sanggup dipanggil sesuai dengan lebar screen. Misalnya di header saya menciptakan 3 slot sekaligus, 728x90, 468x60, dan 320x50, yang nanti masing-masing akan dimuat sesuai dengan lebar device. Pastinya ini ribet, sebab kita mesti menciptakan banyak slot, apalagi jikalau punya 3 area di satu halaman, maka sanggup dipastikan aneka macam jumlah slot yang harus dibuat. Belum lagi sanksi memakai javascript yang tentu akan memakan waktu lebih panjang.

Beberapa waktu kemudian, kehadiran asynchronous code membuat pekerjaan lebih ringan, sebab kita tidak perlu menciptakan banyak slot, cukup satu slot saja dan sisanya sanggup diatur dengan CSS media queries. Contoh:

<style type="text/css">
.adsbygoogle {display:inline-block;width:468px;height:60px;}
@media screen and (max-width: 467px)  { .adsbygoogle {display:inline-block;width:300px;height:250px;} }
@media screen and (max-width: 299px)  { .adsbygoogle {display:inline-block;width:200px;height:200px;} }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Kode di atas yaitu hasil modifikasi memakai CSS media queries yang memakai class adsbygoogle. Berikut instruksi aslinya.

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<ins class="adsbygoogle" style="display:inline-block;width:468px;height:60px;"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Style di dalam tag ins kemudian diangkat dan dipisahkan ke dalam tag style sendiri, dengan memakai class adsbygoogle. Dan hasilnya ibarat pada pola pertama. Proses pembacaan CSS media screen/queries nya ibarat ini: 

Tampilan default iklan yang akan dimunculkan yaitu 468x60, namun jikalau lebar screen kurang dari sama dengan 467px maka tampilkan iklan dalam ukuran 300x250, namun jikalau lebar screen kurang dari sama dengan 299px, maka tampilkan iklan dalam ukuran 200x200.

Rilis Unit Iklan Adsense Responsif (Beta)

Sebelum unit iklan responsif dirilis, saya masih merasa was-was, sebab cara yang terakhir ini belum benar-benar dirilis secara resmi sebagai cara yang diperbolehkan, meskipun dalam help center, Google mengijinkan penggunaan CSS media queries, namun bukan pada asynchronous.

Nah, kabar baiknya, kemarin (baru saja, jam 10an malem, 31 Juli 2013) Google Adsense memberikan bahwa kini ada satu fitur lagi (masih dalam versi beta) yang disebut sebagai "responsive ad unit".

Berikut langkah menciptakan Ad Unit responsive dan modifikasi CSS-nya sebelum sanggup dipakai pada website/blog responsive anda:

1. Buat slot baru, dan, lihat pada pilihan dropdown di episode "ad size". Pilih "responsive ad unit". Tidak ada ukuran yang perlu diset pada tahap ini. Kode yang perlu dicopy pun harus dimodifikasi lagi sebab itu hanyalah contoh. 

2. Copy instruksi yang dihasilkan dan paste pada notepad atau editor teks sederhana lainnya.

Berikut pola kodenya:

<style>
.classsesuainamaslot { width: 320px; height: 50px; }
@media(min-width: 500px) { .classsesuainamaslot  { width: 468px; height: 60px; } }
@media(min-width: 800px) { .classsesuainamaslot  { width: 728px; height: 90px; } }
</style>
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- namaslot -->
<ins class="adsbygoogle classsesuainamaslot"
     style="display:inline-block"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

3. Lakukan modifikasi pada episode tag style, sebab disitulah kunci responsivitasnya.

Default pola di atas (biru) memakai default unit iklan terkecil 320x50 (mobile unit). Kemudian diikuti dengan media min-with (lebar minimal). Kaprikornus asumsinya gini, jikalau lebar screen minimal 500px, maka tampilkan ukuran 468x90px, jikalau lebar screen minimal yaitu 800px, maka tampilkan unit iklan 728x90. Anda sanggup menampilkan beberapa baris sekaligus jikalau ingin membuatnya lebih spesifik, memilih syarat minimal atau maksimal screen, dan mengubah ukuran default pada episode paling atas. Contoh:

<style>
.classsesuainamaslot { width: 200px; height: 200px; }
@media(min-width: 350px) { .classsesuainamaslot { width: 300px; height: 250px; } }
@media(min-width: 400px) { .classsesuainamaslot { width: 336px; height: 280px; } }
@media(min-width: 500px) { .classsesuainamaslot { width: 468px; height: 60px; } }
@media(min-width: 800px) { .classsesuainamaslot { width: 728px; height: 90px; } }
@media(min-width: 900px) { .classsesuainamaslot { width: 900px; height: 90px; } }
</style>

CSS media query di atas memakai konsep minimal width, sehingga unit iklan default yaitu yang terkecil. Jika ingin memakai unit iklan default terbesar menuju ukuran yang lebih kecil, contohnya default 728x90 kemudian menuju unit lebih kecil 468x90 dan seterusnya, maka media query yang harus dipakai yaitu max-width.

4. Jika anda masih tidak puas dan bingung, atau ingin memakai aturan ukuran media screen yang lebih fix, gunakan pola pertama dimana saya terapkan pada instruksi asynchronous di awal artikel (@media screen and (max-width)).

Contoh:

<style type="text/css">
.classsesuainamaslot{display:inline-block;width:728px;height:90px;}
@media screen and (max-width: 727px)  { .classsesuainamaslot {display:inline-block;width:468px;height:250px;} }
@media screen and (max-width: 467px)  { .classsesuainamaslot {display:inline-block;width:336px;height:280px;} }
@media screen and (max-width: 335px)  { .classsesuainamaslot {display:inline-block;width:300px;height:250px;} }
dan seterusnya tergantung impian anda...
</style>

5. Setelah selesai melaksanakan editing, masukkan instruksi iklan ke dalam space dimana anda memasang iklan dan lihat hasilnya.

Beberapa poin yang perlu diperhatikan pada penggunaan iklan Google Adsense versi responsive:

1. Pastikan ukuran yang dipakai pada masing-masing media query benar-benar fix.
2. Pastikan ukuran yang dipakai sesuai dengan ad unit Google Adsense yang tersedia (728x90, 468x90, 970x90, 336x280, 320x50, 300x250, dan seterusnya). Ukuran yang tidak sesuai dengan ad unit yang tersedia tidak akan tampil.
3. Karena merupakan media query, maka pembiasaan unit iklan yang ditampilkan mengikuti lebar screen pada dikala load pertama kali. Kaprikornus ketika melaksanakan test, pastikan anda telah mengatur lebar browser terlebih dahulu gres load halaman. Anda tidak sanggup melihat resposivitasnya hanya dengan mengubah-ubah lebar browser tanpa proses load terlebih dahulu.
4. Jangan lupa mengatur ukuran unit iklan default apabila sewaktu-waktu media query tidak sanggup dieksekusi.
5. Terakhir, tentu saja ini hanya baik dipakai pada template.theme responsive. Pada template/theme non responsif masih sanggup sih, tapi pastikan iklan float/berada di samping kiri. :)
6. Demo menyusul :)

Catatan penting:

Karena memakai instruksi asynchronous dan hanya perlu satu kali sanksi javascript setiap load halaman dan iklan, maka script ini sebaiknya hanya disisipkan sekali:

<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Letakkan pada space iklan di episode teratas dan hapus pada episode unit iklan lainnya. Unit iklan di space lain secara otomatis akan tereksekusi mengikutinya. Cara ini sudah diakui Google tidak melanggar kebijakan dan justru dianjurkan, sebab sanksi script yang sama justru akan memperlambat load halaman dan sama sekali tidak penting.

That's it. Good luck, drop a comment jikalau ada problem, and have a nice blogging :)

© copyright Ahmad Khoirul Azmi, published only for buka-rahasia.blogspot.com.

Tweet

Subscribe to receive free email updates: