@tengence/track-sdk-web 1.0.0

package/README.md

@@ -0,0 +1 @@
+**@tengence/track-sdk-web**

package/dist/index.d.ts

@@ -0,0 +1,18 @@
+import { BaseOptions, ClientReportData, ReportFunction } from "./interface";
+declare global {
+    interface Window {
+        trackMonitor: {
+            report: ReportFunction;
+            realtimeReport: ReportFunction;
+            bindUser: (id: string) => void;
+            unBindUser: () => void;
+        };
+    }
+}
+declare const init: (options: BaseOptions) => {
+    bindUser: (id: string) => void;
+    unBindUser: () => void;
+    report: (data: ClientReportData) => void;
+    realtimeReport: (data: ClientReportData) => void;
+};
+export default init;

package/dist/index.mjs

@@ -0,0 +1 @@
+const e=!!navigator?.sendBeacon,t=window.requestIdleCallback||window.requestAnimationFrame||(e=>setTimeout(e,17)),n=e=>{"complete"===document.readyState?setTimeout(e):window.addEventListener("pageshow",e,{once:!0,capture:!0})};function r(e,t=150,n=!1){let r=null;return function(...o){const a=this,i=n&&!r;r&&clearTimeout(r),r=setTimeout((()=>{r=null,n||e.apply(a,o)}),t),i&&e.apply(a,o)}}const o=(e,t=300)=>{let n=0;return function(...r){const o=Date.now();o-n>=t&&(n=o,e.apply(this,r))}};function a(e,t=""){if(!e)return t;const n=e.parentElement,{id:r}=e,o=e.tagName.toLowerCase(),i=t?`>${t}`:"";return n&&n!==document.documentElement&&n!==document.body?r?`#${r}${i}`:a(n,`${o}${i}`):`${o}${i}`}const i=()=>{if(window.performance?.navigation)return performance.navigation.type;if(window.performance?.getEntriesByType){const e=performance.getEntriesByType("navigation");if(e.length>0)return e[0].type}return 255},s=e=>{const t=history[e];return function(){const n=t.apply(this,arguments),r=new Event(e);return window.dispatchEvent(r),n}},c=e=>{window.addEventListener("replaceState",(t=>e(t)),!0),window.addEventListener("pushState",(t=>e(t)),!0)},l=e=>{window.addEventListener("popstate",(t=>e(t)),!0)},d=e=>{const t=o((t=>{const n=function(e){if(!e)return;if(["A","INPUT","TEXTAREA","BUTTON"].includes(e.tagName))return console.log("预设的可跟踪元素 ",e),e;if(e.hasAttribute("track-click"))return console.log("带有 track-click 属性的可跟踪元素 ",e),e;const t=e.closest("a, button, [track-click]");return t?(console.log("找到的可跟踪元素 ",t),t):void 0}(t.target);if(!n)return;const r={element_id:n.id,element_content:n.textContent?.trim()||null,element_class_name:n.className||null,element_name:n.getAttribute("name")||null,element_type:n.tagName.toLowerCase(),element_path:a(n),scroll_width:document.documentElement.scrollWidth,scroll_height:document.documentElement.scrollHeight,pageX:t.pageX,pageY:t.pageY,ratio:window.devicePixelRatio||1};e({data_type:"common",event_type:"click",event_detail:r})}));window.addEventListener("click",t,!0)},u=e=>{history.pushState=s("pushState"),history.replaceState=s("replaceState"),(e=>{const t=r((()=>{const{host:t,hostname:n,href:r,protocol:o,origin:a,port:s,pathname:c,search:l,hash:d}=window.location,u={host:t,hostname:n,href:r,protocol:o,origin:a,port:s,pathname:c,search:l,hash:d,title:document.title,language:navigator.language.substring(0,2),user_agent:navigator.userAgent,win_screen:`${window.screen.width}x${window.screen.height}`,doc_screen:`${document.documentElement.clientWidth}x${document.documentElement.clientHeight}`,referrer:document.referrer,type:i()};e({data_type:"common",event_type:"view",event_detail:u})}));n((()=>{t()})),l((()=>{t()})),c((()=>{t()}))})(e),(e=>{let t="",o="",a=0;const i=()=>{if(o&&a){const n=Date.now()-a;n>0&&e({data_type:"common",event_type:"leave",event_detail:{url:o,referrer:t,duration:n}})}a=Date.now(),t=o,o=window.location.href},s=r(i);n((()=>{s()})),l((()=>{s()})),c((()=>{s()})),document.addEventListener("visibilitychange",(()=>{"hidden"===document.visibilityState?i():a=Date.now()})),window.addEventListener("pagehide",(()=>{i()}),!0),window.addEventListener("pageshow",(()=>{a=Date.now()}),!0),window.addEventListener("beforeunload",(()=>{i()}),!0)})(e),d(e)};let m=null,h=null;const p="track-expose",w="track-view",g="TRACK_MONITOR_DATA",f="TRACK_MONITOR_USER";let v=null,y=null;const _=(e,t,n)=>({session_id:t.session_id,request_id:t.request_id,spm:t.spm,data_type:t.data_type||"behavior",event_type:t.event_type,event_detail:"string"==typeof t.event_detail?t.event_detail:JSON.stringify(t.event_detail),page_url:location.href,os:window.navigator.platform,user_id:localStorage.getItem(f)||void 0,user_agent:window.navigator.userAgent,screen_width:window.screen.width,screen_height:window.screen.height,lib_version:"1.0.0",lib_type:"js",event_time:(new Date).getTime().toString(),timezone_offset:(new Date).getTimezoneOffset().toString(),site_id:n,channel_id:e}),E=n=>{const{url:r="http://api.mossego.cn/push/track-data",accessKey:o,cacheNumber:a=50,reportInterval:i=3e4,maxCacheSize:s=56,maxRetries:c=10,log:l}=n,d=r.includes("?")?`${r}&ak=${o}`:`${r}?ak=${o}`;let E=0;const b=e=>{try{localStorage.setItem(f,e)}catch(e){console.error("monitor bind user fail: ",e)}},S=()=>{localStorage.removeItem(f)},T=()=>{let e=[];try{e=JSON.parse(localStorage.getItem(g)||"[]")}catch(e){console.error("get monitor data fail: ",e)}return e},A=e=>{try{localStorage.setItem(g,JSON.stringify(e))}catch(t){console.error("save monitor data error: ",e),localStorage.setItem(g,"[]")}},$=t=>{if(l&&console.log("report data ",t),e){const e=((e,t)=>navigator.sendBeacon(e,t))(d,new Blob([JSON.stringify(t)],{type:"application/json"}));if(e)return Promise.resolve()}return(({method:e,url:t,data:n,headers:r={},withCredentials:o=!1})=>new Promise(((a,i)=>{const s=new XMLHttpRequest;s.open(e,t,!0),Object.keys(r).forEach((e=>{s.setRequestHeader(e,r[e])})),s.withCredentials=!!o,s.onreadystatechange=()=>{if(4===s.readyState)if(s.status>=200&&s.status<300)try{const e=JSON.parse(s.responseText);a(e)}catch(e){i(e)}else i(new Error(`Request failed with status ${s.status}`))},s.onerror=()=>{i(new Error("Network error"))},s.ontimeout=()=>{i(new Error("Request timeout"))},n?s.send(n):s.send()})))({url:d,method:"POST",headers:{"Content-Type":"application/json"},data:JSON.stringify(t),withCredentials:!0})},L=(e=!1)=>{const t=T();if(t.length){if(!E&&(t.length>=a||e))return v&&(clearTimeout(v),v=null),A([]),void $(t).then((()=>{E=0})).catch((()=>{console.error("send report fail"),N(t)})).finally((()=>{L()}));if(null===v){v=setTimeout((()=>{const e=T();e.length?y||(A([]),y=$(e).then((()=>{E=0})).catch((()=>{N(e)})).finally((()=>{v=null,y=null,L()}))):v=null}),(E+1)*i)}}},N=e=>{if(E++,E>c)return void(E=0);const t=T();A(t.concat(e))},k=e=>{$([_(n.channelId,e,n.siteId)])},I=e=>{let t=[_(n.channelId,e,n.siteId)];try{const e=T();e&&(t=t.concat(e),A(t));const n=(e=>{const t=JSON.stringify(e);return(new TextEncoder).encode(t).length/1024})(t);L(n>=s)}catch(e){console.error("lazy report fail: ",e)}};return t((()=>{L(!0)})),(e=>{try{h=new WeakMap}catch(e){console.error("create WeakMap fail: ",e)}const t=e=>{if(h?.get(e))return;const t=e.dataset.duration||500;h?.set(e,{duration:t,timer:null}),m?.observe(e)},n=e=>{const t=h?.get(e);t&&(m?.unobserve(e),t?.timer&&clearTimeout(t.timer),h?.delete(e))},r=t=>{t.forEach((t=>{const r=t.target,o=h?.get(r);o&&(o.timer&&(clearTimeout(o.timer),o.timer=null),t.isIntersecting&&(o.timer=window.setTimeout((()=>{const t=r.dataset.eventDetail;r.hasAttribute(w)&&(e({spm:r.dataset.spm,data_type:"behavior",event_type:"view",event_detail:t}),r.removeAttribute(w)),r.hasAttribute(p)?e({spm:r.dataset.spm,data_type:"behavior",event_type:"expose",event_detail:t}):n(r)}),o.duration)))}))};m=(()=>{let e=null;try{e=new IntersectionObserver(r,{root:null,threshold:.5})}catch(e){console.error("create IntersectionObserver fail: ",e)}return e})(),document.querySelectorAll(`[${p}]`).forEach((e=>t(e))),document.querySelectorAll(`[${w}]`).forEach((e=>t(e))),new MutationObserver((e=>{e.forEach((e=>{if("attributes"===e.type&&e.target instanceof HTMLElement){const r=e.target;r.hasAttribute(p)||r.hasAttribute(w)?t(r):n(r)}else"childList"===e.type&&(e.addedNodes.forEach((e=>{e instanceof HTMLElement&&(e.hasAttribute(p)||e.hasAttribute(w)?t(e):(e.querySelectorAll(`[${p}]`).forEach((e=>t(e))),e.querySelectorAll(`[${w}]`).forEach((e=>t(e)))))})),e.removedNodes.forEach((e=>{if(e instanceof HTMLElement){const t=h?.get(e);t?n(e):(e.querySelectorAll(`[${p}]`).forEach((e=>n(e))),e.querySelectorAll(`[${w}]`).forEach((e=>n(e))))}})))}))})).observe(document.body,{attributes:!0,childList:!0,subtree:!0})})(I),!1!==n.behavior&&u(I),window.addEventListener("beforeunload",(()=>{L(!0)})),document.addEventListener("visibilitychange",(()=>{"hidden"===document.visibilityState&&L(!0)})),window.addEventListener("pagehide",(()=>{L(!0)})),window.trackMonitor={report:I,realtimeReport:k,bindUser:b,unBindUser:S},{bindUser:b,unBindUser:S,report:I,realtimeReport:k}};export{E as default};

