Beranda
Blog Tips
Blogger

Cara Membuat Live Counter Visitor dengan firebase

Panduan membuat live counter pengunjung ala template Plus UI menggunakan Firebase Realtime Database, aman dengan Anonymous Authentication.
TipsTechPraktis
Cara Membuat Live Visitor Counter Blogger Realtime dengan Firebase

Live visitor counter Blogger adalah fitur yang menampilkan jumlah pengunjung aktif secara real-time di blog. Fitur ini sering digunakan pada template premium seperti Plus UI karena dapat meningkatkan kepercayaan pengunjung dan membuat tampilan blog terlihat lebih profesional.

Pada tutorial ini, kamu akan belajar cara membuat live counter visitor Blogger menggunakan Firebase Realtime Database yang ringan, gratis, dan tidak memperlambat loading blog.

Apa Itu Live Visitor Counter?

Live visitor counter adalah sistem yang menampilkan jumlah pengguna yang sedang aktif membuka halaman blog secara langsung (real-time). Data akan terus diperbarui secara otomatis tanpa perlu refresh halaman.

Persiapan Project Firebase

Sebelum membuat live counter, kamu perlu menyiapkan project di Firebase terlebih dahulu sebagai database untuk menyimpan data pengunjung secara realtime.

1. Buat Project di Firebase

  1. Buka Firebase Console dan buat project baru.
  2. Masuk ke menu Build → Realtime Database, lalu buat database baru.
  3. Pilih lokasi server (contoh: asia-southeast1) kemudian klik Enable.

2. Atur Rules Database (Aman)

Setelah membuat database, langkah selanjutnya adalah mengatur rules Firebase Realtime Database agar data visitor lebih aman dan tidak bisa disalahgunakan.

Masuk ke tab Rules, lalu gunakan konfigurasi berikut:

{
  "rules": {
    "presence": {
      "$room": {
        "$uid": {
          ".read": true,
          ".write": "auth != null && auth.uid === $uid"
        }
      }
    },
    ".read": true,
    ".write": true
  }
}

Penjelasan Rules

  • auth != null berarti hanya pengguna yang sudah login yang bisa mengirim data.
  • auth.uid === $uid memastikan setiap user hanya bisa menulis data miliknya sendiri.
  • Struktur presence digunakan untuk menyimpan data pengunjung aktif secara real-time.

Dengan pengaturan ini, sistem live visitor counter akan tetap aman meskipun digunakan secara publik di Blogger.

3. Aktifkan Anonymous Authentication

Untuk membuat live visitor counter bekerja secara realtime, kita perlu mengaktifkan fitur Anonymous Authentication di Firebase. Fitur ini memungkinkan pengunjung mengirim data tanpa harus login secara manual.

  1. Masuk ke menu Build → Authentication di Firebase Console.
  2. Pilih tab Sign-in method.
  3. Aktifkan opsi Anonymous, lalu klik Save.

Dengan fitur ini, setiap pengunjung akan mendapatkan ID unik secara otomatis sehingga data visitor bisa dihitung secara akurat dan real-time.

Baca juga:

4. Tambahkan Konfigurasi Firebase di Blog

Buka Theme → Edit HTML dan cari script konfigurasi. Tambahkan ini sebelum </body>:

<script>
  const plusConfig = {
    realViews: {
      databaseUrl: "https://NAMA-PROJECT-ID-default-rtdb.asia-southeast1.firebasedatabase.app/",
      abbreviation: "true"
    }
  };
</script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-app-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-auth-compat.js"></script>
<script src="https://www.gstatic.com/firebasejs/9.23.0/firebase-database-compat.js"></script>
<script>
(function(){
  if(typeof plusConfig === 'undefined' || !plusConfig.realViews) return;
  const rv = plusConfig.realViews;
  const dbURL = rv.databaseUrl;
  const useAbbr = rv.abbreviation === "true";

  const firebaseConfig = {
    apiKey: "YOUR_API_KEY",
    authDomain: "YOUR_PROJECT_ID.firebaseapp.com",
    databaseURL: dbURL,
    projectId: "YOUR_PROJECT_ID",
    storageBucket: "YOUR_PROJECT_ID.appspot.com",
    messagingSenderId: "YOUR_SENDER_ID",
    appId: "YOUR_APP_ID"
  };

  if (!firebase.apps.length) firebase.initializeApp(firebaseConfig);
  var db = firebase.database();

  // Sign in anonymously
  firebase.auth().signInAnonymously().catch(console.error);

  firebase.auth().onAuthStateChanged(function(user){
    if(!user) return;
    var uid = user.uid;
    var room = 'site-wide'; // bisa diganti per-post
    var userRef = db.ref('presence/' + room + '/' + uid);
    userRef.onDisconnect().remove();

    function heartbeat(){
      userRef.set({ uid: uid, lastSeen: firebase.database.ServerValue.TIMESTAMP });
    }
    heartbeat();
    setInterval(heartbeat, 20000);

    var presenceRef = db.ref('presence/' + room);
    presenceRef.on('value', function(snapshot){
      var val = snapshot.val() || {};
      var cutoff = Date.now() - 60000;
      var count = 0;
      for(var k in val){
        if(val[k].lastSeen >= cutoff) count++;
      }
      var el = document.getElementById('onlineCount');
      if(el) el.textContent = useAbbr ? abbreviateNumber(count) : count;
    });
  });

  function abbreviateNumber(num){
    if(num >= 1e6) return (num/1e6).toFixed(1)+'M';
    if(num >= 1e3) return (num/1e3).toFixed(1)+'K';
    return num;
  }
})();
</script>

5. Tambahkan Elemen Penampil Counter

Langkah terakhir adalah menampilkan jumlah pengunjung aktif di blog. Kamu bisa menempatkan elemen ini di bagian header, sidebar, atau footer sesuai kebutuhan template Blogger yang digunakan.

Contoh kode HTML untuk menampilkan live visitor counter:

<span id="onlineCount">0</span> Pengunjung Online

Elemen #onlineCount nantinya akan diperbarui secara otomatis menggunakan JavaScript yang terhubung ke Firebase Realtime Database.

Catatan Penting!
  • Hindari penggunaan aturan .read: true dan .write: true secara global di produksi karena berisiko disalahgunakan.
  • Gunakan Anonymous Authentication atau metode autentikasi lain untuk menjaga keamanan data.
  • Pisahkan node presence dari data penting lainnya agar sistem lebih aman dan terstruktur.

Kesimpulan

Membuat live visitor counter Blogger dengan Firebase adalah solusi modern yang ringan dan powerful. Dengan sistem realtime, kamu bisa menampilkan jumlah pengunjung aktif secara akurat tanpa membebani loading blog.

Selain meningkatkan tampilan seperti template premium Plus UI, fitur ini juga dapat meningkatkan kepercayaan pengunjung karena blog terlihat lebih profesional dan interaktif.

Silakan coba dan sesuaikan dengan kebutuhan blog kamu. Semoga berhasil!

Faq post

Apakah Live Counter ini gratis?

Ya, kita menggunakan Firebase Realtime Database versi gratis (Spark Plan). Selama tidak melewati batas kuota gratis, layanan ini tidak dikenakan biaya.

Apakah aman menggunakan Anonymous Authentication?

Aman selama hanya digunakan untuk fitur ini dan tidak mengakses data sensitif. Anonymous Auth membantu mencegah siapa saja menulis data tanpa login.

Bisakah menghitung visitor per posting?

Bisa, cukup ubah nilai var room = 'site-wide'; menjadi var room = 'post-' + data:post.id; agar setiap posting memiliki ruang presence sendiri.

Apakah ini bisa dipasang di semua template Blogger?

Ya, selama template mendukung penambahan script JavaScript sebelum tag </body> dan Anda menambahkan elemen HTML <span id="onlineCount"> di tempat yang diinginkan.

Posting Komentar