Google Analytics universal 通用版 事件 Event Tracking 進階教學 另外推薦 Scrolling Depth 滾動深度 jQuery語法

Google Analytics universal 通用版 事件 Event Tracking 進階教學 另外推薦 Scrolling Depth 滾動深度 jQuery語法

這次要來跟大家分享 Google Analytics網站分析 進階的內容~

特別是目前GA新版 universal 通用版 的這部分:

事件 Event Tracking 的使用方式,因為市面上目前談到這部分的書和網路上找到的資料,根本幾乎都是老舊和錯誤的!! 但這 事件 Event 卻又是對於使用GA網站分析人來說非常重要的~  所以特別花了點時間來整理這部分資料,希望對有需要的朋友有幫助了~

費話不多說、進入這篇的主題吧~

Google Analytics universal 通用版 事件 Event Tracking 進階教學 另外推薦 Scrolling Depth 滾動深度 jQuery語法

使用GA 事件 Event  的好處多多,除了方便評估目標成效之外,對於一些網頁或流程上不容易監控分析的行為,只要可以抓的到特定的形式,如 點擊動作按鈕功能,甚至等會要說到的 “滑鼠滾動行為(Scrolling Depth 滾動深度)" ! 都可以用的上喔~

事件 Event  基本參數 有:

ga(‘send’, ‘event’, ‘Category’, ‘Action’, ‘opt_Label’, opt_Value); 

這裡頭四個欄位分別的含意:

Category 類別
Action 動作
Label 標籤
Value

Google Analytics universal 通用版 事件 Event Tracking 進階教學 另外推薦 Scrolling Depth 滾動深度 jQuery語法

其中 前面三個參數是必填的部分,寫起來的語法如這樣:

ga(‘send’, {
‘hitType’: ‘event’,                    // 宣告類型  必填
‘eventCategory’: ‘button’,     // 類別      必填
‘eventAction’: ‘click’,            // 動作      必填
‘eventLabel’: ‘nav buttons’,   // 標籤
‘eventValue’: 4                        // 值
});

參考資料 :  事件 Event 官方說明

也許這有點把你搞昏了,我舉個最簡單的例子來跟大家說明吧~

一般網頁上都有"點擊連結“的文字形式,以實際建議衡量成效有用的,這 Email給我 這樣的文字連結來說吧~

Google Analytics universal 通用版 事件 Event Tracking 進階教學 另外推薦 Scrolling Depth 滾動深度 jQuery語法

原先的語法:

<a href="mailto:bryan@9i543.com“> Email給我吧 </a>

mailto 這個是html中叫起發信功能最基本的寫法了~

標準的GA Event Tracking 寫法:

<a href="mailto:bryan@9i543.com" onClick="ga(‘send’, ‘event’, { ‘eventCategory’: ‘連結‘, ‘eventAction’: ‘click to email‘, ‘eventLabel’: ‘Email給我‘ });"> Email給我吧 </a>

簡化後的Event Tracking 寫法:

<a href="mailto:bryan@9i543.com" onClick="ga(‘send’, ‘event’, ‘連結‘, ‘click to email‘, ‘Email給我‘);"> Email給我吧 </a>

其中橘色字的部分代表了:

Category 類別: 連結
Action 動作: click to email
Label 標籤: Email給我

這三個之後分別要對應到GA後台目標的設定!

Google Analytics universal 通用版 事件 Event Tracking 進階教學 另外推薦 Scrolling Depth 滾動深度 jQuery語法

如上圖~  類別、動作、標籤 是繁體版本的GA中 目標 這部分的三個重要欄位,在後台的目標 設定選項中,請把這三個自定義的參數分別填入相關欄位之中。

Google Analytics universal 通用版 事件 Event Tracking 進階教學 另外推薦 Scrolling Depth 滾動深度 jQuery語法

這樣之後你在GA的前台 事件報表中 就可以看到這三個參數帶來的數據資料了~

Google Analytics universal 通用版 事件 Event Tracking 進階教學 另外推薦 Scrolling Depth 滾動深度 jQuery語法

而這目標實際運用上也可是很好用的喔~ 舉個例子、我透過 GA中的 進階區隔 功能,拉出來的特定流量來源,可以看到為這個目標有沒有帶來實際幫助,對於媒體管道的成效好壞,就是一個很好的判斷方式。

Google Analytics universal 通用版 事件 Event Tracking 進階教學 另外推薦 Scrolling Depth 滾動深度 jQuery語法

