ui usage tracker

usage-data-tracker.js

// define window variables for storage
window.storedLocation = '';
window.usageData = {
  screenCount: {},
  flows: {},
  clicksFeed: [],
  location: {
    latitude: '',
    longitude: '',
  },
};
const arrA = [];
const arrB = [];

function algo(posX, posY) {
  for (let i = 0; i < arrA.length; i = i + 1) {
    for (let j = 0; j < arrB.length; j = j + 1) {
      if (posX <= arrA[i] && posY <= arrB[j]) {
        return [i, j];
      }
    }
  }
  return [-1, -1];
}

function showPosition(position) {
  window.usageData.location.latitude = position.coords.latitude;
  window.usageData.location.longitude = position.coords.longitude;
}

export default function usageDataTracker(
  location = false,
  routeToTrack,
  clickTrack = false,
  divisionUnit = 3,
  hoverTrack = false,
) {
  if (location && navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(showPosition);
  }

  let counter = 0;
  let flow = [];
  let key = `flow${counter}`;

  // set the default location or home location
  const defaultLocation = routeToTrack || '/dashboard';
  setTimeout(() => {
    if (clickTrack) {
      const screenWidth = document.body.scrollWidth;
      const screenHeight = document.body.scrollHeight;
      const x = screenWidth / divisionUnit;
      const y = screenHeight / divisionUnit;
      for (let i = 0; i < divisionUnit; i = i + 1) {
        window.usageData.clicksFeed[i] = [];
        for (let j = 0; j < divisionUnit; j = j + 1) {
          window.usageData.clicksFeed[i].push(0);
        }
      }
      for (let i = 1; i <= divisionUnit; i = i + 1) {
        arrA.push(x * i);
        arrB.push(y * i);
      }
    }
  }, 7000);
  document.onclick = (e) => {
    if (window.location.pathname === defaultLocation || window.location.pathname === '/') {
      const [a, b] = algo(e.pageX, e.pageY);
      if (a >= 0 && b >= 0) {
        window.usageData.clicksFeed[a][b] = window.usageData.clicksFeed[a][b] + 1;
      }
    }
  };

  setInterval(() => {
    const splitLocation = window.location.pathname.split('/');
    let currentLocation = '';
    splitLocation.forEach((e) => {
      let elem = e;
      if (e !== '') {
        if ((e % 1) === 0) {
          elem = 'detail';
        }
        currentLocation = `${currentLocation}/${elem}`;
      }
    });

    if (window.storedLocation !== currentLocation) {
      // page count logic
      const screenCountObject = window.usageData.screenCount;
      window.usageData.screenCount[currentLocation] = {
        visitCount: (
          screenCountObject[currentLocation] && screenCountObject[currentLocation].visitCount) ?
          screenCountObject[currentLocation].visitCount + 1 :
          1,
        queryParams: window.location.search,
      };

      // flow tracking logic
      if ((currentLocation === defaultLocation || currentLocation === '/')) {
        counter = counter + 1;
        key = `flow${counter}`;
        flow = flow.push(defaultLocation);
      }
      window.usageData.flows[key] = [...flow, currentLocation];
      flow = [...flow, currentLocation];

      // reset storedLocation to be currentLocation to track change in route
      window.storedLocation = currentLocation;
    }
  }, 1000);
}