What is Client-Side Rendering?
Client-Side Rendering (CSR) is a web development technique that uses JavaScript to generate a web page's final HTML content and user interface in the user's browser.
How does CSR impact analytics?
With conventional pages, using Server-Side Rendering, analytics can automatically detect that a page has loaded.
With CSR, navigation does not result in a full page load. This means, out-of-the-box, most analytics software cannot measure what is happening with CSR websites.
How to support CSR with Silktide Analytics
There are two main approaches to support CSR with Silktide. The best solution depends on how your website works:
Solution 1: manually track page events
When whatever you define as a new "page" loads, call the silktide() function directly:
silktide("page_load");
This will log the current URL as being opened, i.e. the URL in the browser at the time this function is called. This is what we be logged in Silktide Analytics, and what Silktide Analytics will attempt to render in its UI (for heatmaps etc).
Depending on how you have implemented CSR, your URLs may be insufficiently unique to log the nuance that you want. If so, you may consider firing custom events.
Solution 2: track page events whenever the URL is changed programmatically
Most CSR implementations should update the URL of the page, as the user navigates.
If you do this, it is possible to automatically notify Silktide when your URL changes, without needing to implement the silktide("page_load") call manually, as shown above.
This JavaScript will do this:
(function() {
let currentUrl = window.location.href;
const checkUrlChange = () => {
const newUrl = window.location.href;
if (newUrl !== currentUrl) {
silktide("page_load");
currentUrl = newUrl;
}
};
// Capture pushState and replaceState
const originalPushState = history.pushState;
const originalReplaceState = history.replaceState;
history.pushState = function(...args) {
originalPushState.apply(this, args);
checkUrlChange();
};
history.replaceState = function(...args) {
originalReplaceState.apply(this, args);
checkUrlChange();
};
// Listen for hash changes (for hash-based navigation)
window.addEventListener('hashchange', checkUrlChange, false);
// Listen for the popstate event (back/forward browser navigation)
window.addEventListener('popstate', checkUrlChange, false);
})();
Simply add this code to every page you use, below the standard Silktide Analytics JavaScript snippet.
Feel free to modify this code to your needs, e.g. the comments are unnecessary.