前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Vue 2.x折腾记 - (21) CNZZ统计在引流页中的应用姿势

Vue 2.x折腾记 - (21) CNZZ统计在引流页中的应用姿势

作者头像
CRPER
发布2019-06-15 17:38:20
1.1K0
发布2019-06-15 17:38:20
举报
文章被收录于专栏:CRPER折腾记

前言

因为单页面开发,所以统计代码的封装和考虑点是我们需要着手设计的(比如维护性)。

cnzz提供的js注入有四种方式,如下

image.png
image.png

我这边用的是第一种,为了方便定位问题,采取问答式来写这篇水文。

实现

cnzz js的注入

最普通的就是我们直接去操作html的head,然后手动复制那么一段进去;

若是我们要考虑下维护性,基于 vue cli 3 构建项目的小伙伴可以用脚手架封装的特性来抽离;

就是 .env 文件 + 模板插值 来实现; 前者是环境配置文件,后者是模板语言。

具体可以官方的文档:

接着看我业务代码的实现,来加深你的了解。

  • .env(这个不再接着带环境后缀的是所有环境都可以读取,.env.dev 这种是专用于开发模式的,具体看文档)
image.png
image.png
  • public/index.html
image.png
image.png

移除丑陋的站长统计DOM

因为用的文字版,所以会植入一个 a 标签,看了下dom结构,就很好处理了, 我们监听事件 DOMContentLoaded (页面结构解析完毕【和load差别很大】),顺利拿到dom然后隐藏掉;

image.png
image.png

行为封装

埋点行为触发主要用的是CNZZ这个事件(trackevent)

对于可以重复利用的东西,抽离为函数是最佳姿势,具体代码如下(结合我业务的),

为什么要判断 _czc ,是那个js注入的文件有时候不一定加载成功,这时候就没有这个东东了。

category 我们这边主要用来作为分享的 app 来源,默认值所以从工程的配置文件读取(统一维护)

image.png
image.png
监听页面打开的埋点
image.png
image.png
行为触发
image.png
image.png

总结

其他一些行为点击的,具体在对应的函数执行即可,这样单页面的埋点触发基本是ok的。

具体业务具体分析,若是行为封装要分离的更彻底一些,那一些业务代码的设计也肯定要调整。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2019年06月13日,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 前言
  • 实现
    • cnzz js的注入
      • 移除丑陋的站长统计DOM
        • 行为封装
          • 监听页面打开的埋点
          • 行为触发
      • 总结
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档