Ghost 블로그 방문자 분석을 위한 Google Analytics 연동하기

서론

블로그를 처음 시작할 때는 구독자 수는 나 1명 이였다. 내가 발행하고 내가 참조하는 그냥 나 스스로를 위한 포스팅으로 시작했다. 하지만 내가 나중에 참조하기 위해 정리한 기술 내용이 다른 사람들에게도 필요한 정보가 된다는 것을 알게 되었다. 이런 의미에서 인터넷의 보급과 발전은 지식공유의 획기적인 것이다. 소셜네트워크 미디어의 발달과 똑똑해진 검색엔진 때문에 나의 블로그는 점점 많은 사람들이 방문하게 되었다.

Google Analytics

TistoryBootstrap로 블로그 스킨을 만들어서 운영할 때 였다. 방문자 수를 카운팅하는 프로그램을 JQuery로 만들어서 사용했던 적이 있었는데 최대 방문자 수와 오늘 방문자 수를 페이지가 로드 할 때 카운트하는 프로그램을 만들었다. 그때 내 블로그 방문자가 1,000 명이 넘는 것을 처음 알게 되었다. 매일 천명이 넘는 방문자가 방문한다고 생각하니 글 내용을 좀 더 신중하게 작성해야할 것 같았고, 무엇보다 오류 없이 본문에 포함된 코드가 동작해야 한다고 생각했다. 이후 Jekyll + Github Pages에서 블로그를 운영했는데, MySQL 데이터베이스를 사용하는 Tistory와 달리 Jekyll은 데이터베이스가 없어 오늘 방문자수를 알 수 없게 되었다. 그래서 찾게 된 것이 바로 Google Analytics 였다. 만약 Jekyll을 사용하고 있다면 Google Analytics for Jekyll 글을 참조하면 간단하게 include 하는 static html 파일을 만들어서 Jekyll에 추가할 수 있을 것이다.

Google Analytics는 일반 사용자들이 만들기 어려운 통계정보를 아주 쉽게 확인할 수 있도록 사이트를 분석하는 서비스를 제공한다. 만약 이 것이 없었더라면 Jekyll에서 방문자 수나 사이트 통계정보를 분석하는 것을 어려웠을 것이다. 뿐만 아니라 직접 웹 서러 로그를 저장해서 분석해야하는 일을 해야할 것이다. Google Analytics는 책으로 출판될 정도로 그 기능이 방대하고 활용 범위가 다양하다. 이 글에서는 Google Analytics의 전반적인 기능을 소개 하지는 않는다. 하지만 Google Analytics를 사용하면 단 몇줄의 코드로 내 사이트(블로그)를 손쉽게 분석할 수 있다. 몇명이나 방문했는지? 어떤 검색으로 찾아 들어왔는지? 디바이스 무엇인지? 얼마나 머물다가 간것인지? 가장 많이 방문하는 시간대는 언제이지? 등등 수치와 그래프로 아주 명확하게 확인할 수 있다.

Google Analytics 코드

우선 Google Analytics를 사용하기 위해서는 Google Analytics에 가입 해야한다. 가입하면 고유 USER ID가 생성이 된다. 이후 사이트를 등록하면 이 고유 아이디 밑으로 사이트가 등록이된다.

Admin 탭을 열어서 Tracking Info 메뉴의 Tracking Code를 클릭하면 사이트에 추가할 JavaScript 코드가 생성이 된다.

<script>  
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-8647285-2', 'auto');
  ga('send', 'pageview');

</script>  

우리는 이 Tracking Code를 사이트에 추가할 것이다. 이후 이 코드를 추가한 다음 Status에 보이는 Send test traffic 버튼을 클릭해서 내 사이트에서 Google Analytics에 데이터를 잘 보내고 받는지 확인하면 된다.

Ghost Code Injection

Ghost는 Dashboard에서 Code Injection 이라는 특별한 기능을 제공하고 있다.

Tistory로 블로그를 운영해본적 있는 사용자는 이 이름으로 되어 있지는 않지만, 동일한 기능을 사용한 적이 있을 것이다. 이 것은 말 그대로 코드를 삽입하는 것인데, HTML 이 렌더링 될 때 {{ghost_head}} 또는 {{ghost_foot}}에 들어가 <head> 태그 안에 만들어지거나 </body> 마지막에 추가되어 진다. 보통 Code InjectionJavaScriptStylesheet 코드를 간단히 추가할 때 사용한다. 우리는 앞에 Google Analytics에서 생성한 Tracking Code{{ghost_head}} 에 들어가는 Blog Header에 코드를 복사하여 입력한다. 단지 이것으로 내 사이트에서 멋진 Google Analytics 분석을 시작할 수 있다.

향후 계획

이 블로그는 AWS에서 Ghost를 운영하고 있다. AWS에서는 AWS CloudWatch라는 로깅/분석 서비스가 있다. 우리는 CloudWatch를 사용하여 사이트 분석하는 방법을 연구하고 있다. 이 사이트에 CloudWatch를 사용하여 본격적으로 사이트를 분석하기 시작하게 될 때 Google Analytics가 아닌 AWS CloudWatch를 사용하여 분석하는 방법을 소개할 예정이다.