next-tracker
v1.2.3
Published
Tracker plugin for Next framework
Downloads
152
Readme
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} />;
}