webfunny 實現用戶行為監測

用戶行為監測

用戶行為，指的是用戶與產品UI的交互行為，主要表現在Android App、iOS App與Web頁面上。這些交互行為，有的會與后端服務通信，有的僅僅引起前端UI的變化，但是不管是哪種行為，其背后總是伴隨著一組屬性數據。對于與后端發生交互的行為，我們可以從后端服務日志、業務數據庫中拿到相關數據；而對于那些僅僅發生在前端的行為，則需要依靠前端主動上報給后端才能知曉。用戶行為數據采集系統，便是負責從前端采集所需的完整的用戶行為信息，用于數據分析和其他業務。

• 通常做法: 根據產品經理提出的數據需求，設計一個結構化的數據表來存儲數據，然后開個REST API給前端，用來上報數據；前端負責在相應的位置埋點，按照協商好的數據格式上報給后端。這樣的做法暴露了很多問題，給前后端都帶來了混亂，主要表現在：前端四處埋點，上報時調用的API不統一，上報的數據格式不統一；后端數據分散在多個數據表中，與業務邏輯耦合嚴重。
• 優化解決方法
• 分析采集數據結構：用戶、行為、頁面、訪問終端、時間
• 定義數據收集接口規則：

web: api/v1/web/browser 上傳瀏覽行為數據api/v1/web/click 上傳瀏覽行為數據 andrioid:api/v1/andrioid/browser 上傳瀏覽行為數據api/v1/andrioid/click 上傳瀏覽行為數據iso:api/v1/iso/browser 上傳瀏覽行為數據 api/v1/iso/click 上傳瀏覽行為數據

數據采集:
一般做法：只在需要的地方上報數據。 與業務邏輯耦合很大。
? 無埋點做法：無需嵌入調用，通過底層hook所有點擊事件，全部采集用戶的行為操作。但會有許多無用數據。

數據存儲
? nosql數據庫。爭對不規則的數據，存儲更加合理，方便。

無埋點方法解決方案

webfunny 親測有用
源碼地址：webfunny 源碼.

Google Analytics
編者沒有嘗試過，下附使用教程鏈接：
google Analytics.
此方法使用谷歌提供的服務，公司使用需要money。

考慮到后期定制化和代碼開源的原因，編者使用第一種方式。畢竟代碼掌握在自己手中比較心安。使用 webfunny 不管數據還是代碼我們都掌握在自己手中。
下面開始教程的實踐，希望你可以少踩坑。

webfunny 使用

請嚴格安裝以下步驟執行，如果哪一步出錯，請解決再繼續下一步，如果不能解決，就請刪除再試。如果幾次都不行，請轉他處文章。

獲取代碼
有git的，新建一個文件夾，然后使用下面的命令即可

github

git clone https://github.com/a597873885/webfunny_monitor.git

碼云更快、更穩定（親測有效）

git clone https://gitee.com/webfunnyMonitor/webfunny_monitor.git

沒有git的，在github上下載源碼github地址

解壓項目并安裝依賴包
以管理員打開cmd,并進入項目根目錄下，依次執行以下命令

看命令猜作用
init應該是初始化項目，創建項目的各種文件夾和文件

npm run init

install 安裝唄 (node.js 并不熟，嘿嘿)

npm install

按上訴操作完，項目中應該就多了一些文件。繼續下一步。

解壓項目并配置數據庫（Mysql 安裝菜鳥教程）
建數據名：webfunny_db，
編碼方式：
找到這個文件：webfunny_monitor/bin/mysqlConfig.js

修改數據庫設置：

module.exports = {write: {ip: '127.0.0.1',port: '3306',dataBaseName: 'webfunny_db',userName: 'root',password: 'root'},// 高性能版支持此屬性read: [// { host: "", username: "", password: "" }]}

接下來就是項目的運行
以管理員打開cmd,并進入項目根目錄下，依次執行以下命令
運行代碼一定通過cmd來運行下列代碼
第一次運行

npm run prd

重啟

npm run restart

如果一切正常（無明顯報錯），請在瀏覽器這個地址（或者點擊下面的鏈接）：
登錄頁面
http://localhost:8010/webfunny/register.html?type=1

初始化賬號
在登陸頁面，初始化一個超級管理員并登錄，接下來準備工作已經做完。下一步開始檢測你的網站了。

監測網站
新建一個項目，選擇網站類型，分好組，取好名。

webfunny會自動生成代碼，請等待。

代碼生成好后，按照說明將代碼摻入到你的項目中。
這部分，編者是這樣做的，探針代碼加入到head標簽里面，如果是vue項目，找到根目錄下的index.html，在head標簽里面插入探針代碼即可。

如果是非vue,請將探針代碼插入所有head標簽。

設置user的id,這一塊代碼：
window.localStorage.wmUserInfo = JSON.stringify({ userId: 'userId', userTag: 'tag', projectVersion: '1.0.1' })
其中userid就是標識用戶的唯一id,userTag 理解為公司或者單位，projectVersion是網站的版本。
編者是插入到獲取用戶信息并設定的代碼后面。如圖。

實際上這塊代碼是用于精確定位用戶操作的，暫時不插入也可以監測網站了。

代碼插入完后，重啟你需要監測的網站。
到此，你的網站已經被監控起來了，用戶的所有軌跡都會在webfunny 中被檢測出來。
示例圖：

參考文獻：

1.https://segmentfault.com/a/1190000014922668
2.https://blog.csdn.net/zhenzigis/article/details/104695050
3.http://www.webfunny.cn/des.html

總結

以上是生活随笔為你收集整理的实现用户行为监测之webfunny的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。