Events: How to track page views in single-page application

Learn more: How to deploy Meiro Events.

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