aesirx-analytics 1.0.6 → 1.1.0

package/README.md

@@ -1,6 +1,6 @@
 # AesirX Analytics JS Collector
 
-A powerful and compliant web Analytics platform (1st-party alternative to Google Analytics) that only collects 1st-party data to deliver meaningful customer insights for your organization. 
+A powerful and compliant web Analytics platform (1st-party alternative to Google Analytics) that only collects 1st-party data to deliver meaningful customer insights for your organization.
 
 AesirX Analytics comes with a locally hosted JavaScript solution that gathers and stores data legally and compliantly in accordance with GDPR and other regional legislation including storage of citizens’ data in-country and 1st-party.
 
@@ -25,7 +25,6 @@ Follow the instructions in: [https://github.com/aesirxio/analytics-1stparty](htt
 
 (`https://example.com` is the link to your 1st party server which must be installed)
 
-
 #### Usage in ReactJS
 
 `npm i aesirx-analytics`
@@ -44,18 +43,20 @@ Create AnalyticsContainer component:
 
 ```
 import React from 'react';
-import { useLocation } from 'react-router-dom';
+import { useLocation, useHistory } from 'react-router-dom';
 import { AnalyticsReact } from 'aesirx-analytics';
 const AnalyticsContainer = ({children}) => {
   const location = useLocation();
-  return <AnalyticsReact pathname={location.pathname}>{children}</AnalyticsReact>;
+  let history = useHistory();
+  return <AnalyticsReact location={location} history={history}>{children}</AnalyticsReact>;
 };
 
 export default AnalyticsContainer;
 ```
 
 ###### Wrap your component in `<AnalyticsContainer><[YOUR-COMPONENT]/></AnalyticsContainer>`
-###### `<AnalyticsContainer>` need to using inside `<Router>` component 
+
+###### `<AnalyticsContainer>` need to using inside `<Router>` component
 
 #### Usage in NextJS
 
@@ -85,10 +86,12 @@ import { AnalyticsNext } from "aesirx-analytics";
 ## Track events:
 
 #### In SSR Site:
+
 To track events, simply add special data-attribute to the element you want to track.
 For example, you might have a button with the following code:
+
 ```
-<button class="button" 
+<button class="button"
     data-aesirx-event-name="sign up"
     data-aesirx-event-type="login"
     data-aesirx-event-attribute-a="value-a"
@@ -97,17 +100,22 @@ For example, you might have a button with the following code:
   Sign Up
 </button>
 ```
+
 Add data-attribute with the following format:
+
 ```
 data-aesirx-event-name="<event-name>"
 data-aesirx-event-type="<event-type>"
 data-aesirx-event-attribute-<attribute-name-1>="<attribute-value-1>"
 data-aesirx-event-attribute-<attribute-name-2>="<attribute-value-1>"
 ```
+
 ##### Or you can use your own Javascript to Track events:
+
 ```
 window.trackEvent(endpoint, event_uuid, visitor_uuid, referrer, data)
 ```
+
 (`endpoint` is the link to your 1st party server which must be installed)
 
 (`event_uuid` is the params get from url - it will auto generated)
@@ -118,12 +126,13 @@ window.trackEvent(endpoint, event_uuid, visitor_uuid, referrer, data)
 
 (`data` is the data you want to track)
 
-For example: 
+For example:
+
 ```
 trackEvent(
   "https://example.com",
-  event_uuid, 
-  visitor_uuid, 
+  event_uuid,
+  visitor_uuid,
   "https://aesirx.io",
   {
     event_name: "<event_name>",

package/dist/index.js

@@ -0,0 +1,5 @@
+var O=Object.create;var A=Object.defineProperty;var B=Object.getOwnPropertyDescriptor;var Q=Object.getOwnPropertyNames;var Y=Object.getPrototypeOf,F=Object.prototype.hasOwnProperty;var J=(t,i)=>{for(var e in i)A(t,e,{get:i[e],enumerable:!0})},T=(t,i,e,n)=>{if(i&&typeof i=="object"||typeof i=="function")for(let s of Q(i))!F.call(t,s)&&s!==e&&A(t,s,{get:()=>i[s],enumerable:!(n=B(i,s))||n.enumerable});return t};var g=(t,i,e)=>(e=t!=null?O(Y(t)):{},T(i||!t||!t.__esModule?A(e,"default",{value:t,enumerable:!0}):e,t)),W=t=>T(A({},"__esModule",{value:!0}),t);var Z={};J(Z,{AnalyticsContext:()=>m,AnalyticsNext:()=>L,AnalyticsReact:()=>j,trackEvent:()=>q});module.exports=W(Z);var w=g(require("react"));var l=g(require("react"));var m=l.default.createContext({event_uuid:void 0,visitor_uuid:void 0,event_uuid_start:void 0,visitor_uuid_start:void 0,setEventID:void 0,setUUID:void 0,setEventIDStart:void 0,setUUIDStart:void 0}),P=({children:t})=>{let[i,e]=(0,l.useState)(),[n,s]=(0,l.useState)(),[a,d]=(0,l.useState)(),[u,r]=(0,l.useState)();return l.default.createElement(m.Provider,{value:{event_uuid:i,visitor_uuid:n,event_uuid_start:a,visitor_uuid_start:u,setEventID:e,setUUID:s,setEventIDStart:d,setUUIDStart:r}},t)};var v=g(require("react"));var X,z=(t,i)=>(Object.keys(i).forEach(e=>{i[e]!==void 0&&(t[e]=i[e])}),t),y=async(t,i)=>await(await fetch(t,{method:"POST",body:JSON.stringify(i),headers:z({"Content-Type":"application/json"},{["x-tracker-cache"]:X})})).json();var k=g(require("bowser")),U=(t,i)=>`${t}/visitor/v1/${i}`,D=async(t,i,e,n)=>{let{document:s}=window,{pathname:a,search:d,origin:u}=location;i=`${u}${a}${d}`,e=s.referrer,n=window.navigator.userAgent;let r=k.default.parse(window.navigator.userAgent),o=r?.browser?.name,_=r?.browser?.version,c=window.navigator.userLanguage||window.navigator.language,E=r?.platform?.model??r?.platform?.type,C=`${u}`,$=window.location.search,f=new URLSearchParams($),N=[];for(let h of f.keys())h.startsWith("utm_")&&f.get(h)&&N.push({name:h,value:f.get(h)});if(!f.get("event_uuid")&&!f.get("visitor_uuid")){let h="";return await y(U(t,"init"),{url:i,referrer:e,user_agent:n,ip:h,domain:C,browser_name:o,browser_version:_,lang:c,device:E,event_name:"visit",event_type:"action",attributes:N})}},I=async(t,i,e,n)=>{let{location:s,document:a}=window;n=n?s.protocol+"//"+s.host+n:a.referrer.split("?")[0];let d=s.protocol+"//"+s.host+s.pathname,u=window.location.search,r=new URLSearchParams(u);return await y(U(t,"start"),{...r.get("event_uuid")&&{event_uuid:r.get("event_uuid")},...r.get("visitor_uuid")&&{visitor_uuid:r.get("visitor_uuid")},...i&&{event_uuid:i},...e&&{visitor_uuid:e},referrer:n==="/"?"":n,url:d})},x=async(t,i,e)=>{let n=window.location.search,s=new URLSearchParams(n);return await y(U(t,"end"),{...s.get("event_uuid_start")&&{event_uuid:s.get("event_uuid_start")},...s.get("visitor_uuid_start")&&{visitor_uuid:s.get("visitor_uuid_start")},...i&&{event_uuid:i},...e&&{visitor_uuid:e}})},q=async(t,i,e,n,s)=>{let{location:a,document:d}=window;n=n?a.protocol+"//"+a.host+n:d.referrer.split("?")[0];let u=a.protocol+"//"+a.host+a.pathname,r=window.location.search,o=new URLSearchParams(r);return await y(U(t,"start"),{...o.get("event_uuid")&&{event_uuid:o.get("event_uuid")},...o.get("visitor_uuid")&&{visitor_uuid:o.get("visitor_uuid")},...i&&{event_uuid:i},...e&&{visitor_uuid:e},referrer:n==="/"?"":n,url:u,...s})};var G=({router:t,children:i})=>{let e=v.default.useContext(m),n=process.env.NEXT_PUBLIC_ENDPOINT_ANALYTICS_URL,[s,a]=(0,v.useState)(t.asPath),d=(0,v.useCallback)(async u=>{let r=u||"",o=await I(n,e.event_uuid,e.visitor_uuid,r);o.event_uuid&&e.setEventIDStart(o.event_uuid),o.visitor_uuid&&e.setUUIDStart(o.visitor_uuid)},[e,n]);return(0,v.useEffect)(()=>{(async()=>{let r=new URLSearchParams(window.location.search),o=r.get("event_uuid"),_=r.get("visitor_uuid");if(!e.event_uuid&&!e.visitor_uuid)if(o&&_)e.setEventID(o),e.setUUID(_);else{let c=await D(n);c?.event_uuid&&e.setEventID(c?.event_uuid),e.setUUID(c?.visitor_uuid)}else await d(s)})()},[e.visitor_uuid]),(0,v.useEffect)(()=>{let u=async()=>{let{event_uuid:r,visitor_uuid:o}=t.query;e.visitor_uuid_start&&!r&&!o&&(await x(n,e.event_uuid_start,e.visitor_uuid_start),await d(s)),a(t.asPath)};return t.events.on("routeChangeComplete",u),t.replace({query:{...t.query,event_uuid:e.event_uuid,visitor_uuid:e.visitor_uuid}},void 0,{shallow:!0}),()=>{t.events.off("routeChangeComplete",u)}},[t.events,e.visitor_uuid_start,t.asPath]),v.default.createElement(v.default.Fragment,null,i)},b=G;var K=({router:t,children:i})=>w.default.createElement(w.default.Fragment,null,w.default.createElement(P,null,w.default.createElement(b,{router:t},i))),L=K;var R=g(require("react"));var p=g(require("react")),S=g(require("query-string"));var M=({location:t,history:i,children:e})=>{let n=p.default.useContext(m),s=process.env.REACT_APP_ENDPOINT_ANALYTICS_URL,[a,d]=(0,p.useState)(null);return(0,p.useEffect)(()=>{(async()=>{if(n.visitor_uuid_start&&await x(s,n.event_uuid_start,n.visitor_uuid_start),!n.event_uuid&&!n.visitor_uuid){let r=new URLSearchParams(window.location.search),o=r.get("event_uuid"),_=r.get("visitor_uuid");if(o&&_)n.setEventID(o),n.setUUID(_);else{let c=await D(s);c.event_uuid&&n.setEventID(c.event_uuid),n.setUUID(c.visitor_uuid);let C={...S.default.parse(t.search),event_uuid:c.event_uuid,visitor_uuid:c.visitor_uuid};i.push({search:S.default.stringify(C)})}}else{let o={...S.default.parse(t.search),event_uuid:n.event_uuid,visitor_uuid:n.visitor_uuid};i.push({search:S.default.stringify(o)});let _=a||"",c=await I(s,n.event_uuid,n.visitor_uuid,_);c.event_uuid&&n.setEventIDStart(c.event_uuid),c.visitor_uuid&&n.setUUIDStart(c.visitor_uuid),d(t.pathname)}})()},[t.pathname,n.visitor_uuid,i]),p.default.createElement(p.default.Fragment,null,e)},H=M;var V=({location:t,history:i,children:e})=>R.default.createElement(P,null,R.default.createElement(H,{location:t,history:i},e)),j=V;0&&(module.exports={AnalyticsContext,AnalyticsNext,AnalyticsReact,trackEvent});
+/*
+ * @copyright   Copyright (C) 2022 AesirX. All rights reserved.
+ * @license     GNU General Public License version 3, see LICENSE.
+ */

package/package.json

@@ -1,31 +1,17 @@
 {
   "name": "aesirx-analytics",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "license": "GPL-3.0-only",
   "author": "AesirX",
   "repository": "https://gitlab.redweb.dk/aesirx/analytics",
-  "main": "build/lib/cjs/index.js",
-  "module": "build/lib/esm/index.js",
-  "exports": {
-    "require": "./build/lib/cjs/index.js",
-    "import": "./build/lib/esm/index.js"
-  },
-  "types": "build/lib/types/index.d.ts",
-  "source": "src/index.js",
+  "main": "dist/index.js",
   "dependencies": {
     "bowser": "^2.11.0",
-    "cross-env": "^7.0.3",
-    "dotenv": "^16.0.3",
-    "npm-run-all": "^4.1.5",
-    "public-ip": "^6.0.1",
-    "rimraf": "^3.0.2"
+    "query-string": "^7.1.1"
   },
   "scripts": {
     "clean": "rimraf lib",
-    "build:esm": "cross-env BABEL_ENV=esmUnbundled babel src --extensions '.js' --out-dir 'build/lib/esm' --source-maps",
-    "build:cjs": "cross-env BABEL_ENV=cjs babel src --extensions '.js' --out-dir 'build/lib/cjs' --source-maps",
-    "build:bundles": "cross-env BABEL_ENV=esmBundled rollup -c",
-    "build": "npm-run-all -l clean -p build:esm build:cjs build:bundles",
+    "build": "tsup",
     "lint": "eslint --fix \"src/**/\"",
     "lint:check": "eslint \"src/**/\"",
     "lint:nowarns": "eslint --quiet \"src/**/\"",
@@ -56,24 +42,16 @@
     "react-dom": "^17.0.1"
   },
   "devDependencies": {
-    "@babel/cli": "^7.21.0",
-    "@babel/core": "^7.19.6",
-    "@babel/eslint-parser": "^7.18",
-    "@babel/plugin-transform-runtime": "^7.19.6",
-    "@babel/preset-env": "^7.20.2",
-    "@babel/preset-react": "^7.18.6",
-    "@rollup/plugin-babel": "^6.0.2",
-    "@rollup/plugin-json": "^6.0.0",
-    "@rollup/plugin-commonjs": "^24.0.1",
-    "@rollup/plugin-node-resolve": "^15.0.1",
-    "@rollup/plugin-replace": "^4.0.0",
-    "babel-plugin-module-resolver": "^5.0.0",
-    "eslint": "^8.34",
+    "@types/node": "^18.15.11",
+    "@types/react": "^18.0.30",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.57.0",
+    "@typescript-eslint/parser": "^5.57.0",
+    "eslint": "^8.36",
     "eslint-plugin-react": "^7.31.10",
     "prettier": "^2.8.4",
-    "rollup": "^2.79.1",
-    "rollup-plugin-terser": "^7.0.2",
-    "rollup-plugin-typescript2": "^0.34.1",
+    "rimraf": "^4.4.1",
+    "tsup": "^6.7.0",
     "typescript": "^4.9.3"
   },
   "overrides": {

package/src/AnalyticsNext/{handle.js → handle.tsx}

@@ -1,13 +1,24 @@
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { ReactNode, useCallback, useEffect, useState } from 'react';
 import { AnalyticsContext } from '../utils/AnalyticsContextProvider';
 import { initTracker, startTracker, endTracker } from '../utils/index';
 
-const AnalyticsHandle = ({ router, children }) => {
+interface AnalyticsHandle {
+  router: {
+    asPath: string;
+    events: { on: (_: string, __: () => void) => void; off: (_: string, __: () => void) => void };
+    replace: any;
+    query: any;
+    push: any;
+  };
+  children?: ReactNode;
+}
+
+const AnalyticsHandle = ({ router, children }: AnalyticsHandle) => {
   const AnalyticsStore = React.useContext(AnalyticsContext);
   const endPoint = process.env.NEXT_PUBLIC_ENDPOINT_ANALYTICS_URL;
-  const [prevRoute, setPrevRoute] = useState(router.asPath);
+  const [prevRoute, setPrevRoute] = useState<string>(router.asPath);
   const handleStartTracker = useCallback(
-    async (prevRoute) => {
+    async (prevRoute: string) => {
       const referrer = prevRoute ? prevRoute : '';
       const responseStart = await startTracker(
         endPoint,
@@ -23,12 +34,20 @@ const AnalyticsHandle = ({ router, children }) => {
 
   useEffect(() => {
     const init = async () => {
+      const urlParams = new URLSearchParams(window.location.search);
+      const event_uuid = urlParams.get('event_uuid');
+      const visitor_uuid = urlParams.get('visitor_uuid');
       if (!AnalyticsStore.event_uuid && !AnalyticsStore.visitor_uuid) {
-        const responseInit = await initTracker(endPoint);
-        responseInit.event_uuid && AnalyticsStore.setEventID(responseInit.event_uuid);
-        AnalyticsStore.setUUID(responseInit.visitor_uuid);
+        if (event_uuid && visitor_uuid) {
+          AnalyticsStore.setEventID(event_uuid);
+          AnalyticsStore.setUUID(visitor_uuid);
+        } else {
+          const responseInit = await initTracker(endPoint);
+          responseInit?.event_uuid && AnalyticsStore.setEventID(responseInit?.event_uuid);
+          AnalyticsStore.setUUID(responseInit?.visitor_uuid);
+        }
       } else {
-        await handleStartTracker();
+        await handleStartTracker(prevRoute);
       }
     };
     init();
@@ -36,7 +55,8 @@ const AnalyticsHandle = ({ router, children }) => {
 
   useEffect(() => {
     const handleRouteChange = async () => {
-      if (AnalyticsStore.visitor_uuid_start) {
+      const { event_uuid, visitor_uuid } = router.query;
+      if (AnalyticsStore.visitor_uuid_start && !event_uuid && !visitor_uuid) {
         await endTracker(
           endPoint,
           AnalyticsStore.event_uuid_start,
@@ -47,7 +67,19 @@ const AnalyticsHandle = ({ router, children }) => {
       setPrevRoute(router.asPath);
     };
     router.events.on('routeChangeComplete', handleRouteChange);
-
+    router.replace(
+      {
+        query: {
+          ...router.query,
+          event_uuid: AnalyticsStore.event_uuid,
+          visitor_uuid: AnalyticsStore.visitor_uuid,
+        },
+      },
+      undefined,
+      {
+        shallow: true,
+      }
+    );
     return () => {
       router.events.off('routeChangeComplete', handleRouteChange);
     };

package/src/AnalyticsNext/index.tsx

@@ -0,0 +1,26 @@
+import React, { ReactNode } from 'react';
+
+import { AnalyticsContextProvider } from '../utils/AnalyticsContextProvider';
+import AnalyticsHandle from './handle';
+
+interface AnalyticsReact {
+  router: {
+    asPath: string;
+    events: { on: (_: string, __: () => void) => void; off: (_: string, __: () => void) => void };
+    replace: any;
+    query: any;
+    push: any;
+  };
+  children?: ReactNode;
+}
+
+const AnalyticsNext = ({ router, children }: AnalyticsReact) => {
+  return (
+    <>
+      <AnalyticsContextProvider>
+        <AnalyticsHandle router={router}>{children}</AnalyticsHandle>
+      </AnalyticsContextProvider>
+    </>
+  );
+};
+export default AnalyticsNext;

package/src/AnalyticsReact/handle.tsx

@@ -0,0 +1,72 @@
+import React, { ReactNode, useEffect, useState } from 'react';
+import qs from 'query-string';
+import { AnalyticsContext } from '../utils/AnalyticsContextProvider';
+import { initTracker, startTracker, endTracker } from '../utils/index';
+
+interface AnalyticsHandle {
+  location: { search: string; pathname: string };
+  history: { push: (_: object) => void };
+  children?: ReactNode;
+}
+
+const AnalyticsHandle = ({ location, history, children }: AnalyticsHandle) => {
+  const AnalyticsStore = React.useContext(AnalyticsContext);
+  const endPoint = process.env.REACT_APP_ENDPOINT_ANALYTICS_URL;
+  const [prevRoute, setPrevRoute] = useState<string>(null);
+  useEffect(() => {
+    const init = async () => {
+      if (AnalyticsStore.visitor_uuid_start) {
+        await endTracker(
+          endPoint,
+          AnalyticsStore.event_uuid_start,
+          AnalyticsStore.visitor_uuid_start
+        );
+      }
+      if (!AnalyticsStore.event_uuid && !AnalyticsStore.visitor_uuid) {
+        const urlParams = new URLSearchParams(window.location.search);
+        const event_uuid = urlParams.get('event_uuid');
+        const visitor_uuid = urlParams.get('visitor_uuid');
+        if (event_uuid && visitor_uuid) {
+          AnalyticsStore.setEventID(event_uuid);
+          AnalyticsStore.setUUID(visitor_uuid);
+        } else {
+          const responseInit = await initTracker(endPoint);
+          responseInit.event_uuid && AnalyticsStore.setEventID(responseInit.event_uuid);
+          AnalyticsStore.setUUID(responseInit.visitor_uuid);
+          // Add Params to URL
+          const queryParams = qs.parse(location.search);
+          const newQueries = {
+            ...queryParams,
+            event_uuid: responseInit.event_uuid,
+            visitor_uuid: responseInit.visitor_uuid,
+          };
+          history.push({ search: qs.stringify(newQueries) });
+        }
+      } else {
+        // Add Params to URL
+        const queryParams = qs.parse(location.search);
+        const newQueries = {
+          ...queryParams,
+          event_uuid: AnalyticsStore.event_uuid,
+          visitor_uuid: AnalyticsStore.visitor_uuid,
+        };
+        history.push({ search: qs.stringify(newQueries) });
+
+        const referrer = prevRoute ? prevRoute : '';
+        const responseStart = await startTracker(
+          endPoint,
+          AnalyticsStore.event_uuid,
+          AnalyticsStore.visitor_uuid,
+          referrer
+        );
+        responseStart.event_uuid && AnalyticsStore.setEventIDStart(responseStart.event_uuid);
+        responseStart.visitor_uuid && AnalyticsStore.setUUIDStart(responseStart.visitor_uuid);
+        setPrevRoute(location.pathname);
+      }
+    };
+    init();
+  }, [location.pathname, AnalyticsStore.visitor_uuid, history]);
+
+  return <>{children}</>;
+};
+export default AnalyticsHandle;

package/src/AnalyticsReact/index.tsx

@@ -0,0 +1,21 @@
+import React, { ReactNode } from 'react';
+
+import { AnalyticsContextProvider } from '../utils/AnalyticsContextProvider';
+import AnalyticsHandle from './handle';
+
+interface AnalyticsReact {
+  location: { search: string; pathname: string };
+  history: { push: (_: object) => void };
+  children?: ReactNode;
+}
+
+const AnalyticsReact = ({ location, history, children }: AnalyticsReact) => {
+  return (
+    <AnalyticsContextProvider>
+      <AnalyticsHandle location={location} history={history}>
+        {children}
+      </AnalyticsHandle>
+    </AnalyticsContextProvider>
+  );
+};
+export default AnalyticsReact;

package/src/{analytics.js → analytics.ts}

@@ -1,10 +1,10 @@
-import { endTracker, initTracker, startTracker, trackEvent } from './utils';
+import { endTracker, initTracker, insertParam, startTracker, trackEvent } from './utils';
 
 const AesirAnalytics = () => {
-  const hook = (_this, method, callback) => {
+  const hook = (_this: object, method: string, callback: (_: string) => void) => {
     const orig = _this[method];
 
-    return (...args) => {
+    return (...args: []) => {
       callback.apply(null, args);
 
       return orig.apply(_this, args);
@@ -13,7 +13,7 @@ const AesirAnalytics = () => {
 
   /* Handle history changes */
 
-  const handlePush = async (url) => {
+  const handlePush = async (url: string) => {
     if (!url) return;
     const { pathname, search, origin } = location;
     url = `${origin}${pathname}${search}`;
@@ -33,12 +33,12 @@ const AesirAnalytics = () => {
 
   /* Global */
 
-  if (!window.tracker) {
-    const tracker = (eventValue) => eventValue;
+  if (!window['tracker']) {
+    const tracker = (eventValue: string) => eventValue;
     tracker.initTracker = initTracker;
     tracker.startTracker = startTracker;
 
-    window.tracker = tracker;
+    window['tracker'] = tracker;
   }
 
   /* Start */
@@ -46,7 +46,7 @@ const AesirAnalytics = () => {
   history.pushState = hook(history, 'pushState', handlePush);
   history.replaceState = hook(history, 'replaceState', handlePush);
 
-  const hostUrl = window.aesirx1stparty ? window.aesirx1stparty : '';
+  const hostUrl = window['aesirx1stparty'] ? window['aesirx1stparty'] : '';
 
   const root = hostUrl ? hostUrl.replace(/\/$/, '') : '';
 
@@ -87,16 +87,16 @@ const AesirAnalytics = () => {
 
   /* Handle events */
 
-  const addEvents = (node) => {
+  const addEvents = (node: Document) => {
     const elements = node.querySelectorAll(eventSelect);
     Array.prototype.forEach.call(elements, addEvent);
   };
 
-  const addEvent = (element) => {
+  const addEvent = (element: HTMLInputElement) => {
     element.addEventListener(
       'click',
       () => {
-        let attribute = [];
+        const attribute: object[] = [];
         Object.keys(element.dataset).forEach((key) => {
           if (key.startsWith('aesirxEventAttribute')) {
             attribute.push({
@@ -105,7 +105,7 @@ const AesirAnalytics = () => {
             });
           }
         });
-        trackEvent(root, null, null, null, {
+        trackEvent(root, '', '', '', {
           event_name: element.dataset.aesirxEventName,
           event_type: element.dataset.aesirxEventType,
           attributes: attribute,
@@ -117,18 +117,13 @@ const AesirAnalytics = () => {
 
   update();
 };
-const insertParam = (key, value) => {
-  const url = new URL(window.location.href);
-  url.searchParams.set(key, value);
-  window.history.pushState({ path: url.href }, '', url.href);
-};
 
 const replaceUrl = () => {
   const urlParams = new URLSearchParams(window.location.search);
   const event_uuid = urlParams.get('event_uuid');
   const visitor_uuid = urlParams.get('visitor_uuid');
 
-  let anchors = document.getElementsByTagName('a');
+  const anchors = document.getElementsByTagName('a');
 
   for (let i = 0; i < anchors.length; i++) {
     const eventIdParams = getParameterByName('event_uuid', anchors[i].href);
@@ -142,9 +137,9 @@ const replaceUrl = () => {
   }
 };
 
-const getParameterByName = (name, url = window.location.href) => {
+const getParameterByName = (name: string, url = window.location.href) => {
   if (url) {
-    let params = new URL(url);
+    const params = new URL(url);
     if (params.origin === window.location.origin) {
       return params.searchParams.get(name);
     }

package/src/{index.js → index.ts}

@@ -1,4 +1,4 @@
 export { default as AnalyticsNext } from './AnalyticsNext';
 export { default as AnalyticsReact } from './AnalyticsReact';
-export { trackEvent } from './utils/';
+export { trackEvent } from './utils';
 export { AnalyticsContext } from './utils/AnalyticsContextProvider';

package/src/utils/AnalyticsContextProvider.tsx

@@ -0,0 +1,57 @@
+/*
+ * @copyright   Copyright (C) 2022 AesirX. All rights reserved.
+ * @license     GNU General Public License version 3, see LICENSE.
+ */
+
+import React, { Dispatch, ReactNode, SetStateAction, useState } from 'react';
+
+interface Props {
+  children?: ReactNode;
+}
+
+interface AnalyticsContextType {
+  event_uuid: string;
+  visitor_uuid: string;
+  event_uuid_start: string;
+  visitor_uuid_start: string;
+  setEventID: Dispatch<SetStateAction<string>>;
+  setUUID: Dispatch<SetStateAction<string>>;
+  setEventIDStart: Dispatch<SetStateAction<string>>;
+  setUUIDStart: Dispatch<SetStateAction<string>>;
+}
+
+export const AnalyticsContext = React.createContext<AnalyticsContextType>({
+  event_uuid: undefined,
+  visitor_uuid: undefined,
+  event_uuid_start: undefined,
+  visitor_uuid_start: undefined,
+  setEventID: undefined,
+  setUUID: undefined,
+  setEventIDStart: undefined,
+  setUUIDStart: undefined,
+});
+
+const AnalyticsContextProvider: React.FC<Props> = ({ children }) => {
+  const [eventID, setEventID] = useState();
+  const [UUID, setUUID] = useState();
+  const [eventIDStart, setEventIDStart] = useState();
+  const [UUIDStart, setUUIDStart] = useState();
+  return (
+    <AnalyticsContext.Provider
+      value={{
+        event_uuid: eventID,
+        visitor_uuid: UUID,
+        event_uuid_start: eventIDStart,
+        visitor_uuid_start: UUIDStart,
+        setEventID: setEventID,
+        setUUID: setUUID,
+        setEventIDStart: setEventIDStart,
+        setUUIDStart: setUUIDStart,
+      }}
+    >
+      {children}
+    </AnalyticsContext.Provider>
+  );
+};
+
+export { AnalyticsContextProvider };

package/src/utils/{index.js → index.ts}

@@ -1,12 +1,17 @@
 import { trackerService } from './services';
 import Bowser from 'bowser';
 
-const createRequest = (endpoint, task) => {
+const createRequest = (endpoint: string, task: string) => {
   return `${endpoint}/visitor/v1/${task}`;
 };
 
 /* FUNCTION */
-const initTracker = async (endpoint, url, referrer, user_agent) => {
+const initTracker = async (
+  endpoint: string,
+  url?: string,
+  referrer?: string,
+  user_agent?: string
+) => {
   const { document } = window;
   const { pathname, search, origin } = location;
   url = `${origin}${pathname}${search}`;
@@ -15,19 +20,19 @@ const initTracker = async (endpoint, url, referrer, user_agent) => {
   const browser = Bowser.parse(window.navigator.userAgent);
   const browser_name = browser?.browser?.name;
   const browser_version = browser?.browser?.version;
-  const lang = window.navigator.userLanguage || window.navigator.language;
+  const lang = window.navigator['userLanguage'] || window.navigator.language;
   const device = browser?.platform?.model ?? browser?.platform?.type;
   const domain = `${origin}`;
   const queryString = window.location.search;
   const urlParams = new URLSearchParams(queryString);
-  let attributes = [];
-  for (var key of urlParams.keys()) {
+  const attributes = [];
+  for (const key of urlParams.keys()) {
     if (key.startsWith('utm_')) {
       urlParams.get(key) && attributes.push({ name: key, value: urlParams.get(key) });
     }
   }
   if (!urlParams.get('event_uuid') && !urlParams.get('visitor_uuid')) {
-    let ip = '';
+    const ip = '';
     const response = await trackerService(createRequest(endpoint, 'init'), {
       url: url,
       referrer: referrer,
@@ -46,7 +51,12 @@ const initTracker = async (endpoint, url, referrer, user_agent) => {
   }
 };
 
-const startTracker = async (endpoint, event_uuid, visitor_uuid, referrer) => {
+const startTracker = async (
+  endpoint: string,
+  event_uuid?: string,
+  visitor_uuid?: string,
+  referrer?: string
+) => {
   const { location, document } = window;
   referrer = referrer
     ? location.protocol + '//' + location.host + referrer
@@ -74,7 +84,7 @@ const startTracker = async (endpoint, event_uuid, visitor_uuid, referrer) => {
   return responseStart;
 };
 
-const endTracker = async (endpoint, event_uuid, visitor_uuid) => {
+const endTracker = async (endpoint: string, event_uuid?: string, visitor_uuid?: string) => {
   const queryString = window.location.search;
   const urlParams = new URLSearchParams(queryString);
   const responseEnd = await trackerService(createRequest(endpoint, 'end'), {
@@ -94,7 +104,13 @@ const endTracker = async (endpoint, event_uuid, visitor_uuid) => {
   return responseEnd;
 };
 
-const trackEvent = async (endpoint, event_uuid, visitor_uuid, referrer, data) => {
+const trackEvent = async (
+  endpoint: string,
+  event_uuid: string,
+  visitor_uuid: string,
+  referrer?: string,
+  data?: object
+) => {
   const { location, document } = window;
   referrer = referrer
     ? location.protocol + '//' + location.host + referrer
@@ -123,4 +139,10 @@ const trackEvent = async (endpoint, event_uuid, visitor_uuid, referrer, data) =>
   return responseStart;
 };
 
-export { initTracker, startTracker, endTracker, trackEvent };
+const insertParam = (key: string, value: string) => {
+  const url = new URL(window.location.href);
+  url.searchParams.set(key, value);
+  window.history.pushState({ path: url.href }, '', url.href);
+};
+
+export { initTracker, startTracker, endTracker, trackEvent, insertParam };

package/src/utils/{services.js → services.ts}

@@ -1,13 +1,13 @@
 /* SERVICES */
-let cache;
-const assign = (a, b) => {
+let cache: string;
+const assign = (a: {}, b: {}) => {
   Object.keys(b).forEach((key) => {
     if (b[key] !== undefined) a[key] = b[key];
   });
   return a;
 };
 
-const trackerService = async (endpoint, payload) => {
+const trackerService = async (endpoint: string, payload: object) => {
   const fetchData = await fetch(endpoint, {
     method: 'POST',
     body: JSON.stringify(payload),