Google Analytics api 사용하여 계정 통계 한번에 보기

Google Analytics를 사용해서
여러 site의 통계를 매일 확인 하다보면 좀 귀찮습니다.

한페이지에서 한번에 보고 싶은게 당연한데요.

역시나 Google에서는 Open API를 제공하고 있어서
그냥 자신이 보고싶은 통계들을 뽑아서 볼 수 있습니다.
 

[Google Analytics API를 사용해서 할 수 있는 것들]

: https://developers.google.com/analytics/devguides/config/mgmt/v3/#intro

• List all the Account, Property and View (Profile) information for a user.
• Manage Properties, Views (Profiles), and Goals.
• Manage user permissions for an account hierarchy.
• Retrieve a View (Profile) ID to use with the Core Reporting API.
• Determine which goals are active and access their configured names.
• Retrieve a user's Custom Segments to apply them to Core Reporting API queries.
• Upload cost data to Google Analytics for non-Google paid campaigns.
• Manage Content Experiments.
• Manage Unsampled Reports.
• Manage Filters and the links between Filters and Views (Profiles).
• Manage Links between Analytics properties and AdWords accounts.

간단한 인증과 쉬운 구현을 위해
JavaScript API를 사용해서 페이지를 만들고자 하며
GA의 JavaScript API에 대해서는 다음 링크에서 자세히 알려주고 있습니다.

[JavaScript Quick start]

: https://developers.google.com/analytics/devguides/config/mgmt/v3/quickstart/web-js


* 기존 GA에 등록된 사이트(계정/property, 보기/view)가 하나라도 있어야 합니다.


간단히 정리하면 

Step 1. Enable the Analytics API
(GA API를 사용하기 위한 사용자 인증 정보 생성하기)

 : GA API를 사용하기 위해서 사용자 인증 정보를 생성해서 인증하여 API를 사용해야 합니다.

- Google Developers Console에서 Credentials page 링크를 들어가서 새로운 project를 생성합니다.

- Client ID 생성하기
 . 프로젝트 생성 후 "API 사용자 인증 정보" 창이 뜹니다.
 . 아래 "사용자 인증 정보 추가"를 눌러 "OAuth 2.0 클라이언트 ID 선택"
 . "클라이언트 ID 만들기" 창에서 아래 "동의 화면 구성"을 눌러 인증 시 표시될 이름 입력
 . 애플리케이션 유형은 "웹 애플리케이션"
 . 승인된 자바스크립트 원본은 "http://localhost:8080"
 . 승인된 리디렉션 URI는 "http://localhost:8080/oauth2callback"
 . "생성"

* 여기서는 샘플 어플리케이션을 localhost에서 8080번 포트의 웹서버에서 실행하는 지라 위에 처럼 자바스크립트 원본을 localhost:8080으로 입력 했는데 각자 아래에서 나올 샘플을 실행하실 서버 설정에 따라서 자바스크립트 원본의 domain, port, 리디렉션 URI의 port를 변경하셔야 합니다.

* 생성 후에는 클라이언트 ID를 잘 저장해 두세요. 샘플에서 인증 시 필요합니다.

Step 2. Setup the sample (샘플 코드 복붙)

GA 페이지에서 제공하는 샘플코드을 저장하시고
코드 중 var CLIENT_ID = '<YOUR_CLIENT_ID>' 에서 <>부분에 위에서 저장하신 클라이언트 ID를 붙붙으로 변경해 주시면 됩니다.

샘플 코드는 사용자의 GA에 등록된 첫번째 계정의
일주일 전부터 오늘까지의 세션 수를 요청하여
json format의 결과를 textarea에서 간단하게 보여줍니다.

Step 3. Run the sample 

코드를 서버에 올리시고 브라우저에서 실행 하세요.
처음에는 인증이 필요하니 버튼을 눌러 인증 하시면
GA에 등록된 계정과 뷰를 가져와서 보여줍니다.


간단하죠?


여러 계정의 통계를 보고자 할 경우
여기서 좀 더 추가하셔야 할 것들은

통계를 확인 하고자 하는 계정들의 id를 확인하고
보여주고자 하는 metric, dimensions, sort를 정하고
query 결과를 parsing하여 숫자나, 그래프로 보여 주면 됩니다.

여러 계정의 통계들을 보려면
어쩔 수 없이 여러번 API를 호출해서 확인해야하므로
사용하고자 하는 API에 대한 제약을 아래 API Limits and Quotas에서 꼭 확인하세요.
 : https://developers.google.com/analytics/devguides/config/mgmt/v3/limits-quotas

실제 Query시 결과를 보거나 matric,dimension을 변경하면서 테스트 하시려면 
아래 Query Explorer를 사용하시면 됩니다.

Query Explorer
: https://ga-dev-tools.appspot.com/query-explorer/


아래는 계정의 어제 국가별 방문 현황을 가져오는 sample function 입니다.

function query_country(id, gacode, tagid){

    gapi.client.analytics.data.ga.get({
        'ids': gacode,
        'start-date': 'yesterday',
        'end-date': 'yesterday',
        'metrics': 'ga:sessions',
        'dimensions' : 'ga:country',
        'sort' : '-ga:sessions'
    })
    .then(function(response) {           
        set_table_content("Country", response.result.rows, $("#" + tagid));           
    })
    .then(null, function(err) {
        $("#modal-content").text("일부 데이터를 불러오는 중에 에러가 발생했습니다.");
        console.log(err);
    });
}