Cara pasang AdSense tanpa merusak CWV (Core Web Vitals)

Kita tahu bahwa AdSense adalah salah satu script penyebab situs web lambat, sulit dibuka dan pengguna segera keluar tanpa hasil, beberapa diantaranya sambil mengumpat karena situsnya lambat meskipun isinya menarik. Terjadilah apa yang disebut bounce, user data kemudian kembali ke SERP dan mencari situs lain.

Untuk mengatasi ini, kita perlu menerapkan teknik yang paling mutakhir dan canggih, bukan sekedar pasang plugin atau install package melalui npm. Tetapi melalui reverse engineering di level server, bukan di kode.

Setup Zaraz

Kita dapat memanfaatkan Cloudflare Zaraz, yang tersedia secara gratis untuk semua pengguna, baik pengguna free maupun enterprise dan pro. Berikut cara setup, contoh kode dan konfigurasi script AdSense di Zaraz.

1. Buka dasbor Cloudflare, masuk ke Web tag management Tag setup Tag setup for <nama-situs>, klik Add new tool untuk menambahkan script AdSense.

Selanjutnya pilih Custom HTML, selesaikan langkah-langkah yang ada.

2. Pada bagian Action di akhir dialog (lihat gambar berikut),

Action Name isi dengan nama bebas, misal AdSense Script atau AdSense saja.

Pada bagian Firing Triggers, masukkan atau pilih Pageview supaya script AdSense dapat masuk ke semua halaman yang dibuka pengguna.

Pada bagian HTML Code, isi dengan kode berikut:

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-XXXXXXXXXXXXX" crossorigin="anonymous"></script>

3. Simpan pengaturan dengan mengklik tombol Save.

4. Tambahkan delayer atau penunda script, fungsinya untuk mempersiapkan browser pengguna melakukan render atau mengambil semua data dari situs kita, barulah script pihak ketiga seperti AdSense masuk setelah situs siap dan pengguna sudah membaca konten kita. Namun sisi negatifnya, pendapatan AdSense mungkin akan menurun karena iklan tidak tampil di detik pertama, sisi baiknya kita menjaga skor CWV tetap hijau dan situs kita selalu lebih cepat dari siapapun.

Untuk menambahkan delayer, kita tinggal masuk ke menu Trigger Create trigger, gunakan Timer di Rule type, kemudian isi Interval dan Limit, klik tombol Save.

Integrasi kode

Untuk mengintegrasikan kode di Zaraz supaya dapat berkomunikasi dengan situs kita, diperlukan kode yang proper & bekerja dengan baik supaya iklan dapat tampil sempurna tanpa race condition atau delayed tanpa alasan. Kami menggunakan Remark.js dan menulis plugin sendiri sehingga memberikan asimetri kontrol yang tidak dimiliki siapapun.

Berikut ini contoh kode di situs ini yang digunakan untuk berkomunikasi dengan AdSense di Zaraz.

1. Kode untuk inject iklan pada beberapa paragraf sehingga tidak merusak pengalaman pengguna.

function determineAdStrategy(totalContentLength, nodeCount) {
  if (totalContentLength < 1500 || nodeCount < 5) return { category: 'short', adCount: 1 };
  if (totalContentLength < 4000 || nodeCount < 12) return { category: 'medium', adCount: 2 };
  return { category: 'long', adCount: 3 };
}

Siapkan placeholder untuk menyiapkan wadah, sehingga tidak terjadi layout shift yang dibenci Google dan pengguna.

    <div class="adsense-ad-wrapper bg-gray-50 dark:bg-gray-800 rounded-lg overflow-hidden border border-gray-200 dark:border-gray-700">
      <ins class="adsbygoogle block w-full"
           style="display:block; min-height:250px;"
           data-ad-layout="in-article"
           data-ad-format="${adFormat}"
           data-ad-client="${adClient}"
           data-ad-slot="${adSlot}"
           data-full-width-responsive="true">
      </ins>
    </div>

Penutup

Dengan mengeksekusi script iklan dari Zaraz, kita dapat memberikan pengalaman terbaik kepada pengguna, mereka tidak mengalami layout shift, mengubah pengunjung menjadi pembaca setia. Selain iklan, script berat lain seperti Google Analytic (GA4) atau Facebook Pixel dapat di inject dari Zaraz. Tentunya dibutuhkan tenaga ekstra supaya script-script tersebut dapat berfungsi dengan baik di situs kita.