Web 埋点服务对比

本文主要横向对比几个页面埋点服务，进而选择最适合自己的服务作为一个稳定的日常日志服务工具。

目前对于埋点服务需求主要是，利用图表对于 PV、UV、自定义埋点等数据进行展示。

对比维度主要有以下几点：

• 数据上报方式（是否有 web 端的 SDK，是否基于 cookie，添加服务端埋单成本
• 数据展示是否可以满足需求
• 告警支持
• 价格

腾讯云日志服务 - Cloud Log Service，CLS#

日志服务（Cloud Log Service，CLS）提供一站式的日志数据解决方案。您无需关注扩缩容等资源问题，五分钟快速便捷接入，即可享受日志的采集、存储、加工、检索分析、消费投递、生成仪表盘、告警等全方位稳定可靠服务。全面提升问题定位、指标监控的效率，大大降低日志运维门槛。

Cloud Log Service 官网

使用流程#

1. 开通服务
2. 安装日志客户端：LogListener
3. 配置采集规则
4. 日志分析

数据上报方式#

日志服务（Cloud Log Service，CLS）提供采集客户端， API 接入方式和 SDK 采集方式，方便用户将应用程序日志导入到日志服务。目前日志服务提供结构化上传方式，要求数据按照 key-value 的方式进行上传。

SDK 列表#

数据展示#

JS SDK 使用 Example#

let client = new AsyncClient({
  endpoint: "ap-guangzhou.cls.tencentcs.com",
  secretId: "[secretId]",
  secretKey: "[secretKey]",
  sourceIp: "127.0.0.1",
  retry_times: 10,
});

let item = new LogItem();
item.pushBack(new Content("__CONTENT__", "你好，我来自深圳|hello world2"));
item.setTime(Math.floor(Date.now() / 1000));

let logGroup = new LogGroup();
logGroup.addLogs(item);
let request = new PutLogsRequest("[Topic_ID]", logGroup);
let data = await client.PutLogs(request);
console.log(data);

阿里云日志服务 SLS#

日志服务 SLS 是云原生观测与分析平台，为 Log、Metric、Trace 等数据提供大规模、低成本、实时的平台化服务。日志服务一站式提供数据采集、加工、查询与分析、可视化、告警、消费与投递等功能，全面提升您在研发、运维、运营、安全等场景的数字化能力。

SLS 官网

使用流程#

1. 开通日志服务
2. 创建 Project 和 Logstore
3. 开启 WebTracking
4. 上报日志
5. 查询与分析日志

数据上报方式#

日志服务支持采集服务器与应用、开源软件、物联网、移动端、标准协议、阿里云产品等多种来源的数据。包括 HTTP 请求和 SDK 上报等方式。

阿里云日志服务 - 数据采集概述
阿里云日志服务 - 使用 Web Tracking 采集日志

SDK 列表#

数据展示#

统计图表：

• 表格
• 线图
• 柱状图
• 条形图
• 饼图
• 面积图
• 单值图
• 进度条
• 时间轴
• 地图
• 流图
• 桑基图
• 词云
• 矩形树图
• 漏斗图
• 轨迹图
• 中国行政区地图
• 气泡图
• 变更图

JS SDK 使用 Example#

浏览器 JavaScript SDK

import SlsTracker from "@aliyun-sls/web-track-browser";
const opts = {
  host: "${host}", // 所在地域的服务入口。例如cn-hangzhou.log.aliyuncs.com
  project: "${project}", // Project名称。
  logstore: "${logstore}", // Logstore名称。
  time: 10, // 发送日志的时间间隔，默认是10秒。
  count: 10, // 发送日志的数量大小，默认是10条。
  topic: "topic", // 自定义日志主题。
  source: "source",
  tags: {
    tags: "tags",
  },
};
const tracker = new SlsTracker(opts);

// send data
tracker.send({
  customer: "zhangsan",
  product: "iphone 12",
  price: 7998,
});

可以看到 阿里云的 SDK 支持延迟上报，自动汇总一段时间内的 logs，然后一次性上报。可以有效减少网络请求的数量，并降低 日志服务的写入次数。

Mixpanel#

Powerful, self-serve product analytics to help you convert, engage, and retain more users.

Mixpanel 是一个强大的自助产品分析工具，可帮助您转换、吸引和留住更多用户。

Mixpanel 官网

使用流程#

1. 在 Mixpanel 新建项目，获取上报 token
2. 安装 Mixpanel SDK，并上报数据
3. 在 Mixpanel 上查看数据

数据上报方式#

客户端通过 SDK 或者 API 发送数据到 Mixpanel

SDK 列表#

• JS
• Node.js
• Objective-C
• Swift
• Android
• Python
• Java
• PHP
• Ruby
• React Native
• Flutter
• Unity

数据展示#

• Bar
• Stacked Bar
• Line
• Stacked Line
• Metric
• Pie
• Table

JS SDK 使用 Example#

JS SDK 文档

var mixpanel = require("mixpanel-browser");

mixpanel.init("YOUR_TOKEN", {
  // the whole config visit here: https://github.com/mixpanel/mixpanel-js/blob/8b2e1f7b/src/mixpanel-core.js#L87-L110
  autotrack: true,
  cross_subdomain_cookie: true,
  persistence: "cookie",
  persistence_name: "",
  upgrade: false,
  disable_persistence: false,
  disable_cookie: false,
  secure_cookie: false,
  ip: true,
  property_blacklist: [],
});

mixpanel.track("event-name", {
  age: 28,
  gender: "male",
});

Google Analytics#

官网

使用流程#

1. 注册 GA
2. 新建项目
3. 项目引入代码，上报数据
4. 进入 GA Dashboard 查看

数据上报方式#

通过 SDK 发送

SDK 列表#

IOS、Android、js

数据展示#

• 表格
• 环形图
• 折线图
• 散点图
• 柱状图
• 地理分布图

JS SDK 使用 Example#

<!-- Global Site Tag (gtag.js) - Google Analytics -->
<script
  async
  src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"
></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag() {
    dataLayer.push(arguments);
  }
  gtag("js", new Date());

  gtag("config", "GA_MEASUREMENT_ID");

  gtag("event", "event-name", { name: "yrobot" });
</script>

价格对比#

这是腾讯云价格计算器给出的一天 1G 埋点数据的价格：

• 100%索引：

  计费项	预估用量（仅供参考）	每天费用	每月费用
  写流量	170.667 MB	0.03 元/天	21.40 元/月
  标准索引流量	1 G	0.35 元/天
  标准日志存储	5 GB	0.06 元/天
  标准索引存储	30 GB	0.35 元/天

• 50%索引：

  计费项	预估用量（仅供参考）	每天费用	每月费用
  写流量	170.667 MB	0.03 元/天	13.20 元/月
  标准索引流量	512 MB	0.18 元/天
  标准日志存储	5 GB	0.06 元/天
  标准索引存储	15 GB	0.17 元/天

可以看到主导价格的主要要素是： 标准索引流量 和 标准索引存储，而且需要尽量降低索引比例。

各服务横向对比表#

个人推荐#

强烈推荐使用 Mixpanel，使用简洁明了，报表功能非常符合运营需求