next-tracker

Tracker plugin for Next framework

Installation

npm install --save next-tracker

How to use

Client Render

Normal

import NextTracker from "next-tracker";
import { useEffect } from "react";

export default function App({ Component, pageProps }) {
  useEffect(() => {
    new NextTracker({
      // 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: "APP_ID",
    });

    // MUST BE BEFORE EVERYTHING IF USER LOGIN
    window.track("setUserId", "1023912");

    // ENABLE CONTENT EVENT
    window.track("enableTrackVisibleContentImpressions");
  }, []);
  return <Component {...pageProps} />;
}

Advance (some custom attribute)

import NextTracker from "next-tracker";
import { useEffect } from "react";

const routes = [
  {
    path: "/",
    contentType: "Home",
    exact: true,
    screenName: "dashboard",
  },
  { path: "/admin", contentType: "Admin", exact: true },
  { path: "/logs", contentType: "Log", exact: true },
  {
    path: "/logs/:id",
    contentType: "Detail",
    // For detail want to extract skuId and skuName
    parser: (url, match) => {
      return { skuId: match.params.id };
    },
  },
];

export default function App({ Component, pageProps }) {
  useEffect(() => {
    new NextTracker({
      // 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: "APP_ID",
      routes,
    });

    // MUST BE BEFORE EVERYTHING IF USER LOGIN
    window.track("setUserId", "1023912");

    // ENABLE CONTENT EVENT
    window.track("enableTrackVisibleContentImpressions");
  }, []);
  return <Component {...pageProps} />;
}

Server Render

Add script in header

<script type="text/javascript">
  !function(t,e,r,n,s,a,o,c){t[s]||(t.GlobalTrackerNamespace=t.GlobalTrackerNamespace||[],t.GlobalTrackerNamespace.push(s),t.GlobalTrackerNamespace.push({$TRACKER_HOST_URL}),t[s]=function(){(t[s].q=t[s].q||[]).push(arguments)},t[s].q=t[s].q||[],(o=e.createElement(r)).async=!0,o.src=n,(c=e.getElementsByTagName(r)[0]).parentNode.insertBefore(o,c),window.onerror=function(e,r,a,o,c){return t[s]("exception",{msg:e,error:c}),!1})}(window,document,"script",{$TRACKER_SERVER_JS_URL},"track");
  track("init", {$APP_ID})
</script>

after that initial

import NextTracker from "next-tracker";
import { useEffect } from "react";

export default function App({ Component, pageProps }) {
  useEffect(() => {
    new NextTracker({
      appId: "APP_ID",
      injectScript: true, // mean you ingested script in header before
    });

    // MUST BE BEFORE EVERYTHING IF USER LOGIN
    window.track("setUserId", "1023912");

    // ENABLE CONTENT EVENT
    window.track("enableTrackVisibleContentImpressions");
  }, []);
  return <Component {...pageProps} />;
}