網站分析必備工具,透過 Google Page Analytics 套件顯示熱點圖 Heat Map

記得第一次見到熱點圖,是在心理學的課堂上,投影幕上播著舊舊的科普影片,講著古老的眼動儀實驗 …

以前可沒有網路,沒有那麼多數據分析工具,心理學家只能靠著傳統方法「追蹤受試者的瞳孔位置」來觀察受試者到底在關注甚麼,視線都停留在哪?藉由一連串的實驗來繪製出熱點圖

但現在不一樣了,網路,顛覆人類探索世界的可能性,實體商品變得虛擬化,游標代替了眼球,而數據分析工具 Google Analytics (GA) 讓所有人都變成了心理學家,你只要加入 GA 追蹤碼,馬上就能展開窺探人心的實驗,觀察顧客在做甚麼,推敲他們需要甚麼

我相信大家對 GA 一定不陌生,但你有用過 Google 推出的熱點圖 (Heat Map) 外掛嗎?

這套 Page Analytics (by Google) 是一款 Google Chrome 的擴充套件,透過 GA 帳號連結,就能在你的網站上顯示熱點圖,告訴你訪客喜歡點甚麼,喜歡看甚麼,好讓我們能輕鬆的透過點擊率、或是自定義的行為目標來優化網站


使用 Page Analytics (by Google)

首先,進入 Google Chrome 擴充套件頁面,下載 Page Analytics (by Google) 這套工具

Page Analytics (by Google)
pageanalytics1 - 網站分析必備工具,透過 Google Page Analytics 套件顯示熱點圖 Heat Map

安裝完成後,你會在 Chrome 的右上方看見橘色的 Page Analytics 外掛,趕快點一下,進行 GA 帳號連結

pageanalytics2 - 網站分析必備工具,透過 Google Page Analytics 套件顯示熱點圖 Heat Map

(就是我拉~~~)

連結完成後,前往你的網站,應該會看到網頁中嵌入了數據報表,並且會有點擊率指標。如果沒出現的話,重新開啟 Chrome 吧,如果還是沒用,移除重新安裝試試看!說真的我重裝過很多次,有時候莫名其妙就壞掉了 QQQ

那熱點圖勒?別急,他預設是關閉的,不過聰明的你應該也看出來了,點擊右邊的彩虹按鈕就會出現囉

pageanalytics3 - 網站分析必備工具,透過 Google Page Analytics 套件顯示熱點圖 Heat Map

根據數據顯示,大家喜歡看我的「技術應用」與「隨筆系列」文章,其他分類比較少人點,當初想說把自己的一些詞曲「創作」放上來,但是經過長時間的觀察,流量沒有起色,而選單的點擊率也是十分低落,所以說,準備要來對網站布局進行調整囉 ~~

不過看到這,我還是有點小失落,我印象中的熱點圖應該是長這樣的,漸層去哪了?

Eyetracking heat map - 網站分析必備工具,透過 Google Page Analytics 套件顯示熱點圖 Heat Map

圖片來源 / 維基百科

但仔細想想,我們關注的是用戶點擊位置、點擊率、事件達成數,只要知道區域就好啦,他點了哪個按鈕,位置距離某個點幾 pixel 並不重要,我們這又不是在做正妹圖片點擊的實驗,想要分析廣大的宅男愛做甚麼操作,對吧 XD

況且,想要更深入的追蹤游標位置,你需要埋更多指令碼,如果使用別家 (非 GA) 的追蹤工具,那還要再另埋設勒。我是不喜歡放太多追蹤碼拉,根本是把自己的網站數據拱手送別人 ~~

如果有興趣的話再去研究其他服務吧,好比照個 Crazy Egg (瘋狂蛋?),據說用他串聯 GA 就能繪製超猛的熱點圖

egg - 網站分析必備工具,透過 Google Page Analytics 套件顯示熱點圖 Heat Map

這套工具提供 30 天免費試用,原以為可以快速登入進去體驗,沒想到還是要先輸信用卡 …

而且進去之後還是要埋他們家的追蹤碼才可以運作,哀,果然沒那麼簡單,後來我就把帳號砍掉了,回歸 GA 的懷抱

Jerry
Jerry

樂於分享的軟體工程師,曾在新創與大型科技公司實習,獲得黑客松競賽冠軍,擔任資安研討會講者。長期熱衷於資訊安全、雲端服務、網路行銷等領域,希望將科技知識分享給更多人。內容轉載請來信:jlee58tw@gmail.com

發表回應