Cara Menulis Kode Iklan AdSense Yang Efisien Tanpa Perlu Parse atau Diulang

Cara Menulis Kode Iklan AdSense Yang Efisien Tanpa Perlu Parse atau Diulang

Script atau kode iklan Google AdSense yang normal biasanya seperti ini.
<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-xxxxxxxxxxxxx"
     data-ad-slot="xxxxxx"
     data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

Jadi ketika memasang 4 buah iklan, maka kodenya akan ditulis sebanyak 4 kali. Apakah menulis kode yang berulang itu salah? TIDAK! Hanya saja kurang efisien. Belum lagi bagi pengguna Blogger / Blogspot kodenya perlu diparse sebelum bisa disimpan. Jadi gimana sih cara menulis script iklan AdSense yang baik tanpa perlu parse atau mengulang kode? Baca dengan cermat dan teliti penjelasan igniel.com dibawah.


1. Pemanggilan Script External adsbygoogle.js

Untuk memanggil iklan AdSense, diperlukan script external yang beralamat di:
https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js

Tau nggak, semua script external itu cukup dipanggil SATU KALI saja. Jadi ketika memasang 4 iklan, cukup tulis sekali alamat dari script external itu SEBELUM / DIATAS </head>. Sangat tidak efisien dan buang waktu jika memanggil script yang sama berulang kali.

1.1. Agar Tidak Perlu Parse

Yang membuat kode error ketika tidak diparse adalah async yang belum ditutup. Jadi sederhana saja, tambahkan sedikit penulisannya seperti ini, maka tidak perlu lagi ribet untuk parse:
<script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Penmanggilan script external diatas bisa diganti dengan cara lain yang sekaligus memunculkan anti AdBlock agar browser pengunjung tidak menghilangkan iklan yang tampil. Caranya bisa kamu baca di artikel Cara Memasang Script Anti AdBlock Terbaru di Blogger Ala Igniel.


2. Penulisan Kode HTML <ins>

<ins> adalah kode HTML yang berfungsi sebagai pembentuk / pembangun unit iklan (duh, saya nggak nemu kosakata yang pas). Maksudnya begini. Jika <ins> disimpan di header, maka unit iklan AdSense akan mucul di header. Jika disimpan di footer, ya akan muncul di footer. Paham kan? Dimana <ins> disimpan, disitu unit iklan akan muncul.

Bedakan dengan script external yang pertama ya. Dia disimpan di </head>, bukan berarti kodenya akan muncul disana. Tetapi karena posisi penyimpanan script external yang baik memang sebelum </head>.

Maka kode <ins> perlu ditulis sebanyak iklan yang mau dimunculkan. Jika memasang 4 iklan, tulislah sebanyak 4 kali di posisi manapun yang kamu inginkan.


3. Penulisan Script windows.adsbygoogle

Dia ini temennya <ins>. Jika <ins> dideklarasikan sebanyak 4 kali, maka windows.adsbygoogle pun wajib dipanggil 4 kali. Berarti penulisan normal dan umum seperti ini:
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

Penulisan seperti itu bukannya salah, tapi bikin geregetan karena tidak rapi dan diulang terus. Kodenya bisa disederhanakan seperti ini. Oh ya, simpan SEBELUM / DIATAS </body> ya:
<script> //<![CDATA[
  for (var ads = document.querySelectorAll('ins.adsbygoogle'), i=0; i<ads.length; i++){
    if (ads[i]) {
      (adsbygoogle = window.adsbygoogle || []).push({});
    }
  }
//]] </script>

Lihat kan? Cuma butuh beberapa baris kode untuk menggantikan perulangan yang sangat tidak efisien dan mengganggu mata itu. Script diatas otomatis memanggil windows.adsbygoogle sebanyak <ins> yang tertulis.


4. Contoh Penulisan Kode yang Lengkap di Blog

Saya contohkan akan memasang 3 unit iklan. Maka struktur penulisan yang benar di dalam blog seperti ini:
<html>
  <head>
    <title>Judul Blog</title>
    <script async="async" src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
  </head>
  <body>
    <div class="header">
    <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxx" data-ad-slot="xxxxxx" data-ad-format="auto"></ins>
    </div>
    <div class="navbar">
      .....
      <!-- isi dari navbar blablabla -->
    </div>
    <div class="post-body">
      .....
      <!-- isi dari post utama blablabla -->
    </div>
    <div class="sidebar">
    <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxx" data-ad-slot="xxxxxx" data-ad-format="auto"></ins>
    </div>
    <div class="footer">
    <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxx" data-ad-slot="xxxxxx" data-ad-format="auto"></ins>
    </div>
    <script> //<![CDATA[
      for (var ads = document.querySelectorAll('ins.adsbygoogle'), i=0; i<ads.length; i++){
        if (ads[i]) {
          (adsbygoogle = window.adsbygoogle || []).push({});
        }
      }
    //]] </script>
  </body>
