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

A developer can include additional payload object with the page title, referrer, URL attributes. SDK evaluates all automatically, but referrer doesn't change with page transition so its recommended to fill it manually.

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