Nyzt_buriedset NPM

问题

分离成包之后，php相关页面还是得额外维护发布包的时候报 400 Bad Request - PUT https://registry.npmjs.org/nyzt_buriedSet - "nyzt_buriedSet" is invalid for new packages -- 不能包含大小写

埋点代码相关

如何增加一个新的埋点路径?

正常增加路径

首先在GlobalSetting中找到originNameMap, indexNameMap 然后在里面按顺序继续增加一条记录（最好是resultMap中也增加一条记录，全写1就得了，保不定后面又要复用）

增加一个广告位的点击路径

类似首页顶部icon那种，需要先输入首页-找名医icon 再输入广告的（结合起来就是一次点击输入路径首页-找名医icon|广告）在对广告点击指令传入对象时多传入一个path_name_obj，即可实现

// 例如：
  v-adclick="{ ...item, path_name_obj: {
    id: 'xxx',
    name: 'xxxxxx'
  }}"

在广告点击，广告曝光事件中如何增加新的属性？

正常情况

找到src/utils/utils.js文件中的transSendParams方法在对应的事件下面增加新属性（当然你要在指令传入的时候就把你的新属性带上）

// 例如：
  v-adclick="{ ...item, attr: '新属性'}"

// transSendParams中
// 广告点击 
    case 'ad_click':
      send_params = {
        item_type: data.item_type || '',
        item_id: data.item_id || '',
        item_name: data.item_name || '',
        from_function_id: data.form_function_id || getUrlParam('form_function_id') || '',
        from_function_name: decodeURIComponent(data.form_function_name || getUrlParam('form_function_name') || ''),
        cur_function_id: 'AD',
        cur_function_name: '广告',
        location_id: data.location_id || data.locate_id || data.ad_location_id || data.locationId || data.locateId || data.adlocation_id,
        location_name: data.location_name || data.locationName || data.locate_name || data.locateName || '',
        bhv_pos: data.position,
        ad_id: data.ad_id || data.adId,
        ad_name: data.ad_name || data.adName,
        ad_img_url: data.ad_image || data.image || data.adImage,
        ad_target_url: data.url,
        serving_dep_name: data.serving_dep_name,
        serving_project_name: data.serving_project_name,
        serving_ill_name: data.serving_ill_name,
        ad_putting_mode: data.location_type,
        ev_name: 'ad_click',
        path_name_obj: data.path_name_obj,
        attr: data.attr // 新属性
      }
      send_params.is_ad = send_params.location_id ? 1 : 0
      break

异常情况--暂时没有发现，等待补充扩展

跟app交换数据中如何添加新属性？

正常情况

在src/utils/scUtils下找到concatAppParams方法在baseParams中初始化的时候添加新属性 --> 这个是初始化属性找到getAppSaParams方法在query中的jsonStr对象里面添加新属性 --> 这个是获取app的在compositionSaParams中里面的返回属性中要加上新属性 --> 这个是h5自身的如果要对新增属性进行特殊处理在遍历baseQuery（基础属性）的时候增加条件判断或者在最后返回总数据之前进行合并就行

// 例：
// 可以搜索advertNewDatas属性在哪里加了

跟小程序交换数据中如何添加新属性？

在src/utils/scUtils下找到HandleWechatMpParmas方法在该方法中可以对小程序传过来的参数进行处理（一般是放入缓存，具体是放入sessionStorage还是localStorage）找到transWechatMpParmas方法 ---> 给小程序传递的参数在函数返回的对象里面添加新属性

新增事件需要上报埋点属性如何获得？

在src/utils/scUtils下找到getCommonBuryParams方法可以直接获得与app或者小程序数据组合之后的数据或者自身h5的数据

如何获得from_page_name, from_page_id(来源页面名字, id)？

已添加来源页面路径和对应id与name的情况下

在src/utils/scUtils下找到getFromPageName, getFromPageId方法即可获得

没有添加来源页面路径和对应id与name的情况下

在src/utils/scUtils下找到getPageNameFromUrl方法按照分类通过给的模板添加新页面页面对应的id与name，记得问产品要

// 例如：
// 1. 页面路径单指一个页面，不用通过额外参数区分
  const pageMap = {
    // 机构主页相关
    '/h5/register/unit/dep.html': {
      id: '',
      name: '机构主页/主页tab页'
    }
  }
// 2. 页面路径不止一个页面，还得通过链接上的额外参数来区分
// 医生主页，专科页，频道页是通过链接上携带的type参数来区分是哪个tab页的
// _type指的取值方式，目前支持两种url与session，url指的从链接上取值，_key指的是值对应的key 这里是type
  const pageMap = {
    // 医生主页相关
    '/h5/register/doctor/detail.html': {
      id: '',
      name: '医生主页',
      children: {
        _type: 'url',
        _key: 'type',
        'video': {
          id: '',
          name: '医生主页/视频tab页'
        }
      }
    },
  }
// 3. 页面共享路径，但是tab区分靠接口返回的值来区分
// 首页，笔记详情（图文与视频）
// _type指的取值方式，目前支持两种url与session，session指的从sessionStorage上取值，_key指的是值对应的key 这里是NOTE_PAGE_NAME_CACHE
// 这个NOTE_PAGE_NAME_CACHE是自己定义的缓存数值的名字（最好取独特一点）
  const NOTE_PAGE_NAME_CACHE = 'note_page_name_cache' // 笔记页存入的当前来源名字
  const pageMap = {
    '/h5/wecontent/personal/notedetail.html': {
      // 图文笔记与视频笔记通过接口的mediaType区分
      id: '',
      name: '笔记页',
      children: {
        _type: 'session',
        _key: NOTE_PAGE_NAME_CACHE // sessionStorage中存入的key
        // 考虑到接口返回动态tab，所以直接存name, 而不经过这里获取
      }
    },
  }

