velog에 구글 애널리틱스 연동해서 방문자 추적하기

노력을 즐기는 사람·2021년 1월 21일

김민석님의 블로그 글을 그대로 응용했습니다.
김민석님의 노션 페이지 방문자 추적 프로젝트 notion-ga를 사용합니다

velog는 정말 멋진 플랫폼이다.
velog를 사용하는 여러가지 이유가 있겠지만 나는 특히 예쁜 UI가 마음에 든다.
또, 댓글이 달리면 메일로 즉각 알림을 해주는 서비스도 환상적이다.

무료로 이 멋진 서비스를 사용하면서 염치없게도 아주 조금 아쉬웠던 부분이 있다면 조회 수, 방문자 추적에 대한 부분이다.

그리고 방문자 추적하는 방법을 알아냈다!

갑자기 알아낸 이유

중학교 때 싸이월드를 많이 했는데 그때도 투데이를 올리려고 버그를 쓰거나 돈을 주고 투데이를 구매하는 경우가 있었다.
또, 투데이를 올리려고 서로 방명록을 뻔질나게 주고 받았던 기억이 난다.
물론 나는 찐따라서 투데이가 항상 0에 수렴했다 ^^

그만큼 인간이라는 동물은 관심을 받고 싶어한다. 그것은 찐따노소 모든 사람이 그럴테다. 사실 velog 사용 초기에도 방문자 추적을 하고 싶어서 하는 방법이 있는지 검색을 했던 기억이 난다.

그런데 최근 대학생 IT 연합 동아리 정보 모음 포스팅이 인기를 얻으면서~~(생활코딩 홍보빨)~~ 조회 수가 또 다시 궁금해졌다.

그리고 구글링을 하던 중 김민석님의 notion-ga 프로젝트를 알게 되었다.

notion-ga

구글 애널리틱스를 사용하는 방법은 두 가지가 있다.

자바스크립트 코드 삽입
Mesurement Protocol 통신

notion-ga는 Measurement Protocol 통신 규약 방식을 사용한다.

우리는 그저 킹민석님께서 직접 셋팅해두신 프록시 서버에 요청을 보내면 프록시 서버에서 통신 규약을 만족하는 요청을 보내주신다고 한다.

킹민석님의 블로그를 꼭 참고해주세요. 유익합니다!

방문자 추적하기

준비물이 있다. 다들 알림장을 펼쳐주세요

구글 애널리틱스 Tracking ID
추적할 페이지의 URL

Tracking ID 확인하기

구글 애널리틱스에 로그인한다. 그러면 아래와 같은 페이지가 떠 있을 텐데

왼쪽 아래의 관리를 누른다. 그러면 또 아래와 같이 레이아웃이 바뀐다.

그러면 빨간색 박스쳐진 추적 정보, 추적 코드를 차례로 클릭한다.

마지막으로 추적 ID 를 확인하면 끝!

추적할 페이지의 URL

URL을 호스트 도메인과 페이지 경로로 분리해야 한다.
지금 이 포스팅을 기준으로 호스트 도메인과 페이지 경로 예시는 다음과 같다.

나의 지금 이 포스팅을 추적하고자 한다면 아래처럼 분리된다.

호스트: velog.io
페이지 경로: /@prayme/velog에-구글-애널리틱스-연동해서-방문자-추적하기

페이지 경로는 반드시 "/" 를 포함합니다!

추적할 페이지에 링크 숨겨두기

핵심은 누군가가 우리의 글을 읽을 때 마다 프록시 서버에 요청을 보내는 것이다.

Notion에서는 embed link를 통해서 해결 했지만 우리는 markdown 문법으로 해결할 수 있을 것 같다.

velog에서는 markdown 문법을 활용해 이미지를 삽입한다.
즉, 페이지가 한번 로딩될 때 마다 이미지 삽입에 등록된 링크에 요청을 보낸다.

자, 이제 우리가 글을 작성하고 해당 글을 얼마나 많은 사람이 읽는지 궁금하다면 포스팅의 맨 마지막에 다음과 같은 markdown을 추가하자

![](https://notion-ga.ohwhos.now.sh/collect?tid={트래킹 ID}&host={도메인}&page={경로})

만약 이 포스팅을 기준으로 한다면 다음과 같은 링크가 된다.

![](https://notion-ga.ohwhos.now.sh/collect?tid=UA-000000000-0&host=velog.io&page=/@prayme/velog%EC%97%90-%EA%B5%AC%EA%B8%80-%EC%95%A0%EB%84%90%EB%A6%AC%EC%8A%A4%ED%8B%B1-%EC%97%B0%EB%8F%99%ED%95%B4%EC%84%9C-%EB%B0%A9%EB%AC%B8%EC%9E%90-%EC%B6%94%EC%A0%81%ED%95%98%EA%B8%B0)

링크를 삽입한 후 구글 애널리틱스에서 확인해보면? 짜잔~ 🥳

킹갓석님 만세~!

주의사항!!!

velog의 URL은 velog.io/@{유저이름}/{포스팅 제목} 의 규칙을 가진다.

그리고 포스팅 제목이 한글일 때는 한글 URL을 사용하는데 URL의 한글은 항상 인코딩 되어야 한다. URL은 항상 ASCII code를 이용해 전송되기 때문이다.

나는 분명히 한글 URL을 복사했는데 붙여넣기 했을 때 저렇게 %와 함께 16진수가 출력되어도 당황하지 말자

만약 붙여넣기 했는데도 한글이 출력된다면 구글에 URL 인코더를 검색해서 여러가지 서비스를 사용해서 인코딩 후 붙여넣기를 추천한다.

그래도 아쉬운 점

귀찮음..
포스팅 단위로 추적해야 하기 때문에 관리가 어려움
구글 애널리틱스가 너무 어려움 굉장히 많은 기능이 있다
개발자도구로 태그를 잘 살펴보면 추적 ID가 노출된다.
이건 아마 노션도 마찬가지일 것 같다.
구글 애널리틱스를 너무 몰라서 추적 ID를 어떻게 악용할 수 있는지도 모르겠다.
음.. 내 추적 ID를 본인 포스팅에 사용해서 나의 통계를 어질러 놓기정도??

아직은 구글 애널리틱스 사용법을 잘 모르겠다.
그래서 이 포스팅을 올릴지 말지 고민을 많이 하고 있다.