Cara Pasang Script Lazy Load Iklan AdSense Berbagai Jenis di Blog

Script lazy load iklan AdSense berbagai jenis untuk menunda pemuatan. Diantaranya setelah scroll, pakai timer, dan height atau ketinggian halaman.
Script Iklan Lazy Load AdSense di Blog

Seperti yang kita tahu, lazy load adalah sebuah metode untuk menunda pemuatan konten dengan tujuan untuk meringankan loading halaman blog. Konten apa saja yang dapat dimodifikasi menggunakan lazy load? Biasanya sih gambar, iklan, dan widget custom seperti artikel terkait (related post) atau sejenisnya.

Lazy load yang umum ditemukan adalah konten yang dimuat saat pengguna melakukan scroll. Namun sebenarnya lazy load tidak melulu dipicu (trigger) oleh aktivitas scroll saja. Kamu bisa menentukan aktivitas apa yang menjadi pemicu terpanggilnya lazy load. Oleh karena itu, blog Igniel akan menyajikan tutorial untuk membuat script lazy load iklan AdSense di blog dengan berbagai macam metode.

Script lazy load iklan AdSense ini dapat dipasang di Blogspot maupun WordPress ya. Tinggal simpan saja Javascript sesuai dengan tempatnya berasarkan platform blog masing-masing.

1. Script Dasar

Sebelum memilih jenis lazy load yang dibutuhkan, saya akan menuliskan dulu script dasar iklan AdSense yang statusnya fixed alias tidak perlu diubah-ubah (kecuali data yang dibutuhkan). Perhatikan dengan seksama karena ini adalah script yang akan dipanggil saat memilih jenis lazy load.

Pertama-tama, kamu harus HAPUS script eksternal AdSense seperti yang dilakukan saat memasang anti AdBlock Blogger. Cari kode yang mirip-mirip seperti ini, biasanya posisinya ada di antara <head> dan </head>.

<script async="async" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxx" crossorigin="anonymous"></script
xxxx adalah kode publisher AdSense yang umumnya terdiri dari 16 angka yang berbeda-beda.

Kemudian catat script dasar berikut dan ubah data yang diperlukan. Ingat ya, script dasar ini akan digunakan kembali pada paragraf berikutnya.

/* Lazy Load Ads By igniel.com */
let ignLzPub = 'xxxx',
ignLzAd = document.createElement('script');
ignLzAd.src = 'https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-' + ignLzPub;
ignLzAd.async = true;
ignLzAd.setAttribute('crossorigin', 'anonymous');
document.head.appendChild(ignLzAd);
xxxx: ubah dengan kode publisher AdSense kamu sendiri.

1.1. Penulisan Iklan Manual

Bagian ini hanya berlaku jika kamu memasang iklan dengan cara manual yaitu dengan membuat ad unit. Bagi yang memasang iklan otomatis (auto), bagian ini bisa dilewati.

Kamu harus memperhatikan cara menulis kode iklan AdSense yang benar agar script lazy load ini berjalan sempurna.

Saat mengambil kode dari dashboard AdSense, biasanya akan diminta untuk menyalin beberapa baris kode. Pastikan untuk TIDAK menuliskan script eksternal karena sudah dipanggil melalui kode di atas. Kamu cukup menyalin dari mulai tag <ins>.

Untuk lebih jelasnya, perhatikan gambar berikut ini.

Cara Memasang Lazy Load Iklan AdSense
JANGAN salin kode yang ditandai oleh kotak merah!

2. Script Iklan Lazy Load Berbagai Jenis

Sekarang pilih salah satu dari beberapa metode lazy load iklan AdSense berikut sesuai dengan kebutuhan. Ingat ya, PILIH SALAH SATU saja! Jangan lupa untuk menyisipkan script dasar di tempat yang sudah ditandai.

Oh ya, kamu juga bisa coba kombinasikan dengan script lazy load gambar blog dan script lazy load video YouTube agar loading halaman blog bisa lebih ngebut lagi.

Pemasangan script lazy load iklan ini pun dapat meningkatkan skor performa saat dicek di tools pengecek kecepatan loading web blog seperti PageSpeed Insight atau GTmetrix.

