2019年5月13日

利用科學數據,決定網頁是否安裝特定外掛,優化網站配置﹍實作範例

利用科學數據,決定網頁是否安裝特定外掛,優化網站配置﹍實作範例

Wayne Fu 0 A+
google-analytics-event-tracking-optimize-web-widget-link.jpg-利用科學數據,決定網頁是否安裝特定外掛,優化網站配置﹍實作範例過去我們網站擺放的各種外掛、小工具,一開始是如何決定的呢?是因為個人喜好,還是因為別的網站有裝,還是猜測訪客應該需要?

如果不確定為何而裝,那麼想必站長們都知道,外掛裝越多,網頁載入速度越慢,那麼究竟哪些外掛該移除呢?

還有,我們會在網站各處擺放各種想推廣的文章連結,你知道哪些有人點、哪些沒人點,哪些該換別的連結以獲得更好的成效呢?

以上所有的事,其實可以不依靠第六感,直接收集實實在在的數據,從報表就能輕鬆分析出該如何取捨,本篇從實作範例來看看如何做到。



一、安裝 GA 事件追蹤器


只要網站有安裝 Google Analytics (GA),就可利用本站開發的「GA 事件追蹤器(會員加值文章)」,追蹤網站所有連結的點擊成效。

使用這個版本的優點有這些:

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


文章開頭圖片的 GA 數據報表,為本站在上個月進行實測的結果,以下將分析這些點擊記錄,試著進行各種網站優化的評估。



二、網頁各區塊的評估


進入「GA 官網」→ 左側選單 → 行為 → 事件 → 總覽 → 並且套用選定的日期範圍後,可看到類似以下的報表。

google-analytics-event-tracking-optimize-web-widget-link-1.jpg-利用科學數據,決定網頁是否安裝特定外掛,優化網站配置﹍實作範例

從以上的數據,可看出對於本站而言:

  • 文末的「延伸閱讀」工具 (postSeries)是最重要的一個區塊,佔了訪客將近 3 成的點擊率,所以這是不可或缺、極重要的一個外掛。
  • 導覽列下拉選單區塊 (dropdown_menu) 也非常重要,同樣佔了訪客將近 3 成的點擊率
  • 側邊欄所有點擊加總,將近 1/4,次數也不少,但側邊欄佔據網頁的面積遠大於前兩者,所以側邊欄的外掛取捨,需要看進一步的數據來決定
  • 標頭 (header)、頁尾 (footer) 區塊,雖然點擊比例沒那麼多,但由於都只是超連結而已,不會對網頁效能有任何負面影響,相較之下其實是 CP 值超高的兩個區塊,可以看做是無本生意、卻能創造出這麼多的點擊。
  • 本站比較可惜的是紅框標出來的兩個區塊:首頁輪播(cross_slider)、首頁推薦文章(label_posts)
    • 輪播等於 1 天只有 2 次點擊而已,但是載入了 6 張大圖、執行一個輪播外掛(3 個額外的 CDN HTTP 請求),CP 值不算好 → 將來我可能會移除輪播區塊
    • 首頁推薦文章更慘,1 天不到 1 次點擊,但是載入了 8 張大圖、6 張小圖、3 個額外的 HTTP 請求 → 目前我已決定會移除這 3 個推薦文章區塊

接下來我們一一針對個別數據,來看看可以如何進行解讀。



三、延伸閱讀的重要性


1. 文字版相關文章

google-analytics-event-tracking-optimize-web-widget-link-2.jpg-利用科學數據,決定網頁是否安裝特定外掛,優化網站配置﹍實作範例

點進「延伸閱讀」區塊的報表,上圖可看到所有被點擊的連結文字:

  • 一方面可瞭解讀者對哪方面的主題、內容最有興趣
  • 看是要多寫相關的文章,還是推廣這些容易受到關注的文章
  • 另一方面可看到「所有相關主題文章一覽」這個連結的點擊數最多

一般的「延伸閱讀」工具並沒有這個功能,「所有相關主題文章一覽」是我自行開發的功能,點擊後會進入該標籤的頁面,讓讀者參考該標籤的所有相關文章,可增加更多的點擊機會

當初設計這功能時,其實我不確定訪客是否會點擊「所有相關主題文章一覽」這個連結,現在有了數據支持,可以確定這是非常正確的決定。

所以從統計數據可以看出,文末區塊是讀者剛閱讀完文章,注意力最高的一個區塊,在這裡放「延伸閱讀」工具可以說是網站 CP 值最高的一件事。


2. 圖片版相關文章

從本站的數據來看,文字版的相關文章有這麼大的效用,那麼很多網站會擺放的「圖片版相關文章」效用又是如何呢?

一方面載入圖片會花費不少 HTTP 請求,如果沒有好的點擊效果,跟「文字版相關文章」比較之下,對於網站效能是很浪費的。

很可惜本站目前沒使用這樣的工具,所以缺乏資料評估效用,站長們需要自行安裝「GA 事件追蹤器」,讓數據來說話。



四、導覽列的連結配置


google-analytics-event-tracking-optimize-web-widget-link-3.png-利用科學數據,決定網頁是否安裝特定外掛,優化網站配置﹍實作範例

