初步完成

packages/core/src/basicTrack.ts

@@ -1,12 +1,13 @@
-import { IBaseAction } from '@medici/types';
+import { IBaseAction, ICustomAction, TrackActionOption } from '@medici/types';
 import type { SDKInitConfig, PlatformType, SDKConfigType } from './sdk';
 import type { IHistory } from './history';
 import { collect } from './collector';
-export class BaseTrack implements IBaseAction {
+export class BaseTrack implements IBaseAction, ICustomAction {
     protected _platform: PlatformType;
     protected _config: SDKInitConfig;
     protected _history: IHistory;
     protected _endPoint: string;
+    protected _trackEndPoint: string;
     protected _appId: string;
 
     constructor(params: SDKConfigType) {
@@ -14,6 +15,7 @@ export class BaseTrack implements IBaseAction {
         this._platform = params.platform;
         this._appId = params.appId;
         this._endPoint = params.endPoint;
+        this._trackEndPoint = params.trackEndPoint;
     }
     public trackView(url: string, referrer: string, uuid: string): void {
         console.log('BaseTrack-trackView', url, referrer, uuid);
@@ -24,23 +26,50 @@ export class BaseTrack implements IBaseAction {
         collect(this._endPoint, 'pageview', payload);
     }
 
-    public trackEvent(value: string, type: string, url?: string, uuid?: string): void {
-        console.log('BaseTrack-TrackEvent', value, type, url, uuid);
+    public trackEvent(event_name: string, event_data: string, url?: string, uuid?: string): Promise<XMLHttpRequestResponseType> {
+        console.log('BaseTrack-TrackEvent', event_name, event_data, url, uuid);
         const payload = Object.assign(this._history.playload, {
             referrer: this._history.currentRef,
-            event_type: 'custom',
-            event_value: value,
+            event_name: event_name,
+            event_data: event_data,
         });
-        collect(this._endPoint, 'event', payload);
+        return collect(this._endPoint, 'event', payload);
     }
 
     public sendEvent(value: string, type: string, url?: string, uuid?: string): void {
         console.log('BaseTrack-sendEvent', value, type, url, uuid);
         const payload = Object.assign(this._history.playload, {
             referrer: this._history.currentRef,
-            event_type: type,
-            event_value: value,
+            event_name: type,
+            event_data: value,
         });
         collect(this._endPoint, 'event', payload);
     }
+
+    public track(trackActionName: string, trackActionOption?: TrackActionOption): void {
+        const payload = Object.assign(this._history.playload, {
+            referrer: this._history.currentRef,
+            ...trackActionOption,
+            trackActionName,
+        });
+        collect(this._trackEndPoint, 'track', payload);
+    }
+
+    public startTrack(trackActionName: string, trackActionOption?: TrackActionOption): void {
+        const payload = Object.assign(this._history.playload, {
+            referrer: this._history.currentRef,
+            ...trackActionOption,
+            trackActionName,
+        });
+        collect(this._trackEndPoint, 'startTrack', payload);
+    }
+
+    public endTrack(trackActionName: string, trackActionOption?: TrackActionOption): void {
+        const payload = Object.assign(this._history.playload, {
+            referrer: this._history.currentRef,
+            ...trackActionOption,
+            trackActionName,
+        });
+        collect(this._trackEndPoint, 'endTrack', payload);
+    }
 }

packages/core/src/event.ts

@@ -8,19 +8,22 @@ import { SDK } from './sdk';
 export class Eventer {
     protected _sdk: SDK;
     private _identifier: string;
-    private eventSelect: string;
+    private _eventSelect: string;
     private eventClassValidate: RegExp;
     private listeners: Dict<any> = {};
     constructor(_sdk: SDK) {
         this._sdk = _sdk;
         this._identifier = 'mdc';
-        this.eventSelect = `[class*='${this._identifier}--']`;
+        this._eventSelect = `[class*='${this._identifier}--']`;
         this.eventClassValidate = /^mdc--([a-z]+)--([\w]+[\w-]*)$/;
     }
     updateIdentifier(identifier: string): void {
         this._identifier = identifier;
         this.eventClassValidate = new RegExp('^' + identifier + '--([a-z]+)--([w]+[w-]*)$');
     }
+    get eventSelect(): string {
+        return this._eventSelect;
+    }
 
     initElementCssEvents(node: HTMLElement): void {
         const elements = node.querySelectorAll(this.eventSelect);
@@ -31,23 +34,24 @@ export class Eventer {
     addCssEvent(element: HTMLElement): void {
         (element.getAttribute('class') || '').split(' ').forEach((className) => {
             if (!this.eventClassValidate.test(className)) return;
-            const [, type, value] = className.split('--');
-            console.log('addCssEvent', type, value);
+            console.log('有效Node', element);
+            const [, event, name] = className.split('--');
+            console.log('addCssEvent', event, name);
             const listener = this.listeners[className]
                 ? this.listeners[className]
                 : (this.listeners[className] = () => {
+                      console.log('trackEvent', event, name);
                       if (element.tagName === 'A') {
-                          console.log('sendEvent', value, type);
                           // sendEvent(value, type);
-                          this._sdk.sendEvent(value, type);
+                          this._sdk.trackEvent(name, '');
                       } else {
-                          console.log('trackEvent', value, type);
+                          console.log('trackEvent', name, '');
                           // trackEvent(value, type);
-                          this._sdk.trackEvent(value, type);
+                          this._sdk.trackEvent(name, '');
                       }
                   });
             // console.log('listener', listener);
-            element.addEventListener(type, listener, true);
+            element.addEventListener(event, listener, true);
         });
     }
 }

packages/core/src/history.ts

@@ -36,7 +36,7 @@ export class IHistory {
     get currentRef(): string {
         return this._currentRef;
     }
-    
+
     init(): void {
         console.log('history init');
         global.document.addEventListener('readystatechange', this.handleReadystatechange.bind(this), true);
@@ -105,10 +105,20 @@ export class IHistory {
                 // const element: Node = mutation.target;
                 nodeGroup.push(Array.from(mutation.addedNodes));
             });
+            console.log('nodeGroup', nodeGroup.flat());
             Array.from(nodeGroup.flat()).forEach((item: Node) => {
                 // console.log('element-nodeGroup', item);
                 if ('getAttribute' in (item as HTMLElement)) {
                     this._sdk.eventer.addCssEvent(item as HTMLElement);
+                    if (item.hasChildNodes) {
+                        const allVilateChild = (item as HTMLElement).querySelectorAll(this._sdk.eventer.eventSelect);
+                        console.log('allVilateChild', allVilateChild);
+                        allVilateChild.forEach((child: HTMLElement) => {
+                            if ('getAttribute' in child) {
+                                this._sdk.eventer.addCssEvent(child);
+                            }
+                        });
+                    }
                 }
             });
         };

packages/core/src/sdk.ts

@@ -17,6 +17,7 @@ export interface SDKConfigType {
     platform?: PlatformType;
     autoTrack?: boolean;
     config?: SDKInitConfig;
+    trackEndPoint?: string;
 }
 export class SDK extends BaseTrack {
     protected _platform: PlatformType;

packages/types/src/event.ts

@@ -13,7 +13,7 @@ export interface TrackActionOption extends Dict<any> {
 }
 export interface IBaseAction {
     trackView(url: string, referrer: string, uuid: string): void;
-    trackEvent(value: string, type: string, url?: string, uuid?: string): void;
+    trackEvent(event_name: string, event_data: string, url?: string, uuid?: string): void;
     sendEvent(value: string, type: string, url?: string, uuid?: string): void;
 }
 

play/package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
     "build": "vue-tsc --noEmit && vite build",
     "preview": "vite preview"
   },
@@ -17,6 +17,7 @@
     "@vitejs/plugin-vue": "^3.0.0",
     "typescript": "^4.6.4",
     "vite": "^3.0.0",
-    "vue-tsc": "^0.38.4"
+    "vue-tsc": "^0.38.4",
+    "vue3-highlightjs": "^1.0.5"
   }
 }

play/src/App.vue

@@ -6,14 +6,23 @@ import { SDK } from '@medici/core';
 
 const medici = new SDK({
     platform: 'web',
-    appId: 'xx129192919',
-    endPoint: 'https://google.com', //服务器
+    appId: '7b5958d5-1ae6-4ad5-8a87-5fc8a4b92999',
+    endPoint: 'http://192.168.0.186:3000/api/collect', //服务器
+    trackEndPoint: 'https://gtm.4dkankan.com/api/track',
     config: {
         user: 'testUser',
         version: '1',
     },
 });
 console.log('medici', medici);
+
+
+// medici.track("BuyProduct", {
+//   eventType:"click",
+//   ProductName: "MacBook Pro",
+//   ProductPrice: 123.45,
+//   IsAddedToFav: false,
+// });
 </script>
 
 <template>

play/src/components/custom.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts"></script>
+
+<template>
+    <h1>custom自定义Track</h1>
+    
+    
+
+
+
+</template>
+
+<style scoped>
+.read-the-docs {
+    color: #888;
+}
+</style>

play/src/components/home.vue

@@ -2,12 +2,16 @@
 
 <template>
     <h1>home</h1>
-    <router-link to="page1">page1</router-link>
-    <router-link to="page2">page2</router-link>
-    <router-link to="page3" class="mdc--click-register">page3</router-link>
-    <div>
-        <button class="mdc--click--login">action-to-login</button>
-        <button class="mdc--click--pay">action-to-pay</button>
+    <div class="test">
+        <router-link to="page1">page1</router-link>
+        <router-link to="page2">page2</router-link>
+        <router-link to="page3" class="mdc--click--register">page3</router-link>
+        <router-link to="custom">自定义action</router-link>
+        <a href="https://baidu.com">baidu.com 跳出</a>
+        <div>
+            <button class="mdc--click--login">action-to-login</button>
+            <button class="mdc--click--pay">action-to-pay</button>
+        </div>
     </div>
 </template>
 
@@ -15,4 +19,8 @@
 .read-the-docs {
     color: #888;
 }
+.test a {
+    padding: 10px;
+    display: inline-block;
+}
 </style>

play/src/components/page3.vue

@@ -1,14 +1,12 @@
-<script setup lang="ts">
-
-</script>
+<script setup lang="ts"></script>
 
 <template>
-  <h1>page2</h1>
-
+    <h1>page3</h1>
+    <button class="mdc--click--checkin_page3"> check int page3</button>
 </template>
 
 <style scoped>
 .read-the-docs {
-  color: #888;
+    color: #888;
 }
 </style>

play/src/router.ts

@@ -3,6 +3,8 @@ export const routerHistory = createWebHistory();
 const Home = () => import('./components/home.vue');
 const Page1 = () => import('./components/page1.vue');
 const Page2 = () => import('./components/page2.vue');
+const Page3 = () => import('./components/page3.vue');
+const Custom = () => import('./components/custom.vue');
 
 export const router = createRouter({
     history: routerHistory,
@@ -25,7 +27,12 @@ export const router = createRouter({
         },
         {
             path: '/page3',
-            component: Page2,
+            component: Page3,
+            // props: (to) => ({ waited: to.meta.waitedFor }),
+        },
+        {
+            path: '/custom',
+            component: Custom,
             // props: (to) => ({ waited: to.meta.waitedFor }),
         },
     ],

play/src/style.css

@@ -65,6 +65,7 @@ button:focus-visible {
   margin: 0 auto;
   padding: 2rem;
   text-align: center;
+  min-height: 680px;
 }
 
 @media (prefers-color-scheme: light) {

pnpm-lock.yaml

@@ -90,6 +90,7 @@ importers:
       vue: ^3.2.37
       vue-router: '4'
       vue-tsc: ^0.38.4
+      vue3-highlightjs: ^1.0.5
     dependencies:
       '@medici/core': link:../packages/core
       vue: 3.2.37
@@ -99,6 +100,7 @@ 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:
 
@@ -2021,6 +2023,10 @@ packages:
       function-bind: 1.1.1
     dev: true
 
+  /highlight.js/10.7.3:
+    resolution: {integrity: sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==}
+    dev: true
+
   /hosted-git-info/2.8.9:
     resolution: {integrity: sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==}
     dev: true
@@ -3571,6 +3577,15 @@ 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: