0.0.10 • Published 4 years ago
@youseedk/tracking v0.0.10
YouSee Tracking
Installation
npm i @youseedk/tracking
Initialization
From JavaScript
import ysTracking from '@youseedk/tracking';
ysTracking.init({
pageName: 'Page Name',
pageType: 'Sales Page / Article / Application',
siteSections: ['site', 'section', 'its', 'in'],
linkitId: '', //the linkit id associated with logged in user or blank
}, 'prod'); // 'dev' or 'prod' defaults to 'dev'From index.html (with express proxy)
First you would have to configure your express server
e.g. for a CRA (Create React App) you will have to create/edit your setupProxy.js file located in the src folder
const path = require("path");
module.exports = function (app) {
app.use("/tracking", function (req, res) {
res.sendFile(
path.resolve(
__dirname + "/../node_modules/@youseedk/tracking/dist/index.js"
)
);
});
};After you created the route on your express server, you will have to add the following snippet at the end of your <body> in the index.html to run the initialization for the tracking library.
<script
src="/tracking"
onload="trackingInit({
pageName: 'NEW TRACKING TESTING - JS',
pageType: 'Sales Page / Article / Application',
siteSections: ['site', 'section', 'its', 'in'],
linkitId: 'TEST',
})"
></script>or
<script>
(function (d, s, id, el) {
if (d.getElementById(id)) { return; }
el = d.createElement(s);
el.type = "text/javascript";
el.onload = function () {
trackingInit({
pageName: "NEW TRACKING TESTING - JS",
pageType: "Sales Page / Article / Application",
siteSections: ["site", "section", "its", "in"],
linkitId: "TEST",
});
};
el.src = "/tracking";
d.getElementsByTagName("head")[0].appendChild(el);
})(document, "script", "youseedk-tracking");
</script>NOTE: You could use the tracking from a CDN but it might trigger later then some track or view calls
Optional params
One can supply several other parameters:
e.g.
ysTracking.init(
data,
"dev", // Environment (dev | prod) - defaults to "dev"
true, // isSinglePage - boolean value
"tdc-group", // Tealium account - defaults to "tdc-group"
"yousee", // Tealium profile - defaults to "yousee"
)NOTE1: Do not set/change the account and the profile if not needed
NOTE2: if isSinglePage (SPA) attribute is set to true, you will have to manually supple the page views manually (LINK TO VIEW DOCUMENTATION)
Track
import ysTracking from '@youseedk/tracking';
ysTracking.track(
'ComponentName',
'Loaded',
{
ecPopUp: ['One', 'Two']
}
);NOTE1: If using TypeScript you can import the UtagLinkData to get type definition for the third parameter.
NOTE2: Parameters can be overwritten entirely on the last argument (for full customization of the tracked object). Though it is not recommended - as one could potentially fail critical type checks doing in in this manner.
import { UtagLinkData } from '@youseedk/tracking';View
This method should be used when running your application as a SPA. In order to set the tracking for the SPA mode you will have to do it though the third parameter in the init() call.
You should use this method for tracking page changes.
import ysTracking from '@youseedk/tracking';
ysTracking.view(data);NOTE: If using TypeScript you can import the UtagViewData to get type definition for the third parameter.
import { UtagViewData } from '@youseedk/tracking';