從網頁存取記錄瞭解使用者行為與網頁區塊貢獻分析－崔殷豪

E T H A N Y I N - H A O T S U I ( 崔殷豪）
2 0 1 5 / 8 / 2 3
2 0 1 5 台灣資料科學愛好者年會
從網頁存取記錄瞭解使用者行為
與網頁區塊貢獻分析-實戰篇

2 / 48
當老闆、設計師、工程師對網站設計衝突，怎辦？
讓Data說話

3 / 48
Agenda
—  頁面版塊貢獻分析方法
—  如何處理與儲存web access log
—  Ref 還能看什麼資訊？
¡  商品轉換 A - B
¡  使用者搜尋後的點擊（知道搜尋某關鍵字後，點擊了哪個商品）
¡  使用者點擊圖片還是產品名稱？
—  QA

6 / 48
頁面版塊是什麼？
來源：www.asap.com.tw

7 / 48
頁面版塊是什麼？
搜尋頁
綠茶無糖
茶飲分類頁

8 / 48
整個網站還有更多更多版塊，貢獻度如何？
—  某商品熱賣，消費者是怎麼看到的？
電子報？網路廣告？首頁？搜尋？分類？商品自動推薦？商
品人工推薦？排行榜？
—  很多版塊的商品可能是人工挑選，但轉換效益呢？
—  一個畫面可能給太多太多資訊，要機具什麼來簡化頁面呢？
—  必須要有公正且正確的比較基準 – 讓data說話
—  Data說話之前，要先統計每個版塊的點擊狀況

9 / 48
統計版塊點擊常用方法
—  可以從連到商品的（或想追蹤的）超連結下手
—  集中到負責統計的server，再轉網址
¡  http://a.b.com/count?page=indexactivity=中元普渡
2015order=3url=http://a.b.com/product?pid=12345
（Yahoo台灣部分網址, google search(他一定得這樣做才能搜集
關鍵字與點擊的狀態) ）
¡  但，於額外做統計的server cluster且需扛很大的連線量（所有
點擊都會先到這台server再轉到web server）

10 / 48
方法二：超連結加上一個參數ref
—  http://a.b.com/product?pid=12345ref=index_中元
普渡2015_3
—  但，要處理龐⼤大的web access log

12 / 48
頁面版塊追蹤，從哪裡來的參數：ref
—  在每一頁，每個商品或任何超連結加上一個參數ref，
記錄著：
現在是哪一頁的哪個版塊以及相關資訊
—  例如：
—  在首頁，
http://a.b.com/product?pid=12345ref=index_中元普渡2015
http://a.b.com/product?pid=56789ref=index_中元普渡2015
—  在搜尋頁，
http://a.b.com/product?pid=12345ref=search_result_飲料
—  在分類頁，
http://a.b.com/product?pid=12345ref=分類_依銷售量排序

13 / 48
Ref起源
—  上圖是：2010-3-31，當時我們server的web access log
—  amazon.com 從2010-8月才開始使用，名字也叫做ref，根
據 internet archive
（現在才發現已經被拒絕查詢了！？）

14 / 48
Ref v.1：只記錄頁面與區塊
—  時間大約在2009年底想到這個方法，2010年3月底上
線試用，一試成主顧
—  ref=頁面代碼_區塊代碼_順序
—  Examples:
ref
頁面代碼
區塊代碼
順序
i_p7_2
i: 首頁
p7: 第7個版塊
此區塊第2個
i_new_8
i: 首頁
new: 最新商品
此區塊第8個
srh_result_java
srh: 搜尋
result: 搜尋結果
關鍵字java

15 / 48
Ref v.1 範例
itembest_i1__10773
theme_rentbook_1_12535
bookinfo_i5__12264
itembest_i1__10773
bookinfo_i7__13039
bookinfo_i7__13041
viewer_i0_13041
bookinfo_i1_2_12130
viewer_i0_9981
bookinfo_i1_3_12182
bookinfo_i5__13068
i_p2_12933
i_p5_12437
i_p5_12437
bookinfo_i6__12251
bookinfo_i7__12429
bookinfo_i5__10707
bookinfo_i7__10705
bookinfo_i5__10705
viewer_i0_13151
search_1_12082
bookinfo_i6__12533
i_p1_11_10338
bookinfo_i6__12124
i_p1_13095
category_i1_9_13173
bookinfo_i5__10616
search_1_12125
category_i1_3_13088
bookinfo_i7__12935
itembest_i1__10773
bookinfo_i7__12997
bookinfo_i7__13013
bookinfo_i5__12437
category_i1_9_13037
itembest_i1__10773
category_i1_5_13177
category_i1_5_13177
bookinfo_i6__12126
search_1_12865
search_1_12865
bookinfo_i6__12130
bookinfo_i1_2_12130
bookinfo_i7__12129
search_5_13036
itembest_i1__12129
itembest_i1__12130
bookinfo_i7__12127
bookinfo_i5__12252
bookinfo_i7__12261
bookinfo_i7__12127
bookinfo_i7__12130
bookinfo_i7__12129
itembest_i1__10773
viewer_i0_12129
bookinfo_i6__12990
bookinfo_i5__10707
bookinfo_i7__12262
bookinfo_i7__10705
search_3_10401
bookinfo_i1_7_12672
bookinfo_i1_1_12754
bookinfo_i1_1_12754
i_p1_13095
…

16 / 48
Ref v.1 頁面版塊點擊比
某時間區間的資料

17 / 48
Ref v.1頁面版塊點擊比，詳細資料

18 / 48
Ref v.2
—  時間：大約在2012/5月，演講提到Ref v.1之後隔幾天，我
們就大部份的link都改用這版
—  ref=
主題館_網頁代碼_KEY_區塊名稱_順序_版塊位置代碼
—  版塊位置代碼：
¡  ⼤大約將網站分成三種落版
¡  single column(1M)
¡  2 columns(分左右邊, 2L, 2R)
¡  3 columns(分左中右, 3L, 3M, 3R)
¡  後面再接出現的順序

19 / 48
Ref v.2 範例
3C主題館首頁
排行榜20
最新3C商品
七夕情人節特選商品
ref=3c_idx_none_top20_3_2R3

ref=main_product_1234_alsobuy_1_1M2
產品1234
售價: 99元
相關商品
別人也買了什麼？
此分類排行榜
ref=主題館_網頁代碼_KEY_區塊名稱_順序_版塊位置代碼

20 / 48
Ref v.2 範例
bk11_ssea_2R1_list_5t_%e6%a8%93%e9%9b
%a8%e6%99%b4
bk11_info_2R5_books_4_18519
bk11_cate_2R2_list_44t_105
bk11_cate_2R2_list_47t_105
mobile_viewer_1M1_dm_1_20470
bk11_cate_2L2_top_9_118
romance_tag_2R2_list_14t_147
mobile_info_1M3_introduce_0_19664
mobile_cate_1M1_new_10_98
bk11_info_2R6_series_1_22041
bk11_info_2R5_abuy_5_20952
mobile_cate_1M1_new_12_98
bk11_info_2L1_new_2_12415
bk11_cate_2R2_list_4s_105
bk11_cate_2R2_list_4i_105
bk11_info_2R6_catrec_3_19836
bk11_info_2L1_new_10_22202
bk11_viewer_1M1_dm_1_21599
rentbook_index_2R2_list_1r_0
bk11_info_2R5_abuy_4_18634
bk11_info_2L1_new_9_17676
bk11_info_2R7_aview_2_18286
mobile_viewer_f1_pu_2_15107
mobile_viewer_f1_pu_2_15107
mobile_info_1M7_series_1_14563
mobile_info_1M4_abuy_2_14564
mobile_info_1M9_aview_7_14564
mobile_i_1M2_p1_4_0
mobile_info_1M9_aview_7_14564
mobile_i_1M2_p1_10_0

21 / 48
Ref v.2 頁面版塊點擊比

22 / 48
Ref v.2 頁面版塊點擊比詳細資料

23 / 48
Ref v.3
—  時間：大約2013/8月，進入uitox.com時重新再想
—  ref=館別_網頁_KEY_區塊名稱_順序_落版代碼_版
塊位置代碼_版塊序號
—  落版代碼為a/b/c/d testing時，看到不同版面的給予
不同的代碼，之後直接看ref就可進行分析
—  Examples: (當然，正式使用都用縮寫省一點點空間）
¡  ref=3c_index_none_new_1_2015ta_2R_1
¡  ref=3c_index_none_new_1_2015tb_2R_2
¡  ref=3c_index_none_new_1_2015tc_2R_3

24 / 48
Ref v.3 加上a/b/c testing 範例
3C主題館首頁
排行榜20
最新3C商品
3C主題館首頁
排行榜20
最新3C商品
3C主題館首頁
最新3C商品
排行榜20
ref=3c_index_none_new_1_2015ta_2R_1
ref=3c_index_none_new_1_2015tb_2R_2
ref=3c_index_none_new_1_2015tc_2R_3

25 / 48
你已經知道太多了！！
圖片來源：
http://cdn.thewire.com/media/img/upload/wire/2014/03/25/
shutterstock_101127469/lead_large.jpg
http://petsittingology.com/wp-content/uploads/2010/01/keep-secret.jpg
http://doesthisblogmakeuslookfat.com/wp-content/uploads/2012/11/
top_secret.png

26 / 48
如何埋ref？直接塞在網址給user？
—  在首頁，連到產品12345的超連結：
a href=“./product?pid=12345ref=index_中元普渡
2015_1”某綠茶/a
—  在分類頁，連結到產品12345的超連結：
a href=“./product?pid=12345ref=category_list_3”某綠
茶/a
—  在搜尋頁，連結到產品12345的超連結：
a href=“./product?pid=12345ref=search_list_綠茶無
糖”某綠茶/a

27 / 48
很好！世界電商龍頭A公司也這樣啊，有問題嗎？
—  SEO問題蠻大der！！！（痛過才知道，為什麼
Google搜尋不到網站商品）
—  因為一模一樣的連結重複太少，導致搜尋引擎索引不
佳
—  怎麼辦？還是不要用ref好了…
—  有解法… 只要匯款到 1234 5678 8765 4321

28 / 48
利用Html data- 屬性
—  將ref資訊寫在 data-ref 屬性裡
—  在首頁，連到產品12345,
a href=“./product?pid=12345” data-ref=“index_中元普渡
2015_1”某綠茶/a
—  在分類頁，連結到產品12345,
a href=“./product?pid=12345” data-ref=“category_list_3”某綠
茶/a
—  在搜尋頁，連結到產品12345,
a href=“./product?pid=12345” data-ref=“search_list_綠茶無糖”
某綠茶/a

29 / 48
再加上javascript 動態填入超連結
script
$(document).ready(function() {
$([data-ref]).each(function() {
$(this).attr(href, $(this).attr(href)
+ref=+$(this).attr(data-ref));
});
});
/script
—  DONE! 收功～

如何處理與儲存web access log

31 / 48
每天一堆人在你的網站晃來晃去，你知道嗎？

32 / 48
其實都在web access log裡（如果沒砍掉的話）

33 / 48
路人說：這我知道，用GA不就好了！？散會？
—  Google Analytics 已經發展到神之領域，別輕易挑戰
他已經有的功能！！可以先一起用祂
—  但，看Web access log可以彌補Google Analytics沒有
的地方
¡  Referer資訊，即時追蹤切確地來源uri
¡  版塊貢獻度分析
¡  肥水（web access log）不落外人田！
¡  …

34 / 48
天外飛來一筆：一定要等資料很大才開始嗎？
—  觀察，才能改進
—  先看資料可以快速反應
—  迅速地回應使用者的留言或來源
—  知道網站版塊使用狀況與貢獻度
—  迅速調整與簡化網站功能

35 / 48
而Web access log 可以看到什麼？
—  一堆垃圾！！！圖片request, js request, 一堆爬蟲，一大
堆的爬蟲，剛開站時，你的server都在回應爬蟲…
—  以及整理之後的…
¡  網頁點擊流（click stream）
¡  網頁版塊點擊貢獻
¡  網頁版塊業績貢獻
¡  …

36 / 48
再看仔細一點 web access log - nginx
—  IP 時間 Request status size referer user-agent
—  222.127.217.62 - - [14/Aug/2015:08:27:22 +0000] GET /marvel/QueryTeam?lang=en HTTP/1.1 200 6143
https://www.reddit.com/r/FutureFight/comments/3ewpsl/tier_list/ Mozilla/5.0 (Windows NT 6.1)
AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.155 Safari/537.36”
ＩＰ：222.127.217.62
時間：14/Aug/2015:08:27:22 +0000
Request: GET /marvel/QueryTeam?lang=en HTTP/1.1
Status: 200 （成功）
Size: 6143
Referer: https://www.reddit.com/r/FutureFight/comments/3ewpsl/tier_list/
User-agent: Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.155 Safari/537.36
—  115.134.175.252 - - [14/Aug/2015:13:28:18 +0000] GET /marvel/heroList.jsp?lang=en HTTP/1.1 200 3101
—  115.134.175.252 - - [14/Aug/2015:13:28:40 +0000] GET /marvel/heroList.jsp?lang=en HTTP/1.1 200 3101

37 / 48
必須收集什麼才有用呢？
—  身份識別
¡  Cookie id
(或者用Google Analytics的也可, cookie: _ga)
¡  Member id（沒有也無所謂）
¡  Session id
—  Timestamp
—  Request（含參數）
—  User agent
—  Referer （很重要喔！）

38 / 48
指定成你要的樣子 log format
—  Google 請搜尋： nginx web access log format
—  Ref:
http://nginx.org/en/docs/http/
ngx_http_core_module.html#variables
—  $remote_addr: 遠端的IP位置
—  $time_local: 時間
—  $request: request
—  $query_string: 參數
—  $http_referer: 從哪裡來
—  $http_user_agent: user agent, 區分瀏覽器或者裝置
—  $cookie_NAME ( ex: $cookie_cookieid ) 抓cookie

39 / 48
How to store web access log
Web server 1~N
web access log
Kafka Cluster
Web log
Producer
Topic:
Page log
Page log
Consumer
Page
log
DB
Product
log
DB
DB可以是impala,
或者PostgreSQL,
或MySQL, 或混合

40 / 48
Product log table schema
—  Timestamp, cookie_id, product_id, ref, page_log_id

41 / 48
Page log DB可以做什麼
—  從GA看到來源來自某論壇，可以直接下SQL撈出他真
正的網址（referer），做進一步客服追蹤
—  或每天自動撈追蹤
—  用來建立clickstream
—  研發用

Ref 搞了那麼久，還能看什麼？

43 / 48
Ref 搞了那麼久，還能看什麼？
—  方便又快速計算：
—  商品間轉換，計算商品相關性，A - B
—  搜尋關鍵字與商品點擊關係
—  產品關鍵字與點擊的關係
—  分類與商品點擊的關係
—  還有很多很多的關係，除了男女關係之外…

44 / 48
商品轉換計算（A - B）

45 / 48
使用者搜尋與商品點擊
—  可以強化自己的全文檢索

46 / 48
統計使用者點擊位置比例
—  bk11_i_wl3_p7_3t_0
—  bk11_i_wl3_p7_1m_0
—  bk11_i_wl3_p7_3i_0
—  bk11_i_wl3_p7_4m_0
—  bk11_i_wl3_p7_4t_0
—  bk11_i_wr7_p0_1m_0
—  bk11_i_wr7_p0_1t_0
—  bk11_i_wr7_p0_1i_0
—  bk11_i_wr7_p0_1m_0
—  bk11_i_wr7_p0_2t_0
—  bk11_i_wr7_p0_2i_0
—  bk11_i_wr7_p0_2m_0
—  bk11_i_wl3_p7_2t_0
—  bk11_i_wl3_p7_1m_0
點擊位置
比例
標題
30.4%
更多資料
24.1%
圖片
45.6%
產品圖片
產品名稱
更多資訊

47 / 48
Ref的好處
—  可以減少不必要的資料庫寫入
¡  不用每頁後端程式加程式碼寫入各種統計資料庫拖累前台反應
時間
—  可以不用準備集中做統計的server cluster
—  可以用很簡易又快速的方法，做好很多本來難以處理
的web access log
—  正確率呢？絕對有足夠的參考價值

48 / 48
收功～嚇！
—  以上用到的東西
¡  收集/處理 web access log：Kafka （大推）
¡  儲存log：impala（分散式資料庫，支援SQL like語法，不錯
用），PostgreSQL（標準RDBMS＋好用＋個人喜愛＋free）
¡  程式語言：Java（個人喜愛），當然可以用任何你喜歡的
¡  資料整理：Excel（絕對是你處理資料過程中的好夥伴），
Java（最後還是要串成查詢介面供內部人使用）

其他投影片可參考這裡
h t t p : / / w w w . s l i d e s h a r e . n e t / e t h a n t s u i 7
有任何問題，可以與我聯絡
E m a i l : e t h a n 7 7 @ g m a i l . c o m
F a c e b o o k : e t h a n . t s u i . 7
E t h a n Y i n - H a o T s u i ( 崔殷豪 )
參數Ref 才是王道啊！
Q A

從網頁存取記錄瞭解使用者行為與網頁區塊貢獻分析－崔殷豪

Recomendados

Recomendados

Mais conteúdo relacionado

Mais procurados

Mais procurados (20)

Destaque

Destaque (17)

Semelhante a 從網頁存取記錄瞭解使用者行為與網頁區塊貢獻分析－崔殷豪

Semelhante a 從網頁存取記錄瞭解使用者行為與網頁區塊貢獻分析－崔殷豪 (20)

Mais de 台灣資料科學年會

Mais de 台灣資料科學年會 (20)

從網頁存取記錄瞭解使用者行為與網頁區塊貢獻分析－崔殷豪