ReactJS Data Layers

Our custom Listeners make it easy to generate data layers for tracking your ReactJS website or application. Check out the samples below and get started for free!

ReactJS Data Layer Examples

Learn more about how ListenLayer generates powerful data layers from the activity on your single-page website/application.

Custom Data Layer Events

Generate data layer events automatically, like the one shown here, when content changes in your ReactJS application. This allows you to accurately track a ReactJS website or application using a normal “page view” analytics method.

event: 'reactJSRoutesPath',

Automatic Data Layer Values

ListenLayer pushes critical information from your ReactJS activity into the data layer automatically. For example, automatically capture information about the URL path a user navigated to and where they came from.

All data layer values can be captured as variables inside Google Tag Manager, and tags can be fired based on triggers. For example, trigger a “virtual pageview” by triggering a Google Analytics pageview tag every time a user changes routes (with a URL path change) in your ReactJS website.

routeAutomaticValues: {
    route: {
      from: 'https://listener-reactjs.web.app/',
      to: 'https://listener-reactjs.web.app/about'
    }
  }

Custom Data Layer Values

Using data from your ReactJS activity, ListenLayer allows you to write rules to generate custom values into the data layer. For example, score user activity, filter out tests, name/categorize pages, and map the funnel path through a multi-step react form based on rules you write – no programming required.

routeCustomValues: {
  pageName: 'Your Information',
  stepNumber: 2,
  funnelName: 'reactjs lead funnel'
}