谷歌分析嵌入 API 演示不工作答案

【问题标题】：Google Anlaytics Embed API demo not working谷歌分析嵌入 API 演示不工作
【发布时间】：2017-10-24 15:14:51
【问题描述】：

我按照以下网站中的步骤操作：https://developers.google.com/analytics/devguides/reporting/embed/v1/devguide#client-id

当我执行下面的代码时，我在控制台中收到错误消息当我创建我的客户端 ID 时，我在我的 Javascript 域中维护了“localhost”。你能建议吗？谢谢

<!DOCTYPE html>
<html>
<head>
  <title>Embed API Demo</title>
</head>
<body>

<!-- Step 1: Create the containing elements. -->

<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>

<!-- Step 2: Load the library. -->

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

<script>
gapi.analytics.ready(function() {

  // Step 3: Authorize the user.

  var CLIENT_ID = 'XXXXXXXX';


  gapi.analytics.auth.authorize({
    container: 'auth-button',
    clientid: CLIENT_ID,
  });

  // Step 4: Create the view selector.

  var viewSelector = new gapi.analytics.ViewSelector({
    container: 'view-selector'
  });

  // Step 5: Create the timeline chart.

  var timeline = new gapi.analytics.googleCharts.DataChart({
    reportType: 'ga',
    query: {
      'dimensions': 'ga:date',
      'metrics': 'ga:sessions',
      'start-date': '30daysAgo',
      'end-date': 'yesterday',
    },
    chart: {
      type: 'LINE',
      container: 'timeline'
    }
  });

  // Step 6: Hook up the components to work together.

  gapi.analytics.auth.on('success', function(response) {
    viewSelector.execute();
  });

  viewSelector.on('change', function(ids) {
    var newIds = {
      query: {
        ids: ids
      }
    }
    timeline.set(newIds).execute();
  });
});
</script>
</body>
</html>

Object {error: Object}
error: Object
errors: Array[1]
0: Object
message: "immediate_failed"
reason: "invalidParameter"
__proto__: Object
length: 1
__proto__: Array[0]
message: "immediate_failed"
__proto__: Object
__proto__: Object
 cb=gapi.loaded_0:433
_.nH cb=gapi.loaded_0:433
_.du.Vh cb=gapi.loaded_0:459
YP.Ka cb=gapi.loaded_0:466
_.k.iu cb=gapi.loaded_0:291
ix cb=gapi.loaded_0:431
(anonymous function) cb=gapi.loaded_0:433
h.BE cb=gapi.loaded_0:137
Wq cb=gapi.loaded_0:140
_.C.ye cb=gapi.loaded_0:140
Ap

【问题讨论】：

你上传到服务器了吗？如果可以，请提供链接吗？
您是否也指定了端口？对于每个客户端 ID，您只需指定一个主机和端口。 IE。你不能只说http:/localhost，你必须说http://localhost:8080（或你选择的任何端口号）。
是的，我添加了端口 8080。将项目部署在我的本地 tomcat 服务器上，它给出了同样的错误。我已确保 Analytics API 已“开启”且客户端 ID 正确。感谢您的回复。如果您有任何建议，请告知。谢谢
@PhilipWalton 为什么有人不能只使用http://localhost？我找不到关于这一点的任何文档，并且本地主机上的身份验证似乎确实不起作用......
@MDT 据我所知，起源需要完全匹配。 origin 包括协议、主机名和端口。请注意，如果您使用协议的默认端口并且在请求 location.origin 时未显示任何端口，则无需指定端口。但在 localhost 上通常不是这种情况。

标签： google-analytics

【解决方案1】：

您的服务器或您的客户端 ID 来源一定有问题。

将该代码完全复制并粘贴到 jsbin.com 中（仅更改客户端 ID），我可以让它工作。我所要做的就是将 http://run.jsbin.com 添加到我提供的客户 ID 的已批准来源列表中。

这是一个工作示例：
http://jsbin.com/batexelohuve/1/edit

如果您将http://run.jsbin.com 添加到您的客户端 ID 的来源列表中并且它在 jsbin 中有效，那么这意味着您的设置有问题，而不是您提供的代码。

【讨论】：

生成的 ClientID 似乎有问题，因为即使我创建了一个与您提到的具有完全相同的批准来源的新客户端，它仍然无法在 jsbin 站点上运行。感谢您的回复。任何线索为什么我的客户 ID 不起作用？这就是我所拥有的：541933319551-iodkf5q87ppr9btbb222gumnehs9smqp.apps.googleusercontent.com-->客户端 ID，run.jsbin.com/oauth2callback 作为重定向，run.jsbin.com 作为批准的来源。这就是我得到的。想知道为什么它不适用于此客户端 ID？非常感谢您的快速回复。
我还想补充一点，我观察到的是它会用“Google Analytics”栏显示输出，当我点击它时，它会显示：401。这是一个错误。在激活 Analytics API 后，我创建了一个新项目，然后创建了一个新的客户端 ID，但仍然没有运气。错误：invalid_client 没有应用程序名称请求详细信息

【解决方案2】：

生成您的客户 ID 后，将其复制并粘贴到您的代码中，并将您的代码保存为 .html 而不是 .php。对于 localhost，通常写成http://localhost 就足够了。除非您指定了某个端口，否则您可能想要更改它。否则，通常的会做。要知道您的计算机正在侦听哪个端口，请访问您的httpd.conf 文件并找到listen 命令。

要补充，请不要忘记在写ID时加上``符号。

希望能帮助您解决问题！

【讨论】：

【解决方案3】：

我认为您需要在代码中导入 JavaScript API。试试这个：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>

【讨论】：

【解决方案4】：

您必须正确指定 Origin uri 和 Authorized uri，例如，如果您在 http://localhost:8080 中运行演示，那么您已经在 Origin URI 和 Authorized URI 中添加了这个 url，那么您将在浏览器中获得一个访问按钮。

【讨论】：