Tutorial Membuat Tampilan Iklan Adsense Lebih Responsif

Tutorial Membuat Tampilan Iklan Adsense Lebih Responsif

Google akhirnya secara resmi meluncurkan sebuah fitur baru lagi sebagai salah satu pilihan skrip (kode) yang bisa di set di dashboard Google Adsense.

Iklan Adsense Lebih Responsif

Beberapa waktu lalu, Google mengeluarkan asynchronous code untuk meningkatkan performa website yang menampilkan iklan Adsense, iklan tampil lebih responsif dan muncul setelah semua elemen web termuat oleh browsers. Responsivitas sebuah unit iklan juga memastikan setiap iklan yang tampil dapat dilihat dengan baik oleh pengguna media lain (selain pengguna destop) sehingga potensi klik serta penayangan dan optimalisasi pendapatan Adsense tidak berkurang.

 Sebelum fitur unit iklan responsive diterbitkan, sebuah kode iklan masih dalam bentuk synchronous (kode unit iklan lawas), sehingga kita harus mengakali tampilan responsifnya dengan javascript. Ada juga beberapa slot iklan yang digunakan sekaligus dalam satu area iklan supaya nantinya bisa ditampilkan sesuai dengan lebar screen. Contohnya di header saya membuat 3 slot sekaligus, 728x90, 468x60, dan 320x50, yang nantinya masing-masing akan ditampilkan sesuai dengan lebar device. meskipun ini terbilang cukup ribet, karena kita mesti membuat banyak slot, dan juga punya 3 area di satu halaman, maka bisa kita pastikan banyak sekali jumlah slot yang harus dibuat. Belum lagi kita harus mengeksekusi menggunakan javascript yang tentu akan memakan waktu lebih lama.

Baca juga: Cara Mendaftarkan Blog Ke Google Adsense 2019

 

Contoh Dari CSS media queries

<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 menggunakan CSS media queries yang menggunakan class adsbygoogle. Berikut tampilan 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 in kemudian di input dan dipisahkan ke dalam tag style nya sendiri, dengan menggunakan class adsbygoogle.

Baca juga: Perbedaan Google Adsense Hosted dan nonHosted

Rilisnya Unit Iklan Adsense Responsif (Beta)

Selagi unit iklan responsif diluncurkan, saya masih merasa kawatir, karena cara yang terakhir kali ini belum sepenuhnya dirilis secara resmi sebagaimana cara yang diperbolehkan, meskipun dalam help center, Google juga mengijinkan penggunaan CSS media queries, namun bukan pada asynchronous.

Cara membuat Ad Unit responsive dan modifikasi CSS-nya sebelum bisa digunakan pada website/blog responsive anda:

1. Buat slot baru, dan, perhatikan pada pilihan dropdown dibagian "ad size". Pilih yang "responsive ad unit". Disini tidak ada ukuran yang perlu diset pada tahap ini. Kode yang harus dicopy pun harus dimodifikasi lagi karena itu hanyalah contoh saja. 

2. Copy kan kode yang dihasilkan dan paste kan pada notepad atau editor teks 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 (perubahan) pada bagian tag style, karena disinilah kunci responsivitasnya.

Default contoh di atas menggunakan default unit iklan yang terkecil 320x50 (mobile unit). Kemudian dilanjutkan dengan media min-with (lebar minimal). Jadi pengertiannya seperti ini, jika lebar screen minimal 500px, maka tampilan ukuran 468x90px, jika lebar screen minimal ialah 800px, maka tampilan unit iklan 728x90. Anda juga bisa menampilkan beberapa baris sekaligus jika anda ingin membuatnya lebih spesifik, menentukan syarat minimal maupun maksimal screen, dan mengubah ukuran default pada bagian paling atas. Contohnya:

<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 yang diatas menggunakan konsep minimal width, sehingga setiap unit iklan default adalah yang terkecil. Jika anda ingin menggunakan unit iklan default terbesar menjadi ukuran yang lebih kecil, misalnya default 728x90 kemudian menjadi unit lebih kecil 468x90 dan seterusnya, maka media query yang harus digunakan adalah max-width.

4. Jika anda masih tidak puas ataupun bingung, dan ingin menggunakan aturan ukuran sebuah media screen yang lebih fix, gunakanlah contoh pertama dimana saya terapkan pada kode asynchronous di awal artikel (@media screen and (max-width)).

Contohnya:

<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 pada kode tersebut, masukkan kode iklan ke dalam space dimana anda memasang dan menampilkannya iklan dan lihatlah hasilnya.

Itulah pembahasan kali ini. Selamat mencoba dan semoga berhasil.