來看看所有導覽列被點擊的數據細節:

  • 算是不意外,首頁永遠是點擊率最高的連結
  • 我看過有些站長導覽列沒放「首頁」連結,這是很吃虧的,盡量在各方面滿足訪客的操作需求,可以逐步累積訪客的好感,聚沙成塔
  • 其他的數據跟「延伸閱讀」的效果類似,可以了解讀者對哪些標籤、連結最有興趣


根據導覽列的點擊排行,我們可以做的事大致是這樣:

  • 把點擊率高的標籤或文章連結,排序的位置往上移動,減少讀者眼球的移動距離
  • 點擊率低的連結,一方面排序往下,一方面也可思考是否下架
  • 沒什麼點擊的連結,可更換其他連結再測試一個月
  • 從數據反覆評估找出導覽列所有連結的最佳解
  • 說不定有些連結的成效是季節性的,這需要不一樣的實驗時間區間才看得出來



五、側邊欄的工具取捨


前面兩個區塊很單純,都只有一個工具而已,而側邊欄的小工具數量就很多了,我們點進側邊欄區塊來看細節。

google-analytics-event-tracking-optimize-web-widget-link-4.jpg-利用科學數據,決定網頁是否安裝特定外掛,優化網站配置﹍實作範例

  • 雖然「樹狀標籤」是本站最熱門的工具,但我一直不確定讀者到底有沒有在用本站的這個工具,直到現在看到 Label1 的數據,而且是遙遙領先,總算心裡比較踏實,這個工具沒有白裝了 → 樹狀標籤是側邊欄最重要的工具
  • ArchiveList 是 Blogger 官方工具「文章彙整」,長久以來一直不想安裝這工具,因為我自己不會去使用。前陣子覺得訪客或許會用這個工具吧,才加到側邊欄,沒想到數據顯示「文章彙整」是本站排行第 2 名的側邊欄工具,而且位置還很偏僻。這也讓我醒悟,安裝工具與否需要讓數據說話,而不是憑自己的感覺
  • sidebar_float 是側邊欄浮動區塊,由於固定在畫面上,有一定的點擊不意外
  • blog_collection 與 blogger_collection 都是精選文章的區塊,雖然點擊數沒很多,但這些都只是超連結而已,不需要 http 請求,也就是無本生意,只要有點擊都是賺。


剩下幾個幾乎沒有點擊數的工具,倒是可以討論一下:

  • 這幾個只有個位數點擊量的工具,剛好都是位於隱藏的分頁,沒有顯示出來
  • 所以側邊欄不適合使用分頁工具,數據證明,訪客的時間很寶貴,他們不會特地去打開隱藏的分頁
  • 最新文章 (newPosts) 與熱門文章 (popularPostArea) 都是部落格側邊欄的常見工具,但可惜本站都放在隱藏的分頁,所以此次無法測出這兩個工具的實際效用,這就留待其他站長的實測結果了



六、標頭、頁尾的連結


本站的標頭、頁尾區塊,沒有安裝任何工具,代表載入頁面不需要任何額外的 http 請求,完全不影響網頁載入速度,所以任何連結的點擊都算是淨賺。


google-analytics-event-tracking-optimize-web-widget-link-5.png-利用科學數據,決定網頁是否安裝特定外掛,優化網站配置﹍實作範例

特別來看一下標頭區塊的點擊細節,本站的標頭一共只有 5 個連結,但是這 5 個連結一共貢獻了數百次點擊,必須說「標頭」是本站 CP 值最高的一個區塊。

  • 首頁點擊率都是最高前面提過,此處省略
  • 剩下的幾個連結,有的是推廣本站的業務
  • 有的是本站工具懶人包整理,該篇有數十個更多的文章連結
  • 有的是增加分站曝光度

此次進行統計才知道「標頭」是非常能吸引訪客注意的區塊,那麼建議讀者好好規劃這個區塊的連結,成效可能會超出想像。

有的站長會在標頭放廣告,當然轉換成收益也是滿實在的,不過建議站長們評估一下,究竟這個區塊用來拿現金比較划算,還是獲得大量點擊會有更好的影響力。



七、小結


本篇分享的 GA 點擊數據,僅僅是本站 4 月份的績效,相信對本站的版面配置、小工具去留有很大的參考價值。然而是否所有網站都能依照本站的經驗來進行規劃呢?我相信某些可以,但不是所有數據都能依樣畫葫蘆。

舉例來說,數據顯示本站的輪播功能青睞度不高,這很有可能是輪播圖片不夠吸引人,或是輪播圖片不夠大張,又或者本站的性質本來就不適合放輪播。如果是美食、旅遊、美妝網站,或許首頁有高質感的輪播圖,點擊率就不一樣了。

所以不同性質的網站,版面配置、擺放的工具、連結的安排,可能訪客習性都不一樣,自然點擊習慣也不一樣,那麼一切還是回歸各自的網站數據才準確。

那麼本篇算是讓讀者瞭解,「面對數據時,可以進行什麼樣的思考與應對」。而真正規劃自己網站時,還是得請站長們好好收集 GA 點擊數據,才能為自己的網站配置做出最佳化


更多「提升網站效能」相關文章:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章

沒有留言:

張貼留言注意事項:

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

TOP