Vue 项目中使用友盟埋点

产品给用户使用后，想要感知项目的 PV（浏览次数）、UV（独立访客），可以使用第三方埋点，这里记录的是 Vue 项目（hash 路由）基于友盟的埋点方法，包含事件统计。

¶一、PV、UV

新建一个/src/mixins/mixUmeng.js文件，内容如下：

/* eslint-disable */
/******************* 友盟埋点 *******************/

const SITE_ID = 1234567890 // 替换成自己的站点ID          

export default {
  mounted () {
    this.$nextTick(() => {
      const script = document.createElement('script')
      script.src = `https://v1.cnzz.com/z_stat.php?id=${ SITE_ID }&web_id=${ SITE_ID }`
      script.language = 'JavaScript'
      script.id = 'cnzz'
      document.body.appendChild(script)
    })
  }
}

接下来在App.vue中引入该 mixins 即可：

<script>
  import mixUmeng from '@/mixins/mixUmeng'
  
  export default {
    mixins: [mixUmeng]
  }
</script>

¶二、事件统计

事件埋点可用来统计页面上的一些交互动作，如播放、暂停、跳往第三方页面前的次数统计等。友盟事件统计官方文档链接：https://open.cnzz.com/a/api/trackevent。
使用 vue 的自定义指令来注册一下埋点指令v-log，如下：

新建一个 /src/utils/directive/eventLog.js 文件，内容如下：

/***************** 埋点自定义指令 *******************/
// readme: https://open.cnzz.com/a/api/trackevent/

export default {
  install (Vue) {
    Vue.directive('log', {
      bind (el, binding) {
        el.addEventListener('click', () => { window._czc.push(['_trackEvent', ...binding.value]) }, false)
      },
      unbind (el) {
        el.removeEventListener('click', () => { console.log('remove') })
      }
    })
  }
}

在main.js中引用该文件：

1
2
3

// main.js
import eventLog from '@utils/directive/eventLog.js'
Vue.use(eventLog)

接下来在 dom 元素加上自定义指令：

1 2	<van-button plain type="info" :disabled="cameraStatus !== 'ready'" @click="startCamera" v-log="['H5 页面调用摄像头与拾音器', '开始']">开始</van-button>

注意

v-log 后的数组最少需要两个元素，否则统计不到该事件，友盟默认3个