好吧~  我聽到許多朋友在哭喊…  “不會寫 事件 Event Tracking code" 的心聲了~~  好啦~ 好啦~~  教你更簡單的方式吧!!

先感謝GA前輩們的無私分享,網路上有這樣的 產生器喔!!

首先這  GA 事件 Event 產生器  滿好用的版本,透過這你輸入分別三個參數名稱,就幫你產生出你該埋到網頁中的程式代碼,如果你還有更多形式想使用,這個 GA 事件 Event 更強大的產生器 我想更能滿足到需求了!  檔案下載、影片播放….  這個網頁分類提供幾乎都滿足到了!!

Google Analytics universal 通用版 事件 Event Tracking 進階教學 另外推薦 Scrolling Depth 滾動深度 jQuery語法

而 實務上我常看到許多客戶為了查看一頁式網頁的表現績效,常用到  Track Virtual Pageviews 的方式去做記錄,這樣的方式我個人非常不推薦,因為Track Virtual Pageviews會把GA的網頁其他數據給搞的變大、變得亂七八糟的,反到讓評估其他成效上會帶來很大的麻煩和綑擾。

所以請改用 更進階的這 呼叫 jQuery語法 的方式來做這部分需求吧!

這也是GA前輩分享出來的  Scrolling Depth 滾動深度  原作者網頁

他透過記錄頁面位置 25%, 50%, 75%, or 100% …等網頁的瀏覽長度再丟給GA的事件 Event,這樣的方式可比 Virtual Pageviews方式會好太多了喔!

Google Analytics universal 通用版 事件 Event Tracking 進階教學 另外推薦 Scrolling Depth 滾動深度 jQuery語法

步驟一 請先到Scrolling Depth 滾動深度 原作者網頁上抓 “jquery.scrolldepth.min.js“這一支檔案,並且放到你的網頁根目錄之下!!

Google Analytics universal 通用版 事件 Event Tracking 進階教學 另外推薦 Scrolling Depth 滾動深度 jQuery語法

接著在網頁上GATC的程式碼後面加上這段code:

<script src="jquery.scrolldepth.min.js"></script>
<script>
jQuery(function() {
  jQuery.scrollDepth();
});
</script>

Google Analytics universal 通用版 事件 Event Tracking 進階教學 另外推薦 Scrolling Depth 滾動深度 jQuery語法

這樣網頁執行完這 “jquery.scrolldepth.min.js" 之後就會"自動“幫你在GA Event報表中建立起Scrolling Depth 滾動深度分別有的紀錄,連目標都不需要另外建立喔~ 超方便的! 真是感謝 這位無私分享的大大啊~~~

今天這篇 Google Analytics universal 通用版 事件 Event Tracking 進階教學 屬於比較有難度的教學,我盡量以非程式人員的角度來跟大家解說了,但… 如果你還看不懂….  那就…..

還是請你來報名我的 Google Analytics網站分析課程 嚕~~

XD

吳 天元

溫厝的543大家長,平常沒時就愛碎碎唸,標準的阿宅。 平時就愛看電影、研究網路行銷,有時間當然也愛陪伴著家人! 總希望世界和平之外,更希望能看看外星人到底長啥模樣了!

在 “Google Analytics universal 通用版 事件 Event Tracking 進階教學 另外推薦 Scrolling Depth 滾動深度 jQuery語法” 有 4 則留言

  1. 老師你好,
    看了你的文章後我試著在我的活動頁內加上event tracking語法,但GA後台並沒有收到event的記錄,請問我是否有哪邊設錯?
    每一個連結我都加入下方語法(如下示範,onClick之後的語法) 網站連結

    另外我活動頁因為有層級問題共加上4組追蹤號碼,但每一個號碼的GA後台都無法看到事件,請問是否是因為過多號碼無法紀錄?還是說事件可以指定送到哪一組號嗎?

  2. 剛剛張貼迴響時發現語法會自動聽成導賣場連結,所以我直接貼上下方語法

    onClick="ga(‘send’, ‘event’, ‘連結’, ‘click’, ‘降價排行榜_電腦周邊_TOP7’);">

  3. 但我看你 這網頁 沒看到你說什麼按鈕有設定Event code 啊?
    一般來說,很多編輯器為了安全考量,不太能在裡頭執行這類JS功能程式,你需要問問看你的網站程式開發人員,是否你的產品上稿功能可以執行這類程式代碼,不然你PO上去會被自動過濾掉的。

發表迴響

你的電子郵件位址並不會被公開。 必要欄位標記為 *