costway-tracking-v2 2.0.0

package/trackvue3.js

@@ -0,0 +1,526 @@
+let config = {
+  batchSize: 50,
+  debounceTime: 200,
+  targetContainerSelector: 'body',
+  targetClass: '.costway-track-class',
+  trackClickSelector: '[data-track]',
+  apiUrl: '/goapi/v1/stat/track',
+  country: "us",
+  sessionTimeout: 30 * 60 * 1000
+};
+let eventData = [];
+let pageEnterTime;
+
+let heartbeat;
+let lastInterval;
+let hasTrackedPageLeave = false;
+config.sessionTimeout = 30 * 60 * 1000;  // 30分钟
+let entryReferrer = isBrowser() ? (document.referrer || '') : ''; // 用户首次进入站点时的referrer
+
+let currentRoute = isBrowser() ? window.location.pathname : "";
+let simulatedReferrer = currentRoute; // 初始化为entryReferrer
+
+let lastRoute = "";
+function isBrowser() {
+  return typeof window !== 'undefined';
+}
+
+function getSession() {
+  if (!isBrowser()) {
+    return; // 如果不在浏览器环境中，则直接返回
+  }
+
+  let now = new Date().getTime();
+  let currentReferrer = simulatedReferrer;
+  let currentUTM_S = getUrlParameter('utm_source');
+  let currentUTM_m = getUrlParameter('utm_medium');
+  let currentUTM = currentUTM_S + currentUTM_m;
+  const currentDomain = normalizeDomain(window.location.hostname);
+  const referrerTag = getReferrerTag(currentReferrer, currentDomain);
+  let previousSession = isBrowser() ? JSON.parse(localStorage.getItem("cgs_session")) : null;
+  let sessionMap = isBrowser() ? (JSON.parse(localStorage.getItem("cgs_sessionMap")) || {}) : {};
+
+  // 检查会话是否超时
+  let isSessionTimedOut = previousSession && (now - previousSession.startTime > config.sessionTimeout);
+  if (!previousSession || (isSessionTimedOut) || (referrerTag !== "INTERNAL" && (referrerTag !== previousSession.referrerTag || currentUTM !== previousSession.initialUtmForSession))) {
+    let newSessionId = sessionMap[`${referrerTag}_${currentUTM}`];
+    if (!newSessionId) {
+      newSessionId = generateUUID();
+      sessionMap[`${referrerTag}_${currentUTM}`] = newSessionId;
+      localStorage.setItem("cgs_sessionMap", JSON.stringify(sessionMap));
+    }
+    if (isSessionTimedOut) {
+      newSessionId = generateUUID();
+      sessionMap[`${referrerTag}_${currentUTM}`] = newSessionId;
+      localStorage.setItem("cgs_sessionMap", JSON.stringify(sessionMap));
+    }
+    let newSession = {
+      id: newSessionId,
+      startTime: now,
+      lastActivityTime: now,
+      referrerTag: referrerTag,
+      referrerForSession: currentReferrer,
+      initialUtmForSession: currentUTM,
+    };
+    localStorage.setItem("cgs_session", JSON.stringify(newSession));
+    localStorage.setItem("cgs_sessionID", newSession.id);
+    setCookie("cgs_sessionID", newSession.id, 1); // Save for 1 day
+    return newSession;
+  } else {
+    previousSession.lastActivityTime = now;
+    localStorage.setItem("cgs_session", JSON.stringify(previousSession));
+    return previousSession;
+  }
+}
+function getReferrerTag() {
+  const currentDomain = normalizeDomain(window.location.hostname);
+  const referrerDomain = extractDomain(simulatedReferrer); // 使用模拟的referrer
+  if (referrerDomain === currentDomain || !simulatedReferrer) {
+    return 'INTERNAL';
+  } else {
+    return referrerDomain;
+  }
+}
+
+
+function getUrlParameter(name) {
+  name = name.replace(/[\[]/, '\\[').replace(/[\]]/, '\\]');
+  var regex = new RegExp('[\\?&]' + name + '=([^&#]*)');
+  var results = regex.exec(window.location.search);
+  return results === null ? '' : decodeURIComponent(results[1].replace(/\+/g, ' '));
+};
+function setCookie(name, value, days) {
+  if (!isBrowser()) return;
+  let expires = "";
+  if (days) {
+    let date = new Date();
+    date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
+    expires = "; expires=" + date.toUTCString();
+  }
+  document.cookie = name + "=" + (value || "") + expires + "; Domain=.costway.com; path=/";
+}
+function getCookie(name) {
+  if (!isBrowser()) return;
+  let nameEQ = name + "=";
+  let ca = document.cookie.split(';');
+  for (let i = 0; i < ca.length; i++) {
+    let c = ca[i];
+    while (c.charAt(0) == ' ') c = c.substring(1, c.length);
+    if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length);
+  }
+  return null;
+}
+function setuserId(userId) {
+  if (!isBrowser()) return;
+  localStorage.setItem('costway_t_userId', userId);
+  setCookie('costway_t_userId', userId, 365);  // 保存365天
+}
+function normalizeDomain(domain) {
+  if (domain.startsWith("www.")) {
+    return domain.slice(4);
+  }
+  return domain;
+}
+function extractDomain(url) {
+  if (!url) {
+    return '';
+  }
+  // 从URL中提取域名
+  const domainRegex = /^(?:https?:\/\/)?(?:[^@\n]+@)?(?:www\.)?([^:\/\n]+)/im;
+  const match = url.match(domainRegex);
+  if (match && match.length > 1) {
+    return match[1];
+  } else {
+    return '';
+  }
+}
+
+
+function clearTimers() {
+  clearTimeout(heartbeat);
+}
+
+function getTime() {
+  return (new Date()).getTime();
+}
+
+function intervalHeartbeat() {
+  var now = getTime();
+  var diff = now - lastInterval - 200;
+  lastInterval = now;
+  if (diff > 1000) { // don't trigger on small stutters less than 1000ms
+    clearTimers();
+    trackPageLeave(); // call trackPageLeave when heartbeat stops
+  }
+}
+
+
+function debounce(func, wait) {
+  let timeout;
+  return function () {
+    const context = this;
+    const args = arguments;
+    clearTimeout(timeout);
+    timeout = setTimeout(function () {
+      func.apply(context, args);
+    }, wait);
+  };
+}
+
+function getuserId() {
+  var userId = localStorage.getItem('costway_t_userId');
+
+  if (!userId) {
+    userId = getCookie('costway_t_userId');
+    if (!userId) {
+      userId = generateUUID();
+      localStorage.setItem('costway_t_userId', userId);
+      setCookie('costway_t_userId', userId, 365);  // 将用户ID保存到cookie中，有效期为1年
+    }
+  }
+  return userId;
+}
+// 重写 UUID 生成
+function generateUUID() {
+  return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
+    var r = Math.random() * 16 | 0,
+      v = c === 'x' ? r : (r & 0x3 | 0x8);
+    return v.toString(16);
+  });
+}
+function sendDataImmediately(data) {
+  if (data.length === 0) return;
+  navigator.sendBeacon(config.apiUrl, JSON.stringify(data));
+}
+function sendEventData() {
+  if (eventData.length === 0) return;
+  navigator.sendBeacon(config.apiUrl, JSON.stringify(eventData));
+  eventData = [];
+}
+function getGlobalParams() {
+  if (window.customGlobalParams) {
+    return window.customGlobalParams;
+  } else {
+    return {};
+  }
+}
+function trackEvent(eventType, data) {
+   let session = getSession();
+  const event = {
+    userId: getuserId(),
+    timestamp: new Date().getTime(),
+    eventType: eventType,
+    data: data,
+    params: getGlobalParams(),
+    country: config.country,
+    sessionId: session.id,
+  };
+  if (eventType === "pageView" || eventType === "pageLeave" || eventType === "error" || eventType === "customEvent" || eventType === "pageLoadTime") {
+    sendDataImmediately([event]);
+  } else {
+    eventData.push(event);
+    if (eventData.length >= config.batchSize) {
+      sendEventData();
+    }
+  }
+
+}
+function trackPageView(initURL="") {
+  let session = getSession();
+  if (!simulatedReferrer.startsWith('http://') && !simulatedReferrer.startsWith('https://')) {
+    simulatedReferrer = `${window.location.protocol}//${window.location.hostname}${simulatedReferrer}`;
+  }
+  let url = initURL?initURL:currentRoute
+  const pageViewData = {
+    url: url,
+    referrer: simulatedReferrer,
+    sessionId: session.id,
+  };
+  trackEvent("pageView", pageViewData);
+  pageEnterTime = new Date().getTime();
+}
+function trackPageLeave() {
+  // if (hasTrackedPageLeave) {
+  //   return;  // 如果已经发送过数据，则直接返回
+  // }
+  if (!simulatedReferrer.startsWith('http://') && !simulatedReferrer.startsWith('https://')) {
+    simulatedReferrer = `${window.location.protocol}//${window.location.hostname}${simulatedReferrer}`;
+  }
+  let session = getSession();
+  const pageLeaveTime = new Date().getTime();
+  const duration = pageLeaveTime - pageEnterTime;
+  const totalStayTime = window.performance.timing.loadEventEnd - window.performance.timing.navigationStart;
+  const scrollDistance = window.scrollY;
+  const pageLeaveData = {
+    url: simulatedReferrer,
+    duration: duration,
+    totalStayTime: totalStayTime,
+    scrollDistance: scrollDistance,
+    sessionId: session.id,
+  };
+  trackEvent("pageLeave", pageLeaveData);
+  hasTrackedPageLeave = true;
+}
+function trackClick(event) {
+  let target = event.target;
+  if (target !== document.body && target !== document.documentElement) {
+    target = target.parentNode;
+  }
+  //if (target.tagName == "HTML" || target.tagName == "BODY") return
+   if (target.matches(config.trackClickSelector)) {
+      const clickData = {
+        element: target.tagName,
+        id: target.id,
+        classList: Array.from(target.classList),
+        dataset: target.dataset,
+      };
+      trackEvent("click", clickData);
+   }
+}
+function trackNewElement(element) {
+  // if (element.matches(config.targetClass)) {
+  const newElementData = {
+    element: element.tagName,
+    id: element.id,
+    classList: Array.from(element.classList),
+  };
+  trackEvent("newElement", newElementData);
+  //   }
+}
+config.hideShowSelector = '*'; // All elements
+function isVisible(element) {
+  const style = window.getComputedStyle(element);
+  const isHidden = style.display === 'none' || style.visibility === 'hidden';
+  return !isHidden;
+}
+function observeClassChanges() {
+  const observerCallback = debounce(function (mutations) {
+    mutations.forEach(function (mutation) {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+        const target = mutation.target;
+        if (mutation.oldValue && mutation.oldValue.includes("showActive") && !target.classList.contains("showActive")) {
+          const removedElementData = {
+            element: target.tagName,
+            id: target.id,
+            classList: Array.from(target.classList),
+          };
+          trackEvent("closeElement", removedElementData);
+        } else if (!mutation.oldValue || (!mutation.oldValue.includes("showActive") && target.classList.contains("showActive"))) {
+          const addedElementData = {
+            element: target.tagName,
+            id: target.id,
+            classList: Array.from(target.classList),
+          };
+          trackEvent("showElement", addedElementData);
+        }
+      }
+    });
+  }, config.debounceTime);
+
+  const observer = new MutationObserver(observerCallback);
+  const observerConfig = {
+    attributes: true,
+    attributeOldValue: true,
+    subtree: true,
+  };
+  const targetContainer = document.querySelector(config.targetContainerSelector);
+  observer.observe(targetContainer, observerConfig);
+}
+function observeDomChanges() {
+  // 使用“debounce”函数可以防止短时间内频繁触发事件
+  const observerCallback = debounce(function (mutations) {
+    mutations.forEach(function (mutation) {
+      mutation.addedNodes.forEach(function (node) {
+        // 判断新增的节点是否匹配目标类
+        if (
+          node.nodeType === Node.ELEMENT_NODE &&
+          node.matches(config.targetClass)
+        ) {
+          trackNewElement(node);
+        }
+      });
+    });
+  }, config.debounceTime);
+
+  const observer = new MutationObserver(observerCallback);
+  const observerConfig = {
+    childList: true,
+    subtree: true,
+  };
+  // 使用querySelector获取目标元素，而不是直接使用document.body
+  const targetContainer = document.querySelector(config.targetContainerSelector);
+  observer.observe(targetContainer, observerConfig);
+}
+
+function registerErrorListener() {
+  window.addEventListener('error', function (event) {
+    trackError(event.message, event.filename, event.lineno, event.colno, event.error);
+  });
+}
+
+
+function trackError(message, source, lineno, colno, error) {
+  const errorData = {
+    message: message,
+    source: source,
+    lineno: lineno,
+    colno: colno,
+    error: error && error.stack,
+  };
+  trackEvent("error", errorData);
+}
+function trackPageLoadTime() {
+  if (window.performance) {
+    var performanceEntries = window.performance.getEntriesByType('navigation');
+    if (performanceEntries.length > 0) {
+      var navigationTiming = performanceEntries[0];
+      var pageLoadTime = navigationTiming.loadEventEnd - navigationTiming.startTime;
+      // ...
+      const data = {
+        pageLoadTime: pageLoadTime,
+        url: window.location.href,
+      };
+      trackEvent("pageLoadTime", data);
+    }
+  }
+}
+
+function trackResourceLoadTimes() {
+  if (window.performance) {
+    var resources = window.performance.getEntriesByType("resource");
+    resources.forEach(function (resource) {
+      var resourceName = resource.name;
+      var resourceLoadTime = resource.duration;
+      trackEvent("resourceLoadTime", { resourceName, resourceLoadTime });
+    });
+  }
+}
+
+
+// function setupRouterListener(router) {
+//   router.beforeEach((to, from, next) => {
+//     hasTrackedPageLeave = false;
+//     console.log('从', from.fullPath, '跳转到', to.fullPath);
+//     lastRoute = currentRoute;
+//     currentRoute = to.fullPath;
+//     simulatedReferrer = from.fullPath; // 更新模拟的referrer为当前页面的URL
+//     next();
+//   });
+//   router.afterEach((to, from) => {
+//     currentRoute = to.fullPath;
+//     simulatedReferrer =  from.fullPath; // 在跟踪完页面视图后再次更新模拟的referrer
+//     trackPageLeave();
+//     trackPageView();
+
+//   });
+// }
+
+function setupRouterListener(router) {
+  router.beforeEach((to, from, next) => {
+    hasTrackedPageLeave = false;
+    const fromFullURL = `${window.location.protocol}//${window.location.hostname}${from.fullPath}`;
+    const toFullURL = `${window.location.protocol}//${window.location.hostname}${to.fullPath}`;
+    console.log('从', fromFullURL, '跳转到', toFullURL);
+    lastRoute = currentRoute;
+    currentRoute = toFullURL;
+    simulatedReferrer = fromFullURL; // 更新模拟的referrer为当前页面的完整URL
+    next();
+  });
+  router.afterEach((to, from) => {
+    const fromFullURL = `${window.location.protocol}//${window.location.hostname}${from.fullPath}`;
+    const toFullURL = `${window.location.protocol}//${window.location.hostname}${to.fullPath}`;
+    currentRoute = toFullURL;
+    simulatedReferrer = fromFullURL; // 在跟踪完页面视图后再次更新模拟的referrer
+    trackPageLeave();
+    trackPageView();
+  });
+}
+
+
+let lastVisibilityState = isBrowser() ? document.visibilityState : null;
+let pageHiddenTime = null;
+let pageVisibleTime = null;
+let initURL = isBrowser() ? window.location.href : '';
+function initTracking(router) {
+  if (!isBrowser()) {
+    return; // 如果不在浏览器环境中，则直接返回
+  }
+
+  let userId = getuserId();
+  if (!userId) {
+    userId = generateUUID();
+    setuserId(userId);
+  }
+  simulatedReferrer = isBrowser() ? (document.referrer || window.location.href) : '';
+
+  trackPageView(initURL);
+  // trackPageLoadTime();
+  //trackResourceLoadTimes();
+  if (isBrowser()) {
+    document.addEventListener('click', trackClick);
+
+    document.addEventListener('visibilitychange', function () {
+      if (document.visibilityState === 'hidden') {
+        // 页面从可见变为不可见，记录时间
+        pageHiddenTime = new Date().getTime();
+        const visibleDuration = new Date().getTime() - pageVisibleTime;
+        trackPageLeave();
+
+      } else if (document.visibilityState === 'visible' && pageHiddenTime) {
+        // 页面从不可见变为可见，计算隐藏的时长
+        const hiddenDuration = new Date().getTime() - pageHiddenTime;
+        pageHiddenTime = null;
+        pageVisibleTime = new Date().getTime();
+        // 如果页面隐藏的时长超过一定阈值（例如30秒），则认为用户已离开页面
+        if (hiddenDuration > 30000) {
+          trackPageLeave();
+        }
+        // 触发 pageView 事件
+        trackPageView();
+      }
+    });
+
+    //window.addEventListener('beforeunload', trackPageLeave);
+    window.addEventListener('load', function () { setTimeout(trackPageLoadTime, 0); });
+    window.addEventListener('pagehide', trackPageLeave);
+    window.addEventListener('DOMContentLoaded', function () {
+      observeDomChanges();
+      observeClassChanges();
+    });
+    registerErrorListener();
+    console.log('Configured country:', config.country);
+    if (router) { // 如果提供了路由对象，则设置路由监听器
+      setupRouterListener(router);
+    }
+  }
+}
+function trackCustomEvent(eventName, eventData) {
+  const data = {
+    userId: getuserId(),
+    timestamp: new Date().getTime(),
+    customData: eventData,
+    eventName: eventName,
+  };
+  trackEvent("customEvent", data);
+}
+/**
+ * 
+ *  setConfig({
+country: 'USA',
+// ... 其他配置项 ...
+});}  
+ */
+function setConfig(globalConfig) {
+  config = { ...config, ...globalConfig };
+}
+export {
+  initTracking,
+  trackCustomEvent,
+  setConfig,
+};
+
+// init();
+// window.trackCustomEvent = trackCustomEvent;
+
+
+