新手养成流---前端PC端上架浙里办单点登录，埋点及适老化（三）（终篇）

今天来给PC端的浙里办上架来个大结局，入座，开炫。

前面我们已经说了适老化和单点登录的内容，今天就来讲讲埋点（三者并没有绝对的先后）

首先，讲一下为什么要去埋点，这里是浙里办的埋点，如果要上浙政钉还会有浙政钉的埋点，微信小程序等很多平台都是要去埋点。

什么是埋点？官方解释是在应用程序中插入代码或工具来记录某些事件的行为和属性，例如用户在应用中的点击、浏览、购买、注册等操作行为。简单来说就是在应用程序中，做个监控，做个标记，至于目的云云，自己理解就好，我们只要明白，这个是什么，作用是什么，怎么去做就OK了。

现在埋点是啥，为什么要埋点，已经基本清楚了，当然这里是比较简单的，想要更专业和更学术解释的，可以移步百度，这里不多说，直接开讲怎么去正确的埋点。

日常推荐一个文件指引，其实我想找一个PC端的官方埋点文件的，尴尬的是目前手里只有移动端的，但庆幸的还有一个全文的开发指引，建议仔细阅读，这里附上。

为了更加清楚的知道埋点，我将埋点具体分在了三处地方，记住检查即可，至于他们的学名，什么基础埋点，全局埋点，用户信息埋点这些，不多赘述，一个意思，下面讲的时候会带一下，不必纠结。

1 index.html文件（如果你是vue项目应该只有一个.html文件，别说找不到）

在这个页面里，我们需要引入两个文件分别是

<script type="text/javascript" src="//assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.1.0/zwjsbridge.js"></script> <script type="text/javascript" src="https://assets.zjzwfw.gov.cn/assets/zwlog/1.0.0/zwlog.js"></script>

埋点js文件引入都能理解，就是为了埋点做准备的，这里也是不需要其他什么操作，直接引入即可。

我主要讲一下这个浙里办js文件， 看名字大概就知道是类似浙里办沟通，桥梁之类的作用，而实际上也是，这个文件是在引入sdk,引入成功之后，我们就可以在**

ZWJSBridge

上调用各种sdk**，调用浙里办相关方法。

还有一点就是关于打印的问题，这里也说一下，在浙里办的环境下，代码里的console.log（）是打印不出来的，在控制台也是完全无效的，想要使用打印调试的话，需要使用浙里办提供的方式，细心的小伙伴，在上图也应该是发现了，下面附上具体代码，成功之后再浙里办页面一般是在右下角会有提示。

<script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script> <script> var vConsole = new window.VConsole(); </script>

2 新建一个埋点js文件（建议在utils下新建即可，名字自定义）

这个文件里最基本的要有用户信息采集和页面PV日志，当然还可以配置很多其他的细节，这个自行配置即可。

用户信息采集

import store from "@/store/index"

// 埋点对象

let zwlog;

// 页面埋点数据

let pageLogMap = {};

// 不参加埋点的白名单

const White_List = [

// 测试页面的登录

// "/login/index"

]

/*

• *******用户信息采集，同时声明 Zwlog 对象实例

• uerId 用户 ID 没登录就非必填，登录了必填

*/

export function initZwlog() {

if (store.getters.userId) {

    let userId = store.getters.userId

    zwlog = new ZwLog({

        _user_id: userId,

        // _user_nick:user.userName

    });

}

}

这个方法调用和userId有关，userId是在单点登录成功时后端返回，存入store的,主要是用来标记登录和未登录状态的，比如我这里01，代表的就是未登录；02，就是已登录含义，可自行定义。

页面埋点

/*

• *******PV 日志参数- global_args

• url 页面路径 【选填】（未传参默认获取当前路由地址）

• enterPageTime 【必填】（默认在路由改变的时候自动获取时间） 进入页面的时间 new Date()

• leavePageTime 【必填】（默认在路由改变的时候自动获取时间） 离开页面的时间 new Date()

• loadTime【必填】（页面onShow中获取当前时间） 加载完的时间 new Date()

• responseTime 【必填】（页面onShow的nextTick中获取当前时间） 响应完的时间 new Date()

*/

