Integrating React Router v4 with Mouseflow

In this article we will learn how to properly integrate React Router into Mouseflow


New Page Views

In a user session, Mouseflow keeps track of which pages a user visits within a website. By default, Mouseflow watches for synchronous HTTP requests that alter the view in the browser. Traditional websites have anchor tags in the HTML that, when clicked by the user, make these HTTP requests. The browser then creates a new view with the HTML/CSS/JS in the response. In contrast, SPAs use JavaScript to load new views into the browser and use asynchronous HTTP requests to get new data to add to the DOM. Mouseflow cannot detect this without some customization.


React-Router and React-Router-DOM

A very popular framework for making 'pages' within your React app is react-router, and getting it set up to work seamlessly with Mouseflow is easy!


1. Using BrowserRouter and withRouter()

You will want to have the BrowserRouter component wrapping your entire application like so:

index.js

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'

import App from './App'

ReactDOM.render(
    <Router>
        <App />
    </Router>,
    document.getElementById('root')
)

Your App.js component will need to use the HOC function withRouter()

App.js

import React from 'react'
import NavBar from './NavBar'
import { withRouter } from 'react-router'
import HomePage from './HomePage'
import ContactPage from './ContactPage'
import ProjectList from './ProjectList'
import { Route, Switch } from 'react-router-dom'

class App extends React.Component {
  render() {
    return (
        <NavBar />
        <Switch>
            <Route path="/projects" component={ProjectList} />
            <Route path="/contact" component={ContactPage} />
            <Route path="/" component={HomePage} />
        </Switch>
    )
  }
}

export default withRouter(App)


2. Listening for routing events

Make use of the history.listen() function (documentation). It is important to note that this function returns the unlisten function. Thus, when creating a listener with each call componentWillMount(), we will want to unlisten when the component lifecycle ends.

Configure the componentWillMount() and componentWillUnmount() functions of your App.js component like so:

componentWillMount() {
  this.unlisten = this.props.history.listen((location, action) => {
    console.log('You changed the page to: ' location.pathname)
  });
}
componentWillUnmount() {
    this.unlisten();
}

You will now have a console log of all the route changes within the application. 


3. Talking to the Mouseflow API

Mouseflow uses an array _mfq in the browser to pass various meta-data to the Mouseflow server. One of the things Mouseflow looks for in this array is new page views. Now that we are listening to the new page views on our React app, we can simply push a key-value pair into this array each time the routing changes. This artificially makes Mouseflow recognize new page views.

componentWillMount() {
  this.unlisten = this.props.history.listen((location, action) => {
      window._mfq.push(["newPageView", location.pathname]);
  });<span class="fr-marker" data-id="0" data-type="false" style="display: none; line-height: 0;"></span><span class="fr-marker" data-id="0" data-type="true" style="display: none; line-height: 0;"></span>
}
componentWillUnmount() {
    this.unlisten();
}

You App.js file should now have the following lifecycle functions: 

class App extends React.Component {

componentWillMount() {
    this.unlisten = this.props.history.listen((location, action) => {
        window._mfq.push(["newPageView", location.pathname]);
    });
  }
 componentWillUnmount() {
      this.unlisten();
  }

  render() {
    return (
        <NavBar />
        <Switch>
            <Route path="/projects" component={ProjectList} />
            <Route path="/contact" component={ContactPage} />
            <Route path="/" component={HomePage} />
        </Switch>
    )
  }
}

export default withRouter(App)
Congratulations, your React application should now be submitting all pageviews to Mouseflow as would any traditional HTML website.