如何在React技术栈项目中集成Countly实现数据分析功能

1. 依赖安装 #

Countly 官方已提供适配 Web 场景的 npm 依赖包，直接执行命令安装即可：

npm install countly-sdk-web
# 若使用 yarn
yarn add countly-sdk-web

2. 基础能力封装 #

新建 src/utils/countly.js 工具文件，统一封装初始化、事件上报逻辑：

import Countly from 'countly-sdk-web'

// 初始化配置，仅执行一次
Countly.init({
  app_key: '你的Countly项目AppKey',
  url: '你的Countly服务端地址',
  // 单页应用适配配置
  app_version: '你的应用版本号',
  debug: process.env.NODE_ENV === 'development', // 开发环境开启调试日志
  use_session_cookie: true,
  interval: 30000, // 数据上报间隔，单位毫秒
})

// 封装页面访问上报方法
export const trackPageView = (pagePath) => {
  Countly.track_pageview(pagePath)
}

// 封装自定义事件上报方法
export const trackEvent = (eventName, params = {}) => {
  Countly.add_event({
    key: eventName,
    segmentation: params,
  })
}

export default Countly

3. 全局初始化与路由自动追踪 #

在应用入口文件 src/index.js 最顶部引入初始化逻辑：

// 放在所有业务代码引入之前
import './utils/countly'

配合 react-router-dom 实现路由切换自动上报页面访问，在根路由组件（通常是 App.js）中添加监听逻辑：

import { useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import { trackPageView } from './utils/countly'

function App() {
  const location = useLocation()

  useEffect(() => {
    // 每次路由路径变化时上报页面访问
    trackPageView(location.pathname)
  }, [location.pathname])

  // 其余原有逻辑
  return <>{/* 你的路由渲染逻辑 */}</>
}

export default App

4. 业务场景埋点 #

• 组件交互埋点：在用户触发按钮点击、表单提交等交互时调用上报方法

  import { trackEvent } from '@/utils/countly'
  
  const SubmitButton = () => {
    const handleSubmit = () => {
      // 上报表单提交事件，附带提交结果参数
      trackEvent('form_submit', { form_type: 'login', result: 'success' })
      // 原有业务逻辑
    }
    return <button onClick={handleSubmit}>提交</button>
  }
  

• Redux + Saga 异步流程埋点：在 saga 处理异步请求的逻辑中上报请求耗时、结果等数据

  import { call, put } from 'redux-saga/effects'
  import { trackEvent } from '@/utils/countly'
  
  function* fetchUserInfoSaga() {
    const startTime = Date.now()
    try {
      const res = yield call(fetchUserInfoApi)
      yield put(fetchUserInfoSuccess(res))
      // 上报接口请求成功事件
      trackEvent('api_request', {
        api_name: 'fetchUserInfo',
        success: true,
        cost: Date.now() - startTime
      })
    } catch (err) {
      yield put(fetchUserInfoFail(err))
      // 上报接口请求失败事件
      trackEvent('api_request', {
        api_name: 'fetchUserInfo',
        success: false,
        cost: Date.now() - startTime,
        error_code: err.code
      })
    }
  }
  

注意事项 #

• 开发环境可通过 debug 配置开启日志，确认上报逻辑正常后再上线
• 不要在上报参数中传入用户手机号、身份证号等敏感隐私信息
• 生产环境建议关闭 debug 配置，避免控制台输出冗余日志

内容的提问来源于stack exchange，提问作者Manish