feat: 埋点

package-lock.json

@@ -1186,6 +1186,28 @@
         }
       }
     },
+    "@qg/ui-track-web": {
+      "version": "0.0.3",
+      "resolved": "http://npmprivate.quantgroups.com/@qg%2fui-track-web/-/ui-track-web-0.0.3.tgz",
+      "integrity": "sha512-eVo3fXcp3eRGG5YznmfZQa8ih03nJtmNJYCS9VCt3Q8x/mpK3iaqk7Be6+ntUUeCfVSre7uq7fXGwUEfj1ieUw==",
+      "requires": {
+        "@qg/js-bridge": "^1.1.11",
+        "sa-sdk-javascript": "^1.18.2",
+        "vue": "^2.6.14"
+      },
+      "dependencies": {
+        "sa-sdk-javascript": {
+          "version": "1.18.5",
+          "resolved": "http://npmprivate.quantgroups.com/sa-sdk-javascript/-/sa-sdk-javascript-1.18.5.tgz",
+          "integrity": "sha512-bDoeZhuBiCQ+2IaOpzP7Yx5pfeNZ3Lhic3GSj1aQn8Z/H3ddfXvSzur1XEA5tj0sMYI2KX4yECmXKC1kxF7NpA=="
+        },
+        "vue": {
+          "version": "2.6.14",
+          "resolved": "http://npmprivate.quantgroups.com/vue/-/vue-2.6.14.tgz",
+          "integrity": "sha512-x2284lgYvjOMj3Za7kqzRcUSxBboHqtgRE2zlos1qWaOye5yUmHn42LB1250NJBLRwEcdrB0JRwyPTEPhfQjiQ=="
+        }
+      }
+    },
     "@qg/webpack-cos-cdn-upload-plugin": {
       "version": "0.0.4",
       "resolved": "http://npmprivate.quantgroups.com/@qg%2fwebpack-cos-cdn-upload-plugin/-/webpack-cos-cdn-upload-plugin-0.0.4.tgz",

package.json

@@ -14,6 +14,7 @@
     "@qg/js-bridge": "^1.1.9",
     "@qg/qg-scroll": "^1.4.2",
     "@qg/ui-request": "0.0.20",
+    "@qg/ui-track-web": "0.0.3",
     "clipboard": "^2.0.8",
     "core-js": "^3.6.5",
     "crypto-js": "^3.3.0",

src/config/env.config.js

-/*
- * @Description:
- * @Date: 2021-03-31 19:59:17
- * @LastEditors: gzw
- * @LastEditTime: 2021-07-01 17:02:56
- */
-/*
- * @Description:
- * @Date: 2021-03-31 19:59:12
- * @LastEditors: gzw
- * @LastEditTime: 2021-03-31 19:59:13
- */
 let protocol = window.location.protocol;
 
 let payHost = protocol + '//mapi-qa.liangkebang.net/pay';

src/main.js

 import Vue from 'vue';
-
+import uiTrack from '@qg/ui-track-web';
 import App from './App.vue';
 import router from './router';
 import store from './store';
@@ -12,6 +12,7 @@ import Raven from 'raven-js';
 import RavenVue from 'raven-js/plugins/vue';
 import { release } from '../.sentryclirc';
 import fontResize from './directives/fontResize';
+import cfg from './config';
 if (process.env.SENTRY_ENV !== 'test' && process.env.NODE_ENV === 'production') {
   Raven.config('//21779c2dcb594299bdc803c5560cfecd@sentry.q-gp.com/60', {
     release,
@@ -21,6 +22,12 @@ if (process.env.SENTRY_ENV !== 'test' && process.env.NODE_ENV === 'production')
     .install();
 }
 Vue.prototype.util = new Bridge();
+Vue.prototype.$track = new uiTrack({
+  useUweb: false,
+  shenceHost: cfg.shenceHost,
+  showLog: cfg.test,
+  router: router // router实例
+});
 window.Bridge = Bridge;
 
 saService.init(router);

src/views/home/components/RechargeTop.vue

 <template>
   <div class="top">
     <div class="top-link">
-      <a href="#" class="top-link-title top-link-title-first" @click="goOrderList">充值订单</a>
       <a
-        href="https://www.sobot.com/chat/h5/v2/index.html?sysnum=84ed0ad93caa47b0a9d1600824546b35&source=2"
-        class="top-link-title"
-        >联系客服</a
+        href="javascript:;"
+        class="top-link-title top-link-title-first"
+        @click="goOrderListTrack('充值订单')"
       >
+        充值订单
+      </a>
+      <a href="" class="top-link-title" @click="goOrderListTrack('联系客服', 'cs')">联系客服</a>
     </div>
     <div class="top-tabs">
       <p class="top-tabs-title">娱乐生活</p>
@@ -38,14 +40,38 @@ export default {
   },
   methods: {
     goVipLife(spu) {
+      this.$track.registeredEvents(
+        'h5_RechargeCenterPageAmusementAssemblyClick',
+        {
+          classify_name: spu.name
+        },
+        () => {
           this.$router.push({
             name: 'vipLife',
             query: {
               spuType: spu.type
             }
           });
+        }
+      );
+    },
+    goOrderListTrack(name, type) {
+      this.$track.registeredEvents(
+        'h5_RechargeCenterPageOrderCustomerServiceClick',
+        {
+          buttons_name: name
         },
-    async goOrderList() {
+        () => {
+          this.goOrderList(type);
+        }
+      );
+    },
+    async goOrderList(type) {
+      if (type === 'cs') {
+        window.location.href =
+          'https://www.sobot.com/chat/h5/v2/index.html?sysnum=84ed0ad93caa47b0a9d1600824546b35&source=2';
+        return;
+      }
       const token = localStorage.get('vccToken');
       if (!token) {
         await getTokenFromNative();

src/views/home/index.vue

@@ -69,6 +69,7 @@ export default {
       this.rechargePhoneInfo = data?.userPhoneInfo || {};
       localStorage.set('phoneNo', data?.userPhoneInfo?.phoneNo);
     }
+    this.$track.registeredEvents('h5_RechargeCenterPageExposure');
   },
   methods: {
     throttle,
@@ -77,6 +78,10 @@ export default {
     },
     async goOrderApi() {
       const { skuNo, salePrice } = this.selectedRechargeInfo;
+      this.$track.registeredEvents('h5_RechargeCenterPagePhoneBillClick', {
+        recharge_type: this.phoneRecharge[`${this.rechargeType}Type`] === 601 ? '快充' : '慢充',
+        cost_value: salePrice
+      });
       const [res, error] = await orderApi.orderCreate({
         totalFee: salePrice,
         terminal: 'H5',

src/views/orderList/components/List.vue

@@ -123,8 +123,16 @@ export default {
       this.$emit(EVENT_CLICK, { orderInfo: { ...orderInfo, index }, eventType });
     },
     toHome() {
+      this.$track.registeredEvents(
+        'h5_MyOrdersPageClick',
+        {
+          buttons_name: '返回充值中心'
+        },
+        () => {
           this.$router.replace({ path: '/home' });
         }
+      );
+    }
   }
 };
 </script>

src/views/orderList/index.vue

 <template>
   <div class="page page__nopad">
-    <cr-tabs v-model="currentTab" sticky :offset-top="tabOffset" @change="handleTabChange">
+    <cr-tabs
+      v-model="currentTab"
+      sticky
+      :offset-top="tabOffset"
+      @change="handleTabChange"
+      @click="handleTabClick"
+    >
       <cr-tab v-for="(item, index) in navList" :key="index" :title="item.title" :name="index">
         <list
           :list="item.list"
@@ -66,8 +72,14 @@ export default {
   },
   mounted() {
     this.getList();
+    this.handleTabClick(0);
   },
   methods: {
+    handleTabClick(name) {
+      this.$track.registeredEvents('h5_MyOrdersPageClick', {
+        buttons_name: this.navList[name].title
+      });
+    },
     handleTabChange(name) {
       this.currentTab = name;
       this.getList();

src/views/vipLife/index.vue

@@ -120,6 +120,11 @@ export default {
     },
     handleSkuSelected(item) {
       this.skuInfo = item;
+      this.$track.registeredEvents('h5_OtherRechargePageClick', {
+        classify_name: this.spuData[this.currentTab - 1].name,
+        recharge_name: this.spuInfo.name,
+        value_name: this.skuInfo.skuName || ''
+      });
     },
     updateSpuInfo(info) {
       this.$set(this, 'spuInfo', info);
@@ -145,9 +150,11 @@ export default {
       const { spuNos, type } = this.spuInfo;
       const [res] = await rechargeApi.getSkuList(spuNos, type);
       if (res) {
-        this.skuList = res.rechargeList;
+        this.skuList = res.rechargeList || [];
         const defaultItem = res.rechargeList.find(item => item.hasStock);
         this.handleSkuSelected(defaultItem || {});
+      } else {
+        this.handleSkuSelected({});
       }
       this.showLoading = false;
     },
@@ -155,6 +162,11 @@ export default {
       if (!this.account && this.spuInfo.rechargeAccountType !== 2)
         return this.$toast.fail('请填写账号！');
       if (!this.skuInfo.skuNo) return this.$toast.fail('请选择类型！');
+      this.$track.registeredEvents('h5_OtherRechargePageRechargeNowClick', {
+        classify_name: this.spuData[this.currentTab - 1].name,
+        recharge_name: this.spuInfo.name,
+        value_name: this.skuInfo.skuName || ''
+      });
       const { skuNo, salePrice } = this.skuInfo;
       const params = {
         totalFee: salePrice,