Knowledge base | mouseflow

Single Page Websites

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.

Basically, you need to invoke some JavaScript when a new "page" has rendered:

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 Use

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

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

Next, create a new pageview with the same path as the original page:

// When a new virtual page is rendered
window._mfq.push(["newPageView"]);

--OR--

Next, create a pageview with a different path than the original page:

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

In Mouseflow, you should now see a new pageview with the appropriate name and this, in turn, will affect your heatmaps, funnels, and forms.