Embed API, 讓訪客 GA Basic Dashboard 在每一頁中如影隨形




用LINE傳送
對惹... 不好意思只有行動裝置可以用 LINE 分享喔.. ^^" (若是用桌機或筆電會被帶走.. ~"~) Google Analytics Embed API - Dashboard 安裝介紹

說到讓訪客的 GA Basic Dashboard 如影隨形出現在每一頁上..

不知道是否有人發現這幾天在瀏覽我們 Google Analytics 網站分析資訊網時,在頁面上出現了一個橘色的 icon(Access Google Analytics)如下方第一張圖。

且若真的有某位大大願意點擊且還同意提供相關權限給 driveapi 如下下圖,那麼應該就會看到像是這篇文章封面圖的畫面,然後每次到我們 Google Analytics 網站分析資訊網時,這 Google Analytics Basic Dashboard 就又會顯示在網頁上。

而以上這一個說實在似乎有點奇怪的網頁互動過程,就是我們今天主要要介紹的 Google Analytics Embed API – Basic Dashboard 安裝參考流程!!

只是雖然說仔細想想確實會覺得這 API 嵌入對網站管理員(經營者)本身來說似乎沒什麼太大的幫助* 但若換個角度想,除了網站本身的資訊當然還是要真的能具有價值外,若還能讓訪客在網站上順便看到自己 Google Analytics 的基本工作階段數變化,也或許在用戶體驗上有種莫名其妙的加分作用喔 ^^”

題外話:

會說安裝這個 Google Analytics Embed API – Basic Dashboard 對網站管理員(經營者)來說沒什麼太大幫助,是因為這個按鈕主要是讓訪客可以透過 GA API 的串接,在某一個網站上看到自己 Google Analytics 的工作階段數趨勢變化。

但是這對網站管理員(經營者)來說,無論訪客願不願意點擊與顯示自己 Google Analytics 數據,網站管理員(經營者)都不會因此而收集到任何資訊啊啊啊~~~
(串接 API 是跟 Google 那邊要資料,然後透過 script 顯示在使用者的瀏覽器上。但問題是不會因此有任何資料、數據送到網站管理員(經營者)某處喔 ^^” 故這素來也有 裝心酸的 Embed API 之稱..

不過也先不管心不心酸了啦,若還是單純想要多給訪客不同便利的網站管理員(經營者)們,除了今天以下的相關安裝流程介紹外,若是第一次發現這網站或還不知道什麼是 client ID 的朋友,可能還是要先移駕至我們上週在 “Creating client ID, 透過 Developers Console 展開全新的 GA API 人生” 中所提到的介紹。

因為雖說今天的 Google Analytics Embed API – Basic Dashboard 並不是那麼困難,但有一大前提還是要先擁有這 client ID 喔..


(為了避免瀏覽文章的心情與思緒被打斷,這篇文章中若如上方有出現超連結,或許也可以先按著 Ctrl(或 ⌘ Command) 鍵再點選該連結。如此就可以先默默另開視窗,等待會有空或真的有需要時再到另一個頁籤查看喔!!)

安裝 Access Google Analytics 串接 API 按鈕
driveapi 要求權限


讓訪客的 GA Basic Dashboard 如影隨形出現在每一頁上的簡單三步驟

也如同我們在上週文章中所提到的參考資料與網站,先還請移駕到 Google Analytics Demo & Tools Embed API 下拉式選單的 Basic Dashboard 介紹頁面。

而在這頁面中,應該會先看到一個希望我們授權給該網站的按鈕,而這按鈕其實就如同我們現在 Google Analytics 網站分析資訊網 LOGO 下方的橘色 icon 一樣,就是訪客若願意將資料授權給 Google, 那今後就可以在這網站上,透過這 GA API 串接自己的 Google Analytics 數據資料了。

而從下方參考資料可以發現,要嵌入這 Google Analytics Basic Dashboard 其實主要就是三個步驟如下。

Step 1: Load the Embed API library.
Step 2: Add HTML containers to host the dashboard components.
Step 3: Write the dashboard code.

而再更簡單扼要的說其實就是將這三步驟中的 script 與 div 都置入於網站的 html 中即可。

題外話:

那在此也再次提供 Google Analytics Demo & Tools Embed API 頁面網址,而從中應該也會發現除了今天的 Basic Dashboard 之外,還有其他 API 就讓我們未來再慢慢研究與分享了。

置入 Embed API - basic dashboard 三步驟

實際嵌入這 Embed API GA Basic Dashboard 的參考案例

如同目前這網站上的按鈕置入方式,簡單說就是將三步驟下方的程式碼都複製起來,(接著或許也可將 step 或是一些註解* 移除,)緊接著再將 step3 中(如下) clientid: 後替換成我們申請的 client ID, 最後再將這些程式碼一起置入在想出現在頁面上的位置即可。

 gapi.analytics.auth.authorize({
container: 'embed-api-auth-container',
clientid: '還請替換成您申請的 client ID'
});



像是若真的很希望訪客不論到哪一個頁面都可以看到自己的 Google Analytics Basic Dashboard, 那就可以試著置放於每一個頁面共用的 header.php 中,如此一來就像是各位在瀏覽這網站時,都會在頁面上方檢視相關 GA 數據了。

在此也協助放上去除 step 與註解的程式碼如下,就可請大家參考參考參考..
(不過為避免有任何異動或更新,故或許還是請以 Google Analytics Demo & Tools 官網上公布為主喔..)

<script>
(function(w,d,s,g,js,fs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
}(window,document,'script'));
</script>

<div id="embed-api-auth-container"></div>
<div id="chart-container"></div>
<div id="view-selector-container"></div>

gapi.analytics.ready(function() {

gapi.analytics.auth.authorize({
container: 'embed-api-auth-container',
clientid: '還請替換成您申請的 Client ID'
});

var viewSelector = new gapi.analytics.ViewSelector({
container: 'view-selector-container'
});

viewSelector.execute();

var dataChart = new gapi.analytics.googleCharts.DataChart({
query: {
metrics: 'ga:sessions',
dimensions: 'ga:date',
'start-date': '30daysAgo',
'end-date': 'yesterday'
},
chart: {
container: 'chart-container',
type: 'LINE',
options: {
width: '100%'
}
}
});

viewSelector.on('change', function(ids) {
dataChart.set({query: {ids: ids}}).execute();
});

});
</script>
題外話:

所謂註解就是在程式碼中,最前方有 “/ 斜線 + 兩個 * 號” 以及 “一個 * 號 + 一個 / 斜線” 中,也就是在 Google Analytics Demo & Tools 網頁中的綠色文字。

請在此替換我們的 client ID

在今天 Embed API, 讓訪客的 GA Basic Dashboard 如影隨形出現在每一頁上之後…

其實我們在安裝今天的 Google Analytics Embed API – Basic Dashboard 時,有一個狀況也與大家分享。

因為我們有許多不同的 Google Analytics 帳戶,所以當時在申請 client ID 一時誤以為 ga.awoo.com.tw 這網站的 Google Analytics 追蹤碼是另一個 Google 帳戶所申請。

結果在頁面上授權給 Google 時,怎麼樣就是不會出現圖表。好在我們 awoo 小華大大即時發現並提出建議 ^^” 也請大家小心誤入陷阱嘍。
還請確認申請 client ID Google Analytics 帳戶一致

這篇 Google Analytics 精選文章發表於2016 年 03 月 01 日 星期二

立即訂閱看見數據網電子報

數據變化萬千,跟著看見數據網從數據中洞察網站經營脈動、缺失與機會!!