![]() MapTrackingToProps will merge the returned object with the RootComponent ’s props, which means the trackPageView will be available as a prop within RootComponent. WithTracking HOC will take care of providing us trackEvent from our tracker so we can use it to track the pageView event. Here’s an example of a PageView event: const PageViewEvent = ) export default withTracking(mapTrackingToProps)(RootComponent) Run the following command to create a react app. Create a react app and install npm dependencies Let’s create a react app using the create-react-app npm package. It should be an object with type and associated data if any. Steps to implement idle timeout popup in React Create a react app and install npm dependencies Prepare components for demo Write a logic to set idle timeout popup Output 1. tracker.getHistory() returns an Array and contains all the tracked events that were savedĪn event is a plain object that represents the user interaction, like user click, page view, and purchase.ackEvent(event) is a function that accepts an event and calls all the event-listeners that listen on this event.tracker.on(eventType, callback) the given callback will be called whenever an event with event.type equal to the given eventType is dispatched.What is Tracker?Ī Tracker is a bag that holds the tracking-history along with some functions to listen to/dispatch events. React-tracker will magically take care of providing your tracker instance to all your Components.īefore instantiating anything, let’s go through each term on the list above and explain it.Provide your tracker instance to your Root Component.Create your event-listener(s) ~ Reducer.Instantiate your Tracker ~ Store of your events.With React-tracker, we were easily able to integrate two Analytics providers (Google Tag manager and Adobe Analytics). It can be used with any Analytics provider.It’s easy to use, test, and maintain (Redux-like).There was just no chance.Īnd here’s where the idea of React-Tracker came in. I started looking in the community for ready-to-use solutions that fit our needs. Sharing knowledge with other developers who didn’t have analytics experience was scary!. ![]() Suddenly, the difficulties started coming up: And I was responsible for integrating the DataLayer solution we had already built with React Land. We started the migration to React progressively, which means React was responsible only for rendering some parts of the platform.
0 Comments
Leave a Reply. |
Details
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |