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 when the user navigates away to any other page (article or non-article).
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>
Page Type dependency
If you are using the page_type dependency to track non-article pages as well, you should ensure that you call _ain.track() method everytime new content is ready, and _ain.stop() every time user navigates away from the current page.
Expected workflow
The order of setting and executing should be as follows:
1. _ain.trackauto is set to 'false' when first initializing the _ain object
2. _ain object is updated with appropriate meta-data
3. _ain.track() method is called to start tracking the current page
4. _ain.stop() method is called when the user navigates away from the current page
Example workflow when the user navigates from an article page to another article page:
1. update _ain object with meta-data from the current article
2. _ain.track() method is called to start tracking the current page
3. _ain.stop() method is called when user navigates to the second article (when the URL is changed)
4. update the _ain object with meta-data from the article
5. _ain.track() method is called to start tracking the article
6. _ain.stop() method is called when user navigates away
Still have a question? Feel free to drop us an email: support@smartocto.com