shore-tracker

A generic module to track user actions inside Shore

Install

npm install @shore/shore-tracker

Usage

Ensure you are in an ES6 environment, if not use polyfills!

Creating the client

import { initialize } from '@shore/shore-tracker';

// 1. Initializing the tracker
initialize({
  trackMethod: analytics.track // The track method of some third party analytics tracker
});

Creating and using as Redux middileware

import { createReduxMiddleware } from '@shore/shore-tracker';
import actionTypes from 'constants/action-types';
const { HIDE, SHOW, SAVE } = actionTypes.currentCustomer.additionalAttributes;

const Shore = window.Shore;

// Sample helper method to generate event data
const generateTrackerData = eventName => (state, actionPayload) => ({
  eventName,
  eventPayload: {
    ...actionPayload,
    ...{
      'Merchant uuid': Shore.merchant_uuid,
      'Merchant account id': Shore.merchant_account_id,
      'Merchant name': Shore.merchantName,
      'Merchant account name': Shore.merchant_account_name,
      name: Shore.merchant_account_full_name,
      phone: Shore.merchantPhone,
      website: Shore.merchantWebsite,
    },
  },
});

// This map tells which redux action will be track with what data
const mapping = {
  [HIDE]: generateTrackerData('customer_detail_additional_attributes_hide'),
  [SHOW]: generateTrackerData('customer_detail_additional_attributes_show'),
  [SAVE]: generateTrackerData('customer_detail_additional_attributes_save')
};

// Creating the middleware
const trackerMiddleware = createReduxMiddleware(mapping);

// Then when creating redux store you can use it like so 
let store = createStore(
  reducers,
  applyMiddleware(trackerMiddleware)
)

// Then redux will track the actions mentioned inside the mapping

TODO

• Add tests
• Add documentation for how to use it for non redux app