浙里办应用-埋点浙里办应用-埋点从aplus到zwlog 建议查看群文档，当然你看了也没什么用，主要还是靠@群里的老师

修改

12月23日，审核人员反馈埋点数据中Page_duration需要删除，文章内没有删除

前言

先从简单的开始，花了点时间去处理埋点问题，一开始使用aplus，后续对接被告知需要更换zwLog，就只能说是离谱。
文档是让人懵B的，只能先@群里的老师，然后知道具体看哪一块，反正有什么不知道都是@老师。
感谢 inprivacy - 浙里办上架升级后的埋点怎么调整，再此基础上，进行修改，思路一致。

文档

总文档在政务外网，联系业主获取，目前保存时间（20221031）
政务外网环境文档查看 https://irsfactoryqa.zj.gov.cn/workshop/search/docDetail?docId=68ad4532e79249399d7f59ec75333bc7
互联网环境文档查看提取码: mdzz https://pan.baidu.com/s/1U-ARG3z7XcjXD46qHjKfTw?pwd=mdzz
群文件 zwlogJs接入.html

开始操作

在public/index.html中添加zwjsbridge.js和zwlog.js，顺便加上vconsole调试的时候可以看日志

    <body>
        <!-- 浙里办JS -->
        <script type="text/javascript" src="//assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.1.0/zwjsbridge.js"></script>
        <!-- 埋点JS -->
        <script type="text/javascript" src="//assets.zjzwfw.gov.cn/assets/zwlog/1.0.0/zwlog.js"></script>
        <!-- 日志调试 -->
        <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
        <script>
            var vConsole = new window.VConsole();
        </script> 
        <!-- 这一行千万不能删除 页面容器 删除就白屏了 -->
        <div id="app" />
    </body>

获取参数，多方询问，提交的入参最好加上这些
miniAppId(IRS服务侧应用appId)
miniAppName(IRS服务侧应用名称)
log_status(登录状态‘01’未登录 ‘02’已登陆)
Page_duration(页面浏览时长)
t2(页面加载时间，启动到开始加载)
t0(页面响应时间，启动到加载完毕)
pageId(页面Id，自定义，这里使用路径)
pageName(页面名称)
数据存储，这边使用页面的pagePath作为关键字来存储所有的信息，进入时间和离开时间监听路由来获取，加载时间和响应时间在页面中的onShow方法中获取，方法都写在App.vue中，方便调用。

创建zwLogUtils，配置参数

// 埋点对象
var zwlog;

// 页面埋点数据
var zwlogPageMap = {};

// 最小页面停留时间
const Min_Page_Stay_Duration = 0.5

// 不参加埋点的白名单
const White_List = [
    // 浙里办 支付宝小程序 微信小程序 登录的中转站
    'pages/index/index',
    // 测试页面的登录
    'pages/index/login'
]

创建Object

            zwlogPageMap[path] = {
                pagePath: null,
                title: null,
                enterPageTime: null,
                leavePageTime: null,
                loadTime: null,
                responseTime: null
            }

