Cara Membuat Iklan Google Adsense Responsive dengan CSS Media

Cara Membuat Iklan Google Adsense Responsive dengan CSS Media

Ketika anda melihat website baik itu di browser komputer maupun di gadget dan smartphone anda sempat berpikir kenapa tampilan website dapa... 22.48.00

Ketika anda melihat website baik itu di browser komputer maupun di gadget dan smartphone anda sempat berpikir kenapa tampilan website dapat menyesuaikan di platform yang berbeda. Jawabannya ialah karena sekarang website atau blog tersebut sudah menggunakan themes dan desain website yang responsive. Apa sih responsive itu dan bagaimana cara penempatannya?. Google akhirnya secara resmi mengeluarkan satu fitur baru lagi sebagai salah satu pilihan kode yang dapat disesuaikan melalui dashboard Google Adsense. Sebelumnya Google pernah meluncurkan asynchronous code yang tujuannya untuk memperbaiki performa kecepatan tampil disemua elemen web oleh browser. Responsivitas unit iklan juga memastikan iklan yang tampil dapat dilihat dengan baik di platform yang berbeda.

Google sangat mengerti dengan apa yang kita inginkan. Ketika kita masih bermimpi membuat suatu  teknologi baru, Google sudah merancangnya jauh jauh hari. Maka dari itu dengan kehadiran asynchronous code membuat pekerjaan lebih ringan, karena kita tidak perlu membuat banyak slot, cukup satu slot saja dan dapat digunakan oleh banyak iklan dan diatur dengan CSS media queries. Contoh:

Kode CSS
<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>

Kode Adsense
<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. 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.

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.

Tetapi kabar baiknya, 31 Juli 2013 tepatnya jam 10 malam) 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.
3. Lakukan modifikasi pada bagian tag style.
4. Setelah selesai melakukan editing, masukkan kode iklan ke dalam space dimana anda memasang iklan dan lihat hasilnya.

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>

Contoh di atas menggunakan default unit iklan terkecil 320x50 (mobile unit). Lalu di ikuti dengan media min-with (lebar minimal). Jadi 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:

<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 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.

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 sesuai dengan keinginan anda.
</style>

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

1. Pastikan ukuran yang digunakan sudah benar fix.
2. Pastikan ukuran yang digunakan sesuai dengan ad unit Google Adsense yang tersedia (728x90, 468x90, 970x90, 336x280, 320x50, 300x250, dan seterusnya).
3. 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.
4. Jangan lupa mengatur ukuran unit iklan default apabila sewaktu-waktu media query tidak bisa di eksekusi.
5. Gunakan theme responsive agar dapat ditampilkan lebih baik. Tetapi jika theme website non responsif masih bisa, tetapi sebelumnya pastikan iklan float/berada di samping kiri. :)

Catatan penting:
Karena menggunakan kode asynchronous dan hanya perlu satu kali eksekusi javascript setiap load halaman dan iklan, maka script ini sebaiknya hanya di sisipkan 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 di akui Google tidak melanggar kebijakan dan justru dianjurkan. Selamat mencoba.

[via buka-rahasia.blogspot.com]