React specific tracking library, Track user interaction with minimal API!
Track user interaction with minimal API
$ npm install --save react-tracker
This assumes you are using npm as your package manager.
To see the react-tracker in action please visit the link below.
Create a Tracker holding the tracked events History of your app.
Tracker API is { on, trackEvent, getHistory }
.
const tracker = new Tracker([trackAddToCart])
on()
:const tracker = new Tracker();
// Listen on `PRODUCT_CLICK`event.
tracker.on('PRODUCT_CLICK', (event, eventsHistory) =>
console.log(event)
);
// Listen on all events
tracker.on('*', (event, eventsHistory) =>
console.log(event)
);
Event listner is a pure function with (event, eventsHistory) => tracking goes here
.
It describes what to do with the just-fired event.
Why providing the eventsHistory as second parameter ?
=> because in some cases you'll need to apply some restrictions on some events E.g:
/**
* Listener with eventType specified it will be called when the given eventType is dispatched
*/
function trackAddToCart(event, eventsHistory) {
// Call DataLayer or your tracking provider (E.g. Pixel, GTM..)
window.dataLayer.push(...event.data);
// If you want save this event in the events history, just return it
// otherwise it will be ignored.
return event
}
// Allow `trackAddToCart` to listen only on `ADD_TO_CART` event
trackAddToCart.eventType = 'ADD_TO_CART';
/**
* Since no eventType was specified it will be called whenever an event dispatched
* You can use `switch` statement to handle multiple events in one listener
*/
function trackCartEvents(event, eventsHistory) {
switch(event.type) {
case 'ADD_TO_CART':
// Call DataLayer or your tracking provider (E.g. Pixel, GTM..)
window.dataLayer.push(...event);
break;
default:
// Silence
}
}
trackEvent
is a function that accept an object describes the event as argument.
ADD_TO_CART_EVENT
with data.tracker.trackEvent({
type: 'ADD_TO_CART_EVENT',
data: {
productId: '12345',
quantity: 5
}
})
PRODUCT_CLICK
with no associated data.tracker.trackEvent({ type: 'PRODUCT_CLICK' })
All container components need access to the tracker so they can track events.
We will use the <TrackerProvider>
to magically make the tracker available to all container components in the application without passing it explicitly.
You only need to use it once when you render the root component:
index.js
import React from 'react'
import { render } from 'react-dom'
import { TrackerProvider, Tracker } from 'react-tracker'
import { trackProductClick } from './tracking/listeners/cart'
import ProductsList from './components/ProductsList'
const tracker = new Tracker([trackProductClick])
render(
<TrackerProvider tracker={tracker}>
<ProductsList products={someProducts} />
</TrackerProvider>,
document.getElementById('root')
)
.../tracking/listeners/cart.js
function trackAddToCart(event, eventsHistory) {
window.dataLayer.push(...event);
return event
}
// Allow `trackAddToCart` to listen only on `ADD_TO_CART` event
trackAddToCart.eventType = 'ADD_TO_CART';
export default trackAddToCart;
.../tracking/events/cart.js
Event creator should return an object that describe the event (Type and data).
function getAddToCartEvent(id, price) {
return {
type: 'ADD_TO_CART',
data: {
id: id,
price: price
}
}
};
components/Product.js
import React from 'react'
const Product = ({ onClick, title, price, currency }) => (
<li
onClick={onClick}
>
{title}
<span> {price} {currency} </span>
</li>
)
export default Product
components/ProductList.js
import Product from './Product'
const ProductList = ({ products, trackAddToCart }) => (
<ul>
{products.map(product => (
<Product key={product.id} {...product} onClick={() => trackAddToCart(product.id, product.price)} />
))}
</ul>
)
ProductList.propTypes = {
// ...
trackAddToCart: PropTypes.func
}
export default ProductList
.../compoenets/ProductListContainer.js
mapTrackingToProps
should return an object which will be merged with the component Props.
import React from 'react';
import { withTracking } from 'react-tracker';
import { getAddToCartEvent } from '.../tracking/events/cart';
import ProductsList from './ProductsList';
const mapTrackingToProps = trackEvent => {
return {
trackAddToCart: (id, price) => {
trackEvent(getAddToCartEvent(id, price))
}
}
}
// Finally, we create the `ProductsList` by calling `withTracking()` and passing our `mapTrackingToProps`
const ProductsListWithTracking = withTracking(mapTrackingToProps)(ProductsList)
export default ProductsListWithTracking
If your app is using redux for state managment, you might want to track redux actions directly.
Let's create our Redux middleware to take the tracker as argument and call trackEvent on every redux action dispatched.
/**
* Simple redux middleware to use redux actions as input of tracking!
* this will call the track function from the provided instance of tracker on every action
* and use the action type as the event type and the action payload as the event data
* @param {Object} tracker
*/
const trackingMiddleware = tracker => () => next => action => {
tracker.trackEvent(action);
next(action);
};
export default trackingMiddleware;
import { createStore, applyMiddleware } from 'redux';
import { Tracker } from 'react-redux';
import { trackingMiddleware, Tracker } from '../trackingMiddleware'
const tracker = new Tracker();
const store = createStore(
reducers,
{}, // initialState
applyMiddleware(trackingMiddleware(tracker))
);
// That's All ;)
This project is in its early stages, I'd be very happy if you can help :)
MIT