[JavaScript知识库]基于站长之家（CNZZ）的网站流量统计分析 (以vue代码为例)

使用说明

1. 注册登录(https://www.umeng.com/web)
2. 进入控制台
3. 新建站点（填写域名等相关信息）
4. 在mixins文件夹新建Umeng.js并写入以下代码

const SITE_ID = 1280721304 // 替换成自己的站点ID
export default {
    mounted() {
        this.$nextTick(() => {
            window._czc = window._czc || []
            window._czc.push(["_setAccount", "1280721304"]); // 替换成自己的站点ID
            const script = document.createElement('script')
            script.src = `https://s4.cnzz.com/z_stat.php?id=${ SITE_ID }&web_id=${ SITE_ID }`
            script.language = 'JavaScript'
            script.type = 'text/javascript'
            script.id = 'cnzz'
            document.body.appendChild(script)
        })
    }
}

5. 在APP.vue中引入 (注册绑定站点)

import Umeng from "src/mixins/Umeng";
export default {
  mixins: [Umeng], //插件混入
};

6. PV统计：全局路由监听方式进行（APP.vue）

  watch: {
    $route() {
      if (window._czc) {
        let location = window.location;
        let contentUrl = location.pathname + location.hash;
        window._czc.push(["_trackPageview", contentUrl]);
      }
    }
  }

7. 事件统计：在directives文件夹下新建UmengEvent.js封装成自定义指令形式自由触发

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

8. 在main.js中写入以下代码进行指令注册

import UmengEvent from 'src/directives/UmengEvent.js'
Vue.use(UmengEvent)

9. 事件上报使用说明

语法：
v-umeng="[category,action,label,value,nodeid]"

参数含义：
category：事件对象|必填，如“个人中心”、“轮播图”等。
action：事件操作|必填，表示行为动作，如"播放"、"翻页"等。
label：事件标签|选填，详细描述，如具体哪个视频、翻到第几页等。
value：事件值|选填，整数型，用于打分型事件的分值，如加载时长、订单价格等。
nodeid：div元素id值|选填，用于在“用户视点”功能上重绘元素的事件发生情况。

案例：
<span @click="submit" v-umeng="['用户注册','取消']">提交</span>

10. 自定义访客种类统计

语法：
window._czc.push(["_setCustomVar",name,value,time]);

参数含义：
name：访客种类|必填，如“会员级别”、“访客来源”等。每个访客最多同属于5种类别。
value：访客值|必填，如“VIP1”、“VIP2”、“金账户”等（对应name为“访客级别”的情况）。
time：有效时长，数值项|选填，表示本自定义访客值的有效时间，以“秒”为单位。不填或“1”表示长期有效，“0”表示仅发包页面有效，“2”表示仅本次访问之中有效。

案例：
window._czc.push(["_setCustomVar","会员级别","钻石",1]);
window._czc.push(["_setCustomVar","是否登录","已登录",7200]);//7200秒或设置长期
window._czc.push(["_deleteCustomVar","是否登录"]);//用户退出时操作
window._czc.push(["_setCustomVar","访客来源","微博",0]);
window._czc.push(["_setCustomVar","访客渠道","百度SEO关键词",2]);