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

Tutorial menulis script Google AdSense yang benar secara pragmatis dan efisien tanpa perlu parse dan mengulang penulisan.
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.
22
Cara Menulis Kode Iklan AdSense Yang Efisien Tanpa Perlu Parse atau Diulang
Cara Menulis Kode Iklan AdSense Yang Efisien Tanpa Perlu Parse atau Diulang
Tutorial menulis script Google AdSense yang benar secara pragmatis dan efisien tanpa perlu parse dan mengulang penulisan.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • Twitter
  • Pinterest
  • LinkedIn

Artikel Terkait

22 komentar

  • Menulis kode gunakan <i>kode</i> (kode harus di-parse)
  • Menulis dalam syntax highlighter gunakan <em>kode panjang</em> (kode harus di-parse)
  • Menyisipkan gambar gunakan <strong>URL GAMBAR</strong> (ekstensi .jpg, .png, .gif, .webp, .ico)
  • Centang Beri Tahu Saya untuk mendapatkan notifikasi ke email saat ada yang membalas komentar.
  • JagoanKODE
    16 Desember, 2020
    Profil: https://www.blogger.com/profile/18382259267641539124
    gak muncul terus kodenya wkkwkwkw nah begini mbak<(div) class='ads-asu'><(ins) class="adsbygoogle" style="display:block" data-ad-client="ca-pub-xxxxxxxxxxxxx" data-ad-slot="xxxxxx" data-ad-format="auto"><(/ins)><(/div)>
  • JagoanKODE
    16 Desember, 2020
    Profil: https://www.blogger.com/profile/18382259267641539124
    kode ini
  • JagoanKODE
    16 Desember, 2020
    Profil: https://www.blogger.com/profile/18382259267641539124
    mbak mau tanya kalau nanti kode ini dimasukan dalam tag div yang sudah ditandai lalu diinsert menggunakan insertAdjacentHTML menjadi

    divvv class='ads-asu'> {margin:0; padding:10px 15px}

    apakah iklannya masih bisa berjalan mbak ?
  • _kcgbln
    08 November, 2020
    Profil: https://www.blogger.com/profile/18241577037189983816
    apakah ini mempengaruhi kecepatan loading?
  • Jariyah
    25 Juni, 2019
    Profil: https://www.blogger.com/profile/08623811926708331615
    kalau mau diaplikasikan di wordpress gimana caranya mbak?
    saya cari-cari di google gak nemu..
  • Tedi Eka
    10 Januari, 2019
    Profil: https://www.blogger.com/profile/17195151981500818409
    Kalau untuk page_level bagaimana pemasangannya mbak kalau menggunakan cara ini?
    • Igniel
      10 Januari, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Sama aja. Tinggal hapus script externalnya.
      <script async scr='//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js'></script>
  • Rafi
    21 November, 2018
    Profil: https://www.blogger.com/profile/16661548576424459683
    baru tau bisa gini.. makasih infonya kak. :)
  • defantri.com
    19 November, 2018
    Profil: https://www.blogger.com/profile/07126573827912835475
    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
  • EZ
    13 Agustus, 2018
    Profil: https://www.blogger.com/profile/14849714952887775648
    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?
    • Igniel
      13 Agustus, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Coba pake CDATA di tag pembuka dan penutup script.

      <script> //<![CDATA[
      .......
      //]]></script>
    • ArRahim
      18 September, 2019
      Profil: https://www.blogger.com/profile/18324895804097516935
      Ga bisa mbak. kan dikode yg sampean kasig jg uda ada //<![CDATA[ gitu nya..
    • Igniel
      18 September, 2019
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kode CDATA baru ditambahin di tutorial pas masnya bilang error.
    • ArRahim
      19 September, 2019
      Profil: https://www.blogger.com/profile/18324895804097516935
      tetep ga bisa mbak..muncul perigatan "Kesalahan saat mengurai XML, baris 3613, kolom 8: XML document structures must start and end within the same entity" apa maksudnya tu mbak
    • Ozen
      11 November, 2019
      Profil: https://www.blogger.com/profile/14017792202899766404
      edit jd gini yg diatas /body

    • Ozen
      11 November, 2019
      Profil: https://www.blogger.com/profile/14017792202899766404
      gabisa komen kode nya.. sory.. :3
  • Iqbal Mauludy
    04 Agustus, 2018
    Profil: https://www.blogger.com/profile/02966430910287463915
    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
  • Dedy Styawan
    03 Agustus, 2018
    Profil: https://www.blogger.com/profile/14925786771846433208
    dengan cara ini tetap aman kan sist igniel?
    • Igniel
      03 Agustus, 2018
      Profil: https://www.blogger.com/profile/09199170379661896200
      Aman. Yang nggak boleh itu mengubah script di dalam adsbygoogle.js
    • Dedy Styawan
      08 Desember, 2018
      Profil: https://www.blogger.com/profile/14925786771846433208
      kak ignel, penulisan seperti ini sudah benar apa tidak kak ?


      //
    • Dedy Styawan
      08 Desember, 2018
      Profil: https://www.blogger.com/profile/14925786771846433208
      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
      });
      }
      }
  • Kang Wira
    03 Agustus, 2018
    Profil: https://www.blogger.com/profile/17188659355465337070
    Ijin Bookmark ya ganteng.. :v