Modified setup for multiple articles on a single page
If your site is a Single-Page Application (SPA) or uses AJAX to load content dynamically (e.g. infinite scroll, sliders, etc), you'll need to take some additional steps. AJAX injects content changes into the parameters of the page, so you’ll need to update the data sent to the tracking code accordingly. This is done by updating the _ain object with the new parameters. Once the parameters are changed, _ain.track() method should be called to register those changes and start tracking the page using modified data.
Example:
_ain.authors = "Jon Johnson, Tom Tomphson";
_ain.url = "http://www.example.com/news/articlename";
_ain.postid = "1234";
_ain.maincontent = "#main-content-1234";
_ain.title = "Article title";
_ain.pubdate = "2021-03-10T13:04:50Z";
_ain.sections = "News, Politics";
_ain.tags = "elections 2020, affair";
// Call this method to start tracking:
_ain.track();
Waiting for the content to be ready
By default, our tracking code starts to track the page from the moment it’s loaded. If you want to prevent this behavior, you can set parameter trackauto: false during the _ain object initialization.
If trackauto is set to false, you should notify the tracking code when the data is ready.
This is done by calling the _ain.track() method explicitly.
Example:
var _ain = {
id: {DOMAIN_ID},
...
trackauto: false,
};
When the entire content is loaded, you need to call the _ain.track() method.
This often happens on URL change or in some callback function provided by your script.
Just make sure that you call _ain.track() when all content is loaded and all scripts are finished.
§
Dynamic maincontent parameter
When there is more than one article loaded, each article must have a unique CSS selector(s), so you have to make sure that there are no duplicate IDs or classes on the loaded content.
Example:
Each article has <div id="article"> tag which contains all of the content (ideal case). This means that static pages would have "#article" as a maincontent parameter. However, on dynamically loaded content, there will be more articles on the same page.
One solution is to add some kind of suffix to the id. This can be postid or some other string that makes an article unique.
Example:
// article123
_ain.maincontent = "#content-123";
// article456
_ain.maincontent = "#content-456";
Stopping the tracker
Sometimes there's a need to explicitly stop the tracking.
This is often the case on SPA websites when the user clicks on a Home page or any other non-article page which should not be tracked by default.
In that case, you should call the _ain.stop() method to prevent the tracker from sending any data.
// Stop the tracker on non-article pages:
_ain.stop();
§
Dynamic Setup Example
1. Configuration
This code should be placed on ALL pages, even those that should not be tracked:
</script>
_ain = {
id: ,
trackauto: false
};
// The following code (let's call it stf.js) actually loads the tracker from CDN:
(function (d, s) {
var sf = d.createElement(s);
sf.type = 'text/javascript';
sf.async = true;
sf.src = (('https:' == d.location.protocol)
? 'https://d7d3cf2e81d293050033-3dfc0615b0fd7b49143049256703bfce.ssl.cf1.rackcdn.com'
: 'http://t.contentinsights.com') + '/stf.js';
var t = d.getElementsByTagName(s)[0];
t.parentNode.insertBefore(sf, t);
})(document, 'script');
</script>
2. Start tracking
The idea is to update the _ain object with appropriate meta-data of the lastly loaded article.
But, you must ensure that stf.js is loaded BEFORE you call the _ain.track() method because the script loads asynchronously.
That's why we sometimes use the recursive method that waits for e.g. 2 seconds to load the tracker from CDN and then run the _ain.track() method.
Of course, depending on the site's functionality and available events, the clients are free to use any suitable approach.
</script>
_ain.maincontent = ;
_ain.url = ;
_ain.postid = ;
_ain.title = ;
_ain.authors = ;
_ain.pubdate = ;
_ain.sections = ;
_ain.tags = ;
_ain.access_level = "free";
_ain.reader_type = "anonymous";
_ain.article_type = "article";
// Wait for stf.js to load and then start tracking:
(function (a) {
var _soiStartedAt = Date.now();
var _soiStartTracking = function () {
if (Date.now() - _soiStartedAt > 2000) {
return;
}
if (typeof a.track != 'function') {
setTimeout(_soiStartTracking, 100);
return;
}
a.track();
console.info("SOI tracking started...");
}
_soiStartTracking();
})(window._ain);
</script>
3. Stop tracking
You should call _ain.stop() method only when the user navigates from the article to any non-article page (e.g. the homepage).
When that happens _ain.stop() will prevent sending further requests.
Again, you must ensure that stf.js is loaded before you call the _ain.stop() method.
</script>
// Wait for stf.js to load and then stop tracking:
(function (a) {
var _soiStartedAt = Date.now();
var _soiStopTracking = function () {
if (Date.now() - _soiStartedAt > 2000) {
return;
}
if (typeof a.stop != 'function') {
setTimeout(_soiStopTracking, 100);
console.warn("SOI tracking NOT stopped...");
return;
}
a.stop();
console.info("SOI tracking stopped...");
}
_soiStopTracking();
})(window._ain);
</script>
§
Still have a question? Feel free to drop us an email: support@smartocto.com