[개발자모드] Hello Analytics - Google Analytics API 사용법 / 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를 활용해서 실시간 데이터를 업데이트 시킨다든지, 

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

다른 노력이 필요합니다 

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

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

그럼 저는 이만 총총...

진짜 끝!

감사합니다