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

Embed API, 讓訪客 GA Basic 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 帳戶一致

New call-to-action

發佈留言

Close Menu

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

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