Mouseflow supports session playback of single page websites/single page applications (SPA) out of the box. Additionally, Mouseflow supports other websites that use AJAX to render new pages instead of traditional page navigation.


If new pages are loaded without reloading the DOM, there are a couple of extra steps you need to take in order for Mouseflow's functionality to work.


You can enable to Mouseflow app 'Single Page App' found under 'Settings' > 'Apps & Integrations':

How It Works

Every time a new “page” has rendered, JavaScript will be called. Mouseflow will continue to record the session but create a new pageview. When you watch the playback session, you'll see that it consists of many pages instead of just one.


Advantages

  • Able to view the same content as the user in playback
  • Able to analyze the different virtual pages with heatmaps and link analytics
  • Able to use funnels
  • Able to use forms


How to configure SPA manually

If the Mouseflow Single Page App integration doesn't work for your website, then you can apply your own custom code along side the Mouseflow script.


First, you need to ensure the window._mfq object is available:

window._mfq = window._mfq || [];


If window._mfq is available then you can simply push an update to Mouseflow whenever a new virtual page is loaded:

// When a new virtual page is rendered
window._mfq.push(["newPageView", "/this-is-the-url-shown-in-mouseflow"]);


NB. If you are using React then you should take a look at this article.