Gracefullight

Web.dev

Google Analytics Javascript API 사용하기

작성일 Edited on In , Disqus:

GA Client JS API

문서가 있는데 생각보다 사용하기가 어렵다. 하나하나 시작해보자.

인증 토큰 발급

Cridentials page에서 Create credentials 를 눌러 OAuth Client ID 를 발급받는다.

예제

받은 Client ID 를 메타태그에 넣어준다.

example
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello Analytics Reporting API V4</title>
  <meta name="google-signin-client_id" content="OAuth 2.0 Client ID">
  <meta name="google-signin-scope" content="https://www.googleapis.com/auth/analytics.readonly">
</head>
<body>
<h1>Analytics Reporting API V4</h1>
<p>
  <div class="g-signin2" data-onsuccess="queryReports"></div>
</p>

<!-- The API response will be printed here. -->
<textarea cols="80" rows="20" id="query-output"></textarea>

<script>
  // Replace with your view ID.
  var VIEW_ID = '136416454';

  // Query the API and print the results to the page.
  function queryReports() {
    gapi.client.request({
      path: '/v4/reports:batchGet',
      root: 'https://analyticsreporting.googleapis.com/',
      method: 'POST',
      body: {
        reportRequests: [
          {
            viewId: VIEW_ID,
            dateRanges: [
              {
                startDate: '7daysAgo',
                endDate: '6daysAgo'
              }
            ],
            metrics: [
              {
                expression: 'ga:sessions'
              }
            ]
          }
        ]
      }
    }).then(function (response) {
      var formattedJson = JSON.stringify(response.result, null, 2);
      document.getElementById('query-output').value = formattedJson;
    }, console.error.bind(console));
  }
</script>
<script src="https://apis.google.com/js/client:platform.js"></script>
</body>
</html>

파라미터 확인

문서의 내용을 확인하기 보다 Query Explorer에서 테스트 후에 그 값들을 Body 로 옮겨 적는 게 확인하기 쉽다.