ePrivacy and GPDR Cookie Consent by Cookie Consent Skip to main content

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

Custom events

It is possible to sent custom events via the following method call MeiroEvents.track("customEvent", payload);

Single-page applications

As there is no page refresh in single-page applications developed like React, Vue or Angular frameworks. InFor this case,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.


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

  <Router history={history}>
      <Router ... />