update

packages/core/src/basicTrack.ts

@@ -9,6 +9,7 @@ export class BaseTrack implements IBaseAction, ICustomAction {
     protected _endPoint: string;
     protected _trackEndPoint: string;
     protected _appId: string;
+    private _timeOut: ReturnType<typeof setTimeout>;
 
     constructor(params: SDKConfigType) {
         this._config = params.config;
@@ -62,9 +63,15 @@ export class BaseTrack implements IBaseAction, ICustomAction {
             trackActionName,
         });
         collect(this._trackEndPoint, 'startTrack', payload);
+        if (trackActionOption.maxWaitTime) {
+            this._timeOut = setTimeout(() => {
+                this.endTrack(trackActionName, trackActionOption);
+            }, trackActionOption.maxWaitTime);
+        }
     }
 
     public endTrack(trackActionName: string, trackActionOption?: TrackActionOption): void {
+        clearTimeout(this._timeOut);
         const payload = Object.assign(this._history.playload, {
             referrer: this._history.currentRef,
             ...trackActionOption,

packages/types/src/event.ts

@@ -10,6 +10,7 @@ export interface GlobalEventType {
 export type TrackEventType = 'click' | 'menu';
 export interface TrackActionOption extends Dict<any> {
     eventType: string;
+    maxWaitTime?: number;
 }
 export interface IBaseAction {
     trackView(url: string, referrer: string, uuid: string): void;

play/package.json

@@ -9,7 +9,9 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@highlightjs/vue-plugin": "^2.1.0",
     "@medici/core": "workspace:^0.0.1",
+    "highlight.js": "^11.6.0",
     "vue": "^3.2.37",
     "vue-router": "4"
   },
@@ -17,7 +19,6 @@
     "@vitejs/plugin-vue": "^3.0.0",
     "typescript": "^4.6.4",
     "vite": "^3.0.0",
-    "vue-tsc": "^0.38.4",
-    "vue3-highlightjs": "^1.0.5"
+    "vue-tsc": "^0.38.4"
   }
 }

play/src/App.vue

@@ -8,14 +8,14 @@ const medici = new SDK({
     platform: 'web',
     appId: '7b5958d5-1ae6-4ad5-8a87-5fc8a4b92999',
     endPoint: 'http://192.168.0.186:3000/api/collect', //服务器
-    trackEndPoint: 'https://gtm.4dkankan.com/api/track',
+    trackEndPoint: 'http://192.168.0.186:3000/api/track',
     config: {
         user: 'testUser',
         version: '1',
     },
 });
 console.log('medici', medici);
-
+(window as any).medici = medici;
 
 // medici.track("BuyProduct", {
 //   eventType:"click",

play/src/components/custom.vue

@@ -1,12 +1,67 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { ref } from 'vue';
 
-<template>
-    <h1>custom自定义Track</h1>
-    
-    
+const t1 = `
+medici.track("BuyProduct", {
+    eventType:"click",
+    ProductName: "MacBook Pro",
+    ProductPrice: 123.45,
+    IsAddedToFav: false,
+    ... // 其他自定业务字段
+});
+`;
+const t2 = `
+medici.startTrack("BuyProduct", {
+  eventType:"click",
+  maxWaitTime: 30000, //可自定义,主要是下载等行为耗时。
+  ProductName: "MacBook Pro",
+  ProductPrice: 123.45,
+  IsAddedToFav: false,
+  ... // 其他自定业务字段
+});
+`;
+const t3 = `
+medici.endTrack("BuyProduct", {
+  ... // 后补参数
+});
+`;
+const test = ref({
+    t1,
+    t2,
+    t3,
+});
 
+const oneTimeTrack = () => {
+    (window as any).medici.track('BuyProduct', {
+        eventType: 'click',
+        ProductName: 'MacBook Pro',
+        ProductPrice: 123.45,
+        IsAddedToFav: false,
+    });
+};
+const twoTimeStartTrack = () => {
+    (window as any).medici.startTrack('BuyProduct', {
+        eventType: 'click',
+        maxWaitTime: 300000, //可自定义,主要是下载等行为耗时。
+        ProductName: 'MacBook Pro',
+        ProductPrice: 123.45,
+        IsAddedToFav: false,
+    });
+};
+const twoTimeEndTrack = () => {
+    (window as any).medici.startTrack('BuyProduct', {});
+};
+</script>
 
+<template>
+    <h1>custom自定义Track</h1>
+    1.一次消费埋点 <button @click="oneTimeTrack">点击触发</button>
+    <highlightjs language="js" :code="test.t1" />
 
+    2.二次消费埋点 <button @click="twoTimeStartTrack">start点击触发</button>
+    <highlightjs language="js" :code="test.t2" />
+    <button @click="twoTimeEndTrack">end点击触发</button>
+    <highlightjs language="js" :code="test.t3" />
 </template>
 
 <style scoped>

play/src/main.ts

@@ -2,5 +2,8 @@ import { createApp } from 'vue';
 import './style.css';
 import App from './App.vue';
 import { router } from './router';
+import 'highlight.js/styles/atom-one-dark.css';
+import 'highlight.js/lib/common';
+import hljsVuePlugin from '@highlightjs/vue-plugin';
 
-createApp(App).use(router).mount('#app');
+createApp(App).use(router).use(hljsVuePlugin).mount('#app');

pnpm-lock.yaml

@@ -83,16 +83,19 @@ importers:
 
   play:
     specifiers:
+      '@highlightjs/vue-plugin': ^2.1.0
       '@medici/core': workspace:^0.0.1
       '@vitejs/plugin-vue': ^3.0.0
+      highlight.js: ^11.6.0
       typescript: ^4.6.4
       vite: ^3.0.0
       vue: ^3.2.37
       vue-router: '4'
       vue-tsc: ^0.38.4
-      vue3-highlightjs: ^1.0.5
     dependencies:
+      '@highlightjs/vue-plugin': 2.1.0_67te4p3ga56i3himeolvr6h3ke
       '@medici/core': link:../packages/core
+      highlight.js: 11.6.0
       vue: 3.2.37
       vue-router: 4.1.3_vue@3.2.37
     devDependencies:
@@ -100,7 +103,6 @@ importers:
       typescript: 4.7.4
       vite: 3.0.4
       vue-tsc: 0.38.9_typescript@4.7.4
-      vue3-highlightjs: 1.0.5_vue@3.2.37
 
 packages:
 
@@ -359,6 +361,16 @@ packages:
       - supports-color
     dev: true
 
+  /@highlightjs/vue-plugin/2.1.0_67te4p3ga56i3himeolvr6h3ke:
+    resolution: {integrity: sha512-E+bmk4ncca+hBEYRV2a+1aIzIV0VSY/e5ArjpuSN9IO7wBJrzUE2u4ESCwrbQD7sAy+jWQjkV5qCCWgc+pu7CQ==}
+    peerDependencies:
+      highlight.js: ^11.0.1
+      vue: ^3
+    dependencies:
+      highlight.js: 11.6.0
+      vue: 3.2.37
+    dev: false
+
   /@humanwhocodes/config-array/0.9.5:
     resolution: {integrity: sha512-ObyMyWxZiCu/yTisA7uzx81s40xR2fD5Cg/2Kq7G02ajkNubJf6BopgDTmDyc3U7sXpNKM8cYOw7s7Tyr+DnCw==}
     engines: {node: '>=10.10.0'}
@@ -2023,9 +2035,10 @@ packages:
       function-bind: 1.1.1
     dev: true
 
-  /highlight.js/10.7.3:
-    resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
-    dev: true
+  /highlight.js/11.6.0:
+    resolution: {integrity: sha512-ig1eqDzJaB0pqEvlPVIpSSyMaO92bH1N2rJpLMN/nX396wTpDA4Eq0uK+7I/2XG17pFaaKE0kjV/XPeGt7Evjw==}
+    engines: {node: '>=12.0.0'}
+    dev: false
 
   /hosted-git-info/2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
@@ -3577,15 +3590,6 @@ packages:
       '@vue/server-renderer': 3.2.37_vue@3.2.37
       '@vue/shared': 3.2.37
 
-  /vue3-highlightjs/1.0.5_vue@3.2.37:
-    resolution: {integrity: sha512-Q4YNPXu0X5VMBnwPVOk+IQf1Ohp9jFdMitEAmzaz8qVVefcQpN6Dx4BnDGKxja3TLDVF+EgL136wC8YzmoCX9w==}
-    peerDependencies:
-      vue: ^3.0.0
-    dependencies:
-      highlight.js: 10.7.3
-      vue: 3.2.37
-    dev: true
-
   /wcwidth/1.0.1:
     resolution: {integrity: sha512-XHPEwS0q6TaxcvG85+8EYkbiCux2XtWG2mkc47Ng2A77BQu9+DqIOJldST4HgPkuea7dvKSj5VgX3P1d4rW8Tg==}
     dependencies: