블로그를 운영하다 보면 누구나 “지금 내 글을 누가 보고 있을까?”라는 궁금증을 갖게 됩니다. 지난 1편에서 단순히 “방문했다”는 알람을 구현했다면, 이번 업그레이드 2편에서는 블로그의 질적 성장을 측정할 수 있는 핵심 지표인 [누적 페이지뷰]와 [체류 시간]을 실시간으로 방문자 방문시 모바일에 알람을 적용하는 방법을 소개합니다.
지금까지 단순히 방문자 수에만 집착해 왔을지도 모릅니다. 또한 구글 애널리틱스(GA4)를 매번 확인하는 것은 번거롭고, 데이터가 반영되기까지 시간차도 존재하죠.
단순히 “1명이 들어왔다”는 알람보다 “오늘 벌써 100번째 방문자가 들어왔다”는 알람은 체감이 다릅니다. 실시간으로 쌓여가는 숫자를 보며 오늘 내 포스팅의 화제성을 즉각적으로 파악하고 동기부여를 얻을 수 있습니다.
블로그 방문자가 내 글을 5초 보고 나갔는지, 3분 동안 정독했는지를 아는 것도 매우 중요합니다.
- 10초 이내 이탈: 제목 낚시였거나 내용이 부실함
- 2분 이상 체류: 독자가 정보를 가치 있게 소비함 이 정보를 실시간으로 알게 되면, 어떤 스타일의 글이 내 블로그에 적합한지 즉시 판단할 수 있습니다.
애널리틱스 앱을 열고 복잡한 그래프를 분석할 필요도 없고. 일상생활 중에 핸드폰 메시지 한 통으로 “어떤 글에, 몇 번째로 들어와서, 얼마나 읽고 나갔는지” 모든 정보를 한눈에 볼 수있어 사용해 보니까 너무 편해요
목차
1단계: 모바일 실시간 알람 구글 앱스 스크립트(GAS) 설정하기
블로그 방문자 실시간 모바일 알림을 받기 위해서는 먼저 텔레그램으로 메시지를 쏘아줄 서버 역할을 하는 GAS 코드를 업데이트해야 합니다. 구글 시트의 [확장 프로그램] – [Apps Script]에 아래 코드를 넣으세요.
function doGet(e) {
const scriptProperties = PropertiesService.getScriptProperties();
const TOKEN = scriptProperties.getProperty('TELEGRAM_TOKEN');
const CHAT_ID = scriptProperties.getProperty('TELEGRAM_CHAT_ID');
const action = e.parameter.action;
const visitorId = e.parameter.vId;
const today = Utilities.formatDate(new Date(), "GMT+9", "yyyy-MM-dd");
// 입장 시 기록 (알람은 생략)
if (action === "enter") {
let lastDate = scriptProperties.getProperty('LAST_DATE');
let dailyCount = parseInt(scriptProperties.getProperty('DAILY_COUNT') || "0");
if (lastDate === today) {
dailyCount++;
} else {
dailyCount = 1;
scriptProperties.setProperty('LAST_DATE', today);
}
scriptProperties.setProperty('DAILY_COUNT', dailyCount.toString());
scriptProperties.setProperty('TIME_' + visitorId, new Date().getTime().toString());
return ContentService.createTextOutput("recorded").setMimeType(ContentService.MimeType.TEXT);
}
// 퇴장 시 알람 전송
else if (action === "exit") {
const entryTime = scriptProperties.getProperty('TIME_' + visitorId);
const dailyCount = scriptProperties.getProperty('DAILY_COUNT') || "0";
if (entryTime) {
const exitTime = new Date().getTime();
const durationSeconds = Math.floor((exitTime - parseInt(entryTime)) / 1000);
const minutes = Math.floor(durationSeconds / 60);
const seconds = durationSeconds % 60;
const timeString = minutes 0 ? minutes + "분 " + seconds + "초" : seconds + "초";
var site = e.parameter.site || "알 수 없음";
var title = e.parameter.title || "제목 없음";
var url = e.parameter.url || "";
var message = "[실시간 방문 알림]\n" +
"● 오늘 누적 페이지뷰: " + dailyCount + "회\n" +
"● 체류 시간: " + timeString + "\n" +
"──────────\n" +
"● 사이트: " + site + "\n" +
"● 제목: " + title + "\n" +
"● 링크: " + url;
sendTelegram(TOKEN, CHAT_ID, message);
scriptProperties.deleteProperty('TIME_' + visitorId);
}
}
return ContentService.createTextOutput("success").setMimeType(ContentService.MimeType.TEXT);
}
function sendTelegram(token, chatId, text) {
var url = "https://api.telegram.org/bot" + token + "/sendMessage";
var payload = { "method": "post", "payload": { "chat_id": chatId, "text": text } };
UrlFetchApp.fetch(url, payload);
}2단계: 방문자 알람 내 블로그에 적용하기 (플랫폼별 구분)
자신의 블로그 플랫폼에 맞는 코드를 선택하여 복사해 넣으세요.
1. 블로그 방문자 실시간 모바일 알림 티스토리(Tistory)용 적용 방법
티스토리는 이탈 신호가 끊기기 쉽기 때문에, 클릭 이벤트와 화면 가려짐을 동시에 감지하는 ‘강력 전송’ 방식의 코드가 필요합니다. [스킨 편집] – [HTML 편집] – /body 바로 위에 넣어주세요.
<script>
(function() {
const GAS_URL = "여기에_본인의_GAS_배포_URL_입력";
const vId = "V" + Date.now() + Math.floor(Math.random() * 1000);
const site = "Tistory(인사이트)";
const title = document.title;
const url = window.location.href;
function sendToGas(actionType) {
const params = "?action=" + actionType + "&vId=" + vId + "&site=" + encodeURIComponent(site) + "&title=" + encodeURIComponent(title) + "&url=" + encodeURIComponent(url);
new Image().src = GAS_URL + params;
}
sendToGas("enter");
document.addEventListener('click', function(e) {
const target = e.target.closest('a');
if (target && target.href && !target.href.startsWith('#')) {
sendToGas("exit");
}
}, true);
window.addEventListener("pagehide", function() {
sendToGas("exit");
});
document.addEventListener("visibilitychange", function() {
if (document.visibilityState === 'hidden') {
sendToGas("exit");
}
});
})();
</script>2. 블로그 방문자 실시간 모바일 알림 워드프레스(WordPress)용 적용 방법
워드프레스는 관리자(본인)가 접속했을 때는 알람이 울리지 않도록 ‘관리자 제외’ 로직이 포함된 코드가 좋습니다. footer.php나 Insert Headers and Footers 플러그인을 이용해 넣어주세요.
<script>(function () {
// 관리자(로그인 상태)는 체크하지 않음
const isAdmin =
document.body.classList.contains('logged-in') ||
!!document.getElementById('wpadminbar');
if (!isAdmin) {
const GAS_URL = "여기에_본인의_GAS_배포_URL_입력";
const visitorId = "V" + new Date().getTime() + Math.floor(Math.random() * 1000);
const siteName = "WordPress(qcai.kr)";
const pageTitle = document.title;
const pageUrl = window.location.href;
const enterParams = new URLSearchParams({
action: "enter",
vId: visitorId,
site: siteName,
title: pageTitle,
url: pageUrl
});
// 입장 신호
fetch(`${GAS_URL}?${enterParams.toString()}`, {
mode: "no-cors"
});
// 퇴장 신호 (keepalive 사용으로 확실하게 전송)
window.addEventListener("beforeunload", function () {
const exitParams = new URLSearchParams({
action: "exit",
vId: visitorId,
site: siteName,
title: pageTitle,
url: pageUrl
});
fetch(`${GAS_URL}?${exitParams.toString()}`, {
mode: "no-cors",
keepalive: true
});
});
}
})();</script>이제 누군가 내 블로그 글을 정독하고 나가는 순간, 실시간으로 체류 시간과 누적 방문자 정보를 핸드폰 알람으로 확인해 보세요. 블로그 운영이 한층 더 즐거워질 것입니다.
