How to track pageviews and other events from the website

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. In this case, 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")
)