[개발자모드] Hello Analytics - Google Analytics API 사용법 / Javascript

Hello Analytics - A quickstart guide for JavaScript

[개발자모드] Hello Analytics - Google Analytics API 사용법 / Javascript


Google analytics(이하 GA) 를 사용할 때, 

데이터를 수작업으로 한땀~ 한땀~ 다운로드 받아야 되는 문제가 있습니다.






물론...

나는 DB 다운로드는 안 써도 돼!!!!!!!!!!
혹은, 우리 회사의 페이지만 관리하면 된다.

라고 하시는 분들은 굳이 활용하지 않아도 되는 기능이지만...


저처럼 데이터를 처리하고 재가공 해서 분석을 해야하는 입장에서는

한정된 dimension / metrics 만 제공해 주는 GA Data를 다운로드 받아서

확장하는 작업이 꼭 필요합니다. 


이런 경우 Google analytics API 를 활용하여 대량의 데이터를 처리하고, 

새로운 Dashboard를 만드는 것이 가능합니다.





저는 주로 python을 활용해서 작업을 했었는데, 
(개발자가 아니에요... 마케팅하고 약간의 개발까지 하는 (직무는) Data-analyst 입니다.)

오늘은 먼저 간단하게 Javascript 를 활용하는 방법을 말씀드리겠습니다.
잘 모르셔도 화면을 보고 잘 따라해 주시면 됩니다!

1. Client ID 생성하고 권한(OAuth ID) 부여하기

구글에서 제시하는 다음의 가이드를 따라서 해보겠습니다.

튜토리얼: https://developers.google.com/analytics/devguides/reporting/core/v3/quickstart/web-js#setup
              ↓↓↓↓↓↓↓↓↓↓↓↓↓↓






구글 API 콘솔 바로가기: https://console.developers.google.com/apis



로그인을 하시고, 아래의 페이지에서 프로젝트 리스트가 있는 곳을 클릭해 줍니다.

 






API 사용자 인증 정보를 만들어야 합니다..

보안은 소중하니까요 ㅎㅎㅎㅎ







▼ 따라해주세요~









프로젝트 이름을 적고 만들기를 누릅니다.


저는 예시로 웹브라우저를 선택했습니다~



▼ ▼ ▼




편의상 localhost로 지정해 주었는데 Host정보가 있으신 분들은 넣어주세요~


URL은 둘 중 하나만 입력하시면 됩니다!






인증해 주세요 ㅋㅋㅋ






프로젝트를 다 만든 후에도 사용자 정보 JSON파일을 다운로드 받을 수 있습니다.


하지만 저는 그냥 다운 받을게요 ㅋㅋㅋ



끝! 

수고하셨습니다.






파란색으로 가린 부분의 클라이언트 ID는 나중에 쓸 곳이 많습니다 ㅎㅎㅎㅎ



사실 안끝났습니다...

실행까지 시켜 봐야합니다 ㅎㅎ

2. 설치가이드에서 HelloAnalytics 파일을 다운로드 받습니다

'<YOUR_CLIENT_ID>' 위에 있던 파란색 부분의 ID 를 내 client ID 로 바꿔줍니다

WAS 나 다른 서버를 활용하여 localhost에 접속해 주세요. 
(↑이건 다음에 다시 다루겠습니다. 유투브를 참고해주세요~ㅠㅠ)

그리고 파일을 실행시키면 아래처럼 Hello Analytics 창이 나옵니다!

 




Hello Analytics







추가로 api를 활용해서 실시간 데이터를 업데이트 시킨다든지, 


홈페이지에 삽입하는 형태로 활용하기 위해서는


다른 노력이 필요합니다 


갈길이 험난한 여정이에요 ㅎㅎ 


그것도 천천히 이야기 하겠습니다




그럼 저는 이만 총총...


진짜 끝!


감사합니다



Google Analytics 에서 Users란?


Cookie Monster Cookies from @KatrinasKitchen at www.inkatrinaskitchen.com




Google Analytics 에서 Users란?

(How Google Analytics Uses Cookies To Identify Users) 참조






Cookies 란 무엇인가?


쿠키는 컴퓨터에 저장된 브라우저의 기록을 담은 정보입니다. 


쿠키는 브라우저마다 각각 따로 저장되기 때문에 chrome이나 explorer는 서로 다른 쿠키값을 갖고 있죠.


예를들면 저는, Explorer으로 은행관련 업무를 보기때문에 그쪽에서는 은행사이트 쿠키가 많이 있지만


크롬에서는 은행/카드 사이트 근처에도 안가기 때문에 (설치파일 무서워요 ㅋㅋㅋㅋ)


Chrome에는 관련 쿠키가 쌓이지 않습니다.




Google Analytics 추적코드(tracking script)를 보시면


 중요한 web 정보를 가져오기 위해서 쿠키를 사용합니다.


 유저를 식별하기 위한 쿠키는, 처음 web site에 접속했을 때 생성되며






_ga 쿠키 = 고객식별 ID 



라고 간단하게 이해 할 수 있습니다. 



여기서 고객식별 ID는, 회원가입 > 로그인  할 때 만든 개인정보

가 들어간 Id가 아님


_ga 에서 기본(default) 차원(dimension)에 나타나는 '사용자(users)' 수를 집계하는데 사용되는 Id입니다.






_ga user Id   :    GA*.*.*********.***********







예를 들면, skyblueiu.tistory.com  주소를 chrome 브라우저로 한 번 방문 했을 때, 


_ga 에서는 user id를 쿠키에 생성하고 저장해 둡니다. 


그 뒤 다시 chrome 으로 skyblueiu.tistory.com 를 방문하시더라도 이미 기존에 user id가 있기 때문에


new visitor 가 아닌 return visitor로 인식을 하게 됩니다~


단, Explorer 로 들어오거나 firefox로  skyblueiu.tistory.com 를 방문하게 되면


새로운 쿠키에서 새로운 '_ga ID 값' 을 생성하기 때문에 new visitor(신규방문자)로 인식됩니다.










쿠키(cookies)의 한계


도구 > 브라우저 쿠키 삭제 를 할 경우에는 


새로운 _ga Id를 생성하기 때문에 New User로 인식합니다. ㅠㅠ


이를 막기위해 "회원"으로 "로그인" 한 유저의 UserId 를 추적하는 방법을 열심히 공부해서 


완전히 숙지하면 남겨 보겠습니다 ㅋㅋㅋ 





구글 태그매니저(Google Tag Manager) 시작하기

구글에서 열심히 공부해서 활용하라고 


태그매니저도 강의를 해줍니다



태그매니저가 무엇인지 궁금하신 분들은


구글이 잘 정리해 준 안내서가 있으니,


우선 아래의 페이지 부터 읽어봅시다.


↓↓↓↓↓↓↓↓↓↓↓↓


https://support.google.com/tagmanager/answer/6102821?hl=ko&visit_id=1-636494369136063815-2774077839&rd=1



컨셉을 먼저 좀 설명듣고 싶어!


라고 생각하시는 분은 구글에서 제공하는 


Google Tag Manager Fundamentals 영상을 보고, Google Academy를 활용하시면


태그매니저 입문용 공부로 충분하다고 생각됩니다.



↓↓↓↓↓↓↓↓↓↓↓↓











◀ PREV 1234 NEXT ▶