自动插桩：用户交互追踪

欢迎回到第 10 章的学习。在上一节，我们学习了页面加载追踪。现在我们要学习自动插桩：用户交互追踪，这是了解用户行为的重要方式。

本节将学习：点击事件追踪、表单提交追踪、以及路由变化追踪。

点击事件追踪

点击事件追踪的作用是什么？ 追踪用户的点击行为，了解用户交互模式，识别热点区域，优化用户体验。

如何追踪点击事件？ UserInteractionInstrumentation 会自动追踪点击事件，无需手动添加代码。

追踪的信息包括哪些呢？

第一个：点击目标元素。 被点击的元素类型（按钮、链接、输入框等）。

第二个：点击位置。 点击的坐标位置。

第三个：点击时间。 点击发生的时间戳。

第四个：元素属性。 元素的 ID、类名、文本内容等属性。

配置代码：

import { UserInteractionInstrumentation } from '@opentelemetry/instrumentation-user-interaction';

const userInteractionInstrumentation = new UserInteractionInstrumentation({
  enabled: true,
  events: ['click', 'submit', 'change'],
  ignoreEvents: [], // Ignored event types
  ignoreUrls: [], // overlooksURLpatterns
});

表单提交追踪

表单提交追踪的作用是什么？ 追踪表单提交事件，了解用户输入行为，识别表单验证问题，优化表单体验。

如何追踪表单提交？ UserInteractionInstrumentation 会自动追踪表单提交事件，包括表单验证、提交成功、提交失败等。

追踪的信息包括哪些呢？

第一个：表单ID。 表单的唯一标识。

第二个：表单字段。 表单中的字段名称和值（注意隐私保护）。

第三个：提交时间。 表单提交的时间戳。

第四个：提交结果。 提交成功或失败，错误信息。

表单提交追踪示例：

// UserInteractionInstrumentation Automatically track form submissions
// Tracking information includes：
// - formsIDand class names
// - Submission time
// - Submit results (successful)/miscarriages）
// - error message (if any）

路由变化追踪

路由变化追踪的作用是什么？ 追踪单页应用的路由变化，了解用户导航路径，分析用户行为流程。

如何追踪路由变化？ 需要手动配置 React Router 集成，追踪路由变化事件。

追踪的信息包括哪些呢？

第一个：路由路径。 新的路由路径。

第二个：路由参数。 路由参数和查询字符串。

第三个：导航时间。 路由切换的时间。

第四个：导航来源。 从哪个路由导航而来。

React Router 集成代码：

文件路径：

src/App.js

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';
import { trace } from '@opentelemetry/api';

function App() {
  const location = useLocation();
  const tracer = trace.getTracer('react-router');

  useEffect(() => {
    const span = tracer.startSpan('route.change', {
      attributes: {
        'route.path': location.pathname,
        'route.search': location.search,
        'route.hash': location.hash,
      },
    });
    
    span.end();
  }, [location, tracer]);

  return (
    // App content
  );
}

本节小结

在本节中，我们学习了自动插桩：用户交互追踪：

第一个是点击事件追踪。 追踪用户点击行为，了解用户交互模式，识别热点区域。

第二个是表单提交追踪。 追踪表单提交事件，了解用户输入行为，优化表单体验。

第三个是路由变化追踪。 追踪单页应用的路由变化，了解用户导航路径，分析用户行为流程。

用户交互追踪流程： 自动插桩启用 → 追踪用户交互事件 → 收集交互数据 → 发送到 Collector → 在 Grafana 中可视化。

这就是自动插桩：用户交互追踪。通过用户交互追踪，我们可以深入了解用户行为和体验。

在下一节，我们将学习自动插桩：网络请求追踪。学习如何追踪 API 调用。