webfunny 實(shí)現(xiàn)用戶行為監(jiān)測(cè)

用戶行為監(jiān)測(cè)

用戶行為，指的是用戶與產(chǎn)品UI的交互行為，主要表現(xiàn)在Android App、iOS App與Web頁(yè)面上。這些交互行為，有的會(huì)與后端服務(wù)通信，有的僅僅引起前端UI的變化，但是不管是哪種行為，其背后總是伴隨著一組屬性數(shù)據(jù)。對(duì)于與后端發(fā)生交互的行為，我們可以從后端服務(wù)日志、業(yè)務(wù)數(shù)據(jù)庫(kù)中拿到相關(guān)數(shù)據(jù)；而對(duì)于那些僅僅發(fā)生在前端的行為，則需要依靠前端主動(dòng)上報(bào)給后端才能知曉。用戶行為數(shù)據(jù)采集系統(tǒng)，便是負(fù)責(zé)從前端采集所需的完整的用戶行為信息，用于數(shù)據(jù)分析和其他業(yè)務(wù)。

• 通常做法: 根據(jù)產(chǎn)品經(jīng)理提出的數(shù)據(jù)需求，設(shè)計(jì)一個(gè)結(jié)構(gòu)化的數(shù)據(jù)表來(lái)存儲(chǔ)數(shù)據(jù)，然后開(kāi)個(gè)REST API給前端，用來(lái)上報(bào)數(shù)據(jù)；前端負(fù)責(zé)在相應(yīng)的位置埋點(diǎn)，按照協(xié)商好的數(shù)據(jù)格式上報(bào)給后端。這樣的做法暴露了很多問(wèn)題，給前后端都帶來(lái)了混亂，主要表現(xiàn)在：前端四處埋點(diǎn)，上報(bào)時(shí)調(diào)用的API不統(tǒng)一，上報(bào)的數(shù)據(jù)格式不統(tǒng)一；后端數(shù)據(jù)分散在多個(gè)數(shù)據(jù)表中，與業(yè)務(wù)邏輯耦合嚴(yán)重。
• 優(yōu)化解決方法
• 分析采集數(shù)據(jù)結(jié)構(gòu)：用戶、行為、頁(yè)面、訪問(wèn)終端、時(shí)間
• 定義數(shù)據(jù)收集接口規(guī)則：

web: api/v1/web/browser 上傳瀏覽行為數(shù)據(jù)api/v1/web/click 上傳瀏覽行為數(shù)據(jù) andrioid:api/v1/andrioid/browser 上傳瀏覽行為數(shù)據(jù)api/v1/andrioid/click 上傳瀏覽行為數(shù)據(jù)iso:api/v1/iso/browser 上傳瀏覽行為數(shù)據(jù) api/v1/iso/click 上傳瀏覽行為數(shù)據(jù)

數(shù)據(jù)采集:
一般做法：只在需要的地方上報(bào)數(shù)據(jù)。 與業(yè)務(wù)邏輯耦合很大。
? 無(wú)埋點(diǎn)做法：無(wú)需嵌入調(diào)用，通過(guò)底層hook所有點(diǎn)擊事件，全部采集用戶的行為操作。但會(huì)有許多無(wú)用數(shù)據(jù)。

數(shù)據(jù)存儲(chǔ)
? nosql數(shù)據(jù)庫(kù)。爭(zhēng)對(duì)不規(guī)則的數(shù)據(jù)，存儲(chǔ)更加合理，方便。

無(wú)埋點(diǎn)方法解決方案

webfunny 親測(cè)有用
源碼地址：webfunny 源碼.

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

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

webfunny 使用

請(qǐng)嚴(yán)格安裝以下步驟執(zhí)行，如果哪一步出錯(cuò)，請(qǐng)解決再繼續(xù)下一步，如果不能解決，就請(qǐng)刪除再試。如果幾次都不行，請(qǐng)轉(zhuǎn)他處文章。

獲取代碼
有g(shù)it的，新建一個(gè)文件夾，然后使用下面的命令即可

github

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

碼云更快、更穩(wěn)定（親測(cè)有效）

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

沒(méi)有g(shù)it的，在github上下載源碼github地址

解壓項(xiàng)目并安裝依賴包
以管理員打開(kāi)cmd,并進(jìn)入項(xiàng)目根目錄下，依次執(zhí)行以下命令

看命令猜作用
init應(yīng)該是初始化項(xiàng)目，創(chuàng)建項(xiàng)目的各種文件夾和文件

npm run init

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

npm install

按上訴操作完，項(xiàng)目中應(yīng)該就多了一些文件。繼續(xù)下一步。

解壓項(xiàng)目并配置數(shù)據(jù)庫(kù)（Mysql 安裝菜鳥(niǎo)教程）
建數(shù)據(jù)名：webfunny_db，
編碼方式：
找到這個(gè)文件：webfunny_monitor/bin/mysqlConfig.js

修改數(shù)據(jù)庫(kù)設(shè)置：

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

接下來(lái)就是項(xiàng)目的運(yùn)行
以管理員打開(kāi)cmd,并進(jìn)入項(xiàng)目根目錄下，依次執(zhí)行以下命令
運(yùn)行代碼一定通過(guò)cmd來(lái)運(yùn)行下列代碼
第一次運(yùn)行

npm run prd

重啟

npm run restart

如果一切正常（無(wú)明顯報(bào)錯(cuò)），請(qǐng)?jiān)跒g覽器這個(gè)地址（或者點(diǎn)擊下面的鏈接）：
登錄頁(yè)面
http://localhost:8010/webfunny/register.html?type=1

初始化賬號(hào)
在登陸頁(yè)面，初始化一個(gè)超級(jí)管理員并登錄，接下來(lái)準(zhǔn)備工作已經(jīng)做完。下一步開(kāi)始檢測(cè)你的網(wǎng)站了。

監(jiān)測(cè)網(wǎng)站
新建一個(gè)項(xiàng)目，選擇網(wǎng)站類型，分好組，取好名。

webfunny會(huì)自動(dòng)生成代碼，請(qǐng)等待。

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

如果是非vue,請(qǐng)將探針代碼插入所有head標(biāo)簽。

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

實(shí)際上這塊代碼是用于精確定位用戶操作的，暫時(shí)不插入也可以監(jiān)測(cè)網(wǎng)站了。

代碼插入完后，重啟你需要監(jiān)測(cè)的網(wǎng)站。
到此，你的網(wǎng)站已經(jīng)被監(jiān)控起來(lái)了，用戶的所有軌跡都會(huì)在webfunny 中被檢測(cè)出來(lái)。
示例圖：

參考文獻(xiàn)：

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

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。