This module is heavily inspired from Event Layer. We have made it more configurable by providing more options and extensions on top of it.
Currently supported adapters:
- Segment
- Mixpanel
- Google Analytics
- Google Tag Manager
- Facebook Tracking Pixel
- Heap Analytics
- Intercom
- Amplitude
- Keen.io
- Helpscout
- FullStory
- Olark
- Calq
- Sentry
- Castle
- Rollbar
- Talkus
- Elev.io
- Drift
- Drip
- Lucky Orange
- Bugsnag
- Bugsnag
- Improvely
- Inspectlet
- Qualaroo
- Customerio
- Chameleon
If you require more adapters to be integrated, feel free to raise a pull request or reach us out on our support channel so that we can integrate your favorite tool with this library.
This Javascript package aims to remain a destination agnostic interface for all kinds of custom events generated in the browser when a user interacts with it. It's basically a router of events to different destinations.
This library is distributed via the ABC Artifactory. Please reach out to abcsupport@cimpress.com to get access to the Artifactory.
- Install the library using
npm install @abc/event-layer
- When added to a page, the library exports
EventLayer
object to thewindow
object of the DOM. However, it requires initialization for you to be able to use any of the other functions inEventLayer.EventLayer
. For more options look at Configuration Optionsconst Analytics = EventLayer.EventLayer Analytics.initialize({ 'google-analytics': { enabled: true } })
- Now that the EventLayer is initialized, you can send your custom events to the layer:
Analytics.page('product', 'Flyers', { 'category': 'Stationary', 'my-custom-property': 'My Custom Property Value' })
One can configure each adapter to spew different outputs if they wish to. The interface for the configuration is:
{
'name-of-adapter': {
enabled: true | false,
transformers: {
identityTransformer: (userId, userProperties) => {
return {
userId: 'transformedUserId',
userProperties: {
'property1': 'value1'
}
}
}
eventTransformer: (eventName, eventProperties) => {
return {
eventName: 'transformedEventName',
eventProperties: {
'property1': 'value1'
}
}
}
}
}
}
The following transformers can be added in the adapter configuration: eventTransformer
, identityTransformer
, pageTransformer
, aliasTransformer
, groupTransformer
and fbTrackTransformer
. To find more about the interface please refer to the TypeScript definition: Definitions
Following are the adapter names that you can modify in the configuration:
'amplitude'
'bugsnag'
'calq'
'castle'
'chameleon'
'customerio'
'drift'
'drip'
'elvio'
'facebookTrackingPixel'
'fullstory'
'google-analytics'
'google-tag-manager'
'heap'
'helpscout'
'improvely'
'inspectlet'
'intercom'
'keen'
'luckyorange'
'mixpanel'
'olark'
'qualaroo'
'rollbar'
'segment'
'sentry'
'talkus'