2019年4月9日

查詢網站所有連結的點擊成效﹍GA 事件追蹤器

查詢網站所有連結的點擊成效﹍GA 事件追蹤器

Wayne Fu 0 A+
website-track-google-analytics-event-widget-free.jpg-查詢網站所有連結的點擊成效﹍GA 事件追蹤器(免費版)我們的網站可能裝了各式各樣的小工具,例如:

  • 首頁的輪播
  • 側邊欄的標籤、熱門文章、精選文章...
  • 文末的相關文章、延伸閱讀

這些工具的文章連結,無一不是想增加訪客的黏著度,盡量把訪客留在網站內,但我們真的有辦法可以明確瞭解所有工具的成效嗎?會不會裝了一卡車外掛結果根本沒人點擊呢?

有時後可能只是憑感覺、或是心情來決定是否安裝某個小工具,或是看別的網站有裝所以跟著裝,但若是外掛太多卻沒有對應的成效,那麼只是影響網頁載入速度而已。

這件事能用科學方法來評估的話是再好不過,如果有辦法追蹤讀者的每一個點擊,那麼在決定網站小工具配置時,就不至於瞎子摸象,可以利用實際的報表數據作為依歸

(圖片出處: pixabay.com)


一、Chrome 外掛


最簡單的方式為安裝這個 Chrome 外掛「Page Analytics」,可以即時撈 GA 的數據,瞭解網站上大部分連結的點擊率。

不過直接說結論,這個外掛的功能有限,我也曾寫了這篇心得說明「安裝 Page Analytics 就能分析網站數據,但很多數字你必須知道如何正確解讀」,大致整理一下這個外掛做不到的事情:

  • 標籤連結撈不到數據
  • 頁面上有多處同一個連結時,無法判別讀者從哪裡點擊,所以無法知道這個點擊的數據是哪個小工具的功勞
  • 無法掌握動態 JS 產生的連結
  • 只有網站內部連結的數據,無法取得外部連結的點擊數據
  • 只有連結可取得數據,"點擊" 功能沒有數據(例如提交按鈕)



二、GA 事件追蹤器


本篇製作的這個工具,只要你的網站有 Google Anaytics,就能安裝這個「GA 事件追蹤器」來分析數據。

1. 運作原理

安裝之後,會監控網站的所有連結點擊事件,擷取一些重點資訊後,主動向 GA 傳送特定格式的資訊,讓 GA 紀錄所有點擊事件,並且這些資訊有利於日後撈報表時進行分類、判讀。

以上的運作原理,可參考這篇「Blogger 網站如何追蹤 Google Analytics 點擊事件的成效?」有更詳細的說明。


2. 注意事項

基本上這個工具是根據 Blogger 平台特性所開發,其他平台直接套用的話需要修改參數,以及必須手動修改網站的部分 HTML 碼才能有比較好的效果,可參照之後的修改說明。



三、安裝程式碼


在修改範本之前,如果第一次安裝本站工具的讀者,建議先閱讀「備份範本的訣竅」系列文章。

以 Blogger 平台為例,請到後台「主題」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </body> 這個字串,找到後在此字串的前一行,插入以下程式碼:


參照以上程式碼行號,請見以下參數修改說明:
  • 第 1 行綠字可參考「引用 jQuery 的注意事項」,檢查範本是否已安裝過 jQuery,如果已經安裝過請刪除此行,以免重複安裝。
  • E 行參數:
    • 大部分的 Blogger 站長都不用修改,但建議還是先參考「Blogger 網站如何追蹤 Google Analytics 點擊事件的成效?」→「四、總結」
    • 如果你的網頁原始碼可搜尋到 "blogger.send" 字串,這一行就不用修改
    • 如果你的網頁原始碼沒有 "blogger.send" 字串,紅色字串請改成 "send"
  • F 行參數:
    • Blogger 站長不用修改
    • 非 Blogger 平台,可修改此行參數,改成你的小工具 class 名稱,或將你的小工具加上這個 class 名稱
    • Blogger 平台會自動抓這個小工具的預設 ID 字串
    • 非 Blogger 平台請為你的小工具元素,設定 ID 字串,讓程式抓取



四、操作範例


以本站為例,如果有訪客點擊了側邊欄「精選文章」小工具,其中的「CC0 免費圖庫搜尋引擎」這個連結,程式會抓兩筆字串:

  • 小工具的 ID 字串 "HTML10"
  • 連結的文字 "CC0 免費圖庫搜尋引擎"

然後將這兩筆資料傳送到 GA,在 GA 報表中可追蹤到這個點擊事件。GA 的操作說明一樣參考「Blogger 網站如何追蹤 Google Analytics 點擊事件的成效?」→「二、調閱 GA 事件報表」


website-track-google-analytics-event-widget-free-1.jpg-查詢網站所有連結的點擊成效﹍GA 事件追蹤器(免費版)

在 GA 的事件報表中,從「事件類別」可以看到各個小工具的點擊數,包括剛剛示範的 "HTML10" 這個小工具。從這些數據就能看出哪些小工具比較熱門,比較值得加入我們網站的版面配置。

我們直接點進 "HTML10" 後,再點擊「活動標籤」,可看到這個小工具的點擊事件明細。


website-track-google-analytics-event-widget-free-2.jpg-查詢網站所有連結的點擊成效﹍GA 事件追蹤器(免費版)

上圖紅框就是示範的 "CC0 免費圖庫搜尋引擎" 這個點擊,從事件總數我們就能看出哪些連結是比較受歡迎的。



五、補充說明


這個免費版功能算是比較侷限:

  • 無法排除自己的點擊
  • 無法對小工具進行分類,例如區分為導覽列、側邊欄、頁尾等等
  • 無法監測動態 JS 產生的小工具連結
  • 無法指定要監測的小工具
  • 無法排除不要監測的小工具

本篇的分享算是一般通用功能,且原始碼開放,如果會寫 JS 可根據需求自行修改、擴充。

之後會推出功能更豐富的版本,能夠處理以上狀況,讓 GA 報表的數據更好分類及整理。


更多 Google Analytics 相關技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
◎ 請在相關文章留言,與文章無關的主題可至「Blogger 社團」提問。
◎ 提問若無法提供足夠的資訊供判斷,可能會被無視。建議先參考這篇「Blogger 提問技巧及注意事項」。
◎ CSS 相關問題非免費諮詢,建議使用「Chrome 開發人員工具」尋找答案。
◎ 手機版相關問題請參考「Blogger 行動版範本的特質」→「三、行動版範本不一定能執行網頁版工具」。
◎ 非官方範本問題、或貴站為商業網站,請參考「Blogger 免費諮詢 + 付費諮詢
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 為了過濾垃圾留言,所有留言不會即時發佈,請稍待片刻。
◎ 本站「已關閉自刪留言功能」。

TOP