[🛠] Merapikan dashboard statistik blog

✨ Ringkasan GPT-5.5 　

Catatan tentang memperbaiki halaman statistik publik yang mencampur kunjungan dan tayangan, lalu memisahkan kunjungan berbasis sesi 30 menit dari tayangan berbasis pembukaan halaman dalam dashboard yang tetap terbaca di mobile.

Tepat setelah membuat halaman statistik publik blog, ada bagian yang langsung terasa mengganjal.

Angkanya memang muncul.

Tapi nama angkanya terlalu mudah tercampur.

Pengunjung, kunjungan, tayangan, sesi, page views. Di layar blog, istilah-istilah itu terlihat mirip. Dalam model hitungnya, semuanya berbeda. Kalau counter publik membuat batasnya kabur, angka yang tampil pun sulit dipercaya.

Awalnya label seperti “tayangan hari ini”, “tayangan bulan ini”, dan “total tayangan” terasa cukup. Tapi angka yang ingin saya tampilkan di sidebar lebih dekat ke berapa kali blog dikunjungi hari ini, bukan berapa kali artikel dibuka.

Jadi modelnya saya pisahkan lagi.

Kunjungan
-> sesi dengan batas 30 menit tanpa aktivitas

Tayangan
-> jumlah halaman atau post dibuka

4943 bukan jumlah kunjungan

Hal pertama yang perlu diperbaiki adalah arti baseline.

Nilai 4943 yang diimpor dari Google Analytics adalah screenPageViews. Artinya, itu adalah tayangan halaman. Menampilkannya sebagai total pengunjung atau total kunjungan akan salah.

Jadi saya merapikan Worker dan dokumentasinya sekaligus.

totalPageViews
-> GA screenPageViews baseline + D1 page views

totalSessions
-> GA sessions baseline + D1 sessions

Kunjungan dan tayangan tidak boleh berada di baseline yang sama. Saya menambahkan route terpisah untuk seed baseline sesi.

/admin/seed-session-baseline

Saya juga memasukkan langkah seed baseline sesi ke alur deploy Worker di GitHub Actions. Kalau Worker sudah deploy tetapi baseline kosong, total kunjungan publik bisa terlihat rusak.

Langsung memakai respons /track

Struktur awal agak berputar.

Client mengirim /track untuk menghitung, lalu membaca /analytics lagi untuk mengisi layar. Karena cache dan urutan request, kunjungan yang baru dihitung bisa tidak langsung muncul.

Sekarang /track juga mengembalikan payload analytics terbaru.

Page load
-> POST /track
-> Worker memperbarui sesi/tayangan
-> respons yang sama berisi analytics terbaru
-> client merender sidebar dan tayangan halaman saat ini

Refresh berkala tetap membaca /analytics.

Layar pertama memakai payload yang baru diperbarui. Setelah itu, API baca menjaga UI tetap terbaru.

Sesi tidak boleh naik setiap pindah halaman

Tayangan boleh naik saat pembaca pindah dari satu post ke post lain.

Kunjungan berbeda. Kalau satu orang membaca tiga post dalam satu sesi blog, itu tidak seharusnya menjadi tiga kunjungan. Saya menambahkan tabel sessions ke Worker dan menghubungkan sesi memakai visitor hash serta waktu aktivitas terakhir.

Batasnya 30 menit.

Dalam 30 menit sejak aktivitas terakhir
-> sesi yang sama

Lebih dari 30 menit
-> sesi baru

Dengan ini, jumlah kunjungan hari ini/bulan ini/total di sidebar lebih stabil daripada page views. Tayangan per post tetap memakai page path.

Halaman multibahasa mengikuti aturan yang sama.

/daily-review/.../ dan /en/daily-review/.../ adalah versi bahasa dari post yang sama. Kunci tayangan memakai canonical path, dan mengganti bahasa dalam sesi yang sama tidak membuat kunjungan baru.

Membuat dashboard lebih seperti tabel

Halaman statistik pertama bertumpu pada kartu KPI dan daftar bar.

Itu tidak buruk. Tetapi begitu kunjungan dan tayangan tampil bersama, strukturnya menjadi kabur. Kartu bertambah membuat layar mobile makin panjang, dan sulit melihat angka mana yang kunjungan dan mana yang tayangan untuk tiap periode.

Jadi area perbandingan atas saya ubah menjadi lebih mirip tabel.

