浙里办设置埋点代码
说明：
浙里办对接有很多坑，其中埋点是必须要做的一个环节，埋点就是用来获取相关信息用的，具体写道代码内埋点成功也是要引用相关文件脚本和包的
具体的用处和说明这里不赘述，可自行参考官网，这里只给出解决坑后成功埋点的代码参考。
埋点应该打印出heander内遗传带有各种信息的字符接口，如果没有，就没有成功：因为埋点无法线下测
以前版本的埋点信息：不成功
index.html引入文件：
<script type="text/javascript" src="//d.alicdn.com/alilog/mlog/aplus.js?id=202951085"></script>
home.vue 调用：
mounted() {
// this.isLogin()
this.SetZwaplus() // 埋点？
},
SetZwaplus() {
// 埋点?
;(function(w, d, s, q, i) {
w[q] = w[q] || []
var f = d.getElementsByTagName(s)[0]
var j = d.createElement(s)
j.async = true
j.id = 'beacon-aplus'
j.src = 'https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085'
f.parentNode.insertBefore(j, f)
})(window, document, 'script', 'aplus_queue')
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-rhost-v', 'alog.zjzwfw.gov.cn']
})
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-rhost-g', 'alog.zjzwfw.gov.cn']
})
// 这个会落到 app_key 字段上
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['appId', '60506758']
})
}
login.vue:调用埋点：
setZwaplus() {
// excuteBridge()
// ZWJSBridge.monitorTrace({
// monitorType: 'success',
// module: 'Login'
// })
// .then(result => {
// console.log(result)
// })
// .catch(error => {
// console.log(error)
// })
// 埋点？
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_hold', 'BLOCK']
})
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_user_nick', this.userInfoData.username]
})
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_user_id', this.userInfoData.userid]
})
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['_hold', 'START']
})
}
++++++++++++++++++
现改成如下方式：
index.html 引入方式：
<script type="text/javascript" src="https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085"></script>
引入和使用埋点（官网提供）更改并都放到home.vue内：
mounted() {
this.isLogin()
this.SetZwaplus() // 埋点？
},
isLogin() {
// 判断用户是否登录
var UserId = getLocal('userid')
// console.log(UserId)
if (UserId == '' || UserId == undefined || UserId == null) {
window.location.href =
'https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=dhyswnej'
} else {
this.SetZwUserAplus(UserId) // 用户成功登录时
}
},
// 基础信息埋点配置
SetZwaplus() {
;(function(w, d, s, q, i) {
w[q] = w[q] || []
var f = d.getElementsByTagName(s)[0]
var j = d.createElement(s)
j.async = true
j.id = 'beacon-aplus'
j.src = 'https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085'
f.parentNode.insertBefore(j, f)
})(window, document, 'script', 'aplus_queue')
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-rhost-v', 'alog.zjzwfw.gov.cn']
})
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-rhost-g', 'alog.zjzwfw.gov.cn']
})
// 这个会落到 app_key 字段上
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['appId', '60506758']
})
// 单页应用 或 “单个页面”需异步补充 PV 日志参数还需进行如下埋点：
aplus_queue.push({
action: 'aplus.setMetaInfo',
arguments: ['aplus-waiting', 'MAN']
})
// 单页应用路由切换后 或 在异步获取到 pv 日志所需的参数后再执行 sendPV：
aplus_queue.push({
action: 'aplus.sendPV',
arguments: [
{
is_auto: false
},
{
miniAppId: 'izt8cldk+2001830421+exokfd',
miniAppName: '......之家'
}
]
})
}
全代码参考：
index.html <!DOCTYPE html> <html lang=""> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <!-- <meta name="viewport" content="width=device-width,initial-scale=1.0"> --> <meta name="format-detection" content="telephone=yes"/> <link rel="icon" href="<%= BASE_URL %>favicon.ico"> <!-- 引入ZWJSBridge --> <script type="text/javascript" src="//assets.zjzwfw.gov.cn/assets/ZWJSBridge/1.0.1/zwjsbridge.js"></script> <script type="text/javascript" src="https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085"></script> <title>离岛温暖e家</title> </head> <body> <noscript> <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong> </noscript> <div id="app"></div> <!-- built files will be auto injected --> </body> <script>session.setMaxInactiveInterval(60*60*4)</script> <!-- 设置session过期时间 --> </html>
login:
<template> <div id="login"></div> </template> <script> import { getTicket } from '@/api/ZWcommon' import { setLocal } from '@/utils/local' // 初始化jsbridge // const excuteBridge = () => { // ZWJSBridge.onReady(() => { // console.log('初始化完成后，执行bridge方法') // }) // } // 导入二次封装方法 export default { data() { return { ticket: '', userInfoData: { userid: '', // 用户Id username: '', // 用户姓名 mobile: '', // 用户电话 sex: '', // 用户性别 birthday: '', // 用户生日 createdate: '' // 创建时间 } } }, mounted() { this.getTicket() }, methods: { getTicket() { // 获取票据 var url = window.location.href // 获取页面路由 if (url.indexOf('ticket') != -1) { const params = url.split('?')[2].split('&') // 截取路由 for (let index = 0; index < params.length; index++) { if (params[index].indexOf('ticket=') != -1) { this.ticket = params[index].split('=')[1] // 获取路由ticket break } } } if (this.ticket != '') { this.postTicket(this.ticket) } }, postTicket(value) { // 票据验证登录 const params = { ticket: value } getTicket(params) .then(res => { const resultCode = res.code // 获取返回的请求状态码 const resultData = res.data // 获取返回的结果 const Data = JSON.parse(JSON.stringify(resultData.userInfoResult)) this.userInfoData = JSON.parse(Data) // console.log('本地结果', this.userInfoData) if (resultCode == 200) { this.SetUserInfo() // 设置用户信息 this.loginSuccess() // 跳转首页 } else { this.ticket = '' console.log(resultData.msg) // 不成功信 } }) .catch(err => { this.ticket = '' console.log('err', err) }) }, loginSuccess() { // 用户成功登录回调 this.ticket = '' this.$router.replace('/') }, SetUserInfo() { // 设置用户信息 setLocal('userid', this.userInfoData.userid) localStorage.setItem('userInfoData', this.userInfoData) } } } </script>
home.vue:
<template> <div class="homePage"> <div class="cont-01 bgShadow"> <van-swipe :autoplay="3000" indicator-color="white" :show-indicators="true" > <van-swipe-item v-for="(img, index) in imageList" :key="index"> <van-image class="img-custom-large img320" lazy-load :src="img" /> </van-swipe-item> </van-swipe> <van-grid :gutter="10" :column-num="3" class="grid-custom"> <van-grid-item v-for="(item, index) in menuList.slice(1)" :key="index" :icon="item.icon" :text="item.value" @click="menuClick(item)" /> <van-grid-item v-for="(item, index) in menuList.slice(0, 1)" :key="index" :icon="item.icon" text="查看更多" /> </van-grid> </div> <div class="cont-02"> <van-image class="img-custom-large" lazy-load :src="require('@/assets/images/xhfd.png')" @click="isAnswer" /> <van-cell class="cell-custom" title="家庭教育活动" is-link value="了解更多" @click="toPath('jiating')" /> <van-grid :border="false" :column-num="2" class="gird-imgBtn"> <van-grid-item :border="false"> <div class="imgBtn bg1" @click="toPath('jiating')"> <span>亲子辅导</span> </div> </van-grid-item> <van-grid-item> <div class="imgBtn bg2" @click="toPath('jiating')"> <span>亲子互动</span> </div> </van-grid-item> </van-grid> </div> <div class="cont-03 bgShadow" @click="toPath('dhysHome')"> <van-card title="“东海渔嫂”社会组织活动展示" :thumb="require('@/assets/dhys/dhys-logo.png')" > <template #desc> <div class="van-multi-ellipsis--l3">{{ desc }}</div> </template> </van-card> <van-grid :border="false" :column-num="5" class="gird-imgBtn"> <van-grid-item v-for="(it, index) in imgList" :key="index"> <van-image class="img-custom-large img120" lazy-load :src="it" /> </van-grid-item> </van-grid> </div> <div class="cont-04"> <!-- weixin://dl/business/?t=wPuGB0QQ29q --> <van-image class="img-custom-large img180" lazy-load :src="require('@/assets/images/qiandao.png')" @click="toSign" /> <van-popup v-model="signShow"> <van-image class="img-custom-large" lazy-load :src="require('@/assets/images/signCode.jpg')" /> <p class="signTxt">长按图片识别二维码</p> </van-popup> <van-image class="img-custom-large img180" lazy-load :src="require('@/assets/images/jstj.png')" @click="toPath('jiufen')" /> <van-grid :border="false" :column-num="2" class="gird-imgBtn"> <van-grid-item> <van-image class="img-custom-large img180 pd20" lazy-load :src="require('@/assets/images/xlzx.png')" @click="toPath('xinli')" /> </van-grid-item> <van-grid-item> <van-image class="img-custom-large img180" lazy-load :src="require('@/assets/images/flzx.png')" @click="toPath('falv')" /> </van-grid-item> </van-grid> </div> </div> </template> <script> import { queryMySelfInfo, getHomeData, getGuidance, getOpenId } from '@/api/ZWcommon' import { setLocal, getLocal } from '@/utils/local' import { wx } from 'weixin-js-sdk' export default { name: 'homePage', data() { return { current: 0, menuList: [ { value: '青年交流', icon: require(`@/assets/images/banner/icon-qingnian.png`) }, { value: '新婚辅导', icon: require(`@/assets/images/banner/icon-xinhun.png`) }, { value: '心理咨询', icon: require(`@/assets/images/banner/icon-xinli.png`) }, { value: '法律咨询', icon: require(`@/assets/images/banner/icon-falv.png`) }, { value: '纠纷化解', icon: require(`@/assets/images/banner/icon-jiufen.png`) }, { value: '家庭教育', icon: require(`@/assets/images/banner/icon-jiating.png`) } ], infoShow: false, openId: '', source: '1', // 根据路由判断平台 1公众号 2小程序 3浙里办 4浙政钉 desc: '在社会治理中广泛开展各类宣传、宣讲活动。结合其自身特点，通过组建平安渔区禁毒反赌宣传队、渔业安全生产宣传队、创城知识宣传队、拆迁政策宣传队等队伍，多形式多层次开展宣传宣讲，配合党委政府中心工作，不断凝聚社会正能量。', signShow: false, imageList: [], phone: '', imgList: [ require('@/assets/dhys/dhys-01.png'), require('@/assets/dhys/dhys-02.png'), require('@/assets/dhys/dhys-03.png'), require('@/assets/dhys/dhys-04.png'), require('@/assets/dhys/dhys-05.png'), require('@/assets/dhys/dhys-06.png'), require('@/assets/dhys/dhys-07.png'), require('@/assets/dhys/dhys-08.png'), require('@/assets/dhys/dhys-09.png'), require('@/assets/dhys/dhys-10.png') ], userInfoData: {} // 用户个人信息 } }, created() { this.init() this.getImgs() }, mounted() { this.isLogin() this.SetZwaplus() // 埋点？ }, methods: { onChangeSwiper(index) { this.current = index }, sendMessage() { const postData = { url: window.location.href, title: Response.username + ':' + Response.title, image: Response.image } wx.miniProgram.postMessage({ data: JSON.stringify(postData) }) }, init() { // this.source = getLocal('source') // ? getLocal('source') // : this.getParams('source') // 来源source: 1公众号 2小程序 3浙里办 4浙政钉 this.source = '3' setLocal('source', this.source) this.userInfoData = localStorage.getItem('userInfoData') this.phone = this.userInfoData.mobile this.openId = getLocal('userid') setLocal('openId', this.openId) if (this.source === '3') { this.getopenId(this.userInfoData) } // if (this.source === '1') { // if (!getLocal('openId')) this.getOpenId_gzh() // } else if (this.source === '2') { // this.getOpenId_app() // } }, // 小程序获取openId getOpenId_app() { this.openId = this.getParams('openId') // this.openId = '03e53b38216147c8b5dd842493284baf' setLocal('openId', this.openId) }, // 公众号获取openId getOpenId_gzh() { const code = this.getParams('code') // 截取路径中的code if (code == null || code === '') { const url = window.location.href const local = encodeURIComponent(url) window.location.href = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxe24faf36e5d880b0&redirect_uri=' + local + '&response_type=code&scope=snsapi_userinfo&state=1#wechat_redirect' } else { this.getopenId(code) // 把code传给后台获取用户信息 } }, getopenId(code) { getOpenId({ code, source: '3' }).then(res => { if (res.code !== 200) { setLocal('openId', this.openId) } }) }, // 获取路由参数--根据路由判断平台 1公众号 2小程序 3浙里办 4浙政钉 getParams(name) { var reg = new RegExp('(|&)' + name + '=([^&]*)(&|$)', 'i') var r = window.location.search.substr(1).match(reg) if (r != null) { return decodeURIComponent(r[2]) } return null }, getImgs() { getHomeData().then(res => { // console.log('获取图片', res) if (res.code !== 200) return this.imageList = res.data }) }, toSign() { if (this.source === '1') { window.location.href = 'weixin://dl/business/?t=wPuGB0QQ29q' } else { this.signShow = true } }, menuClick(item) { const obj = { 青年交流: () => { this.toHunlian() }, 新婚辅导: () => { this.isAnswer() }, 心理咨询: () => { this.$router.push({ path: '/xinli' }) }, 法律咨询: () => { this.$router.push({ path: '/falv' }) }, 纠纷化解: () => { this.$router.push({ path: '/jiufen' }) }, 家庭教育: () => { this.$router.push({ path: '/jiating' }) } } obj[item.value]() }, isAnswer() { if (!getLocal('openId')) return this.$toast('正在获取信息，请稍后') const param = { openId: getLocal('openId') } getGuidance(param).then(res => { if (res.code === 200) { this.$router.push({ path: '/finish', query: { trackingNumber: res.data.trackingNumber, courierCompany: res.data.courierCompany } }) } else { this.$router.push({ path: '/watchVideo', query: { id: res.data } }) } }) }, toHunlian() { if (!getLocal('openId')) return this.$toast('正在获取信息，请稍后') const param = { openId: getLocal('openId'), phone: this.phone } queryMySelfInfo(param) .then(res => { if (res.code === 200) { this.$router.push({ path: '/myInfo' }) } else if (res.code === 201) { this.$router.push({ path: '/nameSex' }) } else { this.$toast(res.msg, { duration: 200000000, forbidClick: true }) } }) .catch(err => { console.log(err) }) }, toPath(type) { this.$router.push({ path: `/${type}` }) }, isLogin() { // 判断用户是否登录 var UserId = getLocal('userid') // console.log(UserId) if (UserId == '' || UserId == undefined || UserId == null) { window.location.href = 'https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode=dhyswnej' } else { this.SetZwUserAplus(UserId) // 用户成功登录时 } }, SetZwUserAplus(Userid) { // 设置用户信息埋点 aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['_hold', 'BLOCK'] }) aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['_user_nick', this.userInfoData.username] }) aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['_user_id', Userid] }) aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['_hold', 'START'] }) }, // 基础信息埋点配置 SetZwaplus() { ;(function(w, d, s, q, i) { w[q] = w[q] || [] var f = d.getElementsByTagName(s)[0] var j = d.createElement(s) j.async = true j.id = 'beacon-aplus' j.src = 'https://d.alicdn.com/alilog/mlog/aplus.js?id=202951085' f.parentNode.insertBefore(j, f) })(window, document, 'script', 'aplus_queue') aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-rhost-v', 'alog.zjzwfw.gov.cn'] }) aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-rhost-g', 'alog.zjzwfw.gov.cn'] }) // 这个会落到 app_key 字段上 aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['appId', '60506758'] }) // 单页应用 或 “单个页面”需异步补充 PV 日志参数还需进行如下埋点： aplus_queue.push({ action: 'aplus.setMetaInfo', arguments: ['aplus-waiting', 'MAN'] }) // 单页应用路由切换后 或 在异步获取到 pv 日志所需的参数后再执行 sendPV： aplus_queue.push({ action: 'aplus.sendPV', arguments: [ { is_auto: false }, { miniAppId: 'izt8cldk+2001830421+exokfd', miniAppName: '。。。之家' } ] }) } } } </script> <style lang="scss" scoped> .homePage { @include wh(100%, 100%); @include bgColor($bg-FFF); .cont-01 { padding: 0px 4px 0 4px; } .cont-02 { padding: 16px; @include bgColor($bg-F5F); .gird-imgBtn { @include wh(100%, 180px); @include bgColor($bg-F5F); .imgBtn { @include wh(100%, 100%); @include flex(left); padding-left: 8px; @include text(36px, $font-FFF); } .bg1 { @include bg($img + 'qinzi01.png', 100%, 100%); } .bg2 { @include bg($img + 'qinzi02.png', 100%, 100%); } } .cell-custom { @include bgColor($bg-F5F); padding: 8px 0; .van-cell__title { font-size: 36px; } .van-cell__value { font-size: 28px; } } } .cont-04, .cont-03 { padding: 16px; } .img320 { max-height: 500px; } .img180 { height: 180px; margin-bottom: 16px; } .img120 { height: 120px; margin-bottom: 24px; } .signTxt { font-size: 28px; text-align: center; padding: 20px; } } </style> <style lang="scss"> .homePage { .cont-01 { .van-image__error, .van-image__img, .van-image__loading { width: 100%; img { width: 100%; max-height: 100%; } } } .cont-02, .cont-04 { .gird-imgBtn { .van-grid-item { &:nth-of-type(1) { padding-right: 8px; } &:nth-of-type(2) { padding-left: 0px; } } } } .van-grid-item__content { background-color: transparent; padding: 0; } .grid-custom { @include wh(100%, 400px); @include text(28px, $font-333); .van-grid-item { .van-icon__image { @include wh(96px, 96px); } .van-grid-item__text { @include text(28px, $font-333); } } } .cont-03 { box-shadow: 0px 4px 12px 0px rgba(52, 64, 187, 0.16); margin: 0 0px; .van-card { padding: 0; margin: 20px 0; .van-card__thumb { @include wh(106px, 106px); } .van-card__content { @include text(28px, $font-333); line-height: 40px; .van-card__title { @include text(32px, $font-333); max-height: 60px; line-height: 60px; font-weight: bold; } } } .img-custom-large { width: auto; .van-image__error, .van-image__img, .van-image__loading { width: auto; } } } [class*='van-hairline']::after { border: none; } } // 轮播图： .van-swipe { width: 100%; height: 50%; .van-swipe-item { padding: 0 4px; text-align: center; // background-color: #39a9ed; .van-image { border-radius: 10px; overflow: hidden; width: 100%; height: 400px; } } .van-swipe__indicators { bottom: 40px; } } </style>
