How to Display Visitor Country Flags and Count on Your Blogger Site Using Google Sheets and Apps Script

Blogger မှာ Visitor နိုင်ငံ Flag နဲ့ Visitor Count လွယ်ကူစွာ ပြသနည်း (Google Sheets + Apps Script ဖြင့်)

Google Analytics မသုံးဘဲ မိမိ Blog Visitor နိုင်ငံ အချက်အလက်ကို Flag တွေနဲ့အတူ ပြသနိုင်မယ့်နည်းလမ်း

ယနေ့ခေတ်မှာ မိမိ Blog ကို ဘယ်နိုင်ငံက လူကြည့်နေလဲ သိရခြင်းဟာ Content ဖန်တီးမှုနဲ့ Marketing အတွက် အရမ်းအရေးကြီးပါတယ်။ဒီ Tutorial မှာတော့ Google Sheets နဲ့ Google Apps Script ကို အသုံးပြုပြီး Visitor Country Flag နဲ့ Count ကို အလိုအလျောက် တိုးတက်ပြသနိုင်မယ့် နည်းလမ်းကို လမ်းညွှန်ပေးမှာ ဖြစ်ပါတယ်။

code အလုပ်လုပ်ပုံကိုအနည်းငယ်ဖော်ပြပါမယ်

1. Visitor တစ်ယောက် Blog ကိုဖွင့်လိုက်တိုင်း IP မှ နိုင်ငံကုဒ်ကို API ကနေ ရယူမယ်
2. Visitor Data ကို Google Apps Script မှ Google Sheet ထဲသို့ ပို့မယ်
3. Sheet မှာ နိုင်ငံအလိုက် Visitor Count တွေ Update လုပ်မယ်
4. Apps Script မှ JSON API အဖြစ် Data တွေကို ပြန်ပေးမယ်
5. Blogger က API ကို ဖတ်ပြီး Flag Grid နဲ့ Count တွေကို ပြသမယ်

google sheet နဲ့ blog site မှာထည့်သွင်းပုံအဆင့်ဆင့်ကိုအောက်မှာဖော်ပြပေးထားပါတယ်

စတင်ဖန်တီးရန် အောက်က link ကို copy ယူ၍ Browser မှာဖွင့်ပါ။(မှတ်ချက် → Mobile ဖုန်းဖြင့်တည်ဆောက်ပါက Browser Desktop site သို့ ပြောင်းပါ)

1. https://docs.google.com/spreadsheets/u/0/
2. Start a new spreadsheet ➕ ကိုနှိပ်ပါ
3. Untitled Spreadsheet နေရာမှာ → Project name သတ်မှတ်၍ရေးပါ
4. line 1 ကို → Header အဖြစ်သတ်မှတ်ပါ။အောက်ကနမူနာကြည့်၍ရေးပါ

	A	B	C	D	E	F	G	H	I	J	K	L
1	code	country	count
2

1. 
   save ဖြစ်တဲ့ထိစောင့်ပါ။

1. Extensions ကိုနှိပ်
2. Apps Script ကိုနှိပ်
3. code.gs တွင် အောက်က code ကို copy ယူထည့်

function doPost(e) {
  const sheet = SpreadsheetApp.getActive()
    .getSheetByName("Sheet1");
  const data = JSON.parse(e.postData.contents);
  const rows = sheet.getDataRange().getValues();
  let found = false;
  for (let i = 1; i < rows.length; i++) {
    if (rows[i][0] === data.code) {
      sheet.getRange(i + 1, 3).setValue(rows[i][2] + 1);
      found = true;
      break;
    }
  }

  if (!found) {
    sheet.appendRow([data.code, data.country, 1]);
  }

  return ContentService
    .createTextOutput(JSON.stringify({status: "ok"}))
    .setMimeType(ContentService.MimeType.JSON);
}

function doGet() {
  const sheet = SpreadsheetApp.getActive()
    .getSheetByName("Sheet1");
  const rows = sheet.getDataRange().getValues();
  const data = [];
  for (let i = 1; i < rows.length; i++) {
    data.push({
      code: rows[i][0],
      country: rows[i][1],
      count: rows[i][2]
    });
  }

  return ContentService
    .createTextOutput(JSON.stringify(data))
    .setMimeType(ContentService.MimeType.JSON);
}

