react-tracker-teko

ReactTrackerTeko

Installation

npm install --save react-tracker-teko

Usage

Simple

import ReactTracker from "react-tracker-teko";

const reactTracker = new ReactTracker({
  // Configure your tracker server and site by providing
  host: "https://tracking.tekoapis.com",
  urlServeJsFile:
    "https://cdn.tekoapis.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

import ReactTracker, {
  TrackerProvider,
  useAutoPageView,
} from "react-tracker-teko";

const reactTracker = new ReactTracker({
  // Configure your tracker server and site by providing
  host: "https://tracking.tekoapis.com",
  urlServeJsFile:
    "https://cdn.tekoapis.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

import ReactTracker, {
  TrackerProvider,
  useAutoPageView,
} from "react-tracker-teko";

const reactTracker = new ReactTracker({
  // Configure your tracker server and site by providing
  host: "https://tracking.tekoapis.com",
  urlServeJsFile:
    "https://cdn.tekoapis.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

import { TrackerProvider, useAutoPageView } from "react-tracker-teko";

new ReactTracker({
  // Configure your tracker server and site by providing
  host: "https://tracking.tekoapis.com",
  urlServeJsFile:
    "https://cdn.tekoapis.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

Change Log

Stable version: 3.2.4

[3.3.0] - 2023-06-05

Changed

• Clone function matchPath from react-router v5 to avoid breaking function connectToHistory when user react router v6. see more