【实用教程】如何快速搭建一套私有的埋点系统？

这篇教程将基于开源项目-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 进行集成。我们以网页端集成为例：

1 下载 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 地址参数说明：

a. server_url 地址为 clklog-receiver 的接收服务地址, project 和 token 参数必须传入。

b. project 是埋点项目的项目编码，一般为英文字符，默认为 clklogapp，可根据实际情况修改为自己项目的编码。

c. token 是 receiver 接收埋点项目日志的令牌，请自行随机生成，receiver 端在接收日志时暂未做任何验证。

2.4 project 名称修改为自己项目的编码后，请注意执行以下修改或操作，否则日志不会入库：

a. 修改 clklog-receiver 服务中的 project-list 配置，project-list 对应前端埋点代码配置的 project 名称，多个 project 以逗号分隔。

b. 修改 clklog-ui 中的 config.js 中的项目配置代码。

2.5 单页面应用数据采集说明

a. 如果是单页面应用，标题不变但需要自动采集页面浏览事件，需要将 autotrack.js 中的 is_track_single_page 值设置为 ture。

b. 如果是单页面应用，标题会随着页面变化，同时也需要采集页面浏览事件，需要将 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，让每一个用户行为都被看见，让数据驱动产品增长。