JavaScript中的Google Analytics（分析）圖表

Question

早上好。 我是javascript的新手，我認為我想做的事很簡單，但我不知道怎么做。

我正在嘗試繪制Google Analytics（分析）圖形以顯示在自己的儀表板上。 我的代碼有效，但是我已經注冊了多個站點，除非我手動更改它，否則總是顯示相同的默認值（該字段稱為PROPERTY）。 我想要默認的網站是另一個。

這是我的代碼（我已將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>

有人可以幫我嗎？ 提前非常感謝

Answer 1

如果您知道要默認顯示的視圖的ids參數，則不需要使用視圖選擇器組件，您只需在查詢中對該值進行硬編碼即可。

例如，使用您的“ 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'
    }
  }
});

您只需要用要顯示的視圖的ids參數替換'ga:XXXXXXX' 。

如果您不知道ids參數，則可以使用Google Analytics（分析）帳戶瀏覽器工具找到它。

Answer 2

我喜歡Query Explorer ，它將為您提供帳戶ID和其他參數。 然后，您可以進行測試以查看它是否返回了您期望的結果。

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