Setelah sekian lama, akhirnya gue balik lagi dengan artikel berjudul "Realtime View Counter menggunakan Firebase Database". Hari ini, gue bakal share project Firebase Realtime Database yang bisa nge-count Post Views atau event apapun. Ini adalah project pertama gue yang dibuat pakai Typescript dan Firebase v9. Keren kan?
Karena pakai Firebase Javascript SDK, ukuran bundle-nya emang agak gede dikit. Gue sempet nyoba pakai Firebase Database REST API tapi response-nya lumayan lambat dibanding SDK, jadi terpaksa deh pakai Javascript SDK biar performanya lebih oke.
Apa Itu View Counter dan Kenapa Penting?
View counter adalah fitur yang menampilkan berapa kali suatu halaman atau post udah dilihat. Ini penting banget buat nge-track popularitas konten kamu, ngasih social proof ke pengunjung, dan tentunya bikin blog kamu keliatan lebih profesional. Dengan Firebase Realtime Database, semua hitungan ini jalan secara real-time tanpa perlu refresh halaman.
Keunggulan Firebase Realtime Database
Kenapa pakai Firebase? Pertama, Firebase nyediain infrastruktur yang robust dan scalable. Kedua, data tersinkronisasi secara real-time ke semua client yang connected. Ketiga, gratis sampai batas tertentu yang cukup generous buat blog personal atau medium-size. Keempat, setup-nya relatif gampang dan dokumentasinya lengkap.
Menggunakan Sebagai View Counter
Kamu bisa pakai ini sebagai View Counter buat post kamu cukup dengan specify path-nya aja. Yuk kita coba nambahin ke website Blogger.
Penting Banget!
Sebelum kita mulai nambahin kode di XML, gue sangat rekomendasiin kamu buat bikin Backup tema yang sekarang. Kalau tiba-tiba ada masalah, kamu bisa restore lagi nanti.
Langkah-Langkah Instalasi
- Pertama-tama, login dulu ke Dashboard Blogger kamu.
- Di Dashboard Blogger, klik menu Theme atau Tema.
- Klik icon panah ke bawah di sebelah tombol 'customize' atau 'sesuaikan'.
- Klik Edit HTML, nanti kamu bakal di-redirect ke halaman editing.
-
Sekarang cari kode
]]></b:skin>terus paste kode CSS berikut ini tepat di atasnya.Kalau template kamu punya fitur dark mode, dan kamu pengen warna yang beda waktu mode gelap aktif, kamu bisa custom kode-nya sesuai kebutuhan. Setiap template bisa punya class dark mode yang berbeda, jadi tolong sesuaikan. Kamu bisa ganti class yang di-mark dengan class dark mode template kamu.[data-hhc-path] { --hhc-text-color: #000; --hhc-text-color-dark: #fff; --hhc-icon-loading: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 50' x='0px' y='0px' fill='%23000'><path d='M25.251,6.461c-10.318,0-18.683,8.365-18.683,18.683h4.068c0-8.071,6.543-14.615,14.615-14.615V6.461z'><animateTransform attributeName='transform' attributeType='xml' dur='0.6s' from='0 25 25' repeatCount='indefinite' to='360 25 25' type='rotate'></animateTransform></path></svg>"); --hhc-icon-eye: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.25'><path d='M15.58 12c0 1.98-1.6 3.58-3.58 3.58S8.42 13.98 8.42 12s1.6-3.58 3.58-3.58 3.58 1.6 3.58 3.58Z'></path><path d='M12 20.27c3.53 0 6.82-2.08 9.11-5.68.9-1.41.9-3.78 0-5.19-2.29-3.6-5.58-5.68-9.11-5.68-3.53 0-6.82 2.08-9.11 5.68-.9 1.41-.9 3.78 0 5.19 2.29 3.6 5.58 5.68 9.11 5.68Z'></path></svg>"); --hhc-text-loading: "--- --"; --hhc-text-loaded: attr(data-hhc-view); --hhc-border-color: rgba(0, 0, 0, 0.1); --hhc-border-color-dark: rgba(255, 255, 255, 0.2); line-height: 1rem; padding: 10px; border: 1px solid var(--hhc-border-color); border-radius: 5px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 14px; color: var(--hhc-text-color); } [data-hhc-path]::before { content: ""; width: 20px; height: 20px; background-size: 20px; background-repeat: no-repeat; background-position: center; opacity: 0.8; -webkit-mask: var(--hhc-svg-icon); mask: var(--hhc-svg-icon); background: var(--hhc-text-color); --hhc-svg-icon: var(--hhc-icon-loading); } [data-hhc-path][data-hhc-view]::before { --hhc-svg-icon: var(--hhc-icon-eye); } [data-hhc-path]::after { content: var(--hhc-text-loading); opacity: 0.8; } [data-hhc-path][data-hhc-view]::after { content: var(--hhc-text-loaded); } .drK [data-hhc-path] { --hhc-text-color: var(--hhc-text-color-dark); --hhc-border-color: var(--hhc-border-color-dark); } -
Step ini agak tricky karena kamu harus nemuin di mana kamu mau nambahin view counter di template kamu. Kamu harus cari tempat yang tepat sesuai template kamu dan paste di sana, misalnya: di atas
<data:post.body/><div class='hhc-post-view' expr:data-hhc-increment='data:view.isPost ? "1" : "false"' expr:data-hhc-path='"/BLOG_" + data:blog.blogId + "/POST_" + data:post.id + "/VIEWS"'/>Kode di atas bakal otomatis generate path yang unique buat setiap post berdasarkan blog ID dan post ID. Jadi nggak bakal ada konflik antar post.
-
Sekarang tambahin kode Javascript berikut tepat di atas tag
</body>. Kalau kamu nggak nemuin, kemungkinan udah di-parse jadi</body>.<script> /*! * HHC View Counter with Firebase * by Han Haoyu Platform * License: MIT */ function hhcViewCounterLoaded () { const counter = new HHCViewCounter({ databaseUrl: "https://example.firebaseio.com", selector: ".hhc-post-view", abbreviation: true }); // Kompatibilitas dengan infinite scroll if (typeof infinite_scroll !== "undefined") { infinite_scroll.on("load", counter.init.bind(counter)); } }; </script> <script defer onload='hhcViewCounterLoaded()' src='https://cdn.jsdelivr.net/gh/equalsecrets/code@main/realtime-view-counter-by-hanhaoyu.js'></script>Ganti URL Firebase Database dengan URL database kamu sendiri yang bisa kamu dapetin dari Firebase Console.
- Terakhir, simpan perubahannya dengan klik icon ini
Setup Firebase Database
Sebelum view counter bisa jalan dengan baik, kamu perlu setup Firebase Database dulu. Berikut langkah-langkahnya:
- Buka Firebase Console dan login pakai akun Google kamu.
- Bikin project baru atau pilih project yang udah ada.
- Di sidebar, pilih Realtime Database.
- Klik Create Database dan pilih location yang terdekat dengan audience kamu.
- Pilih Start in test mode buat development (nanti bisa diubah ke production mode dengan rules yang lebih ketat).
- Copy Database URL yang ditampilin, format-nya kayak
https://project-name.firebaseio.com. - Paste URL tersebut di parameter
databaseUrldi kode JavaScript tadi.
Konfigurasi Database Rules
Buat keamanan yang lebih baik, kamu perlu set database rules. Ini contoh rules yang recommended:
{
"rules": {
"BLOG_$blogId": {
"POST_$postId": {
"VIEWS": {
".read": true,
".write": true,
".validate": "newData.isNumber()"
}
}
}
}
}Rules di atas memungkinkan siapa aja buat read dan write data views, tapi cuma data berbentuk number yang bisa disimpan. Kamu bisa bikin rules yang lebih strict sesuai kebutuhan.
Menggunakan Sebagai Click Counter
Selain buat hitung views, kamu juga bisa pakai ini sebagai click counter buat track berapa kali tombol atau elemen tertentu di-klik. Ini contoh implementasinya:
<style>
.hhc-click-counter::before {
content: "0"
}
.hhc-click-counter[data-hhc-view]::before {
content: attr(data-hhc-view);
}
</style>
<button class='hhc-click-button'>Klik Saya (<span class='hhc-click-counter' data-hhc-path='/BLOG_0000/POST_0001/CLICKS' data-hhc-increment='false'></span>)</button>
<script>
function hhcViewCounterLoaded () {
const counter = new HHCViewCounter({
databaseUrl: "https://example.firebaseio.com",
abbreviation: true
});
const clickButton = document.querySelector(".hhc-click-button");
const clickCounter = document.querySelector(".hhc-click-counter");
counter.addElement(clickCounter).then(function(counterElement) {
clickButton.addEventListener("click", function() {
counterElement.increment(1);
});
});
};
</script>
<script defer onload="hhcViewCounterLoaded()" src="https://cdn.jsdelivr.net/gh/equalsecrets/code@main/realtime-view-counter-by-hanhaoyu.js"></script>Dengan implementasi di atas, setiap kali tombol di-klik, counter bakal otomatis nambah dan update secara real-time di Firebase.
Kustomisasi Tampilan
Kamu bisa custom tampilan view counter sesuai selera dengan edit CSS variables yang ada. Berikut penjelasan masing-masing variable:
--hhc-text-color: Warna text counter di mode normal
--hhc-text-color-dark: Warna text counter di dark mode
--hhc-icon-loading: Icon yang muncul waktu loading (spinner animation)
--hhc-icon-eye: Icon mata yang muncul setelah data loaded
--hhc-text-loading: Text placeholder waktu loading
--hhc-text-loaded: Text yang muncul setelah loaded (ambil dari attribute data-hhc-view)
--hhc-border-color: Warna border di mode normal
--hhc-border-color-dark: Warna border di dark mode
Parameter Konfigurasi JavaScript
Object konfigurasi yang dipassing ke HHCViewCounter punya beberapa parameter:
databaseUrl (required): URL Firebase Realtime Database kamu
selector (optional): CSS selector buat nemuin elemen counter. Default-nya bakal cari semua elemen dengan attribute data-hhc-path
abbreviation (optional): Set true kalau mau angka disingkat (contoh: 1.2K, 3.5M). Set false kalau mau angka lengkap
Fitur-Fitur Lanjutan
Auto Increment on View
Kalau kamu set attribute data-hhc-increment="1" atau data-hhc-increment="true", counter bakal otomatis nambah satu setiap kali halaman di-load. Ini cocok buat view counter.
Manual Increment
Kalau kamu set data-hhc-increment="false", counter cuma bakal nge-fetch data tanpa nambah. Kamu bisa nambah secara manual lewat JavaScript dengan method increment(). Ini cocok buat click counter atau event tracking.
Abbreviation Numbers
Dengan fitur abbreviation, angka yang gede bakal otomatis disingkat jadi lebih readable. Contoh: 1234 jadi 1.2K, 1234567 jadi 1.2M, dan seterusnya.
Kompatibilitas dengan Infinite Scroll
View counter ini udah compatible dengan infinite scroll plugin. Waktu konten baru di-load lewat infinite scroll, counter bakal otomatis initialize ulang buat elemen-elemen baru. Kode compatibility-nya udah include di script JavaScript tadi.
Performance dan Optimasi
Firebase Realtime Database punya beberapa keunggulan dari sisi performance:
Pertama, data di-cache di client side, jadi load ulang halaman bakal lebih cepat karena bisa ambil dari cache dulu sambil nunggu update dari server.
Kedua, connection ke Firebase di-maintain, jadi update real-time bisa jalan dengan overhead yang minimal.
Ketiga, Firebase punya CDN global, jadi latency bakal minimal dari manapun user mengakses.
Keempat, dengan bundle yang di-defer, script nggak bakal blocking initial page load, jadi PageSpeed score tetep oke.
Troubleshooting Common Issues
Kalau counter nggak muncul atau nggak jalan dengan benar, coba cek hal-hal berikut:
Pastikan Firebase Database URL yang kamu masukin bener dan database-nya udah aktif. Buka Firebase Console buat verify.
Cek browser console (F12) buat liat apakah ada error. Common error biasanya CORS issue atau permission denied.
Kalau ada permission denied error, cek Database Rules kamu. Pastikan rules mengizinkan read dan write.
Kalau counter nggak auto-increment, pastikan attribute data-hhc-increment udah di-set dengan benar.
Kalau script nggak load, cek apakah CDN link-nya accessible. Bisa jadi ada internet security policy yang nge-block external scripts.
Best Practices
Buat hasil yang optimal, perhatiin beberapa best practices berikut:
Jangan track view di development environment. Set conditional logic buat nge-skip increment kalau masih testing.
Set database rules yang proper di production. Jangan biarkan test mode terlalu lama karena rawan disalahgunakan.
Monitor usage di Firebase Console secara berkala. Free tier punya limit, jadi pastiin kamu nggak exceed.
Consider buat implement rate limiting kalau blog kamu punya traffic tinggi buat avoid abuse.
Backup data view count secara berkala, meskipun Firebase reliable, better safe than sorry.
Kesimpulan
Dengan Firebase Realtime Database, kamu bisa implement view counter yang powerful dan real-time tanpa perlu setup server sendiri. Sistem ini scalable, reliable, dan relatif mudah di-maintain. Plus, kamu bisa extend functionality-nya buat berbagai use case lain kayak click tracking, event monitoring, atau bahkan simple analytics.
Implementasi view counter kayak gini bakal bikin blog kamu keliatan lebih profesional dan kasih insight valuable tentang konten mana yang paling populer. User juga bisa liat social proof berapa banyak orang yang udah baca artikel tertentu.
Semoga tutorial ini bermanfaat dan membantu kamu buat implement view counter di blog. Kalau ada pertanyaan atau masalah, jangan sungkan buat tanya di kolom komentar ya!
Copyright (c):
Han Haoyu Platform
