Membuat Widget Pengunjung Online Blogger 2026

Tutorial Membuat Widget Pengunjung Online Blogger (Google Analytics + Apps Script)

Tutorial ini akan membimbing kamu dari awal sampai jadi membuat widget:

• Online (Realtime)
• Pengunjung Hari Ini
• Total Pengunjung

Menggunakan Google Analytics, Google Apps Script dan Google Cloud.

Demo

1. Persiapan

Pastikan kamu sudah memiliki:

• Akun Google
• Blog / Website
• Property di Google Analytics (GA4)
• Google Cloud

2. Membuat Project di Google Apps Script

Buka:

https://script.google.com

Klik New Project, lalu hapus kode default dan ganti dengan kode berikut:

function doGet() {
  const propertyId = "ISI_PROPERTY_ID_KAMU";

  try {

    const realtimeResponse = AnalyticsData.Properties.runRealtimeReport(
      {
        metrics: [{ name: "activeUsers" }]
      },
      "properties/" + propertyId
    );

    const online = Number(
      realtimeResponse.rows?.[0]?.metricValues?.[0]?.value || 0
    );

    const todayResponse = AnalyticsData.Properties.runReport(
      {
        dateRanges: [{ startDate: "today", endDate: "today" }],
        metrics: [{ name: "screenPageViews" }]
      },
      "properties/" + propertyId
    );

    const today = Number(
      todayResponse.rows?.[0]?.metricValues?.[0]?.value || 0
    );

    const totalResponse = AnalyticsData.Properties.runReport(
      {
        dateRanges: [{ startDate: "2020-01-01", endDate: "today" }],
        metrics: [{ name: "screenPageViews" }]
      },
      "properties/" + propertyId
    );

    const total = Number(
      totalResponse.rows?.[0]?.metricValues?.[0]?.value || 0
    );

    return ContentService
      .createTextOutput(JSON.stringify({
        online: online,
        today: today,
        total: total
      }))
      .setMimeType(ContentService.MimeType.JSON);

  } catch (error) {
    return ContentService
      .createTextOutput(JSON.stringify({
        error: error.toString()
      }))
      .setMimeType(ContentService.MimeType.JSON);
  }
}

code di appscript

Setelah itu aktifkan Gogle Apps Script API

appscript api

3. Mengambil Property ID Google Analytics

1. Buka Google Analytics
2. Klik Admin
3. Pilih Property Settings
4. Copy Property ID

Contoh:

518543856

Masukkan ke kode:

const propertyId = "518543856";

4. Aktifkan Analytics Data API

Cara Cepat

1. Buka Apps Script
2. Klik menu Services (+)
3. Cari Analytics Data API
4. Klik Add

data_api

5. Aktifkan Google Analytics Data API

1. Buka https://console.cloud.google.com
2. Salin terlebih dahulu Projek Number dan taruh di notpad
3. Masuk ke APIs & Services → Library
4. Cari Google Analytics Data API
5. Klik Enable

Dan jangan lupa aktifkan Google Analytics Api

Masukan Projek Number ke Setelan Porject Di Appscript

6. Deploy Menjadi Web App

1. Klik Deploy
2. Pilih New Deployment
3. Pilih Web App

Isi pengaturan:

• Execute as: Me
• Who has access: Anyone

Klik Deploy lalu izinkan akses.

Kamu akan mendapatkan URL seperti ini:

https://script.google.com/macros/s/XXXX/exec

6. Test Code Script

Jalankan Kode Scriptnya.

Jika berhasil:

Jika_Berhasil

Note! Jika Memerlukan Akses Izinkan Saja

7. Membuat Widget di Blogger

Buat widget Terserah di letekan dimana di layout

Gunakan widget berikut untuk menampilkan pengunjung secara realtime:

<!-- STYLE -->
<style>
.pui-card{
  background:var(--card-bg,#fff);
  padding:18px;
  border-radius:18px;
  box-shadow:0 8px 25px rgba(0,0,0,.06);
}
.pui-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px;
}
.pui-live{
  background:#e6f7ee;
  color:#00a65a;
  font-size:12px;
  padding:5px 10px;
  border-radius:20px;
  font-weight:600;
  display:flex;
  align-items:center;
  gap:6px;
}
.pui-live::before{
  content:"";
  width:6px;
  height:6px;
  background:#00c853;
  border-radius:50%;
  animation:pulse 1.5s infinite;
}
@keyframes pulse{
  0%{opacity:1}
  50%{opacity:.4}
  100%{opacity:1}
}
.pui-title{
  font-size:13px;
  font-weight:600;
  opacity:.7;
  text-transform:uppercase;
}
.pui-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-bottom:15px;
}
.pui-box{
  background:var(--body-bg,#f4f6f8);
  padding:15px 10px;
  border-radius:14px;
  text-align:center;
}
.pui-box strong{
  display:block;
  font-size:18px;
  font-weight:700;
  margin-top:6px;
}
.pui-box span{
  font-size:12px;
  opacity:.6;
}
</style>

<!-- HTML -->
<div class="pui-card">
  <div class="pui-header">
    <div class="pui-live">LIVE</div>
    <div class="pui-title">Pengunjung Online</div>
  </div>

  <div class="pui-grid">
    <div class="pui-box">
      <strong id="pui-online">0</strong>
      <span>Online</span>
    </div>

    <div class="pui-box">
      <strong id="pui-today">0</strong>
      <span>Hari Ini</span>
    </div>

    <div class="pui-box">
      <strong id="pui-total">0</strong>
      <span>Total</span>
    </div>
  </div>
</div>

<!-- SCRIPT -->
<script>
async function loadVisitor(){
  try{
    const r = await fetch("URL_APPS_SCRIPT_KAMU");
    const j = await r.json();

    document.getElementById("pui-online").innerText =
      j.online.toLocaleString("id-ID");

    document.getElementById("pui-today").innerText =
      j.today.toLocaleString("id-ID");

    document.getElementById("pui-total").innerText =
      j.total.toLocaleString("id-ID");

  }catch(e){
    console.error(e);
  }
}

document.addEventListener("DOMContentLoaded", ()=>{
  loadVisitor();
  setInterval(loadVisitor, 60000);
});
</script>

Ganti URL_APPS_SCRIPT_KAMU dengan URL Web App dari Apps Script milik kamu.

Sekian dari saya Terimakasih

You may want to read this post :

• Daftar Kode Warna HTML Lengkap untuk Blogger & Desain Web
• Plus UI v3.2 – Template Blogger Modern, Cepat, dan Siap Unduh Gratis
• Mengaktifkan View Counter Firebase di Plus UI (EOL & v3.x)