Cara Pasang Script Lazy Load Iklan AdSense Berbagai Jenis Di Blog

4 min read

Cara Pasang Script Lazy Load Iklan AdSense Berbagai Jenis di Blog

Halo, para blogger kece! Kali ini kita bakal bahas cara pasang script lazy load iklan AdSense di blog kalian. Buat yang belum tahu, lazy load itu fitur yang bisa bikin iklan AdSense cuma kelihatan kalau udah masuk ke viewport atau area yang keliatan di layar. Jadi, iklannya nggak bakal langsung nongol pas halaman di-load, yang bikin loading blog jadi lebih cepet.

Manfaat Lazy Load Iklan AdSense

  • Meningkatkan Kecepatan Blog: Dengan lazy load, iklan AdSense nggak langsung kelihatan, jadi blog kalian bakal loading lebih cepat.
  • Menghemat Bandwidth: Iklan AdSense yang nggak langsung muncul bakal menghemat penggunaan bandwidth, terutama buat pengguna internet dengan koneksi lambat.
  • Meningkatkan Pengalaman Pengguna: Blog yang loading cepat bakal bikin pengunjung betah dan nggak kabur karena halaman yang lemot.

Cara Pasang Script Lazy Load Iklan AdSense

Ada beberapa cara pasang script lazy load iklan AdSense, tergantung jenis iklan yang kalian pakai.

1. Iklan Display (Unit Iklan Otomatis)

  • Masuk ke Akun AdSense: Login ke akun AdSense kalian.
  • Buat Unit Iklan: Klik "Iklan" > "Unit Iklan" > "Unit Iklan Baru".
  • Pilih Jenis Iklan: Pilih "Display" > "Unit Iklan Otomatis".
  • Konfigurasi Iklan: Atur ukuran dan jenis iklan sesuai keinginan.
  • Dapatkan Kode Iklan: Klik "Simpan dan Dapatkan Kode".
  • Tambahkan Script Lazy Load: Tambahkan kode berikut sebelum kode iklan:
<script>
(function() {
  var lazyImages = document.querySelectorAll('img[data-src]');
  var lazyLoad = function() {
    for (var i = 0; i < lazyImages.length; i++) {
      if (lazyImages[i].getBoundingClientRect().top < window.innerHeight) {
        lazyImages[i].src = lazyImages[i].dataset.src;
        lazyImages[i].classList.remove('lazyload');
      }
    }
  };
  window.addEventListener('scroll', lazyLoad);
})();
</script>

2. Iklan Teks dan Tautan

  • Masuk ke Akun AdSense: Login ke akun AdSense kalian.
  • Buat Unit Iklan: Klik "Iklan" > "Unit Iklan" > "Unit Iklan Baru".
  • Pilih Jenis Iklan: Pilih "Teks dan Tautan".
  • Konfigurasi Iklan: Atur ukuran dan jenis iklan sesuai keinginan.
  • Dapatkan Kode Iklan: Klik "Simpan dan Dapatkan Kode".
  • Tambahkan Script Lazy Load: Tambahkan kode berikut sebelum kode iklan:
<script>
(function() {
  var lazyLinks = document.querySelectorAll('a[data-href]');
  var lazyLoad = function() {
    for (var i = 0; i < lazyLinks.length; i++) {
      if (lazyLinks[i].getBoundingClientRect().top < window.innerHeight) {
        lazyLinks[i].href = lazyLinks[i].dataset.href;
        lazyLinks[i].classList.remove('lazyload');
      }
    }
  };
  window.addEventListener('scroll', lazyLoad);
})();
</script>

3. Iklan In-Feed

  • Masuk ke Akun AdSense: Login ke akun AdSense kalian.
  • Buat Unit Iklan: Klik "Iklan" > "Unit Iklan" > "Unit Iklan Baru".
  • Pilih Jenis Iklan: Pilih "In-Feed".
  • Konfigurasi Iklan: Atur ukuran dan jenis iklan sesuai keinginan.
  • Dapatkan Kode Iklan: Klik "Simpan dan Dapatkan Kode".
  • Tambahkan Script Lazy Load: Tambahkan kode berikut sebelum kode iklan:
<script>
(function() {
  var lazyInFeed = document.querySelectorAll('.adsbygoogle[data-ad-client]');
  var lazyLoad = function() {
    for (var i = 0; i < lazyInFeed.length; i++) {
      if (lazyInFeed[i].getBoundingClientRect().top < window.innerHeight) {
        (adsbygoogle = window.adsbygoogle || []).push({});
      }
    }
  };
  window.addEventListener('scroll', lazyLoad);
})();
</script>

4. Iklan Anchor

  • Masuk ke Akun AdSense: Login ke akun AdSense kalian.
  • Buat Unit Iklan: Klik "Iklan" > "Unit Iklan" > "Unit Iklan Baru".
  • Pilih Jenis Iklan: Pilih "Anchor".
  • Konfigurasi Iklan: Atur ukuran dan jenis iklan sesuai keinginan.
  • Dapatkan Kode Iklan: Klik "Simpan dan Dapatkan Kode".
  • Tambahkan Script Lazy Load: Tambahkan kode berikut sebelum kode iklan:
<script>
(function() {
  var lazyAnchor = document.querySelectorAll('ins.adsbygoogle[data-anchor-rendered-on]');
  var lazyLoad = function() {
    for (var i = 0; i < lazyAnchor.length; i++) {
      if (lazyAnchor[i].getBoundingClientRect().top < window.innerHeight) {
        (adsbygoogle = window.adsbygoogle || []).push({});
      }
    }
  };
  window.addEventListener('scroll', lazyLoad);
})();
</script>

