Masih bicara masalah responsive nih, ceritanya. Karena sekarang sudah
jamannya responsif, maka Google akhirnya secara resmi mengeluarkan satu
fitur baru lagi sebagai salah satu opsi/pilihan kode yang bisa 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 setelah semua elemen web
termuat oleh browser. Responsivitas unit iklan juga memastikan iklan
yang tampil dapat dilihat dengan baik oleh pengguna media lain (non
desktop user) sehingga potensi klik dan optimalisasi pendapatan Adsense
tidak berkurang.
Sebelum unit
iklan responsive dirilis, kode iklan masih dalam bentuk
synchronous (kode
unit iklan lama), sehingga saya harus mengakali tampilan responsifnya
dengan javascript. Ada beberapa slot iklan yang digunakan sekaligus
dalam satu area iklan agar nantinya bisa dipanggil sesuai dengan lebar
screen. Misalnya di header saya membuat 3 slot sekaligus, 728x90,
468x60, dan 320x50, yang nanti masing-masing akan dimuat sesuai dengan
lebar device. Pastinya ini ribet, karena kita mesti membuat banyak slot,
apalagi jika punya 3 area di satu halaman, maka bisa dipastikan banyak
sekali jumlah slot yang harus dibuat. Belum lagi eksekusi menggunakan
javascript yang tentu akan memakan waktu lebih panjang.
Beberapa waktu kemudian, kehadiran asynchronous code membuat
pekerjaan lebih ringan, karena kita tidak perlu membuat banyak slot,
cukup satu slot saja dan sisanya bisa 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 adalah hasil modifikasi menggunakan CSS media queries yang menggunakan class adsbygoogle. Berikut kode 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 seperti pada contoh pertama. Proses pembacaan CSS media screen/queries nya seperti ini:
Tampilan default iklan yang akan dimunculkan adalah 468x60, namun jika lebar screen kurang dari sama dengan 467px maka tampilkan iklan dalam ukuran 300x250, namun jika 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, karena 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 menyampaikan bahwa kini ada satu fitur lagi (masih dalam
versi beta) yang disebut sebagai "responsive ad unit".
Berikut langkah membuat Ad Unit responsive dan modifikasi CSS-nya sebelum bisa digunakan pada website/blog responsive anda:
1. Buat slot baru, dan, lihat pada pilihan dropdown di bagian "ad size".
Pilih "responsive ad unit". Tidak ada ukuran yang perlu diset pada
tahap ini. Kode yang perlu dicopy pun harus dimodifikasi lagi karena itu
hanyalah contoh.
2. Copy kode yang dihasilkan dan paste pada notepad atau editor teks sederhana lainnya.
Berikut contoh 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 bagian tag style, karena disitulah kunci responsivitasnya.
Default contoh di atas (biru) menggunakan default unit
iklan
terkecil 320x50 (mobile unit). Kemudian diikuti dengan media min-with
(lebar minimal). Jadi asumsinya gini, jika lebar screen minimal 500px,
maka tampilkan ukuran 468x90px, jika lebar screen minimal adalah 800px,
maka tampilkan unit iklan 728x90. Anda bisa menampilkan beberapa baris
sekaligus jika ingin membuatnya lebih spesifik, menentukan syarat
minimal atau maksimal screen, dan mengubah ukuran default pada bagian
paling atas. Contoh:
CSS media query di atas menggunakan konsep minimal width, sehingga unit
iklan
default adalah yang terkecil. Jika ingin menggunakan unit iklan default
terbesar menuju ukuran yang lebih kecil, misalnya default 728x90
kemudian menuju unit lebih kecil 468x90 dan seterusnya, maka media query
yang harus digunakan adalah
max-width.
4. Jika anda masih tidak puas dan bingung, atau ingin menggunakan aturan
ukuran media screen yang lebih fix, gunakan contoh pertama dimana saya
terapkan pada kode 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 keinginan anda...
</style>
5. Setelah selesai melakukan editing, masukkan kode
iklan ke dalam space dimana anda memasang iklan dan lihat hasilnya.
Beberapa poin yang perlu diperhatikan pada penggunaan iklan Google Adsense versi responsive:
- Pastikan ukuran yang digunakan pada masing-masing media query benar-benar fix.
- Pastikan ukuran yang digunakan 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.
- Karena merupakan media query, maka penyesuaian unit iklan
yang ditampilkan mengikuti lebar screen pada saat load pertama kali.
Jadi ketika melakukan test, pastikan anda telah mengatur lebar browser
terlebih dahulu baru load halaman. Anda tidak bisa melihat
resposivitasnya hanya dengan mengubah-ubah lebar browser tanpa proses
load terlebih dahulu.
- Jangan lupa mengatur ukuran unit iklan default apabila sewaktu-waktu media query tidak bisa dieksekusi.
- Terakhir, tentu saja ini hanya baik
digunakan pada template.theme responsive. Pada template/theme non
responsif masih bisa sih, tapi pastikan iklan float/berada di samping kiri. :)
- Demo menyusul :)
Karena menggunakan kode asynchronous dan hanya perlu satu kali eksekusi 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 bagian teratas dan hapus pada bagian unit iklan lainnya. Unit iklan
di space lain secara otomatis akan tereksekusi mengikutinya. Cara ini
sudah diakui Google tidak melanggar kebijakan dan justru dianjurkan,
karena eksekusi script yang sama justru akan memperlambat load halaman
dan sama sekali tidak penting.
That's it. Good luck, drop a comment jika ada problem, and have a nice blogging :)
