Google API 연동하여 블로그 데이터 시각화하기

Google API 연동하여 블로그 데이터 시각화하기

Google API 연동하여 블로그 데이터 시각화하기

 

Google APIAnalytics Data APISearch Console APIAdSense APIBlogger API데이터 시각화

📑 목차

• 개요: 왜 API로 시각화할까
• 연동 맵: 데이터 소스와 차트
• 오류·쿼터·보안: 리포트 해석
• 연동 체크리스트(템플릿)
• 이미지 슬롯·OG·ALT 규칙
• 개선 루틴(4주 스프린트)
• 최종 정리

 

개요: 왜 API로 시각화할까

 

Google API를 활용하면 실시간에 가까운 블로그 성과(유입·노출·수익·콘텐츠 성과)를 한 화면에서 확인할 수 있습니다. 스프레드시트, 데이터베이스, HTML 차트와 연결하면 수동 다운로드·복붙 없이 자동으로 갱신됩니다. 핵심은 인증→데이터 수집→변환→시각화의 파이프라인을 단순하게 고정하는 것입니다.

핵심: 한 URL(대시보드 글)을 지속 업데이트하며 “가설→실험→측정” 루프를 빠르게 돌리세요.

인증 ㅡ > 수지브 > 정규화ㅡ> 시각화 파이프라인

 

연동 맵: 데이터 소스와 차트

 

소스	주요 지표	권장 차트
Analytics Data API (GA4)	세션, 사용자, 페이지뷰, 이벤트(스크롤/클릭)	시계열(꺾은선), 페이지 상위표
Search Console API	노출수, 클릭수, CTR, 평균 게재순위	쿼리/페이지별 히트맵, 트렌드
AdSense Management API	조회수, 클릭, RPM, 수익	수익 추세, 단위당 수익 막대
Blogger API	게시글 메타, 라벨, 댓글	카테고리 비중 도넛, 글 길이 분포

팁: 검색 유입(검색콘솔)→체류·전환(Analytics)→수익(AdSense)을 한 눈에 잇는 대시보드가 가장 실용적입니다.

 

간단한 데이터 파이프라인 예시 (Apps Script → 시트 → HTML 차트)

 

// 1) Google Apps Script: Search Console 데이터 → 스프레드시트
function fetchGSC(){
  const site = 'https://example.com/';
  const start = '2025-09-01', end = '2025-10-24';
  const body = {startDate:start,endDate:end,dimensions:['page','query'],rowLimit:2500};
  const res = UrlFetchApp.fetch('https://searchconsole.googleapis.com/webmasters/v3/sites/'+encodeURIComponent(site)+'/searchAnalytics/query',{
    method:'post',contentType:'application/json',payload:JSON.stringify(body),
    headers:{Authorization:'Bearer '+ScriptApp.getOAuthToken()}
  });
  const rows = JSON.parse(res.getContentText()).rows||[];
  const sh = SpreadsheetApp.getActive().getSheetByName('GSC')||SpreadsheetApp.getActive().insertSheet('GSC');
  sh.clear(); sh.appendRow(['page','query','clicks','impressions','ctr','position']);
  rows.forEach(r=>sh.appendRow([r.keys[0],r.keys[1],r.clicks,r.impressions,r.ctr,r.position]));
}

// 2) HTML에서 시트 JSON을 가져와 Chart.js로 렌더링 (예: Apps Script 웹앱/프록시)

