Cara Aman Menggunakan Iklan Google AdSense di Website Responsif

Cara Aman Menggunakan Iklan Google AdSense di Website Responsif 

Kelebihan desain responsif iklan Google Adnsense adalah iklan dapat disajikan dalam berbagai dimensi sesuai resolusi layar (viewport) perangkat milik pengunjung.

Secara otomatis Adsense mendeteksi ukuran layar pengunjung dan menyajikan unit iklan terbaik sesuai dengan space tersedia. Misalnya, pengunjung yang menggunakan desktop akan melihat iklan yang disajikan dengan dimensi leaderboard dengan ukuran 728x90, sementara pengunjung lain akan melihat unit iklan yang lebih kecil 468x60  menggunakan mobile.

Anda dapat menyajikan iklan Google Adsense responsif  dengan dua cara, synchronous dan synchronous non blocking. Yang ke dua adalah cara yang direkomendasikan karena kode asynchronous menjamin tidak akan menghalangi pemuatan bagian lain dari laman web. Ini berarti pengunjung dapat memuat konten laman web Anda dengan lebih cepat. Terutama untuk pengguna mobile akan memuat laman web dengan ukuran yang lebih kecil dan lebih cepat ketimbang menggunakan synchronous.

Cara Mendapatkan Kode Iklan AdSense Responsif

Buka dashboard AdSense Anda dan di bawah "Iklan Saya", klik "Buat unit iklan baru". Set Ukuran Ad sebagai "Unit Iklan Responsif" dan klik "Simpan dan Dapatkan Kode" untuk mendapatkan kode JavaScript untuk iklan AdSense Responsif Anda. Kode defaultnya seperti terlihat berikut ini:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-12345"
     data-ad-slot="xxxxx"
     data-ad-format="auto"></ins>
<script>
undefinedadsbygoogle = window.adsbygoogle || []).pushundefined{});
</script>

AdSense (dengan kode standar) mengkalkulasi lebar space yang tersedia dan membuat iklan dengan ukuran maksimal sesuai dengan ukuran space tersedia. Hal ini tidak selalu menjadi pendekatan yang terbaik, karena iklan yang tampil lebih tepat adalah iklan dengan ukuran persegi panjang rectangles dan ukuran ramping dan tinggi/gedung pencakar langit (skyscrapers) dan belum tentu leaderboards.

Ada cara untuk membuat unit iklan Adsense selalu menyajikan persegi panjang atau skycrapers yakni dengan mengubah nilai variabel data ad-format dengan menggunakan JavaScript dari "auto" menjadi "persegi panjang" dan memakasi Adsense untuk selalu menyajikan iklan dengan salah satu format yang diinginkan, misalnya persegi panjang. Demikian pula, Anda dapat mengatur data ad-format "vertikal" untuk selalu menyajikan unit iklan 120×600 atau 160×600.

Hasil modifikasiya dapat dilihat sebagai berikut:

<div id="google-ads-1"></div>
 
<script type="text/javascript"> 
 
    /* Calculate the width of available ad space */
    ad = document.getElementByIdundefined'google-ads-1');
 
    if undefinedad.getBoundingClientRectundefined).width) {
        adWidth = ad.getBoundingClientRectundefined).width; // for modern browsers 
    } else {
        adWidth = ad.offsetWidth; // for old IE 
    }
 
    /* Replace ca-pub-XXX with your AdSense Publisher ID */ 
    google_ad_client = "ca-pub-XXX"
 
    /* Replace 1234567890 with the AdSense Ad Slot ID */ 
    google_ad_slot = "1234567890"
  
    /* Do not change anything after this line */
    if undefined adWidth >= 728 )
      google_ad_size = ["728", "90"];  /* Leaderboard 728x90 */
    else if undefined adWidth >= 468 )
      google_ad_size = ["468", "60"];  /* Banner undefined468 x 60) */
    else if undefined adWidth >= 336 )
      google_ad_size = ["336", "280"]; /* Large Rectangle undefined336 x 280) */
    else if undefined adWidth >= 300 )
      google_ad_size = ["300", "250"]; /* Medium Rectangle undefined300 x 250) */
    else if undefined adWidth >= 250 )
      google_ad_size = ["250", "250"]; /* Square undefined250 x 250) */
    else if undefined adWidth >= 200 )
      google_ad_size = ["200", "200"]; /* Small Square undefined200 x 200) */
    else if undefined adWidth >= 180 )
      google_ad_size = ["180", "150"]; /* Small Rectangle undefined180 x 150) */
    else
      google_ad_size = ["125", "125"]; /* Button undefined125 x 125) */
 
    document.write undefined
     '<ins class="adsbygoogle" style="display:inline-block;width:' 
      + google_ad_size[0] + 'px;height:' 
      + google_ad_size[1] + 'px" data-ad-client="' 
      + google_ad_client + '" data-ad-slot="' 
      + google_ad_slot + '"></ins>'
    );
  
    undefinedadsbygoogle = window.adsbygoogle || []).pushundefined{});
 
</script>
 
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
</script>

Masuk ke dashboard AdSense, kemudian buat unit iklan baru atau dapat juga Anda menggunakan salah satu dari unit iklan yang ada. Copy ID unit iklan dan juga ID Publisher AdSense (Publisher ID) lalu paste pada kode yang telah ditandai dengan warna pink (ca-pub-XXX dan google_ad_slot = "1234567890")

Berikutnya copy paste potongan kode diatas ke dalam web atau blog Anda. Hasilnya Adsense akan menyajikan iklan pada perangkat pengunjung sesuai dengan ukuran space yang tersedia.