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

Keywords

FAQs

What is react-tracker-teko?

Is react-tracker-teko popular?

Is react-tracker-teko well maintained?

Last updated on 14 Jul 2022

Did you know?

Socket installs a Github app to automatically flag issues on every pull request and report the health of your dependencies. Find out what is inside your node modules and prevent malicious activity before you update the dependencies.

Install Socket