<!-- Chart.js CDN -->
<script src="https://cdn.jsdelivr.net/npm/chart.js" defer></script>
<canvas id="ctrTrend" width="900" height="360"></canvas>
<script defer>
(async () => {
  const resp = await fetch('시트-JSON-엔드포인트');
  const data = await resp.json();
  const byDate = Object.values(data.reduce((acc,row)=>{ const d=row.date||'unknown'; acc[d]=acc[d]||{date:d,clicks:0,impr:0}; acc[d].clicks+=+row.clicks; acc[d].impr+=+row.impressions; return acc; },{}));
  const labels = byDate.map(r=>r.date);
  const ctr = byDate.map(r=> (r.impr? (r.clicks/r.impr*100):0).toFixed(2));
  new Chart(document.getElementById('ctrTrend'),{type:'line',data:{labels,datasets:[{label:'CTR(%)',data:ctr,borderColor:'#2563eb',tension:.25}]},options:{plugins:{legend:{display:true}},scales:{y:{ticks:{callback:v=>v+'%'}}}}});
})();
</script>

주의: 브라우저에서 직접 비공개 키를 노출하지 마세요. Apps Script/Cloud Run 등 서버 사이드 프록시를 사용해 토큰을 안전하게 관리하세요.

 

오류·쿼터·보안: 리포트 해석

 

1. 인증 오류: 401/403은 범위(scope)·속성 권한을 우선 확인.
2. 쿼터 제한: GA4·AdSense API는 분당/일일 요청량 제한이 있습니다. 캐시(시트)와 증분 수집으로 완화.
3. 데이터 정합: 날짜 타임존, 샘플링 여부, 지표 정의(세션/사용자)를 메모해 대시보드에 표기.

 

// 간단한 재시도+캐시 의사코드
fetchWithCache(key, fetcher){
  const cached = cache.get(key);
  if (cached && cached.ttl > Date.now()) return cached.data;
  try{ const fresh = fetcher(); cache.set(key,{data:fresh,ttl:Date.now()+3600e3}); return fresh; }
  catch(e){ if (cached) return cached.data; else throw e; }
}

 

연동 체크리스트(템플릿)

 

• GCP 프로젝트 생성, OAuth 동의화면·범위 설정(읽기 전용 우선).
• 필요 API 활성화: Analytics Data, Search Console, AdSense, Blogger.
• 인증: OAuth(사용자 데이터) 또는 서비스 계정(서버 수집) 선택.
• 프록시: Apps Script/Cloud Run으로 비밀키·토큰 보호.
• 데이터 레이어: 시트/DB에 원본 저장 → 정규화 테이블 생성.
• 시각화: Chart.js/Google Charts로 시계열·분포·랭킹 구성.
• 메타: 대시보드 글의 제목/설명/OG 이미지 최적화.
• 접근성: 캔버스 대체 텍스트, 표 캡션, 색 대비 점검.

 

이미지 슬롯·OG·ALT 규칙

 

• 대표 썸네일(OG): 1200×630, 대비 높은 색 + 12~16자 핵심 문구.
• 본문 이미지: WebP, width/height 명시, loading="lazy".
• ALT: “API 파이프라인→정규화→CTR 추세 차트”처럼 의도를 1문장으로.

 

유입 ㅡ> 행동 ㅡ> 수익을 한 곳에서 본다

 

개선 루틴(4주 스프린트)

 

1. W-1: API 활성화·권한 점검, 스키마 정의(날짜·페이지·쿼리).
2. W-2: 데이터 수집 자동화(스케줄러)·증분 수집 구축.
3. W-3: 주요 차트(트래픽·CTR·수익) 구현, 모바일 성능 최적화.
4. W-4: 대시보드 배치/컬러 개선, CTA·목차·내부 링크 연결.

주의: 개인 식별 정보(PII) 수집 금지. 공개 페이지에는 민감한 원시 데이터를 노출하지 마세요.

권한 ㅡ > 수집 ㅡ> 시각화 ㅡ> 최적화 순으로 반복 개선

 

최종 정리

 

Google API 연동은 블로그 운영의 의사결정 속도를 끌어올립니다. 인증·쿼터·보안을 준수하면서 시트/DB를 캐시로 활용하면, 라이트한 HTML 템플릿만으로도 가벼운 대시보드를 만들 수 있습니다. 동일 URL을 주기적으로 업데이트하고 차트 변화로 다음 행동을 정하세요.