GitHub에 Google Analytics 달기



얼마전 Github에 안드로이드 오픈소스 코드를 하나 올렸다. 안드로이드 커뮤니티에 입소문이 돌면서 매주 안드로이드 이슈에 관해 소개하는 유명한 웹페이지에도 소개 되고, inAppSquared에서 소개되어  GitHub에 공개한 오픈소스의 스타수가 기하급수적으로 늘어났다. 트위터나 구글+를 보면 국내보다 해외 개발자들이 훨씬 많은 관심을 가지는것 같아 보였다.

 

링크

 

링크

 

 

그래서 통계 분석을 통해 어디서 유입되는지 알고 싶어 통계분석의 끝판왕 구글 애널리틱스를 GitHub에 달아서 분석을 해보기로 했다. Github는 개발자가 페이지별로 코드를 수정할 수가 없다. 첫 화면의 Readme 페이지 조차도 html편집이 불가능하다. 그대신 마크다운을 통한 문서편집이 가능한데, 이를 통해서 분석하는 기법이다.

 

마크다운에서 이미지를 넣을때 외부이미지 URL을 호출하게 되는데 이때 호출받는 웹페이지쪽에 구글 애널리틱스코드를 심어서 애널리틱스 전송을 하고 이미지를 반환 해주는 방식을 사용하게된다.

 

그중 잘 알려진 https://github.com/igrigorik/ga-beacon 을 사용하면 된다. 이미 임의의 블로그를 통해 잘 만들어 두었다. 사용방법은 “https://ga-beacon.appspot.com/UA-00000000-0/PageName” 이렇게 Readme 페이지에 넣기만 하면 된다.

 

좀 더 상세히 설명하자면..

 

  1. 구글 애널리틱스에서 새로운 계정이나 속성 만들기.

새로운 속성을 추가할때 분석할 웹사이트 URL에 https://ga-beacon.appspot.com/로 설정한다.

2. Github의 분석하고 싶은 프로젝트의 README.md파일을 편집하여 다음과 같은 마크다운 코드를 넣는다.

[![Analytics](https://ga-beacon.appspot.com/UA-00000000-0/애널리틱스에서 기록한 페이지명)](https://github.com/분석하고 싶은 계정/프로젝트 위치)

ex) [![Analytics](https://ga-beacon.appspot.com/UA-00000000-1/Android-ParallaxHeaderViewPager/readme)](https://github.com/kmshack/Android-ParallaxHeaderViewPager)

 

편집을 하고 첫화면을 보게되면 아래와 같이 구글 애널리틱스 아이콘이 보인다. 정상적으로 페이지가 호출 되었다는 뜻이고 분석이 되고 있음을 의미한다.

 

 

  1. 구글애널리틱스 계정관리 화면에서 실시간으로 페이지 유입사용자가 보이게 된다.

 

 

 

Readme 화면에 애널리틱스 아이콘을 보이고 싶지 않다면 pixel을 붙이면 된다.

Analytics

 

이렇게 정말 간단하게 GitHub에서 구글 애널리틱스를 붙일 수 있으니 활용해보자!