首頁 找課程 認證課程 Google Analytics 個人認證 GA API 資料圖表客製不求人-Demos & Tools

GA API 資料圖表客製不求人-Demos & Tools

2016年紀念性的第一篇,來講講一個跟 GA 處理資料有關的工具吧!
Google analytics 可以提供各方面的數據,想當然利用這些數據處理報表就是需要煩惱的事了!一般來說最基本的方法當然就是將數據下載下來另外處理資料。我們在訪客時間圖表 這篇文即是這樣處理。
當然如果懂程式的話,Google 官方也有開放 API,進行資料處理也方便很多。

Google 官方提供了 Demos & Tools 這個工具網站,
簡單來說它告訴你你可以利用 GA 的 Embed API 在網站以及其它應用程式上利用 GA 資料進行圖表以及數據的擷取。
這個網站主要是介紹圖表以及 Dashboard 的處理,你可以在你的網站上做出一個你自己的 GA 資料圖表:

GA Demos & Tools Dashboard

網站上針對圖表與 Dashboard 總共有 Basic Dashboard, Multiple View, Interactive Charts, Customer Component 以及 Third Party Visualization, 你可以根據你的需求選擇。

以下先以 Basic Dashboard 做為範例在網頁上嵌入圖表:

利用GA Embed API在網頁嵌入圖表

首先我們要先到 Google Developer Console 找到 Google analytics 的 API,並且啟用:

Google Developer Console 裡 Google analytics 的API

啟用後點選"憑證",然後選擇新增憑證 -> OAuth 用戶端 ID
進入用戶端 ID 的畫面後選擇"網路應用程式",在"已授權的 javascript 來源"這欄填上你要嵌入的網站網址,點選建立。

GA API 建立用戶端 ID

建立後會告訴你用戶端 ID(Client ID, 就是 xxxxxx.app.googleusercontent.com 這一串),請將它記下來。

再來依照 Basic Dashboard 的步驟,將 Step1~Step3 的程式碼嵌入至網站,
其中請將 clientid: ‘REPLACE WITH YOUR CLIENT ID’ 這一行裡面的部分改成剛剛所得到的用戶端 ID

如果前臺顯示無誤,應該會先請你進行 GA 帳戶的登入授權,然後就可以成功看到資料:

登入 GA 進行授權

以上的圖表範例是 GA embed API 的應用其中之一,而 Demos & Tools 網站裡還提供了一些有用的資源,除了其它格式的圖表外(嵌入方法大同小異,多幾個欄位少幾個欄位而已!)

同時還提供了 E-commerce Demo site ,就算本身沒有電商網站也可以知道哪個步驟需要嵌入什麼樣的電商追蹤碼,以及 Query Explorer 提供 GA 各個維度指標欄位的抓取語法等工具。

如果你最近想要利用 GA 的資料做出各種應用,那麼這是一個你可以好好利用的網站!

關於 Davis

正在數據分析、SEO、以及數位行銷的洋洋知識海裡載浮載沉之中,為了不讓自己迷失在知識的洪流之中於是建立了Davis的GA網站分析紀錄這個Blog, 紀錄自己的實驗與學習軌跡

大家都在看

Google Analytics 入門寶典

Google Analytics 入門寶典

想了解 Google Analytics 卻不知道從哪裡入門嗎?專業講師吳天原帶著大家一一解惑初學者會遇到的問題與想知道的事情!讓我們透過經驗者的談論一起學習並了解 GA 安裝與使用的注意事項吧!

還想知道更多數位新知?快來訂閱 dcplus 關鍵分享報

您希望收到哪些資訊呢?