Vue 2.x折腾记 - (21) CNZZ统计在引流页中的应用姿势
2019-06-13 00:03
1296 查看
版权声明:版权所有:CRPER(crper@outlook.com); 掘金|Github:CRPER; https://blog.csdn.net/bomess/article/details/91665242
我们监听事件
前言
因为单页面开发,所以统计代码的封装和考虑点是我们需要着手设计的(比如维护性)。
cnzz提供的js注入有四种方式,如下
我这边用的是第一种,为了方便定位问题,采取问答式来写这篇水文。
实现
cnzz js的注入
最普通的就是我们直接去操作html的head,然后手动复制那么一段进去;
若是我们要考虑下维护性,基于
vue cli 3构建项目的小伙伴可以用脚手架封装的特性来抽离;
就是
.env文件 +
模板插值来实现; 前者是环境配置文件,后者是模板语言。
具体可以官方的文档:
- html-and-static-assets
- environment-variables : 客户端使用要用
VUE_APP
开头才能生效
接着看我业务代码的实现,来加深你的了解。
- .env(这个不再接着带环境后缀的是所有环境都可以读取,.env.dev 这种是专用于开发模式的,具体看文档)
- public/index.html
移除丑陋的站长统计DOM
因为用的文字版,所以会植入一个
a标签,看了下dom结构,就很好处理了,
我们监听事件
DOMContentLoaded(页面结构解析完毕【和load差别很大】),顺利拿到dom然后隐藏掉;
行为封装
埋点行为触发主要用的是CNZZ这个事件(trackevent)
对于可以重复利用的东西,抽离为函数是最佳姿势,具体代码如下(结合我业务的),
为什么要判断
_czc,是那个js注入的文件有时候不一定加载成功,这时候就没有这个东东了。
category我们这边主要用来作为分享的
app来源,默认值所以从工程的配置文件读取(统一维护)
监听页面打开的埋点
行为触发
总结
其他一些行为点击的,具体在对应的函数执行即可,这样单页面的埋点触发基本是ok的。
具体业务具体分析,若是行为封装要分离的更彻底一些,那一些业务代码的设计也肯定要调整。
相关文章推荐
- vue&cordova混合应用
- vue的v-if和v-else-if判断的应用
- 18 理解反射的概念19构造方法的反射应用20成员变量的反射 21成员变量反射的综合案例22成员方法的反射
- Vue折腾记-(1)初探
- MOSS 2007应用日记(21)――如何通过添加链接让子网站显示在主页
- 坚持#第216天~零基础自学云计算基础语言应用21~25节
- Android核心分析之(21)Android应用框架之AndroidApplication
- Vue 应用单元测试的策略与实践 04 - Vuex 单元测试
- Weex中Web端做SPA,Native端做多页应用以及Vuex的接入
- vue实现todo应用总结
- 了解 Android 应用的文件存储目录,掌握持久化数据的正确姿势
- axios在Vue组件中应用
- 数组的应用大折腾
- Vue实现购物车场景下的应用
- 【初恋】vue单页应用开发总结
- vue验证码组件应用实例
- Vue.js使用vue-router构建单页应用
- C#--第2周实验--任务11--编写一个控制台应用--1列数规则如下:1,1,2,3,5,8,13,21,34...求第30位数是多少?(用递归算法实现)
- [Erlang_Question21]Erlang性能分析工具eprof fporf的应用
- vue 计算属性应用--金额显示和数据库金额保存