php加cnzz,Vue单页面中添加cnzz统计

Vue单页面中添加cnzz统计

分类：教程

日期：2021-01-28

点击(180)

评论(0)

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

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

}

}

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

cnzzEvent(category, action, label, value, nodeid) {

if (window._czc) {

_czc.push(['_trackEvent', category, action, label, value, nodeid])

}

}