Google Analytics 연동하기

Google Analytics

• 서두
• Google Analytics 가입하기
• 추적 ID 확인
• VuePress 설정하기
• 동작 확인하기
• 결론

서두

필자는 옛날에 Google Analytics (이하 GA)를 연동하여 웹게임 사이트를 운영해본 경험이 있는데, 각 페이지마다 간단한 Javascript 코드 조각만 삽입하는 정도로 연동이 간단했었다. 본 사이트는 정적 사이트인 만큼, 기본적으로는 방문자 통계 등을 뽑을 수가 없을 것 같지만, VuePress에 내장되어있는 GA 연동 기능을 사용하면 손쉽게 통계를 수집할 수 있다.

Google Analytics 가입하기

대부분 구글 계정 하나씩은 가지고 있을 것이다. 단순히 Google Analytics (opens new window)에 들어가서 가입 버튼을 누르면 간단히 가입이 완료된다. 계정명과 기본 사이트 주소를 입력하면 아래와 같은 화면이 나오게 될 것이다. 계정명은 관리할 단위인데, www/blog 처럼 구분된 주소를 하나의 그룹처럼 관리한다면 하나의 계정 안에서 다루면 된다.

첫 화면

추적 ID 확인

화면 좌측 하단에 관리버튼 -> 화면 중앙쯤 속성 설정을 눌러보면 아래와 같은 화면이 나오고 추적 ID를 확인할 수 있다. 이게 VuePress에 설정할 ID값이므로 드래그하여 클립보드에 복사해두자.

그림의 마우스 포인터 위치에서 추적 ID를 확인할 수 있다

VuePress 설정하기

VuePress에 설정하는 것은 매우 간단하다. Config # ga | VuePress (opens new window)에 나온 것처럼 추적 ID를 설정해주자.

// docs/.vuepress/config.js

module.exports = {
  ...,
  ga: '{추적 ID}',
  ...
}

동작 확인하기

설정이 되었다면 사이트를 빌드하고 서버에 배포한 후, 접속하여 몇번 갱신을 해보자. 테스트 해보니 개발중인 http://localhost:8080 서버에서는 적용되지 않았다. 당연한건가? 아무튼 한두번 갱신후, 몇 초 내로 바로 GA에 값이 반영되는 것을 확인할 수 있다.

통계가 수집된다!

결론

매우 간단한 설정만으로 VuePress에서 GA를 연동하였다. 이것으로 기본적인 방문자 통계는 알 수 있게 되었다. 앞으로 SEO(Search Engine Optimization)등을 적용하면서 방문자 증감 추이를 지켜보면 재밌을 것 같다.