@gitee/gitee-nps

Gitee NPS 前端

需求

【Feature】NPS 评价体系建设 https://e.gitee.com/oschina/issues/list?issue=I4FHF6

开发

yarn serve

生产

yarn build:prod

NPS插件使用说明

• 在 feature 合适的地方使用
• new NpsClient时，将会发起请求，如果有符合的问卷和显示条件（使用过多少次、符合疲劳度等），将会自动显示。
• addTick 用于记录操作，表示用户使用过该功能。在合适的地方调用 nps.addTick(), 例如载入页面 或 打开某个弹窗、点击某个按钮。

!!!

• 大部分功能是自动完成,只需配置codeName 和 enable, userInfo , 在合适地方调用 addTick 后端记录即可，自动获取到后端给的数据， 满足条件后自动显示问卷。

安装

yarn add @gitee/gitee-nps -S
import "@gitee/gitee-nps/dist/main.css";
import NpsClient from "@gitee/gitee-nps";

配置说明：

const nps = new NpsClient({
  codeName: "issue_feature_xxx", //代号, 必填项。与管理后台约定一个唯一代号，代表某个 feature。只能是字母、数字或下划线（/^\w+$/）
  userInfo: { // userInfo Object 必填, 包含后端提供的  info 和  signature 等信息
    info: '{"id":593,"username":"git","_salt":1637219320}',
    signature:
      "i3jYTK4lSvHxAUiVBI6l49Cw7fsD5mGx7QdOE_fu5K_Gt1ELXt4GkNy-Ow6Wvbo0WoOT48DNC3CmamkO3vx3jiXhS-zhGMYcCIXMLNQlLhD9g-pfFc_7lf-KxY4eZqivzeokryzlt0tXNzhp-enPpzLiHCkl-iNrISPu8p_rHa4=",
  };
  enable: false, //是否启用, //已登录传入true//  未登录的访客不执行
  className: "custom-class", //自定义 class
  cssText: "z-index:3000;color:black", // 添加一些 style
  lang: "zh-CN", // 配置语言，默认为 zh-CN, 
  enableBuriedPoint: false, // 启用全埋点, 默认不开启
  buriedPointSelector: ".gitee-nps-wrapper, xxx", // 全埋点区域 选择器
  // customData: '', 自定义初始化问卷数据, 用于管理后台预览
  onCreate ({state, data}) {
    // baseData 获取到的表单数据
    console.log("创建了");
    if (state==='error') {
      //xxx
    }
  },
  onShow () {
    console.log("显示了");
  },
  onClose (oData) {
    console.log("关闭了");
    console.log(oData)
  },
  onRate ({ value, state }) {
    console.log("第一步的评分：" + value);
  }, 
  onFormSubmit({state, data}){
    console.log('第二步用户提交的表单:')
    console.log(oData)
  },
  onDestroy () {
    console.log("被销毁");
  },
});
// 在 创建成功前, 实例方法无法调用, 如果需要使用, 请在 `onCreate` 或后续事件回调中使用
// 如果需要, 请在 `onCreate onClose onRate onFormSubmit` 中使用

方法

名称	效果	方法类型
addTick	调用则表示命中埋点, 将发起一次请求, 后端埋点计数 + 1	实例方法
show	手动显示弹窗	实例方法
close	手动关闭弹窗	实例方法
toggle	切换显隐	实例方法
destroy	手动销毁	实例方法
goStepForm	手动进入第二步表单页	实例方法
goStepThank	手动进入最终感谢页	实例方法
goStepRate	手动切回第一步评分页	实例方法
isInitializedCallback	传入一个函数, 当前 NPS 已经初始化成功才执行, 否则不执行	实例方法
refreshData	刷新数据 用于管理后台预览, 每次调用传入问卷数据都会刷新问卷	实例方法
getIsMobile	获取是移动端, 移动端则返回布尔值 true	静态方法

生命周期(配置)

名称	效果说明	参数
onCreate	创建成功	{ state, result }
onShow	显示后执行	无
onClose	关闭后执行	{ state, result }
onRate	提交第一步评分	{ state, value, result}
onFormSubmit	提交第二步表单	{ state: "success", submitData, result}
onDestroy	被销毁了	无

• state 值为 success 或 error
• result 为后端返回的数据

统一配置, 避免重复配置示例:

import NpsClient from "@gitee/gitee-nps";
import "@gitee/gitee-nps/dist/main.css";
function getNps (ops = {}) {
  // 填写一些默认配置
  let defaultOps = {
    userInfo: window.gon.nps,
    enable: !!(window.gon.info && window.gon.info.current_user) && window.gon.nps,
    lang: window.gon.locale, // zh-CN
    onCreate ({ state, err, result }) {
      if (state == "error") {
        // Flash.error(err.responseText || "nps status: " + err.status);
      } else {
        console.log("创建了, 获取的问卷数据:");
        console.log(result);
        ops.onCreate && ops.onCreate({ state, err, result });
      }
    },
    onShow () {
      console.log("显示了");
      ops.onShow && ops.onShow();
    },
    onClose ({ state, err, result }) {
      console.log("关闭了");
      if (state === "error") {
        // Flash.error(err.responseText || "nps status: " + err.status);
      } else {
        ops.onClose && ops.onClose({ state, err, result });
      }
    },
    onRate ({ state, value, result, err }) {
      console.log("第一步评分完成了:", value);
      if (state === "error") {
        // Flash.error(err.responseText || "nps status: " + err.status);
      } else {
        ops.onRate && ops.onRate({ state, value, result });
      }
    },
    onFormSubmit ({ state, submitData, err, result }) {
      console.log("第二步提交的表单:");
      console.log(submitData);
      if (state === "error") {
        // Flash.error(err.responseText || "nps status: " + err.status);
      } else {
        ops.onFormSubmit && ops.onFormSubmit({ state, submitData, err, result });
      }
    },
    onDestroy() {

    }
  };
  // 覆盖配置。 这里覆盖并了属性 不覆盖函数
  Object.keys(ops).forEach(key => {
    if (typeof ops[key] != "function") {
      defaultOps[key] = ops[key];
    }
  });

  return new NpsClient(defaultOps);
}
export { getNps }
window.getNps = getNps;

  // 使用时
  import { getNps } from "xxx"
  var nps1 = getNps({ codeName: "2" });
  document.body.addEventListener('click', function(e) {
    if (e.target && e.target.closest('[data-handler=bootstrap-markdown-cmdSuggestion]')) {
      nps1.addTick()
    }
  }, true);