手动插桩：自定义业务事件

欢迎回到第 10 章的学习。在上一节，我们学习了错误捕获。现在我们要学习手动插桩：自定义业务事件，这是追踪业务逻辑的重要方式。

本节将学习：创建自定义 Span、业务事件追踪、用户行为追踪、以及转化漏斗追踪。

创建自定义 Span

创建自定义 Span 的作用是什么？ 追踪特定的业务逻辑，记录业务事件，分析业务流程，优化业务体验。

如何创建自定义 Span？ 使用 OpenTelemetry API 的

trace.getTracer()

创建 Tracer，使用

tracer.startSpan()

创建 Span。

创建 Span 的步骤：

第一步：获取 Tracer。 使用

trace.getTracer('service-name')

获取 Tracer 实例。

第二步：创建 Span。 使用

tracer.startSpan('span-name')

创建 Span。

第三步：添加属性。 使用

span.setAttribute()

添加自定义属性。

第四步：结束 Span。 使用

span.end()

结束 Span。

代码示例：

文件路径：

src/utils/tracking.js

import { trace } from '@opentelemetry/api';

const tracer = trace.getTracer('shoehub-frontend');

export function trackProductView(productId, productName) {
  const span = tracer.startSpan('product.view', {
    attributes: {
      'product.id': productId,
      'product.name': productName,
      'event.type': 'product_view',
    },
  });
  
  span.end();
}

export function trackAddToCart(productId, quantity, price) {
  const span = tracer.startSpan('cart.add', {
    attributes: {
      'product.id': productId,
      'cart.quantity': quantity,
      'cart.price': price,
      'event.type': 'add_to_cart',
    },
  });
  
  span.end();
}

业务事件追踪

业务事件追踪的作用是什么？ 追踪关键业务事件，了解业务流程，分析业务指标，优化业务转化。

业务事件包括哪些呢？

第一个：商品浏览。 用户浏览商品列表、查看商品详情。

第二个：购物车操作。 添加商品到购物车、从购物车移除商品。

第三个：订单创建。 用户创建订单、提交订单。

第四个：支付完成。 用户完成支付、支付失败。

如何追踪业务事件？ 在业务逻辑中创建自定义 Span，记录业务事件的关键信息。

业务事件追踪示例：

// in React Use in components
import { trackProductView, trackAddToCart } from './utils/tracking';

function ProductDetail({ product }) {
  useEffect(() => {
    trackProductView(product.id, product.name);
  }, [product]);
  
  const handleAddToCart = () => {
    trackAddToCart(product.id, 1, product.price);
    // Add to cart logic
  };
  
  return (
    // Component content
  );
}

用户行为追踪

用户行为追踪的作用是什么？ 追踪用户在应用中的行为路径，了解用户使用模式，优化用户体验。

用户行为包括哪些呢？

第一个：页面访问。 用户访问哪些页面，停留时间。

第二个：功能使用。 用户使用哪些功能，使用频率。

第三个：交互模式。 用户的点击模式、滚动模式。

第四个：退出点。 用户在哪些页面退出应用。

用户行为追踪示例：

export function trackPageView(pageName, pagePath) {
  const span = tracer.startSpan('page.view', {
    attributes: {
      'page.name': pageName,
      'page.path': pagePath,
      'event.type': 'page_view',
      'timestamp': Date.now(),
    },
  });
  
  span.end();
}

export function trackUserAction(actionType, actionDetails) {
  const span = tracer.startSpan('user.action', {
    attributes: {
      'action.type': actionType,
      'action.details': JSON.stringify(actionDetails),
      'event.type': 'user_action',
    },
  });
  
  span.end();
}

转化漏斗追踪

转化漏斗追踪的作用是什么？ 追踪用户从访问到转化的完整流程，识别转化瓶颈，优化转化率。

转化漏斗包括哪些阶段呢？

第一阶段：访问。 用户访问网站。

第二阶段：浏览。 用户浏览商品。

第三阶段：加购。 用户添加商品到购物车。

第四阶段：结算。 用户进入结算页面。

第五阶段：支付。 用户完成支付。

如何追踪转化漏斗？ 在每个转化阶段创建自定义 Span，记录转化事件，分析转化率。

转化漏斗追踪示例：

export function trackConversionFunnel(stage, data) {
  const span = tracer.startSpan(`funnel.${stage}`, {
    attributes: {
      'funnel.stage': stage,
      'funnel.data': JSON.stringify(data),
      'event.type': 'conversion_funnel',
    },
  });
  
  span.end();
}

// Examples of use
trackConversionFunnel('visit', { source: 'google' });
trackConversionFunnel('browse', { productCount: 10 });
trackConversionFunnel('add_to_cart', { productId: '123' });
trackConversionFunnel('checkout', { cartValue: 199.99 });
trackConversionFunnel('payment', { orderId: '456' });

本节小结

在本节中，我们学习了手动插桩：自定义业务事件：

第一个是创建自定义 Span。 使用 OpenTelemetry API 创建自定义 Span，追踪特定业务逻辑。

第二个是业务事件追踪。 追踪关键业务事件，了解业务流程，分析业务指标。

第三个是用户行为追踪。 追踪用户在应用中的行为路径，了解用户使用模式。

第四个是转化漏斗追踪。 追踪用户从访问到转化的完整流程，识别转化瓶颈，优化转化率。

自定义业务事件追踪流程： 创建自定义 Span → 记录业务事件 → 添加属性 → 结束 Span → 发送到 Collector → 在 Grafana 中可视化。

这就是手动插桩：自定义业务事件。通过自定义业务事件追踪，我们可以深入了解业务流程和用户行为。

在下一节，我们将学习前后端追踪关联。学习如何关联前后端的追踪数据。