Sebelum unit iklan responsive dirilis, aba-aba iklan masih dalam bentuk synchronous (kode unit iklan lama), sehingga saya mesti menyiasati penampilan responsifnya dengan javascript. Ada beberapa slot iklan yang digunakan sekaligus dalam satu area iklan mudah-mudahan nantinya sanggup diundang sesuai dengan lebar screen. Misalnya di header saya menghasilkan 3 slot sekaligus, 728x90, 468x60, dan 320x50, yang nanti masing-masing akan diangkut sesuai dengan lebar device. Pastinya ini ribet, alasannya merupakan kita mesti menghasilkan banyak slot, terlebih kalau punya 3 area di satu halaman, maka sanggup ditentukan berbagai jumlah slot yang mesti dibuat. Belum lagi sanksi menggunakan javascript yang pasti akan menyantap waktu lebih panjang.
Beberapa waktu kemudian, kemunculan asynchronous code membuat pekerjaan lebih ringan, alasannya merupakan kita tidak perlu menghasilkan banyak slot, cukup satu slot saja dan sisanya sanggup dikontrol dengan CSS media queries. Contoh:
.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 merupakan hasil adaptasi menggunakan CSS media queries yang menggunakan class adsbygoogle. Berikut aba-aba 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 menggunakan class adsbygoogle. Dan hasilnya seumpama pada teladan pertama. Proses pembacaan CSS media screen/queries nya seumpama ini:
Tampilan default iklan yang hendak dimunculkan merupakan 468x60, tetapi kalau lebar screen kurang dari sama dengan 467px maka tampilkan iklan dalam ukuran 300x250, tetapi kalau 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, alasannya merupakan cara yang terakhir ini belum sungguh-sungguh dirilis secara resmi selaku cara yang diperbolehkan, walaupun dalam help center, Google membolehkan penggunaan CSS media queries, tetapi bukan pada asynchronous.
Nah, kabar baiknya, kemarin (baru saja, jam 10an malem, 31 Juli 2013) Google Adsense menyodorkan bahwa kini ada satu fitur lagi (masih dalam model beta) yang disebut selaku "responsive ad unit".
Berikut langkah menghasilkan Ad Unit responsive dan adaptasi CSS-nya sebelum sanggup digunakan pada website/blog responsive anda:
1. Buat slot baru, dan, lihat pada pilihan dropdown di bab "ad size". Pilih "responsive ad unit". Tidak ada ukuran yang perlu diset pada tahap ini. Kode yang perlu dicopy pun mesti dimodifikasi lagi alasannya merupakan itu hanyalah contoh.
2. Copy aba-aba yang dihasilkan dan paste pada notepad atau editor teks sederhana lainnya.
Berikut teladan 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 adaptasi pada bab tag style, alasannya merupakan disitulah kunci responsivitasnya.
Default teladan di atas (biru) menggunakan default unit iklan terkecil 320x50 (mobile unit). Kemudian disertai dengan media min-with (lebar minimal). Makara asumsinya gini, kalau lebar screen minimal 500px, maka tampilkan ukuran 468x90px, kalau lebar screen minimal merupakan 800px, maka tampilkan unit iklan 728x90. Anda sanggup memperlihatkan beberapa baris sekaligus kalau ingin menjadikannya lebih spesifik, menyeleksi syarat minimal atau optimal screen, dan merubah ukuran default pada bab 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 menggunakan rancangan minimal width, sehingga unit iklan default merupakan yang terkecil. Jika ingin menggunakan unit iklan default paling besar menuju ukuran yang lebih kecil, misalnya default 728x90 kemudian menuju unit lebih kecil 468x90 dan seterusnya, maka media query yang mesti digunakan merupakan max-width.
4. Jika anda masih tidak puas dan bingung, atau ingin menggunakan aturan ukuran media screen yang lebih fix, gunakan teladan pertama dimana saya terapkan pada aba-aba asynchronous di permulaan postingan (@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 melakukan editing, masukkan aba-aba iklan ke dalam space dimana anda memasang iklan dan lihat hasilnya.
Beberapa poin yang perlu diamati pada penggunaan iklan Google Adsense model responsive:
- Pastikan ukuran yang digunakan pada masing-masing media query sungguh-sungguh fix.
- Pastikan ukuran yang digunakan sesuai dengan ad unit Google Adsense yang tersedia (728x90, 468x90, 970x90, 336x280, 320x50, 300x250, dan seterusnya). Ukuran yang tidak cocok dengan ad unit yang tersedia tidak akan tampil.
- Karena merupakan media query, maka pembiasaan unit iklan yang ditampilkan mengikuti lebar screen pada di saat load pertama kali. Makara di saat melakukan test, pastikan anda sudah mengendalikan lebar browser terlebih dulu gres load halaman. Anda tidak sanggup menyaksikan resposivitasnya cuma dengan mengubah-ubah lebar browser tanpa proses load terlebih dahulu.
- Jangan lupa mengendalikan ukuran unit iklan default apabila sewaktu-waktu media query tidak sanggup dieksekusi.
- Terakhir, tentunya ini cuma baik digunakan pada template.theme responsive. Pada template/theme non responsif masih sanggup sih, tetapi pastikan iklan float/berada di samping kiri. :)
- Demo menyusul :)
Catatan penting:
Karena menggunakan aba-aba asynchronous dan cuma perlu satu kali sanksi javascript setiap load halaman dan iklan, maka script ini seharusnya cuma disisipkan sekali:
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
Letakkan pada space iklan di bab teratas dan hapus pada bab unit iklan lainnya. Unit iklan di space lain secara otomatis akan tereksekusi mengikutinya. Cara ini sudah diakui Google tidak melanggar kebijakan dan justru dianjurkan, alasannya merupakan sanksi script yang serupa justru akan memperlambat load halaman dan sama sekali tidak penting.
That's it. Good luck, drop a comment kalau ada problem, and have a nice blogging :)
© copyright Ahmad Khoirul Azmi, published only for buka-rahasia.blogspot.com.
© copyright Ahmad Khoirul Azmi, published only for buka-rahasia.blogspot.com.
){kind=link}