ecarx-it-js

前端埋点

npm i -S ecarx-it-js

准备工作

1.在@/src/main.js引入track.js

import track from './utils/track';
track({
  VUE_APP_API_BASE_URL: `${process.env.VUE_APP_API_BASE_URL}`,
  VUE_APP_NAME: `${process.env.VUE_APP_NAME}`,
});

2.在@/config/interceptors/router.js引入track.js

import { trackLog } from '@/utils/track';

export function routerBeforeEachFunc(to, from, next) {
  trackLog({
    to,
    from,
    next,
    VUE_APP_API_BASE_URL: `${process.env.VUE_APP_API_BASE_URL}`,
    VUE_APP_NAME: `${process.env.VUE_APP_NAME}`,
  });

路由埋点

@/src/router/* 需要埋点的routes

...
{
    path: '/user',
    meta: {
      title:'我的OKR',
      stat: 'user',
    },
    component: () => import('@/pages/user'),
  },
...

在meta属性中 添加stat属性

事件埋点

@/具体对应的按钮

用“-”分割，目前两个参数，type[事件名]-name[按钮字段]

字段名具体参照 https://confluence.ecarxgroup.com/pages/viewpage.action?pageId=107027358

 data-stat="click-search"

注意事项

在 icon-font 上 也要埋点，不然会引起元素点击丢失

<span data-stat="click-pComment" @click="commentSider('progress',proList.id)">
    <icon-font data-stat="click-pComment" type="iconpinglun"></icon-font>
  </span>

实际项目中操作，有些情况需要手动触发埋点

ecarx-it-js 暴露出一个手动触发函数

import { triggerTrack } from 'ecarx-it-js';

// 手动埋点
triggerTrack({
  VUE_APP_API_BASE_URL: `${process.env.VUE_APP_API_BASE_URL}`,
  VUE_APP_NAME: `${process.env.VUE_APP_NAME}`,
  // name-type 用‘-’中划线区分
  stat: `click-IT_${process.env.VUE_APP_NAME}_inquireButtonClose_C`,
});

意见反馈组件

安装组件

npm i ecarx-it-js -S

关键代码 参考 okr/src/layouts/HeaderAsideLayout/components/tools/UserMenu.vue

<feedBackComponent class="feedBack" :sysInfo="sysInfo" :list="list" :lang="lang" 
   :prodUrl="prodUrl">
   <icon-font data-stat="click-wenhao" type="icon-wenhao" />
</feedBackComponent>
...
import { feedBackComponent } from 'ecarx-it-js';
import 'ecarx-it-js/lib/ecarxjs.css';
...
computed: {
    ...mapState('system/app', [ 'lang']),
    prodUrl() { //产品指南url
      const previewServer = process.env.VUE_APP_ONLINE_PREVIEW_SERVER;
      let url = `${previewServer}?url=https%3A%2F%2Fminio.ecarx.com.cn%2Fitdp%2F433400c3-eedc-46de-9e32- 
         ad41acac1424.docx`;//根据实际产品文档地址指南替换
      if (this.lang === 'en-US') {
        url = `${previewServer}?url=https%3A%2F%2Fminio.ecarx.com.cn%2Fitdp%2Fce47c8eb-6484-4d7d-8e9e- 
         4aea33aa9d33.docx`;//根据实际产品文档地址指南替换
      }
      console.log(url);
      return url;
    },
},
data() {
    return {
      sysInfo: {
        VUE_APP_NAME: process.env.VUE_APP_NAME,
        VUE_APP_API_BASE_URL: process.env.VUE_APP_API_BASE_URL,
        placement:'' //默认bottomRight
      },
      list: [//如果没有产品指南，则list置空
        {
          type: 'help',
          icon: 'icon-a-helpcenter',
          name: this.$t('common.guide'),
          url: this.prodUrl,
          track: 'guideButton_C',
        },
       ]
    }
},
watch: {
    lang() {
      this.list = [{//如果没有产品指南，则list置空
        type: 'help',
        icon: 'icon-a-helpcenter',
        name: this.$t('common.guide'),
        url: this.prodUrl,
        track: 'guideButton_C',
      }];
    },
  },
components: { NoticeIcon, feedBackComponent,IconFont },

<style>
.feedBack {
  margin-right: 10px;
  cursor: pointer;
  /deep/ a {
    color: #999;
    &:hover {
      color: #3471ff;
    }
  }
}
</style>

注意事项

由于 npm run lib,导致默认的slot不生效，所以目前先自己做个icon-font组件来hack下

import { Icon } from 'ant-design-vue';
const IconFont = Icon.createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_2809375_e0ulploa9yb.js',
});

有空继续补充