package/dist/interface/base.d.ts

@@ -0,0 +1,9 @@
+export interface AnyObject {
+    [key: string]: any;
+}
+export interface ReportBaseData {
+}
+export interface ClientReportData {
+}
+export interface ReportData extends ReportBaseData, Omit<ClientReportData, 'event_detail'> {
+}

package/dist/interface/index.d.ts

@@ -0,0 +1,39 @@
+export type DataType = "common" | "behavior" | "performance" | "error" | "custom";
+export type EventType = "click" | "expose" | "view" | "cart" | "buy" | "pay" | "leave";
+export interface BaseOptions {
+    url?: string;
+    accessKey: string;
+    cacheNumber?: number;
+    reportInterval?: number;
+    maxCacheSize?: number;
+    maxRetries?: number;
+    siteId?: string;
+    channelId: string;
+    log?: boolean;
+    behavior?: boolean;
+}
+export interface SdkReportData {
+    page_url: string;
+    os: string;
+    user_id?: string;
+    user_agent: string;
+    screen_width: number;
+    screen_height: number;
+    lib_version: string;
+    lib_type: string;
+    event_time: string;
+    timezone_offset: string;
+}
+export interface ClientReportData {
+    session_id?: string;
+    request_id?: string;
+    spm?: string;
+    data_type?: DataType | string;
+    event_type: EventType | string;
+    event_detail: any;
+    site_id?: string;
+    channel_id?: string;
+}
+export interface ReportData extends SdkReportData, ClientReportData {
+}
+export type ReportFunction = (data: ClientReportData) => void;

