dowebok

Vue单页面中添加cnzz统计

分类:教程 日期: 点击(116) 评论(0)

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/

标签:

相关文章