If you are seeing that the content on your page is missing from the heatmaps, it may be that Mouseflow is taking the screenshot before the page finishes loading.


In order to resolve this, you will want to customize your Mouseflow tracking snippet using the mouseflowHtmlDelay variable.


Important: The line of code above needs to be inserted right after the opening <script type ="text/javascript"> line.


Example:

<script type="text/javascript">
    var mouseflowHtmlDelay = 5000;
    window._mfq = window._mfq || [];
    (function() {
        var mf = document.createElement("script"); mf.type = "text/javascript"; mf.defer = true;
        mf.src = "//cdn.mouseflow.com/projects/your-website-id.js";
        document.getElementsByTagName("head")[0].appendChild(mf);
    })();
</script>


You can see on line two in the above example the custom line of code that has been added


var mouseflowHtmlDelay = 5000;


This increases the time which Mouseflow waits to take the heatmap snapshot by 5,000 milliseconds giving asynchronous content a chance to load.


Tip: You can change the delay time by altering the numerical value (e.g. 5000 = 5 seconds, 4000 = 4 seconds, etc). You may need to experiment with the delay to find the perfect time frame for your website.