谷歌分析圖表的JavaScript

早安。我是JavaScript的新手，我想我想做的事很容易，但我不知道如何。谷歌分析圖表的JavaScript

我想提請谷歌分析圖表，以顯示自己的儀表板。我的代碼工作，但我有幾個網站註冊，並始終顯示我相同的默認值，除非我手動更改（該字段被稱爲屬性）。我想默認的網站是另一個。

這裏是我的代碼（我已經改變了客戶端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>

任何人可以幫助我呢？在此先感謝

來源

2015-04-01 Josto90

這麼多，如果你知道該視圖的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' 
    } 
    } 
});

您只需將'ga:XXXXXXX'替換爲要顯示的視圖的參數ids即可。

如果您不知道ids參數，您可以使用Google Analytics Account Explorer工具找到它。

來源

2015-04-01 17:00:28

非常感謝你的幫助菲利普。它現在有效！ – Josto90 2015-04-06 10:31:20

太棒了！如果它對你有用，那麼你應該將答案標記爲已接受，所以其他具有相同問題的人可以受益。 – 2015-04-06 14:58:46

我喜歡Query explorer它會給你的帳戶ID以及其他參數。你可以測試看看它是否會返回你所期望的。

來源

2015-04-01 17:17:43 Rothrock

非常感謝你的幫助羅斯洛克。它是一個偉大的工具。現在，我可以找到我想要使用的指標。 – Josto90 2015-04-06 10:32:44

谷歌分析圖表的JavaScript

回答

相關問題