5. Iklan Vignette

  • Masuk ke Akun AdSense: Login ke akun AdSense kalian.
  • Buat Unit Iklan: Klik "Iklan" > "Unit Iklan" > "Unit Iklan Baru".
  • Pilih Jenis Iklan: Pilih "Vignette".
  • Konfigurasi Iklan: Atur ukuran dan jenis iklan sesuai keinginan.
  • Dapatkan Kode Iklan: Klik "Simpan dan Dapatkan Kode".
  • Tambahkan Script Lazy Load: Tambahkan kode berikut sebelum kode iklan:
<script>
(function() {
  var lazyVignette = document.querySelectorAll('ins.adsbygoogle[data-vignette-rendered-on]');
  var lazyLoad = function() {
    for (var i = 0; i < lazyVignette.length; i++) {
      if (lazyVignette[i].getBoundingClientRect().top < window.innerHeight) {
        (adsbygoogle = window.adsbygoogle || []).push({});
      }
    }
  };
  window.addEventListener('scroll', lazyLoad);
})();
</script>

Tips Tambahan

  • Pastikan kode script lazy load ditambahkan di bagian <head> atau sebelum kode iklan.
  • Gunakan library lazy load seperti Lazysizes atau Lozad untuk kemudahan implementasi.
  • Uji coba blog kalian untuk memastikan iklan AdSense muncul dengan benar setelah menerapkan lazy load.

Kesimpulan

Dengan menerapkan lazy load iklan AdSense, kalian bisa meningkatkan kecepatan blog, menghemat bandwidth, dan memberikan pengalaman pengguna yang lebih baik. Ikuti langkah-langkah di atas dengan benar untuk memasang script lazy load sesuai jenis iklan yang kalian gunakan. Selamat mencoba dan semoga blog kalian makin kece!

Pertanyaan Umum tentang Cara Memasang Script Lazy Load Iklan AdSense Berbagai Jenis di Blog

Apa itu lazy load iklan?

Lazy load iklan adalah teknik yang menunda pemuatan iklan hingga pengguna menggulir ke dekat iklan tersebut. Hal ini membantu meningkatkan waktu muat halaman dan menghemat bandwidth.

Mengapa saya harus menggunakan lazy load iklan?

Menggunakan lazy load iklan memiliki beberapa keuntungan, antara lain:

  • Meningkatkan waktu muat halaman
  • Menghemat bandwidth
  • Mengurangi gangguan bagi pengguna

Jenis-jenis iklan AdSense apa yang dapat saya lazy load?

Anda dapat lazy load semua jenis iklan AdSense, termasuk:

  • Iklan teks
  • Iklan gambar
  • Iklan responsif
  • Iklan in-feed
  • Iklan video

Bagaimana cara memasang script lazy load iklan AdSense?

Ada dua cara untuk memasang script lazy load iklan AdSense:

1. Menggunakan Plugin WordPress

  • Instal plugin "AdSense Lazy Load" dari repositori WordPress.
  • Aktifkan plugin dan simpan pengaturan.

2. Secara Manual

  • Tambahkan kode berikut ke header blog Anda (sebelum tag ):
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>
(function() {
  var adPlacements = document.querySelectorAll('ins.adsbygoogle');
  for (var i = 0; i < adPlacements.length; i++) {
    adPlacements[i].classList.add('lazyload');
  }
})();
</script>
  • Tambahkan kode berikut ke file CSS Anda:
.lazyload {
  display: none;
}

Bagaimana cara mengaktifkan lazy load untuk iklan tertentu?

Untuk mengaktifkan lazy load hanya untuk iklan tertentu, tambahkan atribut "data-lazyload" ke tag iklan, seperti:

<ins class="adsbygoogle"
     style="display:inline-block;width:728px;height:90px"
     data-ad-client="ca-pub-1234567890"
     data-ad-slot="1234567890"
     data-lazyload></ins>

Bagaimana cara menonaktifkan lazy load untuk iklan tertentu?

Untuk menonaktifkan lazy load untuk iklan tertentu, hapus atribut "data-lazyload" dari tag iklan.

Bagaimana cara menguji apakah lazy load berfungsi?

Untuk menguji apakah lazy load berfungsi, buka halaman blog Anda dan gulir ke bawah. Iklan seharusnya tidak dimuat hingga Anda menggulir ke dekatnya. Anda juga dapat menggunakan alat seperti "Inspect Element" di browser Anda untuk memeriksa apakah iklan memiliki kelas "lazyload".

Bagaimana cara mengatasi masalah dengan lazy load iklan?

Jika Anda mengalami masalah dengan lazy load iklan, coba langkah-langkah berikut:

  • Pastikan Anda telah memasang script lazy load dengan benar.
  • Pastikan iklan Anda memiliki atribut "data-lazyload".
  • Periksa apakah file CSS Anda telah dimuat dengan benar.
  • Hapus cache browser Anda dan coba lagi.
  • Jika masalah berlanjut, hubungi dukungan AdSense.

Tips tambahan:

  • Gunakan iklan responsif untuk memastikan iklan Anda ditampilkan dengan benar di semua perangkat.
  • Optimalkan iklan Anda untuk waktu muat yang cepat.
  • Pantau kinerja iklan Anda secara teratur dan buat penyesuaian yang diperlukan.

Leave a Reply

Your email address will not be published. Required fields are marked *