Cara Pasang Lazy load Google Analytics di Blogger
Seorang pengelola blog harus pandai dalam melakukan optimasi pada blognya. Hal itu dikarenakan algoritma google yang dinamis dan selalu update dari waktu ke waktu.
Salah satu contoh update algoritma google saat ini adalah mewajibkan setiap blog atau website memiliki kecepatan loading yang bagus, baik saat dibuka di desktop dan smartphone.
Salah satu trik untuk mempercepat loading blog adalah dengan mengganti script default Google Analytic dengan lazy analytic. Namun sebelum membahas cara memasang lazy load analytics, sebaiknya anda baca terlebih dahulu penjelasan mengenai Google Analytics.
Apa Itu Google Analytics?
Google Analytics adalah sebuah tool gratis yang disediakan oleh google untuk pemilik blog dan website. Google Analytics dibuat oleh google sekitar tahun 2006, dan sampai saat ini Google Analytics menjadi salah satu tool yang wajib di install pada blog setelah google search console.
Alasan mengapa Google Analytics sangat penting untuk dipasang pada blog atau website adalah untuk memudahkan pengelola dalam melihat jumlah trafik secara realtime, melihat berapa lama durasi pengunjung di dalam blog, melihat lokasi pengunjung secara realtime, melihat konten yang dibaca pengunung, dan masih banyak lagi manfaat dari Google Analytics lainnya yang tidak bisa saya jelaskan secara lengkap disini.
Untuk bisa memonitor jumlah trafik secara realtime pada Google Analytics, maka kita diwajibkan untuk mengaitkan blog kedalam Google Analytics. Setelah kita berhasil mengaitkan blog kedalam Google Analytics, biasanya kita akan diminta untuk memasangkan sebuah kode tag situs global (gtag.js seperti dibawah ini.
<!-- Global site tag (gtag.js) - Google Analytics --> <script async src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxx-x"></script> <script> window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', 'UA-xxxxxxxxx-x'); </script>
Perhatikan kode yang saya tandai dengan warna orange, silahkan ganti kode tersebut dengan id Google Analytics anda.
Biasanya kita diperintahkan untuk memasang kode ini diantara kode <head> sampai </head>. Akan tetapi pada umunya kebanyakan blogger memasangkan kode ini tidak jauh dari kode <head>, atau pada bagian atas template.
Perlu diketahui bahwa google akan membuat sebuah update baru pada Google Analytics pada 1 Juli 2023. Oleh karena itu saat ini dalam Google Analytics, kita diberi notifikasi bahwa pengguna Analytisc harus mempersiapkan untuk pengalihan ke Google Analytics 4.
Untuk mendapatkan kode pengaitan di Google Analytics 4 cukup mudah, kita tinggal buka Properti GA4 Anda lalu klik aliran data. Setelah itu akan muncul akan muncul tampilan aliran data, dan kita pilih nama domain blog atau website kita.
Setelah itu maka akan muncul detail aliran data web, lalu pilih menu petunjuk pemberian tag, dan pilih Tag situs global (gtag.js) sampai muncul kode seperti dibawah ini.
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-xxxxxxxxxx"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-xxxxxxxxxx');
</script>Ganti kode yang ditandai dengan warna orange dengan kode gtag.js anda, dan pasangkan kode tersebut sesudah kode </head>.
Setelah anda mengetahui sedikit mengenai apa itu Google Analytics dan bagaimana cara mendapatkan kode analytics, kini saatnya masuk ke pembahasan utama dari artikel ini yaitu cara memasang lazy load Google Analytics di blogger.
Apa Itu Lazy Load Analytics?
Pada dasarnya lazy load analytics adalah sebuah script lazy load yang mirip dengan lazy load untuk gambar dan scroll, lazy load iklan adsense, lazy load iklan MGID, lazy load komentar blogger atau disqus, dan lazy load lainnya.
Prinsip kerja dari lazy load analytics adalah untuk mengurangi beban loading javascript eksternal yang terdapat pada kode bawaan Google Analytics. Karena menurut laporan dalam pagespeed.web.dev, kode bawaan Google Analytics ternyata membebani loading.
Lihat gambar dibawah ini!
Gambar tersebut adalah screenshoot laporan pada speed insight yang memberitahu bahwa kode bawaan dari Google Analytics membebani loading blog.
Oleh karena itu untuk mengurangi beban loading blog yang terbebani kode javascript analytics, maka lazy load analytics wajib digunakan.
Cara Pasang Lazy Load Analytics di Blogger
Berikut ini adalah beberapa langkah yang harus dilakukan dalam pemasangan lazy load analytics.
- Buka dashboard blogger
- Pilih menu Tema
- Pilih Edit HTML
Cari kode bawaan Google Analytics, lalu hapus kode tersebut.
Selanjutnya anda tinggal memasukan kode dibawah ini sebelum kode </body>.
Kode Lazy Load Analytics 1
<script>
//<![CDATA[
var lazyanalytics=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyanalytics||0!=document.body.scrollTop&&!1===lazyanalytics)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=UA-xxxxxxxxx-x";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyanalytics=!0)},!0);
//]]>
</script>Kode Lazy Load Analytics 2
<script>
//<![CDATA[
var lazyanalytics=!1;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&!1===lazyanalytics||0!=document.body.scrollTop&&!1===lazyanalytics)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=!0,e.src="https://www.googletagmanager.com/gtag/js?id=<data:blog.analyticsAccountNumber/>";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),lazyanalytics=!0)},!0);
//]]>
</script>Kode lazy Load Analytics 3
<script type="text/javascript">//<![CDATA[
var LazyAnalytics=false;window.addEventListener("scroll",function(){(0!=document.documentElement.scrollTop&&false===LazyAnalytics||0!=document.body.scrollTop&&false===LazyAnalytics)&&(!function(){var e=document.createElement("script");e.type="text/javascript",e.async=true,e.src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(e,a)}(),LazyAnalytics=true)},true);
//]]></script>
<script type="text/javascript">//<![CDATA[
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX');
//]]></script>Catatan:
- Kode Lazy Load 1: Anda harus memasukan Id Google Analytics.
- Kode Lazy Load 2: Id Google Analytics otomastis terbaca.
- Kode Lazy Load 3: Dibuat untuk script GA4 terbaru.
Hasil Riset Pada Blog Ini:
Berdasarkan riset pemasangan lazy load analytics yang saya lakukan pada blog ini, ternyata mengganti kode bawaan Google Analytics dengan lazy load analytics terbukti bisa menambah kecepatan loading blog ini pada tool pagespeed.web.dev. Sehingga saat ini blog saya semakin memiliki loading yang bagus baik saat dibuka dalam versi desktop atau mobile.
Lihat gambar dibawah ini!
Dalam riset pemasangan lazy load analytics yang saya lakukan di blog ini, saya juga menemukan sebuah masalah dimana setelah mengganti kode bawaan Google Analytics dengan lazy load, maka setelah itu aktifitas dalam blog baik organik maupun direct tidak terdeteksi sama sekali dalam Google Analyticsnya.
Namun setelah saya coba simpan sekitar satu malam, akhirnya aktifitas dalam blog kembali terdeteksi, dan saya bisa memonitor kembali setiap aktifitas dalam blog secara realtime dengan menggunakan lazy load analytics ini.
Apakah Ketiganya Harus Digunakan?
Menurut pengalaman saya dalam memasang lazy load analytics dalam blog ini, sebenarnya cukup dua kode saja yang dipasang, yaitu Kode Lazy Load 1 dan Kode Lazy Load 3.
Namun itu hanya menurut pengalaman saya dalam menerapkan lazy load analytics dalam blog ini. Apabila anda mau membuat eksperimen maka silahkan saja coba ketiga kode tersebut atau mungkin hanya menggunakan satu kode saja.
Jika anda memasang script lazy load analyticsnya dengan benar, maka kecepatan loading blog anda akan meningkat. Ingat, saat ini google lebih mengedepankan blog atau website dengan kecepatan loading yang baik. Sehingga anda wajib melaukan optimasi pada blog agar memiliki kecepatan loading yang bagus.
Semoga bermanfaat.
Posting Komentar