Adsense: Bagaimana Mengubah Responsive Ad Code

Adsense dengan Responsive Ad Code membuat tampilan iklan bisa menyesuaikan dengan lebar layar secara otomatis, menyesuikan dengan lebar layar gadget yang digunakan oleh pengunjung. Namun Google juga memberi petunjuk bagi publisher untuk bagaimana mengubah responsive ad code agar menyesuaikan dengan penampilan yang dikehendaki pengelola situsweb.

Pilihan sederhana adalah memasang ad unit tetap yang cocok untuk semua jenis gadget, dan jika itu yang diinginkan maka ukuran paling sesuai adalah 300×250. Ukuran ini bisa untuk desktop besar hingga telepon pintar. Namun ukuran ini tidak boleh ditampilkan “above the fold” pada smartphone, karena akan menggeser isi seluruh tulisan ke bawah layar dan itu bisa menjengkelkan pengunjung.

Dengan mengubah responsive ad code maka publisher bisa mengontrol ukuran ad sesuai keinginan, ketimbang menyerahkan sepenuhnya pada Google. Sebagai contoh, publisher bisa menampilkan ukuran 336×280 pada desktop, dan menggantinya dengan ukuran 300×250 untuk “below the fold” atau 320×100 untuk “above the fold” pada gajet kecil.

Berikut adalah petunjuk bagaimana mengubah responsive ad untuk menyesuaikannya sesuai keinginan publisher:

Mengubah Responsive Ad Code untuk “above the fold”

  1. Layar dengan lebar hingga 500px: 320×100 ad unit.
    Layar dengan lebar 500px – 799px: 468×60 ad unit.
    Layar dengan lebar 800px ke atas: 728×90 ad unit.
    Gunakan kode dibawah ini:
    <style>
    .responsive1{width:320px;height:100px}
    @media(min-width: 500px) {.responsive1{width:468px;height:60px} }
    @media(min-width: 800px) {.responsive1{width:728px;height:90px} }
    </style>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle responsive1"
    style="display:inline-block"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
    data-ad-slot="xxxxxxxxxx"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
  2. Cara yang kedua untuk above the fold adalah menampilkan ukuran 320×100 untuk ukuran layar hingga 500px, dan untuk layar lebih dari 500px menggunakan 100% lebar layar dengan tinggi 90px.
    Gunakan kode dibawah ini:
    <style>
    .responsive2{width:320px;height:100px}
    @media(min-width: 500px) {.responsive2{width:100%;height:90px} }
    </style>
    <script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
    <ins class="adsbygoogle responsive2"
    style="display:inline-block"
    data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
    data-ad-slot="xxxxxxxxxx"></ins>
    <script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Mengubah Responsive Ad Code untuk “below the fold”

Layar dengan lebar hingga 500px: 250×250 ad unit.
Layar dengan lebar 500px – 799px: 300×250 ad unit.
Layar dengan lebar 800px ke atas: 336×280 ad unit.
Gunakan kode dibawah ini:
<style>
.responsive3{width:250px;height:250px}
@media(min-width: 500px) {.responsive3{width:300px;height:250px} }
@media(min-width: 800px) {.responsive3{width:336px;height:280px} }
</style>
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle responsive1"
style="display:inline-block"
data-ad-client="ca-pub-xxxxxxxxxxxxxxx"
data-ad-slot="xxxxxxxxxx"></ins>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Jangan lupa untuk mengganti nomor pada data-ad-client dan data-ad-slot dengan nomor yang ada pada akun Adsense Anda. Selamat mencoba.

Matched content

Bagikan tulisan ini di : Facebook | Twitter | WhatsApp | Email atau Print!
Home » Blog » AdSense » Adsense: Bagaimana Mengubah Responsive Ad Code
Tag :

Oleh Bambang Aroengbinang. BA lahir di Desa Mersi, Purwokerto, Jawa Tengah, sekarang tinggal di Jakarta. Seorang blogger dan pejalan musiman yang senang berkunjung ke situs, makam, dan tempat bersejarah. Menyukai pemandangan daratan subur dan pegunungan hijau ketimbang laut. Kontak BA. Subscribe via email untuk kabar tulisan terbaru. Diperbarui pada 23 Maret 2017.

Sebelumnya : «
Berikutnya : »
Lihat pula : Sitemap