JavaScript中的Google Analytics（分析）图表

Question

Good Morning. 早上好。 I am a newbie in javascript, and I think what I want to do is easy, but i don´t know how. 我是javascript的新手，我认为我想做的事很简单，但我不知道怎么做。

I'm trying to draw Google analytics graph to display on my own dashboard. 我正在尝试绘制Google Analytics（分析）图形以显示在自己的仪表板上。 My code works, but I have several webs registered, and always shows me the same default unless I change it manually(the field is called PROPERTY). 我的代码有效，但是我已经注册了多个站点，除非我手动更改它，否则总是显示相同的默认值（该字段称为PROPERTY）。 I would like the default web was another. 我想要默认的网站是另一个。

Here is my code (i have changed CLIENT ID to 'XXX' 这是我的代码（我已将CLIENT ID更改为“ XXX”

<html>
<head>
<title> Google Analytics Charts </title>
</head>
<body>
<p align="center"><b><u>VISITS<u> </b></p>
<!-- Step 1: Create the containing elements. -->

<section id="auth-button" hidden></section>
<section id="view-selector"></section>
<section id="timeline" class="left clear"></section>
<section id="pie" class="right"></section>
<section id="table" class="left clear"></section>
<section id="gauge" class="right"></section>

<!-- Step 1.1: CSS. -->
<style>
.left {float:left}
.right {float:right}
.clear {clear:both}
</style>

<!-- 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 = 'XXX';

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.

//Chart 1
var timeline = new gapi.analytics.googleCharts.DataChart({
reportType: 'ga',
query: {
'metrics': 'ga:users',
'dimensions': 'ga:date',
//      'start-date': '30daysAgo',
//      'start-date': '2015-03-01',
'start-date': '7daysAgo',
'end-date': 'today',
},
chart: {
  type: 'LINE',
  container: 'timeline',
  options: {
    //width: '50%', height: '50%',
    title: 'Visits per day',
    curveType: 'function'
  }
}
});

//Chart 2
var pie = new gapi.analytics.googleCharts.DataChart({
query: {
  metrics: 'ga:sessions',
  dimensions: 'ga:country',
  'start-date': '30daysAgo',
  'end-date': 'yesterday',
  'max-results': 5,
  sort: '-ga:sessions'
},
chart: {
  container: 'pie',
  type: 'PIE',
  options: {
    // width: '50%', height: '50%',
    title: 'Visits per country',
    is3D: true
  }
}
});

//Chart 3
var table= new gapi.analytics.googleCharts.DataChart({
reportType: 'ga',
query: {
//      'metrics': 'ga:users',
  'metrics': 'ga:sessions',
//      'dimensions': 'ga:hour',
  'dimensions': 'ga:date',
  'dimensions': 'ga:campaign',
//      'start-date': '30daysAgo',
//      'start-date': '2015-03-01',
  'start-date': 'today',
  'end-date': 'today',
},
chart: {
  type: 'TABLE',
  container: 'table',
  options: {
    //width: '50%', height: '50%',
    title: 'Campaign visits today',
    is3D: true
  }
}
});

//Chart 4
var gauge= new gapi.analytics.googleCharts.DataChart({
query: {
  metrics: 'ga:socialInteractions',
//     metrics: 'ga:avgTimeOnPage',
  dimensions: 'ga:socialInteractionNetwork',
  'start-date': 'today',
  'end-date': 'today',
},
chart: {
  container: 'gauge',
  type: 'TABLE',
  options: {
    title: 'Exit Pages'
  }
}
});


// 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();
pie.set(newIds).execute();
table.set(newIds).execute();
gauge.set(newIds).execute();
});
});
</script>
</body>
</html>

Can anybody help me with it? 有人可以帮我吗？ Thanks so much in advance 提前非常感谢

Answer 1

If you know the ids parameter of the view you want to show by default then you don't need to use the view selector component, you can just hardcode that value in your queries. 如果您知道要默认显示的视图的ids参数，则不需要使用视图选择器组件，您只需在查询中对该值进行硬编码即可。

For example, using your "Chart1" code: 例如，使用您的“ Chart1”代码：

// Chart 1
var timeline = new gapi.analytics.googleCharts.DataChart({
  query: {
    'ids': 'ga:XXXXXXX',
    'metrics': 'ga:users',
    'dimensions': 'ga:date',
    'start-date': '7daysAgo',
    'end-date': 'today',
  },
  chart: {
    type: 'LINE',
    container: 'timeline',
    options: {
      title: 'Visits per day',
      curveType: 'function'
    }
  }
});

You just have to replace the 'ga:XXXXXXX' with the ids parameter of the view you want to display. 您只需要用要显示的视图的ids参数替换'ga:XXXXXXX' 。

If you don't know the ids parameter, you can find it using the Google Analytics Account Explorer tool. 如果您不知道ids参数，则可以使用Google Analytics（分析）帐户浏览器工具找到它。

Answer 2

I like the Query explorer it will give you the account ids as well as other parameters. 我喜欢Query Explorer ，它将为您提供帐户ID和其他参数。 And you can test to see if it returns what you expect. 然后，您可以进行测试以查看它是否返回了您期望的结果。

JavaScript中的Google Analytics（分析）图表

问题描述

2 个解决方案

解决方案1
3 已采纳 2015-04-01 17:00:28

解决方案2
1 2015-04-01 17:17:43

JavaScript中的Google Analytics（分析）图表

问题描述

2 个解决方案

解决方案1 3 已采纳 2015-04-01 17:00:28

解决方案2 1 2015-04-01 17:17:43

解决方案1
3 已采纳 2015-04-01 17:00:28

解决方案2
1 2015-04-01 17:17:43