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

Vue单页面中添加cnzz统计

分类：教程

日期：2021-01-28

点击(180)

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])

}

php加cnzz,Vue单页面中添加cnzz统计相关推荐

怎样在vue单页面中引入其他组件
场景在一个vue的单页面,假如是home.vue中要引入其他组件的内容. 页面结构如下: 实现首先在components下新建组件Today_recommend.vue组件 <templat ...
html加上百度统计,vue单页面应用加入百度统计
版权声明:本文为CSDN博主「钟文辉」的原创文章,遵循CC 4.0 by-sa版权协议,转载请附上原文出处链接及本声明. 原文链接:https://blog.csdn.net/qq_39753974/ ...
在js在页面中添加百度统计代码
1. 新版统计代码获取 (不想手工添加代码?立刻一键安装) 此代码同时适用于PC端.移动端的页面,以异步加载形式进行加载,数据更准确.加载速度更快.请将此代码复制并粘贴到您要跟踪的每个网页中. < ...
Vue单页面中进行业务数据的上报
为什么要在标题里加上一个业务数据的上报呢,因为在咱们前端项目中,可上报的数据维度太多,比如还有性能数据.页面错误数据.console捕获等.这里我们只讲解业务数据的埋点. 业务数据的上报主要分为: 各 ...
nginx配置解决vue单页面打包文件大，首次加载慢的问题
nginx配置解决vue单页面打包文件大,首次加载慢的问题参考文章: (1)nginx配置解决vue单页面打包文件大,首次加载慢的问题 (2)https://www.cnblogs.com/golo ...
php vue seo,处理 Vue 单页面 SEO 的另一种思路
(设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.Rea ...
VUE单页面应用百度统计失效问题解决方法
VUE单页面应用在进行百度统计时,只能统计到主页的访问次数,而不能统计到子页面. 这是因为,如果按照以上百度统计提供的方法添加统计代码,在VUE单页面应用,如果不刷新,只会加载一次index.html ...
seo需要处理页面html,详解处理Vue单页面应用SEO的另一种思路
(设置vue 单页面meta info信息,如果需要单页面SEO,可以和 prerender-spa-plugin形成更优的配合) 单页面应用在前端正大放光彩.三大框架 Angular.Vue.Rea ...
vue单页面背景颜色修改
最近在做项目中,使用vue开发移动端项目,遇到一个小问题,路由跳转同时修改当前页面的背景色. 下面简单说一下vue单页面应用,由于vue的单页面应用导致我们的项目只有一个index.html文件,然而 ...
vue index.html 缓存,解决vue单页面回退页面 keeplive 缓存问题
场景:项目中遇到 vue 点击回退从A页跳到B页,缓存A页,当B页状态修改再次返回A时,A页查询条件缓存不刷新,列表刷新 A页: B页: 解决方法: 利用keep-alive 缓存需要缓存的页面 1 ...

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

php加cnzz,Vue单页面中添加cnzz统计相关推荐

最新文章

热门文章