Vue单页面中添加cnzz统计

分类：教程日期：2021-01-29

Vue 单页面应用由于地址（路由）变化不会刷新页面，导致类似于 cnzz 这样的统计最终统计的数据不准，所以需要主动触发 cnzz 的方法进行统计，具体的方法如下：

1、首先当然是注册帐号：https://www.umeng.com/web

2、然后是添加站点，并获得统计代码地址，如：https://s5.cnzz.com/z_stat.php?id=xxxxxxxxxx&web_id=xxxxxxxxxx

3、接下来就是部署代码，在 App.vue 文件中添加以下代码：

mounted() {
   this.initCNZZ()
},

methods: {
    initCNZZ() {
        // 添加脚本
        const script = document.createElement('script')
        script.src = '你的统计代码地址'
        script.id='cnzz'
        document.body.appendChild(script)
    }
},

watch: {
    // 路由变化时发送统计
    '$route': {
        handler() {
            setTimeout(() => {
                if (window._czc) {
                    let location = window.location
                    let contentUrl = location.pathname + location.hash
                    let refererUrl = '/'
                    window._czc.push(['_setAutoPageview', false])
                    window._czc.push(['_trackPageview', contentUrl, refererUrl])
                }
            }, 300)
        },
        // 页面第一次加载的时候就执行
        immediate: true
    }
}

关于 _trackPageview api 的详细说明，可以查看官方文档：https://open.cnzz.com/a/api/trackpageview/

除了基础的统计之外，cnzz 还提供了自定义事件统计，可以定义一个公共方法，在需要统计的的事件里直接调用即可，如：

cnzzEvent(category, action, label, value, nodeid) {
    if (window._czc) {
       _czc.push(['_trackEvent', category, action, label, value, nodeid])
   }
}

关于 _trackEvent api 的详细说明，可以查看官方文档：https://open.cnzz.com/a/api/trackevent/

标签：Vue.js