react-tracker-sdk 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Vuong DQ
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,191 @@
+# React Tracker SDK
+
+## Installation
+
+```bash
+npm install --save react-tracker-sdk
+```
+
+## Usage
+
+### Simple
+
+```js
+import ReactTracker from "react-tracker-sdk";
+
+const reactTracker = new ReactTracker({
+  // Configure your tracker server and site by providing
+  host: "https://tracking.example.com",
+  urlServeJsFile:
+    "https://tracking.example.com/tracker/dist/v2/tracker.full.min.js",
+  appId: "chat-tool",
+});
+
+// BAD if app use IAM
+const newHistory = reactTracker.connectToHistory(history);
+ReactDOM.render(
+  <Provider store={store}>
+    <Router routes={routes} history={newHistory} />
+  </Provider>,
+  document.getElementById("root")
+);
+
+// GOOD if app use IAM
+ReactDOM.render(
+  <Provider store={store}>
+    <Router routes={routes} history={reactTracker.connectToHistory(history)} />
+  </Provider>,
+  document.getElementById("root")
+);
+```
+
+### Advance
+
+#### Auto detect
+
+```js
+import ReactTracker, {
+  TrackerProvider,
+  useAutoPageView,
+} from "react-tracker-sdk";
+
+const reactTracker = new ReactTracker({
+  // Configure your tracker server and site by providing
+  host: "https://tracking.example.com",
+  urlServeJsFile:
+    "https://tracking.example.com/tracker/dist/v2/tracker.full.min.js",
+  appId: "chat-tool",
+});
+
+// MUST BE BEFORE EVERYTHING IF USER LOGIN
+window.track("setUserId", "1023912");
+
+// ENABLE CONTENT EVENT
+window.track("enableTrackVisibleContentImpressions");
+
+const routes = [
+  {
+    path: "/",
+    contentType: "Home",
+    exact: true,
+    screenName: "dashboard",
+    component: Home,
+  },
+  { path: "/admin", contentType: "Admin", exact: true, component: Admin },
+  { path: "/logs", contentType: "Log", exact: true, component: Logs },
+  {
+    path: "/logs/:id",
+    contentType: "Detail",
+    component: LogDetail,
+    // For detail want to extract skuId and skuName
+    parser: (url, match) => {
+      return { skuId: match.params.id };
+    },
+  },
+];
+
+ReactDOM.render(
+  <Provider store={store}>
+    <Router history={reactTracker.connectToHistory(history, routes)}>
+      {routes.map((route) => (
+        <Route {...route} key={route.path} />
+      ))}
+    </Router>
+  </Provider>,
+  document.getElementById("root")
+);
+```
+
+#### Support Hook define per screen
+
+```js
+import ReactTracker, {
+  TrackerProvider,
+  useAutoPageView,
+} from "react-tracker-sdk";
+
+const reactTracker = new ReactTracker({
+  // Configure your tracker server and site by providing
+  host: "https://tracking.example.com",
+  urlServeJsFile:
+    "https://tracking.example.com/tracker/dist/v2/tracker.full.min.js",
+  appId: "chat-tool",
+});
+
+// Auto detect pageView
+const ScreenA = (props) => {
+  track("setUserId", "random-user-id");
+  useAutoPageView({ screenName: "ScreenA" });
+  return <>ScreenA</>;
+};
+
+// Custom detect pageView
+const ScreenB = (props) => {
+  const { callTrackLoadPage, callTrackUnLoadPage } = useTrackPageView();
+
+  useEffect(() => {
+    track("setUserId", "random-user-id");
+    // some logic ....
+    callTrackLoadPage({ screenName: "ScreenB" });
+    return () => {
+      // some logic ....
+      callTrackUnLoadPage({ screenName: "ScreenB" });
+    };
+  }, []);
+  return <>ScreenA</>;
+};
+
+ReactDOM.render(
+  <Provider store={store}>
+    <TrackerProvider history={browserHistory}>
+      <Router routes={routes} history={history} />
+    </TrackerProvider>
+  </Provider>,
+  document.getElementById("root")
+);
+```
+
+### Advance with content
+
+```js
+import { TrackerProvider, useAutoPageView } from "react-tracker-sdk";
+
+new ReactTracker({
+  // Configure your tracker server and site by providing
+  host: "https://tracking.example.com",
+  urlServeJsFile:
+    "https://tracking.example.com/tracker/dist/v2/tracker.full.min.js",
+  appId: "chat-tool",
+});
+
+// Custom detect pageView
+const ScreenB = (props) => {
+  const { callTrackLoadPage, callTrackUnLoadPage } = useTrackPageView();
+
+  useEffect(() => {
+    track("setUserId", "random-user-id");
+    // some logic ....
+    callTrackLoadPage({ screenName: "ScreenB" });
+    track("enableTrackVisibleContentImpressions");
+    return () => {
+      // some logic ....
+      track("disableTrackVisibleContentImpressions");
+      callTrackUnLoadPage({ screenName: "ScreenB" });
+    };
+  }, []);
+  return <>ScreenA</>;
+};
+
+ReactDOM.render(
+  <Provider store={store}>
+    <TrackerProvider history={browserHistory}>
+      <Router routes={routes} history={history} />
+    </TrackerProvider>
+  </Provider>,
+  document.getElementById("root")
+);
+```
+
+## License
+
+[MIT](http://opensource.org/licenses/MIT)

package/dist/TrackerContext.d.ts

@@ -0,0 +1,4 @@
+import * as React from "react";
+import { Instance } from "./types";
+export declare const TrackerContext: React.Context<Instance>;
+export default TrackerContext;

package/dist/TrackerContext.js

@@ -0,0 +1,6 @@
+import * as React from "react";
+export var TrackerContext = React.createContext({
+    callTrackLoadPage: function () { },
+    callTrackUnLoadPage: function () { },
+});
+export default TrackerContext;

package/dist/TrackerProvider.d.ts

@@ -0,0 +1,3 @@
+import * as React from "react";
+import { PropsProviderT } from "./types";
+export declare const TrackerProvider: React.FC<PropsProviderT>;

package/dist/TrackerProvider.js

@@ -0,0 +1,39 @@
+import * as React from "react";
+import { useEffect } from "react";
+import TrackerContext from "./TrackerContext";
+import { getPropsPageView, getFullPath, getPreviousFullPath } from "./common";
+var mPrevLoc;
+var loc = null;
+var unregister = null;
+export var TrackerProvider = function (_a) {
+    var children = _a.children, history = _a.history;
+    if (!loc) {
+        loc = history.location;
+    }
+    if (!unregister) {
+        unregister = history.listen(function (newLoc) {
+            loc = newLoc;
+        });
+    }
+    useEffect(function () {
+        return function () {
+            if (unregister) {
+                unregister();
+            }
+        };
+    }, [history]);
+    var callTrackLoadPage = function (props) {
+        var previousFullPath = getPreviousFullPath(mPrevLoc, loc);
+        var currentFullPath = getFullPath(loc);
+        window.track("setReferrerUrl", previousFullPath);
+        window.track("setCurrentUrl", currentFullPath);
+        window.track("trackLoadPageView", getPropsPageView(props));
+        mPrevLoc = loc;
+    };
+    var callTrackUnLoadPage = function (props) {
+        var previousFullPath = getFullPath(mPrevLoc || loc);
+        window.track("setCurrentUrl", previousFullPath);
+        window.track("trackUnLoadPageView", getPropsPageView(props));
+    };
+    return (React.createElement(TrackerContext.Provider, { value: { callTrackLoadPage: callTrackLoadPage, callTrackUnLoadPage: callTrackUnLoadPage } }, children));
+};

package/dist/common.d.ts

@@ -0,0 +1,14 @@
+import { UseTrackPageViewT } from "./types";
+import { Location } from "history";
+export declare const getProtocal: (loc: any) => any;
+export declare const getPath: (loc: any) => string;
+export declare const getFullPath: (loc: Location) => string;
+export declare const getPropsPageView: (props: UseTrackPageViewT) => {
+    contentType?: string | undefined;
+    skuId?: string | undefined;
+    skuName?: string | undefined;
+    screenName?: string | undefined;
+};
+export declare const getLocationFromString: (href: string) => HTMLAnchorElement;
+export declare const getPreviousFullPath: (prevLoc: any, currentLoc: any) => string;
+export declare const getMatchRoute: (path: string, routes: any) => any;

package/dist/common.js

@@ -0,0 +1,70 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import matchPath from "./matchPath";
+export var getProtocal = function (loc) {
+    // Protocol may or may not contain a colon
+    var protocol = loc.protocol;
+    if (protocol.slice(-1) !== ":") {
+        protocol += ":";
+    }
+    return protocol;
+};
+export var getPath = function (loc) {
+    var _loc = window.location;
+    var protocol = getProtocal(_loc);
+    return protocol + "//" + _loc.host + loc.pathname;
+};
+export var getFullPath = function (loc) {
+    var windowLoc = window.location;
+    return "".concat(getProtocal(windowLoc), "//").concat(windowLoc.host).concat(loc.pathname).concat(loc.search).concat(loc.hash);
+};
+export var getPropsPageView = function (props) { return (__assign({}, props)); };
+export var getLocationFromString = function (href) {
+    var l = document.createElement("a");
+    l.href = href;
+    return l;
+};
+export var getPreviousFullPath = function (prevLoc, currentLoc) {
+    var previousFullPath = null;
+    if (!prevLoc) {
+        if (!document.referrer) {
+            previousFullPath = getFullPath(currentLoc);
+        }
+        else {
+            previousFullPath = document.referrer;
+        }
+    }
+    else {
+        previousFullPath = getFullPath(prevLoc);
+    }
+    return previousFullPath;
+};
+export var getMatchRoute = function (path, routes) {
+    var pathname = getLocationFromString(path).pathname;
+    var matches = routes
+        .map(function (route) {
+        return {
+            match: matchPath(pathname, route),
+            route: route,
+        };
+    })
+        .filter(function (_a) {
+        var match = _a.match;
+        return !!match;
+    });
+    if (matches && matches.length !== 0) {
+        var _a = matches[0], match = _a.match, route = _a.route;
+        var others = route.parser ? route.parser(path, match) : {};
+        return __assign(__assign({}, route), others);
+    }
+    return {};
+};

package/dist/hooks.d.ts

@@ -0,0 +1,8 @@
+import { UseTrackPageViewT } from "./types";
+export declare const useAutoPageView: (props: UseTrackPageViewT) => void;
+export declare const useTrackPageView: () => {
+    callTrackLoadPage: (props: UseTrackPageViewT) => void;
+    callTrackUnLoadPage: (props: UseTrackPageViewT) => void;
+};
+export * from "./TrackerContext";
+export * from "./TrackerProvider";

package/dist/hooks.js

@@ -0,0 +1,20 @@
+import TrackerContext from "./TrackerContext";
+import { useContext, useEffect } from "react";
+export var useAutoPageView = function (props) {
+    var _a = useContext(TrackerContext), callTrackLoadPage = _a.callTrackLoadPage, callTrackUnLoadPage = _a.callTrackUnLoadPage;
+    useEffect(function () {
+        callTrackLoadPage(props);
+        return function () {
+            callTrackUnLoadPage(props);
+        };
+    }, []);
+};
+export var useTrackPageView = function () {
+    var _a = useContext(TrackerContext), callTrackLoadPage = _a.callTrackLoadPage, callTrackUnLoadPage = _a.callTrackUnLoadPage;
+    return {
+        callTrackLoadPage: callTrackLoadPage,
+        callTrackUnLoadPage: callTrackUnLoadPage,
+    };
+};
+export * from "./TrackerContext";
+export * from "./TrackerProvider";

package/dist/index.d.ts

@@ -0,0 +1,16 @@
+import { InitContructor, RouteParamT } from "./types";
+declare class ReactTracker {
+    private previousPath;
+    private previousFullPath;
+    private unlistenFromHistory;
+    private history;
+    private routes;
+    constructor(setupOptions: InitContructor);
+    connectToHistory(history: any, routes?: RouteParamT[]): any;
+    disconnectFromHistory(): boolean;
+    private getExtraAttr;
+    private registerListener;
+    private track;
+}
+export * from "./hooks";
+export default ReactTracker;

package/dist/index.js

@@ -0,0 +1,133 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { getPath, getFullPath, getPreviousFullPath, getMatchRoute, } from "./common";
+var defaultOptions = {
+    host: "https://tracking.example.com",
+    urlServeJsFile: "https://tracking.example.com/track/libs/tracker.full.min.js",
+};
+var init = function (f, b, e, v, i, r, t, s) {
+    // Stop if tracker already exists
+    if (f[i])
+        return;
+    // Initialise the 'GlobalTrackerNamespace' array
+    f["GlobalTrackerNamespace"] = f["GlobalTrackerNamespace"] || [];
+    // Add the new Tracker namespace to the global array so tracker.js can find it
+    f["GlobalTrackerNamespace"].push(i);
+    // Add endpoint
+    f["GlobalTrackerNamespace"].push(r);
+    // Create the Snowplow function
+    f[i] = function () {
+        (f[i].q = f[i].q || []).push(arguments);
+    };
+    // Initialise the asynchronous queue
+    f[i].q = f[i].q || [];
+    // Create a new script element
+    t = b.createElement(e);
+    // The new script should load asynchronously
+    t.async = !0;
+    // Load Tracker-js
+    t.src = v;
+    // Get the first script on the page
+    s = b.getElementsByTagName(e)[0];
+    // Insert the Snowplow script before every other script so it executes as soon as possible
+    s.parentNode.insertBefore(t, s);
+    // add listener error
+    // @ts-ignore
+    window.onerror = function (msg, url, lineNo, columnNo, error) {
+        f[i]("exception", { msg: msg, error: error });
+        return false;
+    };
+    // add listener onunhandledrejection
+    window.onunhandledrejection = function (event) {
+        f[i]("exception", {
+            msg: event.reason ? event.reason.message : "unknown",
+            error: "unhandledrejection",
+        });
+        return false;
+    };
+};
+var ReactTracker = /** @class */ (function () {
+    function ReactTracker(setupOptions) {
+        var _this = this;
+        this.routes = [];
+        this.registerListener = function (history) {
+            var prevLoc = typeof history.getCurrentLocation === "undefined"
+                ? history.location
+                : history.getCurrentLocation();
+            _this.previousPath = getPath(prevLoc);
+            _this.previousFullPath = getPreviousFullPath(null, prevLoc);
+            window.track("setReferrerUrl", _this.previousFullPath);
+            var currentFullPath = document.location.href;
+            window.track("trackLoadPageView", __assign({}, _this.getExtraAttr(currentFullPath)));
+            _this.unlistenFromHistory = history.listen(function (action) {
+                // if users use history v5, Location object will be in action.location,
+                // else if users use history v4, action will be a Location object.
+                // read more at https://gist.github.com/StringEpsilon/47820cc961c8d82f3b71dc856b5cc616#historylisten
+                if (action.location) {
+                    _this.track(action.location);
+                }
+                else {
+                    _this.track(action);
+                }
+            });
+        };
+        var options = __assign(__assign({}, defaultOptions), setupOptions);
+        var host = options.host, urlServeJsFile = options.urlServeJsFile;
+        init(window, document, "script", urlServeJsFile, "track", host);
+        if (options.appId) {
+            window.track("init", options.appId);
+        }
+    }
+    ReactTracker.prototype.connectToHistory = function (history, routes) {
+        if (routes === void 0) { routes = []; }
+        this.routes = routes;
+        if (this.history) {
+            return history;
+        }
+        this.history = history;
+        this.registerListener(history);
+        return history;
+    };
+    ReactTracker.prototype.disconnectFromHistory = function () {
+        if (this.unlistenFromHistory) {
+            this.unlistenFromHistory();
+            return true;
+        }
+        return false;
+    };
+    ReactTracker.prototype.getExtraAttr = function (currentPath) {
+        if (!this.routes || this.routes.length === 0)
+            return {};
+        var _a = getMatchRoute(currentPath, this.routes) || {}, contentType = _a.contentType, screenName = _a.screenName, skuId = _a.skuId, skuName = _a.skuName;
+        return JSON.parse(JSON.stringify({ contentType: contentType, screenName: screenName, skuId: skuId, skuName: skuName }));
+    };
+    ReactTracker.prototype.track = function (loc) {
+        if (typeof window === "undefined") {
+            return;
+        }
+        var currentPath = getPath(loc);
+        var currentFullPath = getFullPath(loc);
+        if (this.previousPath === currentPath) {
+            return;
+        }
+        window.track("setCurrentUrl", this.previousFullPath);
+        window.track("trackUnLoadPageView", __assign({}, this.getExtraAttr(this.previousFullPath)));
+        window.track("setReferrerUrl", this.previousFullPath);
+        window.track("setCurrentUrl", currentFullPath);
+        window.track("trackLoadPageView", __assign({}, this.getExtraAttr(currentFullPath)));
+        this.previousPath = currentPath;
+        this.previousFullPath = currentFullPath;
+    };
+    return ReactTracker;
+}());
+export * from "./hooks";
+export default ReactTracker;

package/dist/matchPath.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Public API for matching a URL pathname to a path.
+ */
+declare function matchPath(pathname: any, options?: any): any;
+export default matchPath;

package/dist/matchPath.js

@@ -0,0 +1,59 @@
+// clone function matchPath from react-router-dom v5 to make sure this lib can work with react-router-dom v5 and v6
+// https://github.com/remix-run/react-router/blob/v5.3.4/packages/react-router/modules/matchPath.js
+import pathToRegexp from "path-to-regexp";
+var cache = {};
+var cacheLimit = 10000;
+var cacheCount = 0;
+function compilePath(path, options) {
+    var cacheKey = "".concat(options.end).concat(options.strict).concat(options.sensitive);
+    var pathCache = cache[cacheKey] || (cache[cacheKey] = {});
+    if (pathCache[path])
+        return pathCache[path];
+    var keys = [];
+    var regexp = pathToRegexp(path, keys, options);
+    var result = { regexp: regexp, keys: keys };
+    if (cacheCount < cacheLimit) {
+        pathCache[path] = result;
+        cacheCount++;
+    }
+    return result;
+}
+/**
+ * Public API for matching a URL pathname to a path.
+ */
+function matchPath(pathname, options) {
+    if (options === void 0) { options = {}; }
+    if (typeof options === "string" || Array.isArray(options)) {
+        options = { path: options };
+    }
+    var path = options.path, _a = options.exact, exact = _a === void 0 ? false : _a, _b = options.strict, strict = _b === void 0 ? false : _b, _c = options.sensitive, sensitive = _c === void 0 ? false : _c;
+    var paths = [].concat(path);
+    return paths.reduce(function (matched, path) {
+        if (!path && path !== "")
+            return null;
+        if (matched)
+            return matched;
+        var _a = compilePath(path, {
+            end: exact,
+            strict: strict,
+            sensitive: sensitive,
+        }), regexp = _a.regexp, keys = _a.keys;
+        var match = regexp.exec(pathname);
+        if (!match)
+            return null;
+        var url = match[0], values = match.slice(1);
+        var isExact = pathname === url;
+        if (exact && !isExact)
+            return null;
+        return {
+            path: path,
+            url: path === "/" && url === "" ? "/" : url,
+            isExact: isExact,
+            params: keys.reduce(function (memo, key, index) {
+                memo[key.name] = values[index];
+                return memo;
+            }, {}),
+        };
+    }, null);
+}
+export default matchPath;

package/dist/types.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { History } from "history";
+import { PathMatch } from "react-router-dom";
+export interface PropsProviderT {
+    children: React.ReactNode;
+    history: History;
+}
+export interface InitContructor {
+    appId: string;
+    host: string;
+    urlServeJsFile: string;
+}
+export interface UseTrackPageViewT {
+    contentType?: string;
+    skuId?: string;
+    skuName?: string;
+    screenName?: string;
+}
+export interface ParserResponseT {
+    skuId?: string;
+    skuName?: string;
+}
+export interface RouteParamT {
+    path?: string;
+    exact?: boolean;
+    sensitive?: boolean;
+    strict?: boolean;
+    screenName?: string;
+    contentType?: string;
+    parser?: (url: string, match: PathMatch) => ParserResponseT;
+}
+export interface Instance {
+    callTrackLoadPage: (props: UseTrackPageViewT) => void;
+    callTrackUnLoadPage: (props: UseTrackPageViewT) => void;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "react-tracker-sdk",
+  "version": "1.0.0",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "license": "MIT",
+  "author": "Vuong DQ",
+  "description": "React plugin for tracker SDK",
+  "keywords": [
+    "npm",
+    "tracker"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "prepublishOnly": "yarn build"
+  },
+  "devDependencies": {
+    "@types/history": "^4.7.5",
+    "@types/react": "^16.9.43",
+    "history": "^5.3.0",
+    "husky": "^4.2.5",
+    "react-router-dom": "^6.3.0",
+    "typescript": "^4.1.2"
+  },
+  "peerDependencies": {
+    "path-to-regexp": "^1.7.0",
+    "react": ">=16.8.0",
+    "react-router-dom": "^6.3.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn build && git add ."
+    }
+  },
+  "dependencies": {
+    "path-to-regexp": "^1.7.0"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  }
+}