I followed the public react app
simple-reactjs-app
by aditya-sridhar found on Github for setting up the web application. I cloned the repo and just added two blocks (timer init & HTML timer update div) so that you can follow up if you wanted to reproduce the same. I also integrated the timeonsite.js tracker as given below:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- ADDED FOR Real-time time tracking -->
<script type="text/javascript">
var Tos;
(function(d, s, id, file) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s);
js.id = id;
js.onload = function() {
var config = {
trackBy: 'seconds',
developerMode: true,
callback: function(data) {
console.log(data);
// give your endpoint URL/ server-side URL that is going to handle your TOS data which is of POST method. Eg. PHP, nodejs or python URL which saves this data to your DB
var endPointUrl = 'http://localhost/tos'; // replace with your endpoint URL
if (data && data.trackingType && data.trackingType == 'tos') {
if (Tos.verifyData(data) != 'valid') {
console.log('Data abolished!');
return;
}
if (navigator && typeof navigator.sendBeacon === 'function') {
var blob = new Blob([JSON.stringify(data)], {type : 'application/json'});
navigator.sendBeacon(endPointUrl, blob);
}
}
}
};
if(TimeOnSiteTracker) {
Tos = new TimeOnSiteTracker(config);
window.Tos = Tos;
}
};
js.src = file;fjs.parentNode.insertBefore(js, fjs);
} (document, 'script', 'TimeOnSiteTracker', '//cdn.jsdelivr.net/gh/saleemkce/timeonsite@1.2.1/timeonsitetracker.min.js'));
</script>
<!-- ADDED FOR Real-time time tracking -->
<title>React App</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="root"></div>
<!-- ADDED FOR Real-time time tracking -->
<div id="timeContainerStats" style="border: 1px solid #bbb; border-radius: 10px; text-align: center; font-family: cursive;">
You spent :
<span id="timeonsite" style="color:#f55;">
</span> Seconds
</div>
<script>
console.log(typeof window)
if (typeof window !== 'undefined') {
setInterval(function() {
document.getElementById('timeonsite').innerHTML = (window.Tos).getTimeOnPage().timeOnPage;
}, 1000)
}
</script>
<!-- ADDED FOR Real-time time tracking -->
</body>
</html>
Sorry, my first post here. So, I'm not allowed to show image directly hence image is added as link.
Questions:
1, I'm not allowed to access Tos window object directly. Hence I accessed it like "window.Tos" in React root index.html Is it the right approach to fetch third party object in React?
2, Is it proper way to include the HTML block,
<span id="timeonsite" style="color:#f55;">
</span> Seconds
or the right way would be write it as React component?
3, I added the powerful
setInterval(function() {}, 1000);
JS Interval function. Is it fine or we can use React inbuilt timer function for updating TIMER "div" each second?
FYI, I will need this Tos JS object in every page in my React web app so that I show how much time the user spent in the app so far in web page. If it can be written as React component, could you show a sample component written for this live time-counter. I've seen one other question in SO raising the same question but that used JS date timer directly instead of full-fledged tracker like timeonsite.js. Thanks for your help.
from Integrating timeonsite.js on a basic ReactJS app and correct way to show live time counter for tracking user engagement
No comments:
Post a Comment