Heatmaps are another way for Inspectlet to give you data about responsive pages. Due to the fluidity of responsive pages across different devices, layouts differ based on the screen size of the device being used which can lead to some discrepancies in your heatmap data out of the box for responsive pages.

To address this we're introducing a technique that allows you to segment heatmaps based on the visitor’s screen size. Please note that this method is not needed for session recordings, session recordings will automatically pick up on responsive pages correctly.

Here's how it works:

Using the code below (with jQuery in our example), we’ll change the virtual paths for the different screen sizes.

var responsiveurl = window.location.href;
if ($(window).width() <= 480) responsiveurl += "/phone";
else if ($(window).width() <= 840) responsiveurl += "/tablet";

and then in the Inspectlet code you need to send the updated URL: __insp.push(["pageUrl", responsiveurl]);

This sets all visits from a browser under 480 pixels wide to ‘/phone’ and browser screens between 480 to 840 pixels wide to ‘/tablet’. All other screen sizes will be saved as the original URL (e.g. www.example.com for desktop).

The example Inspectlet code will now look like:

<!-- Begin Inspectlet Embed Code -->
<script type="text/javascript" id="inspectletjs">
window.__insp = window.__insp || [];
__insp.push(['wid', 12345678]);
 
var responsiveurl = window.location.href;
if ($(window).width() <= 480) responsiveurl += "/phone";
else if ($(window).width() <= 840) responsiveurl += "/tablet";
__insp.push(["pageUrl", responsiveurl]);
 
(function() {
function ldinsp(){if(typeof window.__inspld != "undefined") return; window.__inspld = 1; var insp = document.createElement('script'); insp.type = 'text/javascript'; insp.async = true; insp.id = "inspsync"; insp.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://cdn.inspectlet.com/inspectlet.js'; var x = document.getElementsByTagName('script')[0]; x.parentNode.insertBefore(insp, x); };
setTimeout(ldinsp, 500); document.readyState != "complete" ? (window.attachEvent ? window.attachEvent('onload', ldinsp) : window.addEventListener('load', ldinsp, false)) : ldinsp();
})();
</script>
<!-- End Inspectlet Embed Code -->

If you have any questions, please send us an e-mail at hello@inspectlet.com!