</html>

Loh kok jadi terpisah-pisah gitu penulisannya? Aslinya kan menyatu semua.

Saya hanya menjelaskan penulisan dan penempatan script yang benar, PRAGMATICALLY sesuai dengan ilmu yang saya pelajari.

Lalu apakah kode bawaan dari AdSense salah? Ya nggak dong. Kalau salah, iklannya tidak akan muncul. Mungkin AdSense cuma tidak mau membuat ribet publishernya dengan cara menuliskan semua kodenya sekaligus di satu tempat. Memang tidak apa-apa, tapi tidak ada salahnya kamu mencoba cara diatas agar struktur blog tidak berantakan.


5. Kelebihan

Keuntungan dan kelebihan yang didapat adalah: ketika ingin memasang unit iklan baru, kamu hanya tinggal menuliskan <ins> saja karena kode lain sudah dideklarasikan. Lebih singkat dan gampang kan?
<ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxx" data-ad-slot="xxxxxx" data-ad-format="auto"></ins>
Buang script external adsbygoogle.js dan windows.adsbygoogle.


6. Apakah Ini Aman?

YES! AMAN! Ini tidak melanggar ketentuan apapun.

Bukannya nggak boleh edit script AdSense?

Yang tidak boleh itu mengedit script di dalam adsbygoogle.js, menambahkan script tertentu yang mengarahkan pengunjung untuk klik iklan, dan bentuk curang lainnya. Kalau cuma seperti ini sih tidak masalah.

Ingat ya, tidak ada cara yang salah. Yang ada adalah kurang efisien. Dan tutorial penulisan script iklan AdSense tanpa parse ini adalah salah satu cara untuk membuatnya lebih baik.
Baca Juga

DONASI VIA PAYPAL

Bantu berikan donasi jika artikelnya dirasa bermanfaat. Donasi akan digunakan untuk memperpanjang domain www.igniel.com. Terima kasih.

Artikel Terkait

10 Komentar

  1. dengan cara ini tetap aman kan sist igniel?

    ReplyDelete
    Replies
    1. Aman. Yang nggak boleh itu mengubah script di dalam adsbygoogle.js

      Delete
    2. kak ignel, penulisan seperti ini sudah benar apa tidak kak ?


      //

      Delete
    3. for (var ads = document.querySelectorAll('ins.adsbygoogle'), i=0; i<ads.length; i++){
      if (ads[i]) {
      (adsbygoogle = window.adsbygoogle || []).push({
      google_ad_client: "ca-pub-xxxxxxxxxxxxxx",
      enable_page_level_ads: true
      });
      }
      }

      Delete
  2. Saya juga pernah liat yang model beginian, bahkan tema blog saya sekarang ini pake yang model beginian.

    Kalau tema wordpress udah mulai rame yang pake ins

    ReplyDelete
  3. muncul error "Error parsing XML, line 382, column 85: Element type "ads.length" must be followed by either attribute specifications, ">" or "/>"

    dan diarahkan di bagian ini:
    for (var ads = document.querySelectorAll('ins.adsbygoogle'), i=0; i<ads.length; i++){

    solusinya gimana ya?

    ReplyDelete
    Replies
    1. Coba pake CDATA di tag pembuka dan penutup script.

      <script> //<![CDATA[
      .......
      //]]></script>

      Delete
  4. trimakasih mbak tipsnya, saya save tipsnya soalnya template saya masih yg amp dan ada rencana mau balik ke non-amp tapi nunggu template yg igniel yg diapaki sekarang di share baru mau tukar template. ditunggu trik-trik berikutnya mbak niel. Mauliate

    ReplyDelete
  5. baru tau bisa gini.. makasih infonya kak. :)

    ReplyDelete

Gunakan tag HTML <em> untuk menuliskan URL, potongan kode, atau hal penting lainnya.
Contoh: <em>isi pesan</em>