友盟埋点工具(vue2、vue3)

529 阅读1分钟

统计埋点(私有库没对外)

1、使用方法

1.1 trackEvent(事件埋点)

// 1.注意:在.npmrc中指定私有源 @kk-private:registry=http://nexus.kukewang.com/repository/kk-nodejs/

// 2.安装依赖包
npm install @kk-private/analytics

// 3.(可选)建议设置埋点url(站点地址)环境变量
VUE_APP_CNZZ_URL = '//v1.cnzz.com/z.js?id=xxxxxx&async=1'

// 4. 用法1、vue 默认挂载到vue原型
    // 1.1导入
    import { Analytics } from '@kk-private/analytics'
    
    // 1.2 引入友盟站点地址
        // vue2
        const cnzzurl = process.env.VUE_APP_CNZZ_URL 
        // vue3
        const cnzzurl = import.meta.env.VITE_CNZZ_URL; 
    
    // 1.3 注册插件
    Vue.use(Analytics,cnzzurl)
    
    // 1.4 使用
    this.$analytics.track('category', 'action',...)

// 用法2、vue指令

    // 2.1导入
    import { Analytics, trackDirective } from '@kk-private/analytics'
    
    // 2.2 引入友盟站点地址
        // vue2
        const cnzzurl = process.env.VUE_APP_CNZZ_URL 
        // vue3
        const cnzzurl = import.meta.env.VITE_CNZZ_URL; 
        
    // 2.3 注册插件
    Vue.use(Analytics,cnzzurl).use(trackDirective)
    
    // 2.4 在.vue中使用
    v-track="['category', 'action',...]"
    
    // 2.5 在.tsx中使用
    v-track={['category'].concat('action')}

// 用法3、js
// 1.1导入
import { Analytics } from '@kk-private/analytics'

// 1.2 引入友盟站点地址
    // vue2
    const cnzzurl = process.env.VUE_APP_CNZZ_URL 
    // vue3
    const cnzzurl = import.meta.env.VITE_CNZZ_URL; 
    
// 1.3 创建埋点实例
const analytics = new Analytics(cnzzurl);

// 1.4 js中使用
analytics.track('category', 'action',...)

1.2 PV(页面埋点)

// 首先关闭自动统计,防止页面的流量被统计双倍
analytics.setAutoPageview(false)

// 手动统计pv
analytics.pv(contentUrl, refererUrl)

// 或者自动统计pv
router.afterEach((to, from) => {
  analytics.pvByRoute(to, from)
})

其他方法列表

  • track(category, action, label, value, nodeid): 跟踪统计
  • pv(contentUrl, refererUrl): 统计pv
  • setUuid(id): 上报自定义的用户ID
  • setAutoPageview(flag): 设置是否自动统计pv
  • pvByRoute(route, lastRoute): 根据route统计pv
  • setAccount(siteid): 绑定要接受API请求的统计代码siteid
  • setCustomVar(name, value, time): 用于发送为访客打自定义标记的请求
  • deleteCustomVar(name): 发送删除自定义访客标签的请求
  • setUrl(cnzzurl): 手动更换url