Home
GOOGLE SHEET

VISITOR INFORMATION CHECK ON GOOGLE SHEET

Visitor Information Check On Google Sheet


ဒါကတော့မိမိ Website ကိုဝင်ရောက်ကြည့်ရှုသူ Visitor တယောက်ရဲ့အချက်အလက်တချို့ကိုကြည့်ရှုနိုင်တဲ့ Tool တခုပါ။လိုအပ်လို့အသုံးပြုချင်တယ်ဆိုရင်တော့အောက်ပါလုပ်ဆောင်ချက်များကိုလုပ်ဆောင်၍ပြုလုပ်ဖန်တီးနိုင်ပါတယ်။



‌ထိုသို့ဖန်တီးရာတွင်မိမိ blog website account ဖွင့်ထားတဲ့ gmail ဆိုရင်ပိုကောင်းပါတယ်။တခြားမိမိ Gmail လဲရပါတယ်။အသုံးပြုမဲ့ Gmail ကိုရွေးချယ်ပြီးသွားပြီဆိုရင် အောက်က google sheet link ကို copy ယူ၍ Browser မှာဖွင့်ပါ။(မှတ်ချက် - Mobile ဖုန်းဖြင့်တည်ဆောက်ပါက Browser Desktop site သို့ ပြောင်းပါ)။


https://docs.google.com/spreadsheets/u/0/


  1. Start a new spreadsheet ➕ ကိုနှိပ်ပါ
  2. project name နှင့် sheet name သတ်မှတ်ချင်လဲရတယ်။မသတ်မှတ်ချင်လဲရတယ်
  3. line 1 ကို Header အဖြစ်သတ်မှတ်ပါ။အောက်ကနမူနာကိုကြည့်ပါ
A B C D E F G H I J K L
1 Date IP Address Host Name Country Browser Device OS Screen Size Time Zone Local Time Referrer Geolocation
2

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

  1. save ဖြစ်သွားပြီဆိုရင် Extensions ကိုနှိပ်
  2. Apps Script ကိုနှိပ်
  3. code.gs တွင် အောက်က code ကို copy ယူထည့်

function doPost(e) {
const sheet = SpreadsheetApp.getActiveSpreadsheet().getActiveSheet();
const data = JSON.parse(e.postData.contents);
sheet.appendRow([
new Date(),
data.ip,
data.hostname,
data.country,
data.browser,
data.device,
data.os,
data.screen,
data.timezone,
data.localTime,
data.referrer,
data.geo
]);
return ContentService.createTextOutput("Success");
}

  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 လုပ်ဖို့မိမိ gmail account ကိုနှိပ်
  11. Advanced ကိုနှိပ်
  12. Go to Untitled project (unsafe). ကိုနှိပ်
  13. Allow ကိုနှိပ်
  14. Web app link ကို copy ယူ၍မှတ်သားထားပါ။Template တွင်ထည့်သွင်းအသုံးပြုရမည်ဖြစ်သည်


  1. မိမိ blog site dashboard ထဲက Layout ကိုနှိပ်
  2. Add a Gadget ကိုနှိပ်ပါ
  3. HTML/JavaScript ကိုနှိပ်
  4. အောက်က code ကို copy ယူ၍ထည့်ပါ

<!-- Font Awesome CDN for icons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css" integrity="sha512-papjYlX+4YmR8F6J5K5aXlUvTP5p3yv3jhcnzPXf+o2q3XKc+3v4zQ92r5ZyR+kXz4fs0Kr5XnxYV0pW9nYXHg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<style>
#visitorTable {border-collapse: collapse;width: 100%;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-size: 16px;color: #004085;border-radius: 10px;overflow: hidden;box-shadow: 0 5px 15px rgba(0,0,0,0.2);}
#visitorTable th, #visitorTable td {border: 1px solid #004085;padding: 2px;}
#visitorTable th {background-color: #a8d5ba;}
#visitorTable tr:nth-child(even) td {background-color: #ffffff;}
#visitorTable tr:nth-child(odd) td {background-color: #d4edda;}
#visitorTable tr:hover td {background-color: #cce5ff;}
</style>
<button id="toggleMode" style="margin:20px; padding:8px 16px; font-size:16px; cursor:pointer;">
  <i class="fa-solid fa-moon"></i> Toggle Dark Mode
