@meniga/analytics

@meniga/analytics

This package is used to track events in Meniga products

Getting started

---

Create a config file called tracking.js in your container app that specifies which tracking services should be enabled.

Example:

export default {
	services: {
		google: {
			enabled: true,
			useAsDefault: true,
			id: "UA-10093770-21",
			debug: false
		},
		meniga: {
			enabled: true,
			useAsDefault: false
		},
		segment: {
			enabled: true,
			id: "",
			useAsDefault: false
		}
	}
};

Not all fields are required for each service, but enabled and useAsDefault should always be present.

enabled means that the service is "turned on" and can be explicitly called when needed.

useAsDefault means that the service is always called during tracking calls, allowing you to call multiple services as default if needed. Note: enabled needs to be true as well.

Tracking an event

---

To track an event you need to import the analytics actions to your component, like this:

import { actions as trackingActions } from '@meniga/analytics'

and then you use it like this:

1. Track Screen

dispatch(trackingActions.trackScreen(request, service))

The request param can either be a single string or a JSON object that should look something like this:

{
    type: 'modal' //optional [string] - possible vales: 'page', 'modal', 'tab'. Default value is 'page'.
    category: 'Transactions', //optional [string] - the category of the screen. Useful to group different screens together.
    name: 'Transaction List', //required [string] - the name of the screen to track
}

If you send only a single string to trackScreen() it is used as the name of the screen.

1. Track Event

dispatch(trackingActions.trackEvent(request, service))

The request param should look something like this:

{
    type: 'Account', //optional [string] (used as trackingType for meniga's /eventtracking service)
    action: 'Account Updated', //required [string] (used as trackingState for meniga's /eventtracking service)
    id: 1, //optional [number] (used as trackingId for meniga's /eventtracking service)
    meta: {}, //optional [json] (used as media for meniga's /eventtracking service)
}

The service param, if specified, should be a string array. Only the services listed will be called, otherwise the 'useAsDefault' services will be called.

Example:

dispatch(trackingActions.trackEvent({
    action: 'Account Updated',
    meta: {
        fields: [
            name: 'Account Type',
            value: 'Current'
        ]
    }
}, ['segment', 'meniga']))

Adding new services

---

Right now we have a built in support for google analytics, segment.com and the meniga /eventtracking api service. In order to add support for a new service, you need to add code to the identifyUser and trackEvent functions in api.js that deals with calling that service. Then you also might have to add code to the initialize.js file to initialize the connection to the service.

Example:

function callMenigaService () {		
    if(supportedServices.meniga) {
        return Request.post(`${ baseUrl }/eventtracking`, { trackingType, trackingState, trackerId, meta })
    } else {
        return new Promise((resolve) => {
            resolve()
        })
    }
}

function callGoogleService () {
    if(supportedServices.google) {
        return new Promise((resolve, reject) => {
            if (trackingType === 'modal') {
                ReactGA.modalview(trackingState)
            } else if (trackingType === 'event') {
                ReactGA.event(trackingState)
            } else if (trackingType === 'page') {
                ReactGA.pageview(trackingState)
            }
            resolve()
        })
    } else {
        return new Promise((resolve) => {
            resolve()
        })
    }
}

function callSegmentService() {
    if(supportedServices.segment) {
        return new Promise((resolve) => {
            if(trackingType === 'page') {
                analytics.page(trackingState)
            } else {
                analytics.track(trackingState, meta);
            }				

            resolve()
        })
    } else {
        return new Promise((resolve) => {
            resolve()
        })
    }
}

etc.