Mouseflow Help & Support

Single Page Websites

Follow

Mouseflow supports session playback of single page websites/single page applications (SPA) out of the box. We also support other websites that use AJAX to render new pages instead of the 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 heatmaps 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 create the window._mfq object:

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"]);

 

Tags: single page websites application spa ajax dynamic content pageview angular react

Have more questions? Submit a request

Comments

  • Avatar
    admin

    It would be really helpful if you would set $window.mouseflow or window.mouseflow in the flowflow.js file

    this will allow users to use the script in strict mode

    Edited by admin
Powered by Zendesk