google adsense responsive

AdSense Responsive di Blog WordPress

google adsense responsiveGoogle AdSense sekarang sudah mendukung ukuran iklan yang responsive, yaitu ukuran yang bisa menyesuaikan dengan ukuran layar. Desain iklan responsive ini sangat tepat untuk blog yang menggunakan theme responsive juga.

Contohnya, bila blog diakses menggunakan komputer, maka iklan yang ditampilkan adalah unit iklan dengan ukuran leaderboard (728x90px), sementara jika diakses menggunakan smartphone maupun tablet, maka iklan yang ditampilkan adalah ukuran 300x280px (rectangle). Kode iklan Google AdSense ini dapat dengan mudah mendeteksi ukuran layar yang digunakan, dan menampilkan ukuran iklan yang sesuai untuk ukuran layar tersebut.

Bagaimana Cara Memasang Iklan AdSense Responsive?

Untuk memasang AdSense responsive ads, caranya hampir sama dengan memasang iklan AdSense seperti biasa, yaitu dengan mengambil kode iklan dari akun Google AdSense.

Login >> My Ads >> +New ad unit

Di bagian ‘Ad size’, pilih ‘Responsive’, lalu klik tombol “Save and get code” untuk mendapatkan kode iklan responsive. Kode yang akan didapatkan secara default adalah seperti ini:

 <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive Ads -->
<ins class="adsbygoogle"
 style="display:block"
 data-ad-client="ca-pub-xxx"
 data-ad-slot="yyyyyy"
 data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Kode yang didapatkan adalah seperti di atas. Dari kode tersebut, yang perlu diperhatikan adalah baris kode:

data-ad-format="auto"

Apabila data-ad-format diset “auto”, maka akan ditampilkan iklan sesuai ukuran layar yang paling sesuai. Selain “auto”, data-ad-format juga dapat diset “horizontal”, “vertical”, “rectangle”. Bisa pula diset dengan beberapa pilihan yang dipisahkan dengan koma (,), misalnya “horizontal, vertical”. Dari nilai dala data-ad-format ini kode AdSense akan mendeteksi resolusi layar, kemudian menampilkan iklan sesuai nilai data-ad-format yang sudah diset, yang disesuaikan dengan ukuran layar.

Pada langkah ini kode sudah bisa dipasang, dan menampilkan iklan dengan ukuran yang dapat menyesuaikan diri dengan ukuran lebar layar.

Google AdSense Responsive Tingkat Lanjut.

Meski kode di atas sudah bisa dipasang dan menampilkan iklan dengan menarik, tidak semua ukuran iklan bisa memberikan nilai klik yang besar. Ukuran iklan tertentu juga tidak begitu direkomendasikan karena tidak memiliki tingkat keberhasilan yang cukup tinggi. Untuk mengatasinya, dapat dilakukan dengan menambahkan kode sebagai berikut:

<style>
.responsive-ads { width: 320px; height: 100px; }
@media(min-width: 300px) { .responsive-ads { width: 300px; height: 250px; } }
@media(min-width: 336px) { .responsive-ads { width: 336px; height: 280px; } }
@media(min-width: 728px) { .responsive-ads { width: 728px; height: 90px; } }
</style>

Kode tersebut ditambahkan pada bagian atas kode iklan. Langkah berikutnya adalah, menghapus kode berikut ini:

data-ad-format="auto"

Lalu pada ins class ditambahkan nilai berikut ini:

responsive-ads

Sehingga, kode keseluruhan menjadi seperti berikut:

<style>
.responsive-ads { width: 320px; height: 100px; }
@media(min-width: 300px) { .responsive-ads { width: 300px; height: 250px; } }
@media(min-width: 336px) { .responsive-ads { width: 336px; height: 280px; } }
@media(min-width: 728px) { .responsive-ads { width: 728px; height: 90px; } }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Responsive Ads -->
<ins class="adsbygoogle responsive-ads"
 style="display:inline-block"
 data-ad-client="ca-pub-xxx"
 data-ad-slot="yyyyyy"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Kode yang ditebalkan dan berwarna merah adalah kode yang baru saja ditambahkan. Kode yang berwarna biru harus diganti sesuai dengan nilai yang tertera di akun masing-masing.

Penjelasan Kode

Pada kode yang sudah jadi di atas, secara default akan ditampilkan iklan berukuran 320×100, yang direkomendasikan untuk layar mobile. Sementara, apabila ukuran lebar layar minimal 300, akan ditampilkan iklan 300×250 yang memiliki tingkat keberhasilan cukup tinggi. Juga akan ditampilkkan iklan 336×280 jika lebar layar minimal 336, atau 728×90 apabila ukuran lebar layar minimalnya mencapai 728.

Untuk mempermudah penempatan iklan, bisa menggunakan plugin yang sudah tersedia. Saya biasanya menggunakan plugin Quick AdSense atau Ad Inserter,  karena dapat digunakan untuk menempatkan iklan di antara paragraf di dalam postingan, serta ditempatkan di widget.

Selamat mencoba. Pastikan nilai data-ad-client dan data-ad-slot sudah diganti sesuai yang tertera pada akun Google AdSense Anda.

Update: 24 Oktober 2015.

Membuat Ukuran Iklan Ad Links Responsive Google AdSense.

Tutorial di atas hanya bisa digunakan untuk membuat iklan AdSense biasa (text ads dan banner ads) menjadi responsive. Apabila Anda ingin menampilkan iklan Ad Links menjadi responsive, ikuti tutorial lainnya: Membuat Ad Links Responsive di AdSense.

Bekerja online dan mengelola website. Sekarang tinggal sambil berwisata di Pulau Lombok.