반응형
티스토리 블로그용 GA4 이벤트 추적 커스터마이징
티스토리 GA4이벤트 추적GTMgtag.js스크롤 추적클릭 추적애드센스
개요: 블로그에서 꼭 잡아야 할 이벤트
티스토리 블로그의 핵심 목표는 유입 확대와 깊이 있는 탐색입니다. GA4에서는 기본 수집만으로는 부족할 수 있으므로, 블로그 특성에 맞춘 커스텀 이벤트가 필요합니다. 아래 5가지를 권장합니다.
click_outbound: 외부 링크 클릭(제휴·자료 출처).scroll_90: 문서 90% 도달 = 사실상 완독 신호.view_second_post: 같은 세션에서 2번째 포스트 조회.copy_code: 코드 블록 복사 상호작용.toc_click: 목차 클릭으로 섹션 이동.
핵심: “클릭 → 스크롤 → 두 번째 글”의 흐름을 계측하면 제목/배치/내부링크의 개선 포인트가 뚜렷해집니다.
이벤트 명명 규칙·파라미터 설계
GA4는 소문자, 공백 대신 밑줄, 파라미터 키 고정이 안전합니다. 아래는 실전 스키마 예시입니다.
| 이벤트 | 필수 파라미터 | 설명 |
|---|---|---|
| click_outbound | link_text, link_url, position | 본문/헤더/푸터 등 클릭 위치 포함 |
| scroll_90 | reading_time, content_length | 완독 지표 보강 |
| view_second_post | from_slug, to_slug | 내부 링크 전략 점검 |
| copy_code | block_lang, block_id | 개발/튜토리얼형 블로그에 유용 |
| toc_click | target_id, depth | 목차 사용성 확인 |
팁: 파라미터 값은 100자 이내로 제한하고, URL은 UTM 제거본을 권장합니다.
구현: gtag.js와 GTM 두 가지 경로
① gtag.js 직접 전송(간단)
스킨의 <head> 또는 공통 스크립트 영역에 아래를 추가합니다.
<script>
// scroll_90: 90% 스크롤 시 1회 전송
(function () {
var fired = false;
function sendScroll() {
if (fired) return;
var scrolled = (window.scrollY + window.innerHeight) / document.documentElement.scrollHeight;
if (scrolled >= 0.9) {
fired = true;
gtag('event', 'scroll_90', {
reading_time: Math.round(performance.now() / 1000),
content_length: document.body.innerText.length
});
}
}
window.addEventListener('scroll', sendScroll, { passive: true });
window.addEventListener('load', sendScroll);
})();
// 외부 링크 클릭 추적
document.addEventListener('click', function(e){
var a = e.target.closest('a');
if(!a) return;
var url = a.getAttribute('href') || '';
var isOutbound = url.startsWith('http') && !url.includes(location.hostname);
if(isOutbound){
gtag('event', 'click_outbound', {
link_text: (a.innerText || '').slice(0,80),
link_url: url,
position: (a.closest('header,.toc,footer') ? (a.closest('header')?'header':a.closest('.toc')?'toc':'footer') : 'body')
});
}
});
</script>
② Google Tag Manager 경로(유연)
- 트리거: 스크롤 깊이(90%), 링크 클릭(일치 조건: 아웃바운드), 커스텀 이벤트.
- 태그: GA4 이벤트 태그 생성 → 이벤트 이름/파라미터 매핑.
- 변수: 클릭 텍스트/URL, DOM 요소 클래스, 페이지 경로 등 활성화.
// 예: dataLayer push → GTM 커스텀 이벤트 태그
dataLayer.push({
event: 'toc_click',
target_id: 'implement',
depth: 2
});
주의: GA4 기본 추천 이벤트 이름과 충돌하지 않도록 커스텀 이벤트는 고유 접두사(예:
blog_*) 사용을 고려하세요.이미지 슬롯·OG·ALT 규칙
- 대표 썸네일(OG): 1200×630, 대비 높은 색 + 12~16자 핵심 문구.
- 본문 이미지: WebP,
width/height명시,loading="lazy"적용. - ALT: 이미지 없이도 흐름이 이해되는 1문장 + 키워드 1회.
검증: 디버그뷰·실시간·탐색 보고서
- 디버그뷰: GA4 DebugView에서 이벤트 이름/파라미터가 실시간으로 도착하는지 확인.
- 실시간 보고서: 유입 소스별로 이벤트 발생 분포를 점검.
- 탐색(Exploration): 경로 탐색으로
view_second_post전환 흐름을 시각화.
팁: 스테이징(비공개)에서 테스트할 땐 측정ID가 같은지, 필터로 내부 트래픽 제외가 적용되는지 확인하세요.
보고서 구성: CTR·scroll_90·view_second_post
- CTR: 목록형 페이지에서 카드 클릭률(제목/썸네일 A/B, 7일 이동평균).
- 완독:
scroll_90비율이 낮다면 서두 압축·이미지 재배치·소제목 분리. - 깊이:
view_second_post비율로 내부 링크(허브↔스포크) 품질을 판단.
| 지표 | 권장 기준 | 개선 액션 |
|---|---|---|
| CTR | 리스트형 > 4% | 제목 키워드 전면 배치, 썸네일 대비 강화 |
| scroll_90 | 개별 글 > 35% | 서론 3~4문장, 첫 이미지 상단 배치 |
| view_second_post | > 22% | 상·중단 내부 링크 2개 이상, 관련 글 섹션 추가 |
발행 전 체크리스트
- 이벤트 스키마(이름/파라미터) 문서화 완료, 중복/오탈자 없는가?
- GTM/gtag 중 1가지 방식으로 일관 적용, 테스트 페이지에서 디버그 완료됐는가?
- OG 1200×630, 본문 이미지 WebP+지연 로딩, ALT/캡션이 반영됐는가?
- 보고서(CTR·scroll_90·view_second_post) 위젯이 저장됐는가?
- 개인정보/저작권/애드센스 정책(1화면 1광고 등)을 준수했는가?
최종 정리
티스토리 블로그에서 GA4를 커스터마이징하는 목적은 콘텐츠 품질 개선에 쓰일 신호를 더 정밀하게 수집하는 데 있습니다. 오늘 소개한 명명 규칙과 파라미터 스키마, gtag/GTM 구현 예시, 디버그·보고서 루틴을 고정하면 포스트마다 반복 가능한 측정 체계를 만들 수 있습니다. 지표는 단독으로 보지 말고, 제목·썸네일·내부 링크 전략과 결합해 테스트 → 학습 → 리라이팅 사이클을 꾸준히 돌리세요.
반응형
'블로그 운영 노하우' 카테고리의 다른 글
| 블로그 성과 추적용 UTM 파라미터 설정법 (0) | 2025.10.16 |
|---|---|
| ChatGPT와 티스토리 연동한 글 자동 템플릿 만들기 (1) | 2025.10.15 |
| 티스토리 포스트에 JSON-LD 구조화 데이터 삽입하기 (0) | 2025.10.15 |
| AI 탐지 우회용 자연어 리라이팅 실험 결과(윤리·품질 중심) (0) | 2025.10.14 |
| 티스토리 블로그에 Open Graph 태그 적용하는 법 (1) | 2025.10.14 |