1. 
   ကိုနှိပ်။save ဖြစ်တဲ့ထိစောင့်ပါ

1. save ဖြစ်သွားပြီဆို →Deploy ကိုနှိပ်ပါ
2. New deployment ကိုရွေးပါ
3. ⚙️ ကိုနှိပ်ပါ။
4. Web app ကိုရွေးပါ
5. New description နေရာတွင်မိမိ → sheet name ရေးထည့်ပါ
6. Execute as နေရာမှာ မိမိ gmail မှန်မမှန်စစ်ပါ
7. Who has access နေရာတွင် → Anyone ကိုရွေးပါ
8. Deploy ကိုနှိပ်
9. Authorize access ကိုနှိပ်
10. sign in လုပ်ဖို့မိမိ → gmail account ကိုနှိပ်
11. Advanced ကိုနှိပ်
12. Go to Untitled project (unsafe). ကိုနှိပ်
13. Allow ကိုနှိပ်
14. Web app link ကို → copy ယူ၍မှတ်သားထားပါ။‌အောက်ကပုံကိုကြည့်ပါ။Template တွင်ထည့်သွင်းအသုံးပြုရမည်ဖြစ်သည်

web app link ရပြီဆိုရင် blog site သို့သွားပါ။အောက်ကပြထားတဲ့လုပ်ဆောင်ချက်အနည်းငယ်ဖြင့်ထည့်သွင်းအသုံးပြုနိုင်ပါတယ်။

1. dashboard ထဲ Theme ကိုနှိပ်
2. 🔽 ကိုနှိပ်၍ Edit HTML ကိုနှိပ်
3. </body> ရှာတွေ့ပြီဆိုရင်အောက်က code ကို copy ယူ၍အဲဒီ </body> အပေါ်ကထည့်ပါ

<script>//<![CDATA[
fetch("https://ipapi.co/json/")
.then(res => res.json())
.then(loc => {
fetch("Your_Web_App_Link_Here", {
    method: "POST",
    body: JSON.stringify({
      code: loc.country_code.toLowerCase(),
      country: loc.country_name
    })
  });
});
//]]></script>

1. Your_Web_App_Link_Here‌ နေရာမှာမိမိ Web App Link ဖြင့်အစားထိုးပါ။
2. save ကိုနှိပ်

နောက်တဆင့်အနေနဲ့အောက်အတိုင်းဆက်လုပ်ပေးပါ။

1. dashboard ထဲ Layout ကိုနှိပ်
2. မိမိထည့်သွင်းအသုံးပြုမဲ့ နေရာက Add a Gadget ➕ ကိုနှိပ်
3. HTML/JavaScript ကို ရွေး
4. အောက်က code ကို copy ယူ၍ထည့်ပါ

<style>
.flag-counter {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
  max-width: 100%;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  background: #f9faff;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  margin: 0 auto;
}
.flag-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 600;
  color: #333;
  background: #ffffff;
  padding: 10px 14px;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  cursor: default;
}
.flag-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}
.flag-item img {
  width: 28px;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 0 4px rgba(0,0,0,0.1);
}
.stats {
  margin-top: 18px;
  font-size: 16px;
  font-weight: 600;
  color: #555;
  text-align: center;
  user-select: none;
}
</style>
<div class="flag-counter" id="flagCounter"></div>
<p class="stats" id="statsText"></p>
<script>//<![CDATA[
fetch("Your_Web_App_Link_Here")
  .then(res => res.json())
  .then(data => {
    let html = "";
    let total = 0;
    data.forEach(row => {
      total += row.count;
      html += `
        <div class="flag-item">
          <img src="https://flagcdn.com/w20/${row.code}.png">
          <strong>${row.code.toUpperCase()}</strong> ${row.count}
        </div>
      `;
    });

document.getElementById("flagCounter").innerHTML = html;
    document.getElementById("statsText").innerText =
      "Pageviews: " + total + " | Flags Collected: " + data.length;
  });
//]]></script>

1. Your_Web_App_Link_Here‌ နေရာမှာမိမိ Web App Link ဖြင့်အစားထိုးပါ။
2. save ကိုနှိပ်ပြီးပြီ