Periode          Kunjungan   Tayangan
Rentang dipilih  n           n
Hari ini         n           n
Bulan ini        n           n
Total            n           n

Total juga perlu dua baris.

Total
-> tracking langsung sejak 2026/06/09

Total
-> termasuk statistik sebelum 2026/06/09

Keduanya berbeda.

Tracking langsung adalah nilai yang didukung dimensi D1 sejak pengumpulan publik dimulai. Total dengan histori menambahkan baseline GA. Jika digabung dalam satu baris, angkanya terlihat lebih besar, tetapi tidak cocok dengan dimensi detail.

Teks ringkasannya juga saya pisah.

Kunjungan: mengecualikan kunjungan ulang dalam 30 menit. Tayangan: halaman dibuka.
Tracking langsung dimulai dari 2026/06/09.

Membuat input tanggal tidak menyebalkan

Di halaman statistik, tanggal sering diubah.

Awalnya saya pikir range=today, range=month, range=total, dan range=custom sudah cukup. Tetapi untuk rentang langsung, tanggal mulai dan selesai harus sering diedit.

Jadi inputnya saya buat lebih seperti alat kecil.

format YYYY/MM/DD
date picker tersembunyi
pilihan segmen tahun/bulan/hari
penyesuaian dengan ArrowUp / ArrowDown
penyesuaian dengan roda mouse
clamp antara mulai dan selesai

Tampilannya tetap dua input kecil, tetapi mengubah tanggal jadi jauh lebih ringan.

Saya juga berhenti menyembunyikan input custom sampai tombol custom ditekan. Input tanggal selalu terlihat, dan tombol preset hanya memindahkan tanggal ke rentang yang sesuai.

Itu lebih mudah diprediksi.

Memisahkan dimensi detail ke tab

Menampilkan semua dimensi sekaligus membuat halaman berantakan.

Halaman, lingkungan pengunjung, sumber traffic, region, dan bahasa semuanya berguna, tetapi jika dibuka bersama dalam satu layar, sulit dibaca. Saya mengelompokkannya ke tab.

Halaman
Lingkungan pengunjung
Traffic
Region/bahasa

Path halaman bisa panjang, jadi label diberi title dan CSS disesuaikan agar wrapping dan truncation tidak merusak layout. Nilai dimensi halaman yang dimulai dengan / menjadi link.

Tujuannya bukan dashboard yang heboh.

Saya hanya ingin membuka dari ponsel dan cepat melihat post mana yang dibaca, berapa kunjungan hari ini, dan berapa tayangan yang tercatat.

Label multibahasa juga harus ikut

Halaman statistik tidak hanya ada dalam bahasa Korea.

Ada juga halaman aktif seperti /en/analytics/, /ja/analytics/, dan /zh-Hans/analytics/. Label seperti “kunjungan”, “tayangan”, “sesi 30 menit”, dan “GA views + D1” harus ikut disesuaikan di front matter tiap locale.

Kalau ini dilewatkan, strukturnya berubah tetapi teks lama tetap tertinggal di bahasa lain.

Di blog multibahasa, memperbaiki satu layar bukan berarti memperbaiki satu halaman saja. Arti labelnya juga harus ikut bergerak.

Yang saya cek

Saya terutama mengecek rendering dan arti metrik.

node --check cloudflare/ga-stats-worker.js
node --check assets/js/custom/analytics-dashboard.js
node --check assets/js/custom/visitor-stats.js
bundle exec jekyll build
Cloudflare Worker deploy
GitHub Pages deploy

Kriterianya seperti ini.

Sidebar menampilkan sessions sebagai kunjungan
Tayangan per post tetap memakai page views
Total kunjungan dan total tayangan memakai baseline berbeda
Total langsung dan total dengan GA dipisahkan
Input rentang tanggal tidak bentrok dengan today/month/total
Tabel periode/kunjungan/tayangan tidak overflow di mobile

Setelah pekerjaan ini, halaman statistik terasa lebih tenang.

Angkanya lebih banyak, tetapi lebih tidak membingungkan. Kunjungan adalah kunjungan, tayangan adalah tayangan. Total tetap total, tetapi total langsung dan total dengan histori tidak sama.

Yang penting bukan membuat angka terlihat lebih besar.

Yang penting adalah tidak menyembunyikan arti setiap angka.