【GA】Google Analytics API 表格顯示

上一篇如下圖我們用google API把數字都匯出了，我們是用官方的code稍作改寫而已，接下來就是自訂視覺化的部分了

Hello Analytics Reporting API V4

demotable

【GA】Google Analytics API 嘗試 ClientID, Publish等問題除錯

搞死人的前置作業

前置：申請一個Blogger_如果你有自己的網址可以跳過這步驟，這是為了後續發布的限制

1. 點我前往申請Blogger
   
2. 按【建立】，隨意的取個名字後就可以按【開始使用blogger】
   
3. 按【建立新網誌】，
   
4. 取名字然後網址可以測試一個你喜歡的網址然後按【建立網誌】，你就有一個自己的部落格了～
   以後只要登入blogger左上角可以選擇網誌，以及檢視網誌
   
5. 左邊選單【設定】>【其他】>【GA分析】填入資源層的ID(UA-xxxxxxxx-x)>去GA設定追蹤網址
   

前置：申請GA_如果你有自己的網址並且有串連GA可以跳過這步驟，這是為了讓你有資料可以跑

1. 點我前往申請GA
   
2. 按【申請】
   
3. 隨意的為帳戶名稱命名一下
   
4. 選擇追蹤【網頁】
   
5. 為資源隨意命名一下，填入【網站網址】並選【https】，選一個【產業類別】（p.s.GA的資料層級最上層是帳戶，帳戶下面有資源，資源下面有資料檢視）
   
6. 按下【建立】，並【同意服務條款】
   
7. 如圖選擇【追蹤資訊】，選【追蹤程式碼】，如果沒有跳出頁面，那就按【左下角齒輪】，中間資源層下面的【追蹤資訊】，選【追蹤程式碼】
   
   
8. 把追蹤ID(UA-xxxxxxxx-x)填回Blogger【設定】>【GA分析】填入，上面申請一個Blogger的步驟五
   
9. 開一個無痕視窗去blogger前台，同時再開一個頁籤回去GA的首頁（左側邊欄的【首頁】）看有沒有即時資料
   
   

搞死人的ClientID及API設定

1. 前往設定專案【登入】然後選取地區跟同意Cloud Platform服務條款
   
2. 如果有專案:左上角的GoogleAPIs右邊有【箭頭】可以選取專案。如果沒有專案要先建立專案，按畫面中的【建立】，
   
   簡單的打一個名稱，【機構】選無機構即可
   
   
   
3. 左邊側欄先去OAuth同意畫面幫【應用程式名稱】先打上去，已授權網域填入Blogger網域（medicaltw.blogspot.com)要按一下Enter再按儲存，可以重新整理檢查一下是否有加入，一開始做的時候很常沒有授權都要再回來檢查。
   
   
   
4. 前往專案憑證頁面或是選取專案以後按左側欄的【憑證】，再選【建立憑證】
   
   選擇建立【網路應用程式】，一樣幫他命名一下，已授權的javascript來源(Authorized JavaScript origins)欄位填入網域（https://medicaltw.blogspot.com）一樣按一下enter就可以按建立了，還是一樣要重新整理檢查一下
   
   
   
5. 左上角按【選單icon】>【API和服務】>【資訊主頁】
   
   
   >按首頁中的【啟用API和服務】
   
   
   查找【Google Analytics Reporting API】，選取後按啟用
   
   
   
6. 回blogger按【新文章】，工具欄按一下【HTML】轉換編輯模式，貼入下面前端程式碼
   
   
7. 程式碼中的用戶端ID改成第三步驟中用戶端ID，找不到的話，回到資訊主頁按左邊的【憑證】就會看到用戶端ID
   
   
   
8. 程式碼中的GA資料檢視層的ID要改成GA資料檢視層的id如圖，或是網址列的最後九碼，例如https://analytics.google.com/analytics/web/provision/#/report-home/a151335600w214200719p205041973最後面的205041973
   
   
   
9. 發布文章
   
10. 開新的無痕視窗試試看是否成功，我試了幾次因為有cashe，最後換無痕視窗就成功了。

前端程式碼

<meta name="google-signin-client_id" content="用戶端ID">
<!--等於後面要換成用戶端ID剛剛新增的-->
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/analytics.readonly">

<h1>Hello Analytics Reporting API V4</h1>

<!-- The Sign-in button. This will run `queryReports()` on success. -->
<p class="g-signin2" data-onsuccess="queryReports"></p>

<!-- The API response will be printed here. -->
<textarea cols="80" rows="20" id="query-output"></textarea>

<script>
// VIEW_ID要填GA資料檢視層的id
var VIEW_ID = 'GA資料檢視層的ID';

// Query the API and print the results to the page.
function queryReports() {
gapi.client.request({
path: '/v4/reports:batchGet',
root: 'https://analyticsreporting.googleapis.com/',
method: 'POST',
body: {
reportRequests: [
{
viewId: VIEW_ID,
dateRanges: [
{
startDate: '7daysAgo',
endDate: 'today'
}
],
metrics: [
{
expression: 'ga:sessions'
}
]
}
]
}
}).then(displayResults, console.error.bind(console));
}

function displayResults(response) {
var formattedJson = JSON.stringify(response.result, null, 2);
document.getElementById('query-output').value = formattedJson;
}
</script>

<!-- Load the JavaScript API client and Sign-in library. -->
<script src="https://apis.google.com/js/client:platform.js"></script>

成果展示

登入以後顯示

Hello Analytics Reporting API V4