Get Started with ReactJS Tracking

Use our powerful ReactJS listener to track your single-page application (SPA) or website when URL paths change during a content route. For example, place a single script on your website, using Google Tag Manager, and the ReactJS Listener will push structure data into the data layer as users interact with your SPA. Then, capture this data into as many marketing and analytics platforms as needed using the simple rules you write in GTM.

Once you realize the power of data layers from ListenLayer, you’ll never go back!

 

How ReactJS Works

ReactJS is a popular coding library that allows developers to build “single-page websites” and applications. React was developed by an engineer at Facebook and converted to an open-source project in May 2013.

In a single-page experience, the user navigates between content elements using route changes instead of full page loads. For example, the main navigation of your website or application may appear to take the user to an entirely new page; however, there is never a full “page load.”

ListenLayer allows you to easily track activity from Angular applications, which can be challenging as most analytics tools rely on traditional “page views.”

How to Track ReactJS Apps

Due to the lack of traditional page view activity inside ReactJS apps, they are often difficult to track. For example, if you utilize Google Analytics, data will not be collected as users move through your single-page website because there are no “page views” to capture. Other platforms, such as Linkedin Ads that might rely on URL views to “fire a conversion,” require you to create “virtual page views” to track activity.

ListenLayer allows you to more easily track React applications using an automated Listener that pushes activity into the user’s data layer, where it can become accessible to analytics tools. Without ListenLayer, a developer would need to program your React application to push these events, which might be time-consuming to allow you to customize and enhance your analytics easily.

The Solution: Automated Data Layers

With ListenLayer, place a single script tag on your website (via GTM), and we’ll track all ReactJS route changes into the data layer – the only requirement is that the URL path change during a route change so the Listener can detect the activity.

Data Layers can easily be read by tools such as GTM, allowing you to configure a simple structure in GTM to track your entire ReactJS applications, just like magic! You can then use ListenLayer to write rules that customize your data layer, allowing you to collect better information and segment your analytics for analysis!