package/dist/plugin/behavior.d.ts

@@ -0,0 +1,3 @@
+import { ReportFunction } from "@/interface";
+export declare const behaviorPlugin: (report: ReportFunction) => void;
+export default behaviorPlugin;

package/dist/plugin/expose.d.ts

@@ -0,0 +1,3 @@
+import { ReportFunction } from "../interface";
+export declare const exposePlugin: (lazyReport: ReportFunction) => void;
+export default exposePlugin;

package/dist/plugin/index.d.ts

@@ -0,0 +1,2 @@
+export * from './behavior';
+export * from './expose';

package/dist/utils/helper.d.ts

@@ -0,0 +1,36 @@
+export declare const nextTick: ((callback: IdleRequestCallback, options?: IdleRequestOptions | undefined) => number) & typeof requestIdleCallback;
+/**
+ * 在页面完全加载后执行回调函数
+ *
+ * 该函数会检查文档的 readyState 状态：
+ * 1. 如果页面已经加载完成（readyState === 'complete'），则通过 setTimeout 异步执行回调
+ * 2. 如果页面仍在加载中，则添加一个一次性监听器，监听 'pageshow' 事件（页面完全加载并显示时触发）
+ *
+ * @param {Function} callback - 页面加载完成后要执行的回调函数
+ *
+ * 使用示例：
+ * afterLoad(() => {
+ *   console.log('页面已完全加载');
+ * });
+ */
+export declare const afterLoad: (callback: any) => void;
+/**
+ * 防抖函数
+ * @param func 需要防抖的函数
+ * @param delay 等待时间(毫秒)
+ * @param immediate 是否立即执行
+ * @returns 防抖后的函数
+ */
+export declare function debounce<T extends (...args: any[]) => any>(func: T, delay?: number, immediate?: boolean): (...args: Parameters<T>) => void;
+/**
+ * 函数节流
+ *
+ * @export
+ * @param {Function} fn 需要节流的函数
+ * @param {number} delay 节流的时间间隔（毫秒）
+ * @return {(...args: any[]) => void} 返回一个包含节流功能的函数
+ */
+export declare const throttle: <T extends (...args: any[]) => void>(fn: T, delay?: number) => (...args: Parameters<T>) => void;
+export declare function isTrackElement(element: HTMLElement): Element | undefined;
+export declare function getNodeXPath(node: Element, curPath?: string): string;
+export declare const getNavigationType: () => number | string;

package/dist/utils/proxy.d.ts

@@ -0,0 +1,3 @@
+export declare const wrHistory: () => void;
+export declare const proxyHistory: (handler: Function) => void;
+export declare const proxyHash: (handler: Function) => void;

package/dist/utils/request.d.ts

@@ -0,0 +1,24 @@
+type RequestMethod = "GET" | "POST";
+interface AjaxOptions {
+    method: RequestMethod;
+    url: string;
+    data?: any;
+    headers?: Record<string, string>;
+    withCredentials?: boolean;
+}
+/**
+ * 是否支持sendBeacon
+ */
+export declare const isSupportBeacon = true;
+/**
+ * ajax请求
+ * @param {AjaxOptions} params 请求配置
+ */
+export declare const ajax: <T>({ method, url, data, headers, withCredentials, }: AjaxOptions) => Promise<T>;
+/**
+ * sendBeacon请求
+ * @param {string} url 接口地址
+ * @param {BodyInit | null} data 请求数据
+ */
+export declare const sendBeacon: (url: string, data?: BodyInit | null) => boolean;
+export {};

package/package.json

@@ -0,0 +1,39 @@
+{
+  "name": "@tengence/track-sdk-web",
+  "version": "1.0.0",
+  "description": "tengence web client track sdk",
+  "main": "dist/index.mjs",
+  "module": "dist/index.mjs",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.mjs"
+      }
+    }
+  },
+  "scripts": {
+    "build": "rollup --c rollup.config.ts --configPlugin typescript",
+    "release": "npm publish --access public"
+  },
+  "private": false,
+  "author": "tengence",
+  "license": "ISC",
+  "devDependencies": {
+    "@rollup/plugin-alias": "^5.1.1",
+    "@rollup/plugin-commonjs": "^28.0.1",
+    "@rollup/plugin-json": "^6.1.0",
+    "@rollup/plugin-node-resolve": "^15.3.0",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@rollup/plugin-typescript": "^12.1.1",
+    "@types/node": "^22.13.1",
+    "cors": "^2.8.5",
+    "express": "^4.21.2",
+    "rollup": "^4.34.6",
+    "tslib": "^2.8.0",
+    "typescript": "^4.9.5"
+  },
+  "files": [
+    "dist"
+  ]
+}