구글 애널리틱스 api(Google Analytics api, ga api) 연동해서 별도의 로그인 없이 그래프 만들기

반응형

구글 애널리틱스 api 연동으로 제가 소개해드릴 방법은 두가지입니다.

1. Javascript 이용해서 데이터 받아오기(따로 구글 로그인이 필요함, 로그인 버튼 둬야함)

2. Java 이용해서 데이터 받아오기(키 파일을 받아 인증하는 방식으로 로그인 안해도 됨)

 

두 가지 방법 모두 데이터를 json 형태로 받아오게 됩니다.

먼저 두 방법을 소개해드린 후에, ga에서 어떤 파라미터를 넣어야 원하는 데이터가 나오는지까지 설명해드리겠습니다.

 

 

 

1. Javascript 이용해서 데이터 받아오기

코드 참조 : https://developers.google.com/analytics/devguides/reporting/core/v4/quickstart/web-js

Hello Analytics Reporting API v4; JavaScript quickstart for web applications

 

들어가보시면 HelloAnalytics.html 이 있습니다. 코드는 들어가서 그대로 쭉 긁어서 원하는 페이지에 붙이시면 됩니다.

 

코드를 보시면 g-signin2라는 클래스가 붙은 p태그가 있는데, 이 태그가 로그인 버튼입니다. 이 버튼이 있어야지 함수가 제대로 실행이 됩니다. 그리고 data-onsuccess에 queryReports함수가 들어가는데, function queryReports()이기만 하면 다 돌아가니까 원하는 데로 queryReports를 수정하셔도 괜찮습니다.

 

중간에 Replace_with_client_id와 Replace_with_view_id가 있습니다. 이 두개를 구글 애널리틱스 api 관리 페이지에서 가져와야 합니다.

 

 

1) client id 가져오기

주소 : https://console.developers.google.com/

Google Cloud Platform

 

처음 들어가시면 동의 페이지가 뜹니다. 동의 다 누르시고 우측 상단에 프로젝트 만들기를 진행해주세요. 원하시는 대로 만드시면 됩니다.

 

후에 대시보드로 들어가시면 아무것도 뜨지 않습니다. api 서비스 사용 설정을 안해서인데요, api 서비스 사용설정 들어가셔서 Analytics를 검색합니다. 그 중 Google Analytics Reporting API를 누른 후, 사용을 클릭해줍니다. 저는 Google Analytics API도 사용승인 하긴 했습니다.

 

그리고 사용자 인증 정보 탭을 클릭하시면, OAuth 2.0 클라이언트 ID가 보입니다. 이게 우리가 가져와야 할 client Id입니다.

 

상단에 사용자 인증 정보 만들기, OAuth 클라이언트 ID를 선택해줍니다.

 

 

처음 들어가시면 동의화면 구성하라고 뜨는데, 내부 외부 차이를 잘 몰라서 외부로 만들었습니다. 이 것에 대한 것은 다른 사람들 글 확인해주세요.

다음 페이지에 이름 테스트로 설정하고 다른 것은 건드리지 않은 채 저장했습니다.

 

 

다시 사용자 인증 정보 만들기, OAuth 클라이언트 ID를 선택해줍니다.

 

 

애플리케이션 유형은 원하시는 작업물에 따라 설정해 주시면 됩니다.

 

승인된 자바스크립트 출처, 승인된 리디렉션 URI 둘 다 사용하실 페이지의 경로 다 입력해주세요. 저도 어떻게 작동하는지는 잘 모르겠습니다.

 

만들기 누르시면 클라이언트 ID를 복사하실 수 있으실겁니다.

 

 

 

 

 

2) view id 가져오기

주소 : https://analytics.google.com/

Redirecting...

 

애널리틱스 구글로 들어가줍니다. 들어가서 계정부터 만들어줍시다. 방법은 쉬우니까 따로 적지는 않겠습니다. 그냥 하라는데로 쭉쭉 진행해주세요.

 

 

마지막 완료 하고 나면 범용 사이트 태그(gtag.js)가 보입니다.

이거 복사해서 원하시는 페이지에 넣어주시고 실 서버에 올려주셔야해요. 그래야 데이터가 측정됩니다.

 

 

view id는 노란색으로 표시한 곳에 들어가야 있습니다.

 

누르면 보기ID가 있고 9자리 숫자가 보이거든요? 그게 view id입니다.

 

이렇게 두 개를 아까 replace 뭐라 써져 있던 곳에 잘 넣어줍시다.

 

 

 

 

이렇게 하고 돌려보면 textarea에 데이터가 와라락 뜹니다. 그걸 잘 정리해서 차트로 만들어주시면 됩니다. 안뜨면 말씀해주세요. 안뜨면 에러 메시지가 떠있겠죠..

 

 

 

 

2. Java 이용해서 데이터 받아오기

코드 참조 : https://developers.google.com/analytics/devguides/reporting/core/v4/quickstart/service-java

Hello Analytics Reporting API v4; Java quickstart for service accounts

 

여기 들어가면 HelloAnalyticsReporting.java가 있습니다. 다운받아서 원하시는 곳에 넣어주세요.

아마 파일을 처음 넣으면, import가 안되어가지고 빨간줄이 와라락 뜰겁니다. 저는 maven을 사용해서 pom.xml에 필요한 것들을 선언해서 해결했습니다. 

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<dependency>     <groupId>com.google.apis</groupId>     <artifactId>google-api-services-analyticsreporting</artifactId>     <version>v4-rev153-1.25.0</version> </dependency> <dependency>     <groupId>com.google.api-client</groupId>     <artifactId>google-api-client-gson</artifactId>     <version>1.30.9</version> </dependency>          <dependency>    <groupId>com.google.apis</groupId>    <artifactId>google-api-services-analytics</artifactId>    <version>v3-rev20190807-1.30.10</version> </dependency> Colored by Color Scripter

cs

 

그리고 보면, 또 Replace 뭐시기 떠잇습니다. view id는 위에서 얻었던 view id 넣어주시면 되구요. 그냥 숫자만 넣어주세요. ga: 필요없습니다.

json파일은 생성해서 가져와야합니다.

 

 

 

1) json 파일 생성하기

주소 : https://console.developers.google.com/

Google Cloud Platform

 

사용자 인증 정보 메뉴로 들어가서, 상단에 +사용자 인증 정보 만들기를 누르면 서비스 계정이란게 있습니다. 이게 우리가 이용해야할 메뉴입니다.

 

이름 정해주시고.. 선택사항들은 딱히 정할 필요 없다고 알고 있거든요? 그냥 넘어가주세요. 불안하시면 2번째 메뉴에 뷰어만 설정해주세요. 제가 그렇게 했거든요.

 

그리고 서비스 계정 클릭해서 수정으로 들어갑니다. 아래에 보시면 키라는게 있는데, 이걸 만들어줘야 합니다.

키 추가 > 새 키 만들기 > JSON 선택해주세요.

만들기 누르시면 파일이 저절로 저장됩니다. 이거 잘 간직하셔야 합니다.

 

 

이제 서비스 계정 이메일을 들고 analytics 페이지로 넘어갑니다.

 

 

주소 : https://analytics.google.com/

Redirecting...

 

아까 봤던 관리자 메뉴에서, 보기>보기 사용자 관리를 클릭해줍니다. 그리고 보기권한에 사용자를 추가해주세요.

아까 생성된 계정 이메일있죠? 이상하게 gserviceaccount뭐라뭐라 써져있는거 그거 그대로 넣어주시면 됩니다.

권한은 조회 및 분석 해주세요. 데이터 가져오기만 할거니까요.

 

 

이제 아까 잘 간직하라했던 JSON 파일 들고와서 프로젝트에 넣어줍니다. 그리고 파일 경로를 Replace_with_json_file에 넣어주시면 됩니다.

 

돌려보시면 syso로 데이터가 출력됩니다.

 

 

 

 

 

덤 : GA 파라미터에 대해

ga 보시면 뭔가 되게 복잡합니다. 매트릭스니 디멘션이니 뭐니.. 메트릭스와 디멘션이 정리되어 있는 페이지입니다.

주소 : https://ga-dev-tools.appspot.com/dimensions-metrics-explorer/

Dimensions & Metrics Explorer — Google Analytics Demos & Tools

 

들어가보시면 목록이 정말 많습니다. dimensions쪽에 써있는건 디멘션에만 사용 가능하고, metrics라 써있는건 metrics 쪽에만 사용 가능합니다.

 

코드에 입력할땐 옆에 상자에 나와있는 ga:왈라왈라 를 입력해주셔야 적용됩니다.

 

 

 

그리고 실 데이터를 돌려볼 수 있는 페이지 입니다.

주소 : https://ga-dev-tools.appspot.com/query-explorer/

Query Explorer — Google Analytics Demos & Tools

 

위에 있던 디멘션과 메트릭스들을 참고해서, 이거저거 돌려봅시다. ids에는 ga:아까가져온viewid숫자 넣어주시면 됩니다. 그러면 실제로 애널리틱스에 쌓여있는 데이터를 기반으로 가져오게 됩니다.

 

참고로 include-empty-rows true로 설정해주면 값이 0인 데이터도 받아와집니다. 차트 제대로 그리려면 이거 꼭 써야합니다.

 

 

코드에 직접 파라미터 넣어서 돌려보시기 전에, 위 페이지에서 돌려보고 제대로 된 데이터가 나오는지 안나오는지 확인하시는걸 추천드립니다.

 

 

 

 

 

 

 

이렇게 두 가지의 데이터 가져오는 방법과 ga에 대한 파라미터들을 끝냈습니다. chartjs로 그래프를 그리려면 차피 다 스크립트 단으로 가져와야 하기 때문에, 잘 어케어케 가져오시면 됩니다. javascript에서 데이터 가져올때, json이 좀 복잡하긴 한데 배열로 잘 for문 돌려서 가져와서 chartjs에 바로 넣어주면 그래프가 예쁘게 잘 나옵니다.

 

 

 

 

잘 나오네요.

 

 

 

너무 대충 쓰긴 했는데 누군가에겐 도움이 되겠지 싶어서 올립니다. 질문이나 안되는거 있으면 댓 달아주세요.

 

 

 

실제 코드 업로드 했습니다.

https://whoa0987.tistory.com/11

구글 애널리틱스 api chartjs 적용하기(실전예제)