costway-tracking-v2 2.0.0

package/tracking-dev.js

@@ -0,0 +1,463 @@
+//最原始的版本
+(function () {
+  function getQueryParamFromScriptSrc(paramName, scriptName) {
+    var scripts = document.getElementsByTagName('script');
+    for (var i = 0; i < scripts.length; i++) {
+      if (scripts[i].src.indexOf(scriptName) !== -1) {
+        var params = scripts[i].src.split('?')[1];
+        var paramPairs = params.split('&');
+        for (var j = 0; j < paramPairs.length; j++) {
+          var pair = paramPairs[j].split('=');
+          if (pair[0] === paramName) {
+            return pair[1];
+          }
+        }
+        break;
+      }
+    }
+    return null;
+  }
+  
+  // 使用该函数获取 'lang' 参数的值
+  const lang = getQueryParamFromScriptSrc('lang', 'tracking-dev.js');
+  let config = {
+    batchSize: 5,
+    debounceTime: 200,
+    targetContainerSelector: 'body',
+    targetClass: '.costway-track-class',
+    trackClickSelector: '[data-track]',
+    apiUrl: 'https://h5.kostway.com/goapi/v1/stat/track',
+    country: lang,
+  };
+  
+  
+  function setConfig(globalConfig) {
+    config = { ...config, ...globalConfig };
+  }
+  let eventData = [];
+  let pageEnterTime;
+  let hasTrackedPageLeave = "";
+  let heartbeat;
+  let lastInterval;
+
+  config.sessionTimeout = 30 * 60 * 1000;  // 30分钟
+  function getSession() {
+    let now = new Date().getTime();
+    let currentReferrer = document.referrer;
+    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 = JSON.parse(localStorage.getItem("cgs_session"));
+    let sessionMap = 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(referrer) {
+    const currentDomain = normalizeDomain(window.location.hostname);
+    const referrerDomain = extractDomain(referrer)
+    if (referrerDomain === currentDomain || !referrer) {
+      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) {
+    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) {
+    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) {
+    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;
+  }
+  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() {
+    let session = getSession();
+    const pageViewData = {
+      url: window.location.href,
+      referrer: document.referrer,
+      sessionId: session.id,
+    };
+    trackEvent("pageView", pageViewData);
+    pageEnterTime = new Date().getTime();
+  }
+  function trackPageLeave() {
+    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: window.location.href,
+      duration: duration,
+      totalStayTime: totalStayTime,
+      scrollDistance: scrollDistance,
+      sessionId: session.id,
+    };
+    trackEvent("pageLeave", pageLeaveData);
+  }
+  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
+    console.log(target)
+   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 trackCustomEvent(eventName, eventData) {
+    const data = {
+      userId: getuserId(),
+      timestamp: new Date().getTime(),
+      customData: eventData,
+      eventName: eventName,
+    };
+    trackEvent("customEvent", data);
+  }
+  let lastVisibilityState = document.visibilityState;
+  let pageHiddenTime = null;
+  let pageVisibleTime = null;
+  function init() {
+    let userId = getuserId();
+    if (!userId) {
+      userId = generateUUID();
+      setuserId(userId);
+    }
+    trackPageView();
+  //  trackPageLoadTime();
+ //   trackResourceLoadTimes();
+    document.addEventListener('click', trackClick);
+
+    document.addEventListener('visibilitychange', function () {
+      if (lastVisibilityState) {
+        if (document.visibilityState === 'hidden' || document.hidden) {
+          console.log('hidden');
+          // 页面从可见变为不可见，记录时间
+          pageHiddenTime = new Date().getTime();
+          const visibleDuration = new Date().getTime() - pageVisibleTime;
+          if(hasTrackedPageLeave=="" || hasTrackedPageLeave=="hidden"){
+            hasTrackedPageLeave = "hidden";
+            trackPageLeave('hidden');
+          }
+        } else if (document.visibilityState === 'visible' && pageHiddenTime) {
+          // 页面从不可见变为可见，计算隐藏的时长
+          const hiddenDuration = new Date().getTime() - pageHiddenTime;
+          pageHiddenTime = null;
+          pageVisibleTime = new Date().getTime();
+          // 如果页面隐藏的时长超过一定阈值（例如30秒），则认为用户已离开页面
+          if (hiddenDuration > 30000) {
+            trackPageLeave("visible");
+          }
+          // 触发 pageView 事件
+          trackPageView();
+        }
+      }
+      lastVisibilityState = document.visibilityState;
+    });
+    window.addEventListener('pagehide', function () {
+      console.log('pagehide');
+      if (hasTrackedPageLeave == "pagehide") {
+        hasTrackedPageLeave = "pagehide";
+        trackPageLeave('pagehide');
+      }
+
+    });
+    window.addEventListener('load', function () { setTimeout(trackPageLoadTime, 0);});
+    window.addEventListener('DOMContentLoaded', function () {
+      observeDomChanges();
+      observeClassChanges();
+    });
+    registerErrorListener();
+  }
+
+  init();
+  window.trackCustomEvent = trackCustomEvent;
+  window.setConfig = setConfig;
+})();