如何给新广告添加点击事件与曝光事件？

引入adclick, adclickv3(vue3引入), adexport 然后注册成指令，传入广告数据即可

静态文件

一些映射表文件位置：src/config/GlobalSetting.js

eventNameMap（已废弃）

需要上报埋点属性的事件综合表对产品提供的表进行映射（已废弃）

resultMap（已废弃）

对需要添加埋点上报的事件根据产品提供的表是否在该事件中上报该路径的表横坐标是eventNameMap中的事件key对应的value值纵坐标是路径顺序

originNameMap

路径对象的id为key, 对应的表中顺序0~n 提供给简单加密解密

indexNameMap

根据路径在表中的排列顺序，返回路径对象提供给简单加密解密

advertArr

根据产品（胡圳阳）提供的表，组合出来的location_id聚合数组，只有在这个数组里面的广告id才会进行广告埋点相关属性的存储

路径相关

文件位置：src/utils/path.js

removeEventPath(pathArr, eventName) 已废弃

通过事件名(eventName)对指定路径进行消除（参照 GlobalSetting文件里的resultMap）

sliceEventPath(pathArr)

截取pathArr中最后10个

concatArrPath(pathArr)

通过数组对象进行名字的拼接，结果类似首页|广告|医生主页 ...

removeDuplicationPath(pathArr)

对传进来的对象数组pathArr进行去重大概逻辑就是以1个元素~n个元素为单位，向前或者向后比较，相同就消除例如： a,a -> a a,b,a,b -> a,b a,b,c,a,b,c,b,c -> a,b,c a,b,c,b -> a,b,c,b

removeEventPath(pathArr, eventName)

综合处理路径对象数组方法 --> 传入路径对象数组pathArr，返回拼接后的路径结果 a|b|c 这样的

encryptPathArr(pathArr)

对传进来的路径对象数组进行加密（通过GlobalSetting中的映射表）限制最大的路径为100

decryptPathArr(pathArr)

对传进来的路径对象数组进行解密（通过GlobalSetting中的映射表）限制最大的路径为100

广告相关

广告数据存储

路径：src/utils/advert.js

广告数据组装

广告数据上报

广告点击事件

广告浏览事件

与其他端交互

app

小程序

移植指南

// 如果需要本地进行先调试，然后再发布包
1. 将这个项目中的代码使用 npm run build 打包后
2. 使用 npm link 将包关联到本地的文件
3. 然后再需要引入该包的项目中使用 npm link nyzt_buriedset 与之关联，这样就可以热更新，及时看到效果
4. 如果上一步骤不生效，查看是否已引入该正式包 nyzt_buriedset (在package.json中查看是否已引入不同版本), 删除node_modules下的引入版本，再进行上一步骤

// 正常引入 ---》 将该包引入所需项目之中
npm install nyzt_buriedset@latest

// 然后将项目里面相关埋点代码改为npm包中取相应函数引入
1. scUtils下的引入统一改为npm包引入，注意的点是：要确认目标项目中scUtils中的方法是否与包中的方法是一样的，包中如果少了记得补充
2. directive文件里面的adclick和adexport可以替换成包中的，注意事项还是如果有额外参数记得更新在包中
3. 项目里面的dataBI.js目前仅用于广告点击事件上报与数据埋点，所以需要将项目里面使用BI进行广告上报的全部替换成为该包中的adclick进行上报 
  方法:  1. 在指令处引入该包中的adclick (如果项目中已定义，直接用包中的adclick替换项目中的adclick, 如果有额外参数记得更新在该包中) 
         2. 全局搜索data-BI-params, 在有它的地方使用 v-adclick="data" 代替
         3. 全部替换完成之后找到项目中引入dataBI的地方，一般是src/plugins/prototype中引入的
         4. 注释引入（删除等稳定再删除）
4. util下的getSessionStorage, setSessionStorage, 如果是用于以下字段存储的，全换成包引入
   const pushCookieList = ['pathArr', 'lastWLData', 'lastAdvertData', 'doctor_view', 'goods_view', 'temp_goods', 'advertDataArr'] // 设置一个白名单 key值为白名单内容时同时把存储内容放入cookie中携带（为了跨三级域名携带数据）
   如果不是以上字段存储的，不必切换到该包引入
   可以将项目中util里面的方法优化, 参考以下

    export function setSessionStorage(key, value) {
      if (Object.prototype.toString.call(value) == '[object Object]') {
        value = JSON.stringify(value)
      }
      if (Object.prototype.toString.call(value) == '[object Array]') {
        value = JSON.stringify(value)
      }
      sessionStorage.setItem(key, value)
    }

    export function getSessionStorage(key) {
      let item = sessionStorage.getItem(key)
      if (item) {
        // 先将拿到的试着进行json转为对象的形式
        try {
          item = JSON.parse(item)
        } catch (error) {
          item = item
        }
      }
      return item
    }
5. 检查项目里面的setPath与getPath方法，切换成包引入（不出意外如果第一点换完基本不会有其他引入，再搜一遍防止遗漏）

package.json

  "main": "./dist/bundle.cjs.js", // require导入npm包时读取的目录对应cjs文件 module.exports
  "module": "./dist/bundle.esm.js", // 导入npm包时读取的目录对应esm文件

buriedTool rollup

@infinitebrahmanuniverse/nolb-ny @everything-registry/sub-chunk-2361 @zalastax/nolb-ny

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago