這篇教程將基于開源項目-ClkLog，教大家快速搭建一套自有的埋點系統，從0開始完成數據采集、分析與展示，全流程掌控用戶行為數據。
ClkLog是一款支持私有化部署的全開源用戶行為數據采集與分析系統，兼容Web、App、小程序多端埋點，快速洞察用戶訪問路徑、行為軌跡，并生成多維用戶畫像。助力中小團隊搭建輕量靈活的用戶行為分析平臺。
ClkLog項目組成：?
- 處理腳本【clklog-init】：初始化服務，用于數據庫初始化和定時腳本任務配置。
- 接收服務【clklog-receiver】：數據接收服務，接收客戶端采集的日志數據并存入kafka。
- 處理服務【clklog-processing】：數據處理服務，依托flink，消費kafka數據并存入clickhouse。
- 統計接口【clklog-api】：統計接口，提供前端各維度數據查詢統計分析接口。
- 統計展示【clklog-ui】：基于 vue-element-admin 實現的相關統計分析及系統相關功能配置的前端應用。
ClkLog部署集成步驟：
一、安裝部署
1.? 環境準備
2.? 快速模式安裝
ClkLog支持Docker部署和傳統部署，其中Docker部署有標準模式和快速模式兩種，我們以Docker快速模式部署為例：
- 準備
1.? 下載 ClkLog Docker Compose配置文件，參考代碼如下
github 鏡像下載
gitee 鏡像下載
? ??
2.? 拷貝鏡像,并解壓鏡像文件，參考代碼如下：
3.? 執行目錄初始化腳本，代碼如下：
- 啟動
1.? 執行安裝命令
在clklog-docker-compose目錄下執行以下命令：
2.? 查看容器狀態
3.? 驗證鏡像是否安裝成功
前端地址：http://YOUR_DOMAIN/
登錄賬號/密碼：admin/clklog
統計接口說明地址：http://YOUR_DOMAIN/api/doc.html
埋點數據接收地址：http://YOUR_DOMAIN/receiver/api/gp?project=clklogapp&token=5388ed7459ba4c4cad0c8693fb85630a
二、數據采集
在完成ClkLog安裝部署后，我們需要進行數據采集。根據需要采集的前端應用找到相應SDK進行集成。我們以網頁端集成為例：
- 下載ClKLOG WEB JS SDK
這里需要說明的是：ClkLog?WEB JS SDK是在神策的Web JS SDK的基礎上做了一些調整，將基礎引用和session-event集成在一個js里，這樣直接引用js就可以了。如果您是直接從神策官網下載的sdk并按照官網引用方法進行埋點的，請注意session-event的引用。
下載 CLKLOG WEB JS SDK, 并將下載的ClKLOG WEB JS SDK文件包解壓至網站目錄, 參考目錄結構如下：
? 2.? 修改autotrack.js中的配置信息
? 2.1? 確認autotrack.js中sensorsdata.js和plugins/session-event/index.js在實際項目中的引用路徑。
? 2.2? 將autotrack.js中的server_url 接收服務地址配置信息修改為clklog數據采集地址，并調整參數project和token的配置。其中project名稱默認為clklogapp，如果要修改project名稱請注意調整clklog-receiver服務中project-list的相關配置。autotrack.js中的server_url參考配置如下：
? 2.3? server_url 地址參數說明：
- server_url地址為 clklog-receiver 的接收服務地址, project 和token參數必須傳入。
- project 是埋點項目的項目編碼，一般為英文字符，默認為clklogapp，可根據實際情況修改為自己項目的編碼。
- token是receiver接收埋點項目日志的令牌，請自行隨機生成，receiver端在接收日志時暫未做任何驗證。
? 2.4? project 名稱修改為自己項目的編碼后，請注意執行以下修改或操作，否則日志不會入庫：
- 修改clklog-receiver服務中的project-list配置，project-list對應前端埋點代碼配置的project名稱，多個project以逗號分隔。
- 修改clklog-ui 中的config.js 中的項目配置代碼。
? 2.5? 單頁面應用數據采集說明
- 如果是單頁面應用，標題不變但需要自動采集頁面瀏覽事件，需要將autotrack.js中的is_track_single_page值設置為ture。
- 如果是單頁面應用，標題會隨著頁面變化，同時也需要采集頁面瀏覽事件，需要將autotrack.js 中的is_track_single_page 值設置為false，同時在頁面標題改變結束后執行代碼： sensors.quick('autoTrackSinglePage');
? 3.? 接入埋點跟蹤代碼
在web網站頁面引用autotrack.js,參考代碼如下：
? 4.? 測試埋點代碼是否接入正常
在本地啟動網站，打開瀏覽器訪問網站，打開開發者工具，查看控制臺, 出現如下提示信息說明埋點代碼接入成功。
注意：locahost或ip訪問時可忽略控制臺中的 “[web-sdk-log]: getHostname傳入的url參數不合法！” 提示
? 5.? 驗證埋點接入是否成功
埋點代碼接入成功后，等待1分鐘，返回前端 http://YOUR_DOMAIN/ ，刷新數據概覽頁面，如下圖所示，當頁面上的流量概覽相關數據值開始有數據說明埋點接入成功。
三、查看數據分析結果
社區版內置分析模型，一站式滿足日常運營需求。社區版分析模型中包含基礎的統計指標如：PV、UV、訪客數、訪問次數、IP數、訪問時長等。分析維度有：時間段（小時/天/周/月/年）、訪問渠道、訪客類型、地域、來源網站等。同時也包含針對APP崩潰的各項指標統計以及用戶畫像統計。
常見問題解答
Q1：ClkLog適合什么團隊？
適合中小型研發團隊、想私有化部署替代SaaS平臺、對數據安全有更高要求的企業。
Q2：是否支持多端接入？
支持。官網上還提供了uni-app、react-native、flutter、unity3d的埋點集成參考示例。
Q3：能部署到海外服務器嗎？
可以，完全本地部署。
Q4：是否支持自定義事件？
社區版中沒有提供該功能，可以選擇自己二次開發或使用高級付費版本。
開源地址
Gitee項目地址：https://gitee.com/clklog/clklog
GitCode項目地址：https://gitcode.com/clklog/clklog
官網（技術支持與說明文檔）:https://clklog.com
無論你是剛開始做增長分析的團隊，還是希望替換掉SaaS方案的開發者，ClkLog社區版都能提供一個高性價比、可控性強的起點。用ClkLog，讓每一個用戶行為都被看見，讓數據驅動產品增長。
)
