Google Analytics 연동하기

Google Analytics

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

서두

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

Google Analytics 가입하기

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

첫 화면

추적 ID 확인

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

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

VuePress 설정하기

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

// docs/.vuepress/config.js

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

동작 확인하기

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

통계가 수집된다!

결론

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