2.1. Iklan Lazy Load Dengan Scroll

Script iklan lazy load saat scroll adalah jenis yang paling populer dan paling banyak digunakan. Iklan akan dimuat saat pengguna melakukan scroll di halaman blog.

<script> //<![CDATA[
  /* Lazy Load Ads on Scroll by igniel.com */
  let lzAd = false;
  window.addEventListener('scroll', () => {
    (0 != document.documentElement.scrollTop && false === lzAd || 0 != document.body.scrollTop && !1 === lzAd) && (!function(){
      sisipkan SCRIPT DASAR di sini
    }(), lzAd = true);
  }, true);
//]]> </script>

2.2. Iklan Lazy Load Dengan Timer

Jenis script iklan lazy load ini dipicu berdasarkan waktu hitung mundur. Kamu bisa menyebutnya timer, countdown, atau apapun deh bebas. Iklan akan dipanggil saat detik ke-sekian sesuai dengan waktu yang ditentukan. Pemanggilan iklan tidak terpengaruh oleh aktivitas scroll.

<script> //<![CDATA[
  /* Lazy Load Ads with Timer by igniel.com */
  let lzAdTime = 3;
  setTimeout(() => {
    sisipkan SCRIPT DASAR di sini
  }, lzAdTime * 1000);
//]]> </script>
Ganti angka pada lzAdTime sesuai keinginan. Pada contoh, angka 3 berarti 3 detik.

2.3. Iklan Lazy Load Saat Ketinggian Tertentu

Jenis iklan lazy load AdSense satu ini cukup jarang dipasang karena tutorialnya pun belum banyak. Ini berbeda dengan jenis pertama ya. Kalau yang pertama akan dipanggil saat itu juga saat ada aktivitas scroll, sementara jenis ini baru akan muncul saat pengguna melakukan scroll sejauh ketinggian tertentu. Contoh sederhananya adalah saat scroll sepanjang setengah halaman, barulah iklan akan dipanggil.

Jenis ini cocok dipakai untuk menyenangkan pembaca. Mereka akan terbebas dari iklan saat membaca beberapa paragraf awal dan dibuat nyaman terlebih dulu. Setelah membaca sampai tengah halaman, barulah iklan akan dipanggil.

Namun kamu harus tentukan sendiri "tengah halaman" itu tingginya berapa. Saya sengaja tidak memanggilnya otomatis di tengah halaman karena kebutuhan tiap orang berbeda. Ganti saja angkanya sampai ketemu posisi ketinggian yang cocok.

<script> //<![CDATA[
  /* Lazy Load Ads Based on Page Height by igniel.com */
  let lzAdHeight = 2000;
  lzAd = false;
  window.addEventListener('scroll', () => {
    ((window.innerHeight + window.scrollY) >= lzAdHeight && false === lzAd || (window.innerHeight + window.scrollY) >= lzAdHeight && !1 === lzAd) && (!function(){
      sisipkan SCRIPT DASAR di sini
    }(), lzAd = true);
  }, true);
//]]> </script>
Ganti angka pada lzAdHeight sesuai keinginan. Pada contoh, angka 2000 berarti saat halaman memiliki ketinggian (height) 2.000 pixel.

Gimana tutorial memasang script lazy load iklan di blog ini? Apakah sesuai dengan kebutuhan kamu? Komen ya kalau scriptnya ada error supaya saya bisa cepat perbaiki. Kalau berhasil juga komen biar yang lain tahu hasilnya.

38
Cara Pasang Script Lazy Load Iklan AdSense Berbagai Jenis di Blog
Cara Pasang Script Lazy Load Iklan AdSense Berbagai Jenis di Blog
Script lazy load iklan AdSense berbagai jenis untuk menunda pemuatan. Diantaranya setelah scroll, pakai timer, dan height atau ketinggian halaman.
Bagikan ke aplikasi lainnya:
  • WhatsApp
  • Telegram
  • Facebook
  • X (Twitter)
  • Pinterest
  • LinkedIn

Artikel Terkait

