当前位置：首页 > article >正文

用户点击商品埋点的实现方案

article 2025/2/8 13:22:47

在高并发、可扩展性和高可用性的前提下，实现用户点击商品的埋点，方案应包括数据采集、数据传输、数据存储和数据分析四个主要环节。下面是一个完整的埋点实现方案：

1. 方案架构

整体流程：

前端埋点：用户点击商品时，前端（Web/APP）触发埋点事件并上报数据。
后端接收：后端提供 API 接收埋点数据，并进行基础校验和格式化。
消息队列（Kafka/RabbitMQ）：后端将埋点数据异步写入 Kafka，解耦流量压力，保证高吞吐。
数据存储：
- 实时分析：使用 Flink/Spark Streaming 订阅 Kafka，实时处理点击数据。
- 离线存储：埋点数据写入 Elasticsearch（ES）用于查询，或者 Hadoop/Hive 进行离线分析。
数据分析：使用 Flink/Spark + ClickHouse/Hive 分析商品点击数据，供业务使用（如推荐系统、用户行为分析）。

2. 具体实现

(1) 前端埋点（Web & App）

前端可以采用手动埋点或者无埋点方案：

手动埋点：前端在商品详情页点击事件中手动上报数据。
自动埋点：使用 SDK 监听所有 click 事件，并自动收集数据。

示例（Web 前端埋点代码）：

document.getElementById('product').addEventListener('click', function() {
    let clickData = {
        userId: getUserId(),
        productId: getProductId(),
        timestamp: new Date().getTime(),
        pageUrl: window.location.href,
        userAgent: navigator.userAgent
    };

    navigator.sendBeacon('/track/click', JSON.stringify(clickData));
});
// navigator.sendBeacon 适用于埋点请求，不会阻塞页面跳转。

(2) 后端埋点 API（Java SpringBoot）

后端提供一个 API 来接收埋点数据，并将其写入 Kafka。

@RestController
@RequestMapping("/track")
public class TrackingController {
    
    @PostMapping("/click")
    public ResponseEntity<String> trackClick(@RequestBody ClickEvent event) {
        // 校验数据
        if (event.getUserId() == null || event.getProductId() == null) {
            return ResponseEntity.badRequest().body("Invalid parameters");
        }
        
        // 异步处理，将数据写入 Kafka
        KafkaTrackingService.trackClick(event);
        
        return ResponseEntity.ok("Click event tracked successfully");
    }
}

优化点：

请求校验：检查 userId、productId 是否为空，防止垃圾数据。
异步处理：埋点 API 只负责接收请求，数据处理交给 Kafka，提高系统吞吐量。

(3) 使用 Kafka 进行高并发数据存储

Kafka 适用于高吞吐数据流，将埋点数据写入 Kafka，保证系统的解耦和可扩展性。

import org.apache.kafka.clients.producer.KafkaProducer;
import org.apache.kafka.clients.producer.ProducerRecord;
import java.util.Properties;

public class KafkaTrackingService {
    private static KafkaProducer<String, String> producer;

    static {
        Properties props = new Properties();
        props.put("bootstrap.servers", "localhost:9092");
        props.put("key.serializer", "org.apache.kafka.common.serialization.StringSerializer");
        props.put("value.serializer", "org.apache.kafka.common.serialization.StringSerializer");
        producer = new KafkaProducer<>(props);
    }

    public static void trackClick(ClickEvent event) {
        String message = event.getUserId() + "," + event.getProductId() + "," + event.getTimestamp();
        producer.send(new ProducerRecord<>("click-events", event.getUserId(), message));
    }
}

Kafka 优势：

高吞吐、低延迟：Kafka 可以处理百万级 TPS 的数据写入。
持久化日志：保证埋点数据不会丢失。

(4) 数据消费（Flink 实时计算 + Elasticsearch 查询）

Kafka 数据可以被 Flink/Spark Streaming 订阅，进行实时数据分析，并写入 Elasticsearch 供查询。
使用 Flink 消费 Kafka 并写入 ES

StreamExecutionEnvironment env = StreamExecutionEnvironment.getExecutionEnvironment();

// 读取 Kafka 数据流
FlinkKafkaConsumer<String> kafkaConsumer = new FlinkKafkaConsumer<>(
        "click-events",
        new SimpleStringSchema(),
        properties
);
DataStream<String> clickStream = env.addSource(kafkaConsumer);

// 解析数据并写入 Elasticsearch
clickStream.map(event -> {
    String[] fields = event.split(",");
    Map<String, String> jsonMap = new HashMap<>();
    jsonMap.put("userId", fields[0]);
    jsonMap.put("productId", fields[1]);
    jsonMap.put("timestamp", fields[2]);
    return jsonMap;
}).addSink(new ElasticsearchSink.Builder<>(esHosts, esSinkFunction).build());

env.execute();

为什么用 Flink？

实时计算：可以在毫秒级别计算点击热度。
无界数据流：适用于埋点这种持续流数据。

(5) 数据查询（Elasticsearch）

商品点击量可以在 ES 中查询，支持实时查询和聚合分析：

GET click-tracking/_search
{
  "query": {
    "match": {
      "productId": "12345"
    }
  },
  "aggs": {
    "click_count": {
      "value_count": {
        "field": "productId"
      }
    }
  }
}

这样可以快速获取商品点击数，提供给热门商品推荐系统。

3. 方案优势

方案优点
前端上报（sendBeacon）低延迟，不影响用户体验

方案	优点
前端上报（sendBeacon）	低延迟，不影响用户体验
Kafka 消息队列	解耦系统，支持高并发写入
Flink 实时计算	毫秒级分析，支持实时推荐
Elasticsearch 查询	支持秒级查询商品点击数据