letgo-web-tracker v0.1.0

This library provides a simple and declarative API to manage several tracking providers in easy way. It is based on react-tracker

• Lightweight and focused on performance
• redux friendly
• Event and listeners abstraction
• Common parameters support using a User Profile

Usage

Installation

Use npm or yarn to install the library

npm install @letgowebteam/letgo-web-tracker --save
# or
yarn add @letgowebteam/letgo-web-tracker

Initialization

Initialize the library creating an instance of Tracker class, its constructor can optionally accepts the following parameters inside a configuration Object

• listeners an Array of listener functions that will be checked and optinionally executed everytime an event is sent
• adapters the tracking managers adapters that you want to use in an Object
• userProperties an Object or a Function that returns an Object with all the user properties. If it is a Fuction, it will be invoked everytime a tracking is sent

import { Tracker } from '@letgowebteam/letgo-web-tracker';

const listeners = [];
const amplitude = new Amplitude();
const adapters = { amplitude };
const userProperties = { countryCode: 'us' };
const tracker = new Tracker({ listeners, adapters, userProperties });

// Listen on PRODUCT_LIST event
tracker.on('PRODUCT_LIST', (event, userProperties, adapters) => {
  console.log(event)
});

// Listen on all events
tracker.on('*', (event, userProperties, adapters) => {
  console.log(event)
});

Listeners

The listeners parameter could be used in the following ways.

• A simple function with a conditional depending on the event type

const productListeners = (event, userProperties, { amplitude, newRelic }) => {
  const {
    type,
    data: { name, ...properties }
  } = event;

  switch (type) {
    case 'PRODUCT_LIST_EVENT': {
      amplitude.logEvent(name, properties, userProperties);
      newRelic.addPageAction(name, properties, userProperties);
    }
  }
};

• As set of functions

const trackProductListEvent = (event, userProperties, { amplitude, newRelic }) => {
  const {
    type,
    data: { name, ...properties }
  } = event;
  
  amplitude.logEvent(name, properties, userProperties);
  newRelic.addPageAction(name, properties, userProperties);
};

trackProductListEvent.eventType = 'PRODUCT_LIST_EVENT';

Track

To track an event just use trackEvent method

tracker.trackEvent({
  type: 'PRODUCT_LIST_EVENT',
  data: {
    name: 'product-list',
    'search-term': 'iphone'
  }
})

React

Render TrackerProvider using a Tracker instance

import React, { FC } from 'react';
import { TrackerProvider } from '@letgowebteam/letgo-web-tracker';

const App: FC = ({ children }) => {
  return (
    <TrackerProvider tracker={tracker}>
      {children}
    </TrackerProvider>
  );
}

Hook

Use useTracker hook to track events

import React, { FC } from 'react';
import { useTracker } from '@letgowebteam/letgo-web-tracker';

const ChatButton: FC = () => {
  const { tracker } = useTracker();
  
  const handleClick = () => {
    tracker.trackEvent({
      type: 'CHAT_INIT',
      data: {}
    });
  }
  
  return (
    <Button tracker={tracker}>
      {children}
    </Button>
  );
}

Higher-Order Component

Use withTracker to inject Tracker instance

import React, { FC } from 'react';
import { withTracker } from '@letgowebteam/letgo-web-tracker';

const ChatButton: FC = withTracker(({ tracker }) => {
  const handleClick = () => {
    tracker.trackEvent({
      type: 'CHAT_INIT',
      data: {}
    });
  }
  
  return (
    <Button tracker={tracker}>
      {children}
    </Button>
  );
});

Redux

Create a custom middleware using tracker

const trackingMiddleware = ({ tracker }) => () => next => action => {
    tracker.trackEvent(action);
    next(action);
};

Attach it when creating the redux store

const store =  createStore(
  reducers,
  {},
  applyMiddleware(trackingMiddleware({ tracker }))
);

Feedback

Pull requests, feature ideas and bug reports are very welcome. We highly appreciate any feedback.