POST 4. Google Analytics 기능 추가하기

Google Analytics란?

현재 구글 마케팅 플랫폼 브랜드 내의 플랫폼으로서, 웹사이트 트래픽을 추적하고 보고하는 구글이 제공하는 웹 애널리틱스 서비스이다.

Google Analytics 기능 추가하기

1. Google Analytics 접속

먼저 Google Analytics에 접속한다.

2. 측정을 위한 초기 설정

사이트 접속시 보이는 화면에서 ‘측정 시작’ 버튼을 누른 후, 3단계의 초기 설정을 진행한다.

3. 데이터 스트림 설정

등록이 끝나면 데이터 스트림을 설정해 주어야한다. 우리의 깃블로그는 웹이므로 데이터 스트림 설정에서 웹을 선택한다. 그리고 웹 스트림 설정에서 웹사이트 URL에 자신의 깃블로그 주소를 입력한다. 이렇게 한다면 자신의 측정아이디를 얻을 수 있다.

4. _config.yml 파일 수정

마지막으로 위에서 얻은 측정아이디를 복사한 후, 아래의 코드를 수정한다.

analytics:
provider               : google
                        # false (default), "google", "google-universal", "google-gtag", "custom"
google:
    tracking_id          : "이곳에 자신의 측정 아이디를 붙여넣는다."
    anonymize_ip         : false 

그리고 위의 코드를 _config.yml 파일에 넣는다면 나의 깃블로그에 Google Analytics 기능을 추가할 수 있다.

5. 오류 수정

하지만 나는 위의 4가지 과정을 거쳐도 기능이 활성화 되지 않는 오류를 겪었다.
왜냐하면 내가 사용한 테마는 G-XXXXXXXX 과 같이 Google 애널리틱스 4 를 지원하는 아주 최신식 테마인줄 알았으나 코드를 수정하는 과정에서 기능이 활성화되지 않는 것으로 미루어 보아, 이 테마는 UA-XXXXXXXX-X의 형태로 유니버설 애널리틱스를 기준으로 하는 것으로 추정된다.
그래서 나는 이를 해결하기 위해서 아래의 코드를 _includes 폴더의 head.html 파일에 추가해주었더니 오류를 해결할 수 있었다.

 <!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-GLECBP0BSM"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', '개인의 측정아이디');
</script>

위의 코드를 _config.yml에 붙이면 깃허브에 git push하였을 때 오류가 발생한다는 것을 명심하자
나의 깃허브에 있는 add: try to fix google analytics error 2 라는 commit을 통해 오류를 확인할 수 있다.

• google-analytincs
• gitblog