cara membuat ad links responsive adsense

Membuat Ad Links Responsive di AdSense

cara membuat ad links responsive adsense

Salah satu bentuk iklan di Google AdSense adalah Ad links, yaitu bentuk iklan yang tampilannya berupa deretan link-link, yang apabila diklik akan memberikan hasil pencarian iklan yang sesuai. Bentuk iklan Ad link ini adalah salah satu favorit saya, karena memberikan alternatif pilihan kepada pengunjung website. (Hayo, mau klik yang mana, ini apa itu?)

Sebelumnya saya sudah membahas mengenai cara membuat tampilan iklan Google AdSense menjadi responsive terhadap ukuran layar perangkat. Tapi, tutorial yang saya jelaskan tersebut hanya bisa untuk iklan biasa (text dan image ads). Tidak bisa diaplikasikan untuk menampilkan iklan Ad Links secara responsive. Anda tetap bisa mencobanya, tapi hasilnya iklan akan terpotong sebagian.

Lalu, bagaimana caranya agar iklan Ad links bisa menjadi responsive menyesuaikan ukuran layar? Yuk, disimak terus!

Cara Membuat Ad Links Responsive di Google AdSense.

Pertama, yang harus dilakukan adalah membuat minimal 2 ad units, semua berbentuk Ad links, dengan ukuran yang masing-masing berbeda. Pada tutorial kali ini saya membuat 3 ad unit, seperti gambar berikut:

ad links responsive adsense

Sesuai gambar di atas, 3 ad unit Ad links, yang masing-masing berukuran 200×90, 468×15, dan 728×15.

Setelah ad unit dibuat, copy kode iklan berikut ini:

<div id="google-linkads-1"></div>     
<script async src="http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>     
    ad = document.getElementById('google-linkads-1');    
      
    var adWidth = (typeof ad.getBoundingClientRect === 'function') ? 
    ad.getBoundingClientRect().width : ad.offsetWidth;    
      
    /* Ganti XXX dengan publisher id dari akun Google AdSense Anda */
    google_ad_client = "ca-pub-XXX";
     
    /* ganti ID-Iklan#X dengan ID dari masing-masing Ad Units yang sudah dibuat */
    if ( adWidth >= 728 ) google_ad_param = ["728", "15", "ID-Iklan#1"];
    else if ( adWidth >= 468 ) google_ad_param = ["468", "15", "ID-Iklan#2"]; /* <<--- copy paste baris kode ini apabila ingin menambah ad unit */
    else google_ad_param = ["200", "90", "ID-Iklan#3"];
 
    document.write (
    '<ins class="adsbygoogle" style="display:inline-block;'
    + 'width:' + google_ad_param[0] + 'px;'
    + 'height:' + google_ad_param[1] + 'px'
    + '" data-ad-client="' + google_ad_client
    + '" data-ad-slot="' + google_ad_param[2]
    + '"></ins>'
    );
    (adsbygoogle = window.adsbygoogle || []).push({});
 
</script>

Sesuai penjelasan di dalam kode, Anda tinggal mengganti XXX dengan ID publisher AdSense Anda, lalu mengganti ID-Iklan#X dengan ID ad units yang sudah dibuat. Setelah mengganti semua yang perlu diganti, tempatkan kode iklan di website Anda.

Apabila ad unit yang dibuat lebih dari 3, copy dan paste baris kode berikut ini:

    else if ( adWidth >= 468 ) google_ad_param = ["468", "15", "ID-Iklan#2"];

Ganti 468 sesuai ukuran panjang iklan ad unit yang dibuat, dan ganti 15 dengan ukuran lebar (tinggi) iklan.

Apakah kode iklan bisa digunakan pada lebih dari 1 slot iklan?

Apabila kode iklan ingin ditempatkan lebih dari 1 slot (posisi), yang harus dilakukan adalah:

  1. copy kode iklan dan paste ke posisi baru,
  2. lalu ganti google-linkads-1 pada slot iklan yang baru dengan google-linkads-2, dst.

Test Kode Iklan.

Setelah semua kode iklan sudah dipasang di website, bisa langsung dicek. Caranya dengan mengganti ukuran layar (restore down browser) dan reload halaman website, atau pun dengan mengakses website dari perangkat berbeda (komputer, smartphone, dll). Apabila setting yang dilakukan sudah benar, maka tampilan iklan akan sesuai dengan ukuran layar dan ukuran slot iklan yang tersedia.

Selamat mencoba. Baca pula tulisan dan tutorial lainnya pada topik Tutorial AdSense.

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

No Comments

Leave a Comment