</button>
<div id="visitorInfo" style="margin:2px;"></div>
<script>//<![CDATA[
async function showVisitorInfo() {
  try {
    const res = await fetch('https://ipapi.co/json/');
    const data = await res.json();
    const visitorDiv = document.getElementById('visitorInfo');
    visitorDiv.innerHTML = `
      <table id="visitorTable">
        <tr>
          <th>Item</th>
          <th>Details</th>
        </tr>
        <tr><td><i class="fa-solid fa-network-wired" title="IP Address"></i> IP Address</td><td>${data.ip}</td></tr>
        <tr><td><i class="fa-solid fa-server" title="Host"></i> Host</td><td>${data.hostname || 'Unknown'}</td></tr>
        <tr><td><i class="fa-solid fa-flag" title="Country"></i> Country</td><td>${data.country_name}</td></tr>
        <tr><td><i class="fa-solid fa-globe" title="Browser"></i> Browser</td><td>${navigator.userAgent}</td></tr>
        <tr><td><i class="fa-solid fa-mobile-screen-button" title="Device"></i> Device</td><td>${/Mobi/.test(navigator.userAgent) ? 'Mobile' : 'Desktop'}</td></tr>
        <tr><td><i class="fa-solid fa-desktop" title="OS"></i> OS</td><td>${navigator.platform}</td></tr>
        <tr><td><i class="fa-solid fa-arrows-alt" title="Screen Size"></i> Screen</td><td>${window.screen.width} x ${window.screen.height}</td></tr>
        <tr><td><i class="fa-solid fa-clock" title="Time Zone"></i> Time Zone</td><td>${Intl.DateTimeFormat().resolvedOptions().timeZone}</td></tr>
        <tr><td><i class="fa-solid fa-calendar-days" title="Local Time"></i> Local Time</td><td>${new Date().toLocaleString()}</td></tr>
        <tr><td><i class="fa-solid fa-link" title="Referrer"></i> Referrer</td><td>${document.referrer || 'Direct'}</td></tr>
        <tr><td><i class="fa-solid fa-location-dot" title="Geolocation"></i> Geolocation</td><td id="geoData">Loading...</td></tr>
      </table>
    `;

    if (data.latitude && data.longitude) {
      const lat = parseFloat(data.latitude).toFixed(5);
      const lon = parseFloat(data.longitude).toFixed(5);
      const mapLink = `<a href="https://www.google.com/maps?q=${lat},${lon}" target="_blank" style="color:#004085; text-decoration: underline;"><i class="fa-solid fa-map-location-dot"></i> View Map</a>`;
      document.getElementById('geoData').innerHTML = `${lat}, ${lon} (${mapLink})`;
    } else {
      document.getElementById('geoData').innerText = 'Location not available';
    }
    document.getElementById('toggleMode').addEventListener('click', function() {
      const table = document.getElementById('visitorTable');
      if(table.style.color === 'rgb(0, 64, 133)' || table.style.color === '') {
        table.style.background = 'linear-gradient(to right, #343a40, #212529)';
        table.style.color = '#f8f9fa';
        table.querySelectorAll('tr:nth-child(even) td').forEach(td => td.style.backgroundColor = '#495057');
        table.querySelectorAll('tr:nth-child(odd) td').forEach(td => td.style.backgroundColor = '#343a40');
      } else {
        table.style.background = 'linear-gradient(to right, #d4edda, #c3e6cb)';
        table.style.color = '#004085';
        table.querySelectorAll('tr:nth-child(even) td').forEach(td => td.style.backgroundColor = '#ffffff');
        table.querySelectorAll('tr:nth-child(odd) td').forEach(td => td.style.backgroundColor = '#d4edda');
      }
    });

  } catch (err) {
    console.error('Failed to fetch visitor info:', err);
    document.getElementById('visitorInfo').innerText = 'Visitor info cannot be loaded.';
  }
}

showVisitorInfo();
//]]></script>
<script>//<![CDATA[
async function saveToGoogleSheet(visitorData) {
  try {
    await fetch('Your_Web_App_Link_Here', {  // <-- paste your Web App URL here
      method: 'POST',
      body: JSON.stringify(visitorData)
    });
  } catch (err) {
    console.error("Failed to save to Google Sheet:", err);
  }
}

async function showVisitorInfo() {
  try {
    const res = await fetch('https://ipapi.co/json/');
    const data = await res.json();

    const visitorData = {
      ip: data.ip,
      hostname: data.hostname || 'Unknown',
      country: data.country_name,
      browser: navigator.userAgent,
      device: /Mobi/.test(navigator.userAgent) ? 'Mobile' : 'Desktop',
      os: navigator.platform,
      screen: `${window.screen.width} x ${window.screen.height}`,
      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
      localTime: new Date().toLocaleString(),
      referrer: document.referrer || 'Direct',
      geo: data.latitude && data.longitude ? `${data.latitude.toFixed(5)}, ${data.longitude.toFixed(5)}` : 'N/A'
    };
    
    saveToGoogleSheet(visitorData);

    console.log(visitorData); 
  } catch (err) {
    console.error('Failed to fetch visitor info:', err);
  }
}

showVisitorInfo();
//]]></script>

  1. Your_Web_App_Link_Here နေရာမှာမိမိ Web app link ထည့်ပေးပါ
  2. Save နှိပ်ပြီးပါပြီ

မှတ်ချက်-မိမိ device ကနေမိမိ site ကိုပြန်ဝင်ကြည့်မည်ဆိုပါက vpn ဖွင့်ပါ(or)အခြား device ကဝင်ကြည့်ပါ။

Visitor Information များအားကြည့်ရှုရန်မိမိဖန်တီးထားတဲ့ google sheet project link ကိုနှိပ်၍သွားရောက်ကြည့်ရှုနိုင်ပါတယ်


Post a Comment