Tracking URL changes with React

In this article, we'll show you how to make sure that the URL changes are pushed into Mouseflow to create individual page views for your recordings.

For the fastest integration with React and Mouseflow, check out this article.

Setup of URL change tracking

Please follow these steps to manually set up tracking of URL changes:

1. Import React-Router

In this tutorial we are working with react-router

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

index.jsx

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

import Root from './Root' 

ReactDOM.render( 
   <BrowserRouter> 
      <Root /> 
   </BrowserRouter>, 
   document.getElementById('root') 
) 

2. Listening for route changes

You can use hooks to listen for route changes

Root.jsx

import React, { useEffect } from 'react' 
import App from './components/App' 

import { useHistory } from 'react-router-dom'

const Root = () => { 
   const history = useHistory() 

   useEffect(() => {
      return history.listen((location) => { 
         console.log(`You changed the page to: ${location.pathname}`) 
      }) 
   },[history]) 

   return ( 
      <App /> 
   ) 
}

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 route changes. This virtually makes Mouseflow recognize new page views.

useEffect(() => { 
   return history.listen((location) => { 
      window._mfq.push(['newPageView', location.pathname]); 
   }) 
}, [history])

Congratulations, your React application should now be submitting all pageviews to Mouseflow as would any traditional HTML website.