使用path作为key，每一次调用方法把数据存入，当所有数据存满了就上报，也就是离开页面的时候

        // 写入当前数据
        if (path) zwlogPageMap[path].path = path
        if (title) zwlogPageMap[path].title = title
        if (enterPageTime) zwlogPageMap[path].enterPageTime = enterPageTime
        if (leavePageTime) zwlogPageMap[path].leavePageTime = leavePageTime
        if (loadTime) zwlogPageMap[path].loadTime = loadTime
        if (responseTime) zwlogPageMap[path].responseTime = responseTime
        
        // 如果当前页面的数据全部收集完毕
        if (zwlogPageMap[path].path &&
            zwlogPageMap[path].title &&
            zwlogPageMap[path].enterPageTime &&
            zwlogPageMap[path].leavePageTime &&
            zwlogPageMap[path].loadTime &&
            zwlogPageMap[path].responseTime) {

            // 页面浏览时长
            let Page_duration = (zwlogPageMap[path].leavePageTime.getTime() - zwlogPageMap[path].enterPageTime
                .getTime()) / 1000
            // 页面加载时间
            let t2 = (zwlogPageMap[path].loadTime.getTime() - zwlogPageMap[path].enterPageTime.getTime()) / 1000
            // 页面相应时间
            let t0 = (zwlogPageMap[path].responseTime.getTime() - zwlogPageMap[path].enterPageTime.getTime()) / 1000

            let pvParams = {
                miniAppId: getApp().globalData.miniAppId,
                miniAppName: getApp().globalData.miniAppName,
                log_status: '02',
                Page_duration: Page_duration,
                t2: t2,
                t0: t0,
                pageId: zwlogPageMap[path].path,
                pageName: zwlogPageMap[path].title
            }
            if (Page_duration < Min_Page_Stay_Duration) {
                console.log('\n\n提交埋点数据-删除数据',
                    `${path}浏览时长小于${Min_Page_Stay_Duration}秒`,
                    `我们认为当前页面的停留时间过短，可能是快速返回造成，不需要`)
                delete zwlogPageMap[path]
                return
            }
            zwlog.onReady(function() {
                console.log("\n提交埋点数据 zwlog.sendPV(pvParams)\n",
                    "\n查看NetWork - All(不进行筛选)-m.gif?xxxxxx\n",
                    `\n miniAppId（IRS服务侧应用appId） = ${pvParams.miniAppId}
                    \n miniAppName（IRS服务侧应用名称） = ${pvParams.miniAppName}
                    \n pageId（页面Id，自定义，这里使用路径） = ${pvParams.pageId}
                    \n pageName（页面名称） = ${pvParams.pageName}
                    \n log_status（登录状态‘01’未登录 ‘02’已登陆） = ${pvParams.log_status}
                    \n Page_duration（页面浏览时长） = ${pvParams.Page_duration}
                    \n t2（页面加载时间，启动到开始加载） = ${pvParams.t2}
                    \n t0（页面响应时间，启动到加载完毕） = ${pvParams.t0} \n\n `);
                if (getApp().globalData.ZLBRelease) zwlog.sendPV(pvParams)
                delete zwlogPageMap[path]
            })

方法调用

进入离开时间，监听路由自动调用

        watch: {
            // 埋点 进入页面和离开页面时间 无需处理 自动观察获取
            $route(to, from) {
                // 进入时间
                zwLogUtils.addZwLogPage({
                    pagePath: to.meta.pagePath,
                    enterPageTime: new Date()
                })
                // 离开时间
                zwLogUtils.addZwLogPage({
                    pagePath: from.meta.pagePath,
                    leavePageTime: new Date()
                })
            }
        },

加载响应时间，在页面onShow()方法中调用getApp().addZwLog(this)

        methods: {
            // 每一个页面onShow中添加埋点信息 getApp().addZwLog(this)
            addZwLog(_this) {
                // 加载时间
                zwLogUtils.addZwLogPage({
                    _this: _this,
                    loadTime: new Date()
                })
                // 相应时间
                _this.$nextTick(() => {
                    zwLogUtils.addZwLogPage({
                        _this: _this,
                        responseTime: new Date()
                    })
                })
            }
        }

结尾

代码就3个地方，zwLogUtils.js App.vue 页面xxx.vue，复制粘贴就好了

新建zwLogUtils.js

// 埋点对象
var zwlog;

// 页面埋点数据
var zwlogPageMap = {};

// 最小页面停留时间
const Min_Page_Stay_Duration = 0.5

// 不参加埋点的白名单
const White_List = [
    // 浙里办 支付宝小程序 微信小程序 登录的中转站
    'pages/index/index',
    // 测试页面的登录
    'pages/index/login'
]

// 进行初始化zwLog
function initZwLog() {
    let user = getApp().getGlobalUser()
    if (zwlog == null && user != null) {
        zwlog = new ZwLog({
            _user_id: user.userId,
            _user_nick: user.userName
        });
    }
    return zwlog
}

/**
 * 在页面中添加埋点日志
 * 注意点: zwlogPageMap 所有的数据通过关键字pagePath（页面路径进行匹配）
 * _this            【页面必填，App监听不填】  当前页面this      用于获取当前页面的pagePath，navigationBarTitle
 * pagePath         【页面不填，App监听必填】  当前页面的路径     通过路径来设置页面进入和离开时间，app.vue中监听路由只能拿到路径
 * enterPageTime    【页面不填，App监听必填】  进入页面的时间     app.vue中监听路由得到
 * leavePageTime    【页面不填，App监听必填】  离开页面的时间     app.vue中监听路由得到  
 * loadTime         【页面必填，App监听不填】  页面开始加载的时间  页面中获取          
 * responseTime     【页面必填，App监听不填】  页面开始相应的时间  页面中获取          
 */
function addZwLogPage({
    _this = null,
    pagePath = null,
    enterPageTime = null,
    leavePageTime = null,
    loadTime = null,
    responseTime = null
} = {}) {
    if (initZwLog() && (_this || pagePath)) {
        // 获取匹配的页面
        let path = _this ? _this.$mp.page.route : pagePath
        // 移除测试页面带来的埋点干扰项
        if (White_List.indexOf(path) != -1) return
        let title = _this ? _this.$holder.navigationBarTitleText : null
        // 如果不存在当前页面的数据，那么就开始初始化
        if (!zwlogPageMap.hasOwnProperty(path)) {
            zwlogPageMap[path] = {
                pagePath: null,
                title: null,
                enterPageTime: null,
                leavePageTime: null,
                loadTime: null,
                responseTime: null
            }
        }

        // 写入当前数据
        if (path) zwlogPageMap[path].path = path
        if (title) zwlogPageMap[path].title = title
        if (enterPageTime) zwlogPageMap[path].enterPageTime = enterPageTime
        if (leavePageTime) zwlogPageMap[path].leavePageTime = leavePageTime
        if (loadTime) zwlogPageMap[path].loadTime = loadTime
        if (responseTime) zwlogPageMap[path].responseTime = responseTime

        // 如果当前页面的数据全部收集完毕
        if (zwlogPageMap[path].path &&
            zwlogPageMap[path].title &&
            zwlogPageMap[path].enterPageTime &&
            zwlogPageMap[path].leavePageTime &&
            zwlogPageMap[path].loadTime &&
            zwlogPageMap[path].responseTime) {

            // 页面浏览时长
            let Page_duration = (zwlogPageMap[path].leavePageTime.getTime() - zwlogPageMap[path].enterPageTime
                .getTime()) / 1000
            // 页面加载时间
            let t2 = (zwlogPageMap[path].loadTime.getTime() - zwlogPageMap[path].enterPageTime.getTime()) / 1000
            // 页面相应时间
            let t0 = (zwlogPageMap[path].responseTime.getTime() - zwlogPageMap[path].enterPageTime.getTime()) / 1000

            let pvParams = {
                miniAppId: getApp().globalData.miniAppId,
                miniAppName: getApp().globalData.miniAppName,
                log_status: '02',
                Page_duration: Page_duration,
                t2: t2,
                t0: t0,
                pageId: zwlogPageMap[path].path,
                pageName: zwlogPageMap[path].title
            }
            if (Page_duration < Min_Page_Stay_Duration) {
                console.log('\n\n提交埋点数据-删除数据',
                    `${path}浏览时长小于${Min_Page_Stay_Duration}秒`,
                    `我们认为当前页面的停留时间过短，可能是快速返回造成，不需要`)
                delete zwlogPageMap[path]
                return
            }
            zwlog.onReady(function() {
                console.log("\n提交埋点数据 zwlog.sendPV(pvParams)\n",
                    "\n查看NetWork - All(不进行筛选)-m.gif?xxxxxx\n",
                    `\n miniAppId（IRS服务侧应用appId） = ${pvParams.miniAppId}
                    \n miniAppName（IRS服务侧应用名称） = ${pvParams.miniAppName}
                    \n pageId（页面Id，自定义，这里使用路径） = ${pvParams.pageId}
                    \n pageName（页面名称） = ${pvParams.pageName}
                    \n log_status（登录状态‘01’未登录 ‘02’已登陆） = ${pvParams.log_status}
                    \n Page_duration（页面浏览时长） = ${pvParams.Page_duration}
                    \n t2（页面加载时间，启动到开始加载） = ${pvParams.t2}
                    \n t0（页面响应时间，启动到加载完毕） = ${pvParams.t0} \n\n `);
                if (getApp().globalData.ZLBRelease) zwlog.sendPV(pvParams)
                delete zwlogPageMap[path]
            })
        }
    }
}

/**
 * 对事件进行埋点
 * @param {Object} _this    当前页面this
 * @param {String} code     当前事件的code
 * code 对应点击事件的code 自行定义 给每一个模块区分编号，然后编号集合即可，建议使用两位数来表示编号
 * 如轮播区编号01，轮播图点击code = '01'
 * 如金刚区编号02，模块编号01，模块点击code = '0201'
 * 如资讯区编号03，新闻列表编号01，列表中点赞按钮编号01，收藏按钮编号02，
 * 点赞按钮点击code = '030101'，收藏按钮点击code = '030102'
 */
function addZwLogEvent(_this, code) {
    if (initZwLog() && _this && code) {
        let path = _this.$mp.page.route
        let title = _this.$holder.navigationBarTitleText
        zwlog.onReady(function() {
            console.log("\n提交埋点数据 zwlog.record",
                "\n 目前自定义参数pagePath和pageTitle,查看代码中最后一个Ojbect是可以任意赋值的，提交什么就会后台收到什么",
                `\n code = ${code}
                \n pagePath = ${path}
                \n pageTitle = ${title} \n\n `);
            zwlog.record(code, 'CLK', {
                pagePath: path,
                pageTitle: title
            })
        })
    }
}


module.exports = {
    addZwLogPage,
    addZwLogEvent
}

App.vue中添加

<script>
    import zwLogUtils from './utils/zwLogUtils';
    export default {
        globalData: {
            // ******************** 需要配置 ********************//
            // irs 服务侧列表 - 右侧配置 - 获取APPKEY
            appKey: 'xxxxxx',
            // irs 服务侧列表 - APPID
            miniAppId: 'xxxxxx',
            // irs 服务侧列表 - 服务侧名称
            miniAppName: 'xxxxxx',
            // 用户信息存储的key 
            userStorageKey: 'xxxxxx_zlb_user',
            // 是否浙里办上线 true走浙里办单点登录mgop接口 false走账号密码登录测试接口
            ZLBRelease: false,
            // 是否使用mgop请求联调测试地址 irs配置api中分为正式和调试 true-正式 false-调试
            ZLBMGOPRelease: true,
            // ******************** 需要配置 ********************//

            // 用户信息，建议使用getApp().getGlobalUser()获取用户信息
            userInfo: null,
        },
        watch: {
            // 埋点 进入页面和离开页面时间 无需处理 自动观察获取
            $route(to, from) {
                // 进入时间
                zwLogUtils.addZwLogPage({
                    pagePath: to.meta.pagePath,
                    enterPageTime: new Date()
                })
                // 离开时间
                zwLogUtils.addZwLogPage({
                    pagePath: from.meta.pagePath,
                    leavePageTime: new Date()
                })
            }
        },
        methods: {
            // 每一个页面onShow中添加埋点信息 getApp().addZwLog(this)
            addZwLog(_this) {
                // 加载时间
                zwLogUtils.addZwLogPage({
                    _this: _this,
                    loadTime: new Date()
                })
                // 相应时间
                _this.$nextTick(() => {
                    zwLogUtils.addZwLogPage({
                        _this: _this,
                        responseTime: new Date()
                    })
                })
            },
            // 设置用户数据
            setGlobalUser(user) {
                this.globalData.userInfo = user
                if (user != null) {
                    uni.setStorageSync(this.globalData.userStorageKey, user)
                } else {
                    uni.removeStorageSync(this.globalData.userStorageKey)
                }
            },
            // 获取用户数据
            getGlobalUser() {
                if (this.globalData.userInfo == null) {
                    let user = uni.getStorageSync(this.globalData.userStorageKey);
                    this.globalData.userInfo = user == '' ? null : user;
                }
                return this.globalData.userInfo;
            }
        }
    }
</script>

<style>
</style>

xxxxxx.vue中添加

        onShow() {
            getApp().addZwLog(this)
        },

查看运行代码后，页面切换会在政务中台Console打印日志，同时Network会出现m.gif?xxxxxx的调用

埋点.png

浙里办应用-埋点

目录

修改

前言

文档

开始操作

结尾