export function zwlogPvGlobal({

url = null,

enterPageTime = null,

leavePageTime = null,

loadTime = null,

responseTime = null,

pageName = ""

} = {}) {

let path = url

let flag = false

for (let i = 0; i < White_List.length; i++) {

    const ele = White_List[i];

    let reg = new RegExp('^' + ele + '$', "g")

    let _f = reg.test(path)

    if (_f) {

        flag = true

    }

}

if (flag) return

if (!zwlog) initZwlog();

if (!zwlog) return

if (!pageLogMap.hasOwnProperty(path))

    pageLogMap[path] = {

        enterPageTime: null,

        leavePageTime: null,

        loadTime: null,

        responseTime: null,

    };

if (enterPageTime) pageLogMap[path].enterPageTime = enterPageTime;

if (leavePageTime) pageLogMap[path].leavePageTime = leavePageTime;

if (loadTime) pageLogMap[path].loadTime = loadTime;

if (responseTime) pageLogMap[path].responseTime = responseTime;

if (

    pageLogMap[path].enterPageTime &&

    pageLogMap[path].leavePageTime &&

    pageLogMap[path].loadTime &&

    pageLogMap[path].responseTime

) {

    /*

     * miniAppId 应用开发管理 平台 appId

     * miniAppName 应用开发管理 平台应用名称

     * log_status 用户登录状态 （01:未登录/ 02:单点登录）

     * Page_duration 浏览时长  用户从进入到离开当 前页面的时长

     * t2 页面加载时间  页面启动到加载完成 的时间

     * t0  页面响应时间  页面启动到页面响应 完成的时间

     * pageId  应用页面 ID

     * pageName  应用页面名称

     */

    let t2 =

        pageLogMap[path].loadTime.getTime() -

        pageLogMap[path].enterPageTime.getTime();

    let t0 =

        pageLogMap[path].responseTime.getTime() -

        pageLogMap[path].enterPageTime.getTime();

    setTimeout(() => {

        let pvParams = {

            miniAppId: "自己的appid",

            miniAppName: "项目名称",

            page_start: "", //参数固定，用户进入当前页面时上报

            t2: t2 / 1000 + "秒", //页面加载时间

            t0: t0 / 1000 + "秒", //页面响应时间

            log_status: "store.getters.userId ? "02" : "01""

            miniapp_first_user: "0", //是否首次访问微应用

            userType: store.getters.userId ? "legal" : document.cookie, //用户类型，个人(person)/企业(legal)  用户登录则采集，若未登陆则上传当前浏览器cookeid

            pageId: path,

            pageName: pageName,

        };

        zwlog.onReady(function() {

            zwlog.sendPV(pvParams);

            delete pageLogMap[path];

        });

    }, 500);

} else {

    let result = "";

    for (let k in pageLogMap[path]) {

        if (!pageLogMap[path][k]) result += k + "，";

    }

}

}

• 页面埋点需要我们注意的有appid和appname(项目名称)，这两个需要的是我们自己的应用信息，不要盲目cv*

3 App.vue页面（没有太多要注意的，直接附代码）

import { zwlogPvGlobal } from "@/utils/zwUtil.js";

export default {

data() {

return {};

},

watch: {

$route(to, from) {

  zwlogPvGlobal({

    url: to.path,

    enterPageTime: new Date(),

    pageName: to.meta.title,

  });

  zwlogPvGlobal({

    url: from.path,

    leavePageTime: new Date(),

    pageName: from.meta.title,

  });

},

},

mounted() {

// 刚进入系统埋点

zwlogPvGlobal({

  url: this.$route.path,

  enterPageTime: new Date(),

  pageName: this.$route.meta.title,

});

},

};

4 页面埋点（在每一个页面进行埋点）

这个方法有很多，只要保证在每个页面都去调用即可，不嫌麻烦的可以一个页面一个页面去加，也可以放在路由拦截器里操作，还可以用mixin混合方式。

我这里是用的mixin，新建一个myMixin.js文件,.然后再main.js里注册全局混入即可，下面附上mixin里的代码，仅供参考。

import { zwlogPvGlobal } from "@/utils/zwUtil.js";

const mixin = {

methods: {

// 页面埋点

addZwLog() {

// 加载时间

zwlogPvGlobal({

  url: this.$route.path,

  loadTime: new Date(),

});

// 相应时间

this.$nextTick(() => {

    zwlogPvGlobal({

    url: this.$route.path,

    responseTime: new Date(),

  });

});

},

},

created() {

this.addZwLog()

},

}

export default mixin

5 怎么看埋点是否成功

进入项目，打开控制台，刷新切换页面尝试。

先把平时的Fetch/XHR切换成全部，再看一下下面的列表里是都有**.gif**这一项，如果有的话，那就是埋点成功，没有的话，请去检查代码，再去尝试。

好了，到这里就算是全部结束了，浙里办PC端上架主要的应该就是这些了，我知道可能还有很多细节没有涵盖进去，后面想起来，又恰好有时间会补充进去的，嘿嘿，最后提醒一点的是，浙里办是有专门解决问题的技术群和技术人员的，出了问题记得联系嗷(不知道的找你们负责人)~~