はじめてのアナリティクス Reporting API v4: ウェブ アプリケーション向け JavaScript クイックスタート

このチュートリアルでは、アナリティクス Reporting API v4 にアクセスする手順を詳しく説明します。

1. API を有効にする

アナリティクス Reporting API v4 を利用するには、まずセットアップ ツールを使用し、Google Cloud Platform Console でのプロジェクトの作成、API の有効化、認証情報の作成を行う必要があります。

注: ウェブ クライアント ID またはインストール済みアプリケーション クライアントを作成するには、同意画面で製品名を設定する必要があります。まだ作成していない場合は、同意画面で設定を行うよう求められます。

認証情報を作成

  • [認証情報] ページを開きます。
  • [認証情報を作成] をクリックし、[OAuth クライアント ID] を選択します。
  • [アプリケーションの種類] で [ウェブ アプリケーション] を選択します。
  • クライアント ID として quickstart を指定し、[作成] をクリックします。
  • [承認済みの JavaScript 生成元] を http://localhost:8080 に設定します。
  • [作成] をクリックします。

2. サンプルをセットアップする

HelloAnalytics.html という名前のファイルを 1 つ作成し、例に示す HTML および JavaScript コードを記述する必要があります。

  • 次のソースコードをコピーするかダウンロードして、HelloAnalytics.html に記述します。
  • <REPLACE_WITH_CLIENT_ID> を上で作成したクライアント ID に置き換えます。
  • <REPLACE_WITH_VIEW_ID> を上で作成したビュー ID に置き換えます。ビュー ID は、Account Explorer から取得できます。
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Hello Analytics Reporting API V4</title>
  <meta name="google-signin-client_id" content="<REPLACE_WITH_CLIENT_ID>">
  <meta name="google-signin-scope" content="https://www.googleapis.com/auth/analytics.readonly">
</head>
<body>

<h1>Hello Analytics Reporting API V4</h1>

<p>
  <!-- The Sign-in button. This will run `queryReports()` on success. -->
  <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 = '<REPLACE_WITH_VIEW_ID>';

  // 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: 'today'
              }
            ],
            metrics: [
              {
                expression: 'ga:sessions'
              }
            ]
          }
        ]
      }
    }).then(displayResults, console.error.bind(console));
  }

  function displayResults(response) {
    var formattedJson = JSON.stringify(response.result, null, 2);
    document.getElementById('query-output').value = formattedJson;
  }
</script>

<!-- Load the JavaScript API client and Sign-in library. -->
<script src="https://apis.google.com/js/client:platform.js"></script>

</body>
</html>

3: サンプルを実行する

  • HelloAnalytics.html をウェブサーバーで公開して、ページをブラウザで読み込みます。
  • [ログイン] ボタンをクリックして、Google アナリティクスへのアクセスを承認します。

以上の手順が完了すると、サンプルコードによって、指定されたビューの過去 7 日間のセッション数が出力されます。