React Actions Tracker

Imagine you want to track user events of your application, everything goes mess if you don’t have a pattern to follow.

Now imagine you have to track, click, knows when a component render to make some A/B Test, what is the values, metadata and connect everything in the api you have to send. It’s a bunch of work right?

But now, imagine you just have to put a provider over you root application and just wrap the component you want to track. Easier right? So focus on what you have to learn and let the React Actions Tracker do this job for you!

Installation

npm install react-actions-tracker

yarn add react-actions-tracker

Interactive Demo.

Coming soon

Wrap your application with the provider

  <EventTrackerProvider trackEvent={(payload) => null}>
    <App />
  </EventTrackerProvider>

Then just add the EventTracker component over the target component.

<EventTracker eventName="NAME_YOU_WANT">
  <button>Test button</button>
</EventTracker>

Event Payload.

{
  eventName: string;
  applicationPrefix?: string;
  eventAction: "click" | "changed" | "render";
  metadata?: object;
  eventPage?: string;
}

Props – EventTracker

Name	Type	Default	Optional	Desc
eventName	`string`	–	`false`	name of the event
trackClick	`boolean`	false	`true`	Enable track click over the target element
trackChange	`boolean`	false	`true`	Enable track of state change over the target element you must use the `watch` pamareter to work
trackRender	`boolean`	false	`true`	Enable track when the target element renders/appears in customer screen, `Caution` with this prop, you don’t want to track when everything rendered right…
watch	`any`	undefined	`true`	Prop used with trackChange parameter, this will trigger the trackChange event when this prop updates
eventMetadata	`object`	{ }	`true`	This prop is used to explain and attach data that you make sense to your tracking activity
eventDebug	`boolean`	false	`true`	This prop is used debug the events you want to track, only for test and development purposes
threshold	`number or number[]`	undefined	`true`	This prop is used to give a porcentage in users screen the target element appears. Ex: you want to track when the target element appears 50% in users screen, you should use values between 0 to 1, so the threshold should be P `0.5`
triggerOnce	`boolean`	true	`true`	If you want to track everytime the target component appears on the screen, you should set `triggerOnce=false`
eventPage	`string`	undefined	`true`	If you want to put some data to be more especific, use this event to attach pageName to your events.

Props – EventTrackerProvider

Name	Type	Default	Optional	Desc
trackEvent	`function`	–	`false`	this will be the callback that will return the `eventPayload` of the event you’re tracking, here you can do everything you want.
globalMetadata	`object`	{ }	`true`	Equals metadata just global ??
applicationPrefix	`string`	undefined	`true`	Imagine you’re tracking lot’s of services, and your tracking service does not know where this data comes from, so this is to name the service you’re tracking globally to every event
untrack	`boolean`	{ }	`false`	Stops the event tracking

License

MIT

GitHub

View Github