How to track pageviews in Single Page Apps

To learn about the general guide on how to deploy Meiro Events please refer to this article. 

Single-page applications

As thereThere is no page refresh in single-page applications developed like React, Vue or Angular frameworks. For this reason, the page view tracking method needs to be called directly in the application router.

In single-page applications you need to call the following method to track every page view:

window.MeiroEvents.track("pageView", {referrer: "https://example.com/previous" });

The second object parameter is optional, you can pass additional data to the event payload.

Example

Following example shows usage for React with the React Router library.

As referrer doesn’t change in the singe-page application, it’s recommended to pass it in event payload.

import { Router, Route, Switch } from "react-router-dom";
import createBrowserHistory from "history/createBrowserHistory";

const history = createBrowserHistory({})

history.listen(() => {
  if (MeiroEvents && typeof MeiroEvents.track === "function") {
    MeiroEvents.track("pageView", {
      referrer: "previous url..."
    })  
  }
})

React.DOM.render(
  <Router history={history}>
    <Switch>
      <Router ... />
    </Switch>
  </Router>,
  document.querySelector(".app")
)