38 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.
  • Inputekno
    08 Juli, 2024
    Profil: https://www.blogger.com/profile/13925334002970059722
    Mba kenapa di dasbor adsense iklan otomatis kode tidak terdeteksi?
  • Polma Roy Sihite
    01 Mei, 2024
    Profil: https://www.blogger.com/profile/10261015959352909191
    info mbak

    kalau di menu Blogger '$ Penghasilan' - 'HUBUNGKAN ADSENSE' (cuma muncul kalau bahasa blog english) dihubungkan, scriptnya nggak berfungsi. iklan muncul tapi nggak lazy. tapi kalau nggak dihubungkan aman saja, lazyload.
  • Irfan
    17 September, 2023
    Profil: https://www.blogger.com/profile/18437050482778118189
    mantap mbak saya sudah coba dan berhasil
  • SeFi
    14 Juli, 2023
    Profil: https://www.blogger.com/profile/09601931053297438077
    Kak izin tanya, jika saya ingin menerapkan kode iklan dari Google Ad Manager bagaimana caranya? karena kodenya berbeda dengan kode dari Adsense.
    Berikut kode dari Google Ad Manager:
    kode dibagian head

    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    <script>
    window.googletag = window.googletag || {cmd: []};
    googletag.cmd.push(function() {
    googletag.defineSlot('/22960405746/ads1', [300, 250], 'div-gpt-ad-1689290662073-0').addService(googletag.pubads());
    googletag.pubads().enableSingleRequest();
    googletag.enableServices();
    });
    </script>

    kode dibagian body:

    <!-- /22960405746/ads1 -->
    <div id='div-gpt-ad-1689290662073-0' style='min-width: 300px; min-height: 250px;'>
    <script>
    googletag.cmd.push(function() { googletag.display('div-gpt-ad-1689290662073-0'); });
    </script>
    </div>
  • Heri
    18 Juni, 2023
    Profil: https://www.blogger.com/profile/13596397766594029398
    Naruh-nya di bagian mana?
  • SeFi
    15 Juni, 2023
    Profil: https://www.blogger.com/profile/09601931053297438077
    Komentar ini telah dihapus oleh SeFi selaku penulis.
  • KangBatch
    30 April, 2023
    Profil: https://www.blogger.com/profile/17507900613771230339
    mba, source javascript ads nya bisa disisipin lebih dari satu ngak yah?
  • Latihan Soal Psikotes
    22 Maret, 2023
    Profil: https://www.blogger.com/profile/09639510929768003026
    Saran : Berikan juga contoh penulisan yang sudah jadi jika seumpama blogger ingin memasang beberapa iklan di blok,,makasih kak
  • Latihan Soal Psikotes
    22 Maret, 2023
    Profil: https://www.blogger.com/profile/09639510929768003026
    saya baca kok bingung? Itu kode yang sudah jadi diletakan dimana? Dan kalau ingin memasang banyak iklan di blog, harus bagaimana?

    Kode verfikasi adsen diapakan? yang dibawah head?
    • Igniel
      20 April, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Kenapa bingung kak. Kan di atas kode Javascript, jadi simpan dimana Javascript biasa ditempatkan.

      Kalau mau pasang banyak iklan, baca lagi dengan teliti nomor 1.1. Penulisan Iklan Manual. Yang dikasih kotak biru itu bisa dipasang berulang kali sesuai unit iklan masing-masing.
  • HAFA TIPS
    21 Maret, 2023
    Profil: https://www.blogger.com/profile/03042696621252652434
    Mantap bang jadi lancar jaya web ku
  • Tulisan Guru
    31 Januari, 2023
    Profil: https://www.blogger.com/profile/12018773668249923918
    Nyari yang versi WordPress teh, gak nemu-nemu nih, ada belum cocok juga 😁🙏🏻
    • Igniel
      01 Februari, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ini juga bisa dipake di WP kok.
    • Tulisan Guru
      01 Februari, 2023
      Profil: https://www.blogger.com/profile/12018773668249923918
      Berarti yang skip dasar itu skrip yang pertama kita copy saat adsense di terima ya? Terus pakai script lazy? Otw nyoba teh, terimakasih ilmu nya 🙏🏻
  • Yogi Andrian
    18 Januari, 2023
    Profil: https://www.blogger.com/profile/15673944689660996486
    Terima kasih ilmunya. Speed blog saya meningkat drastis

    Kalau boleh tahu dari ketiga mode, mbak ini lebih suka yang mana?
  • idaylummm
    15 Januari, 2023
    Profil: https://www.blogger.com/profile/04412310747139580963
    Mantul teh...
    itu iklan bisa begitu ya, apa sih namanya..
    di postingan ini sya scroll ada iklan, abdi scroll lagi iklan ilang......

    nama iklan model apa tuh teh, gimana buatnya
    • Tulisan Guru
      31 Januari, 2023
      Profil: https://www.blogger.com/profile/12018773668249923918
      Namanya iklan parallax
    • Igniel
      01 Februari, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Ini.
      https://www.igniel.com/2022/05/iklan-parallax-tengah-post.html
  • analisamarket
    15 Januari, 2023
    Profil: https://www.blogger.com/profile/11315293130837069806
    Mba, kalau sudah ada script lazyload adsense bawaan template, misal kurang puas, apa bisa memakai ini tanpa hapus script bawaan? terima kasih..
    • Igniel
      01 Februari, 2023
      Profil: https://www.blogger.com/profile/09199170379661896200
      Lebih baik dihapus biar scriptnya gak bentrok. Menghindari error.
  • Rendi Adetia Sapoetra
    02 Januari, 2023
    Profil: https://www.blogger.com/profile/09264457655516465048
    mba..ini blog bisa rapih cantik begini sih, ya ampun..😭
  • echaimutenan
    01 Januari, 2023
    Profil: https://www.blogger.com/profile/10545499770073491898
    mbak mu nanya klo lazy load tiap postingan gimana ya
  • Ady Kusanto
    31 Desember, 2022
    Profil: https://www.blogger.com/profile/17061057770592549255
    Terima kasih mbak, setelah saya terapkan cara diatas, kecepatan blog saya meningkat signifikan, sebelumnya skor untuk tampilan moblile cuma dapat 29, setelah pakai script ini naik jadi 88. Mantap!
  • Laode Muhamad Fiil Mudawat
    29 Desember, 2022
    Profil: https://www.blogger.com/profile/01557548691659848399
    Mbak, mau nanya:
    1. Bagaimana caranya agar iklan adsense yg muncul di Blog kita bisa 'ter-refresh otomatis' dalam waktu tertentu...? (Biar bisa hemat ruang, misalkan: 1 ruang iklan bisa diisi oleh 3 iklan dalam periode waktu 3 menit... Iklan otomatis berganti setiap 1 menit..)


    2. Saya ingin "Jika iklan adsense saya tidak muncul, maka yang muncul adalah gambar iklan blog saya sendiri + linknya..."
    Itu bagaimana cara edit scriptnya??

    Makasih mbak,.. Saya banyak belajar dari Anda...
    • Igniel
      29 Desember, 2022
      Profil: https://www.blogger.com/profile/09199170379661896200
      Yang disebutkan tidak mustahil dilakukan. Harus pakai Javascript custom.
    • Laode Muhamad Fiil Mudawat
      29 Desember, 2022
      Profil: https://www.blogger.com/profile/01557548691659848399
      Sy coba pake cara ini:
      https://support.google.com/adsense/answer/10762946?hl=id

      dan ini:
      https://wpadvancedads.com/manual/fallback-ad-for-empty-adsense-and-google-ad-manager-ads/

      Tp belum berhasil...
  • David Sigalingging
    29 Desember, 2022
    Profil: https://www.blogger.com/profile/10570207641176424679
    Terimakasih kak, its works!
  • liliek pur
    10 Oktober, 2022
    Profil: https://www.blogger.com/profile/18400915352779979440
    Terima kasih, Mbak Igniel. Cara ini berhasil menaikkan performa blog saya di Pagespeed Insight dari 45 menjadi 88.
  • Rio Agustya
    25 September, 2022
    Profil: https://www.blogger.com/profile/00828288525906864174
    Kalau di template igniplex itu pake lazy load apa ya mbak