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

There 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:

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

Payload contains page_title, referrer, url while referrer doesn't change.

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