# Google Analytics 연동하기
Google Analytics
# 서두
필자는 옛날에 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}',
...
}
2
3
4
5
6
7
# 동작 확인하기
설정이 되었다면 사이트를 빌드하고 서버에 배포한 후, 접속하여 몇번 갱신을 해보자.
테스트 해보니 개발중인 http://localhost:8080
서버에서는 적용되지 않았다. 당연한건가?
아무튼 한두번 갱신후, 몇 초 내로 바로 GA에 값이 반영되는 것을 확인할 수 있다.
통계가 수집된다!
# 결론
매우 간단한 설정만으로 VuePress에서 GA를 연동하였다. 이것으로 기본적인 방문자 통계는 알 수 있게 되었다. 앞으로 SEO(Search Engine Optimization)등을 적용하면서 방문자 증감 추이를 지켜보면 재밌을 것 같다.
← 이미지에 캡션 달기 마크다운 예제 →