Google Analytics（分析）服务器端授权可获取“页面浏览量”分析数据并将其显示在首页上的随机访问者中

Question

如何显示访问者人数到您的网页，而无需像Google Analytics（分析）那样登录或进行身份验证？

我正在尝试实施Google Analytics（分析）服务器端授权以获取“页面浏览量”分析数据并将其显示在首页上的随机访问者中

我阅读了他们的文档并找到了服务帐户，但问题是没有完整的示例以JavaScript编写。

我尝试了这种实现。 但是，googleServiceAccountKey中没有client_email。 在哪里可以获得client_email？ 请共享hwo以对node.js进行服务器端授权+反应应用程序！ 谢谢

import google from 'googleapis'
import googleServiceAccountKey from '/path/to/private/google-service-account-private-key.json' // see docs on how to generate a service account

const googleJWTClient = new google.auth.JWT(
  googleServiceAccountKey.client_email,
  null,
  googleServiceAccountKey.private_key,
  ['https://www.googleapis.com/auth/analytics.readonly'], // You may need to specify scopes other than analytics
  null,
)

googleJWTClient.authorize((error, access_token) => {
   if (error) {
      return console.error("Couldn't get access token", e)
   }
   // ... access_token ready to use to fetch data and return to client
   // even serve access_token back to client for use in `gapi.analytics.auth.authorize`
})

我尝试了带有身份验证按钮的示例，但我不希望用户必须进行身份验证才能查看页面浏览量。 https://developers.google.com/analytics/devguides/reporting/core/v4/quickstart/web-js

/ *非Google Analytics（分析）API * / https://www.freevisitorcounters.com/一个示例，该示例计数每次用户刷新错误实施页面的时间。 http://javascriptexample.blogspot.de/2008/09/visit-counter.html

有谁知道如何做到这一点？ 或者也欢迎其他库或解决方案。

提前致谢！

Answer 1

我今天才找到一个解决方案，实际上无需显示即可显示数据。

Google有一个称为Data Studio的工具。
https://datastudio.google.com/

您可以将此链接到您的Google Analytics（分析）帐户。
创建帐户后，您将构建一个仪表板以向用户呈现图形表和图表或您想要的内容。
轻松单击和拖动。
然后，您可以单击嵌入按钮，并获取添加到网页的html代码。
这是一个简单的ifram标签。

这是我今天制作的仪表板，大约花了20至30分钟。
http://www.hoppvader.nu/Data.php

我认为，这比身份验证和使用Json字符串构建自己的仪表板要简单得多。

---

编辑：我现在注意到仪表板显示为私人。
您可以通过转到Google数据工作室的主屏幕来解决此问题。
单击要公开的仪表板上的菜单按钮。
单击共享。
高级。
单击“谁有权访问”上的更改，然后将其更改为公开并保存。

如果仍然无法使用，则可能是Google Analytics（分析）中的数据需要用户身份验证。

转到Google Data Studio的主屏幕，然后单击左侧菜单中的“数据源”。
点击Google Analytics（分析）中的数据源。
确保将其设置为右上角的“使用所有者凭证”。

Answer 2

为了在网站上显示计数以及其他组件（例如图表），可以使用Embed API。

第1步-加载库

<script>
 (function(w,d,s,g,js,fs){
 g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f) . 
 {this.q.push(f);}};
 js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
 js.src='https://apis.google.com/js/platform.js';
 fs.parentNode.insertBefore(js,fs);js.onload=function() . 
 {g.load('analytics');};
 }(window,document,'script'));
</script>

第2步-添加HTML容器来托管仪表板组件。

<div id="embed-api-auth-container"></div>
<div id="chart-container"></div>
<div id="view-selector-container"></div>

第3步-编写仪表板代码

<script>

gapi.analytics.ready(function() {

/**
* Authorize the user immediately if the user has already granted 
access.
* If no access has been created, render an authorize button inside the
* element with the ID "embed-api-auth-container".
*/
gapi.analytics.auth.authorize({
 container: 'embed-api-auth-container',
 clientid: 'REPLACE WITH YOUR CLIENT ID'
});


/**
 * Create a new ViewSelector instance to be rendered inside of an
 * element with the id "view-selector-container".
 */
var viewSelector = new gapi.analytics.ViewSelector({
 container: 'view-selector-container'
});

// Render the view selector to the page.
viewSelector.execute();


/**
* Create a new DataChart instance with the given query parameters
* and Google chart options. It will be rendered inside an element
* with the id "chart-container".
*/
var dataChart = new gapi.analytics.googleCharts.DataChart({
 query: {
  metrics: 'ga:sessions',
  dimensions: 'ga:date',
  'start-date': '30daysAgo',
  'end-date': 'yesterday'
 },
 chart: {
  container: 'chart-container',
  type: 'LINE',
  options: {
    width: '100%'
  }
 }
});


/**
* Render the dataChart on the page whenever a new view is selected.
*/
viewSelector.on('change', function(ids) {
 dataChart.set({query: {ids: ids}}).execute();
});

});
</script>

有关更多详细信息，请参见链接： https : //ga-dev-tools.appspot.com/embed-api/basic-dashboard/