Analytics Reporting API v4 入门:适用于网络应用的 JavaScript 快速入门

本教程详细介绍了访问 Analytics Reporting API v4 所需的步骤。

1. 启用 API

要开始使用 Analytics Reporting API V4,需要先使用设置工具,该工具会引导您在 Google API 控制台中创建项目、启用 API 以及创建凭据。

注意:要创建网络客户端 ID 或已安装的应用客户端,您需要在同意屏幕中设置产品名称。如果您尚未设置,则系统会提示您配置同意屏幕

创建凭据

  • 打开“凭据”页面
  • 点击创建凭据并选择 OAuth 客户端 ID
  • 对于应用类型,选择网络应用
  • 将客户端 ID 命名为 quickstart,然后点击创建
  • 将“已获授权的 JavaScript 来源”设置为 http://localhost:8080
  • 点击创建

2. 设置示例

您需要创建一个名为 HelloAnalytics.html 的文件,其中包括作为我们示例的 HTML 和 JavaScript 代码。

  • 将以下源代码复制或下载HelloAnalytics.html 中。
  • <REPLACE_WITH_CLIENT_ID> 替换为上面创建的客户端 ID。
  • <REPLACE_WITH_VIEW_ID> 替换为数据视图 ID。可以从帐号浏览器中获取数据视图 ID。
<!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>

<!-- The Sign-in button. This will run `queryReports()` on success. -->
<p class="g-signin2" data-onsuccess="queryReports"></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 Analytics(分析)的权限。

当您完成这些步骤后,示例代码就会输出给定数据视图过去 7 天内的会话数。