Library for Tracking client-side events via Google Tag Manager (GTM).
- Built with Typescript ๐
- Flexible-scalable solution for gtm tracking
- Can be pluged to any view framework - see integrations
- Redux-like: Easy to use and can hook into events
- Super small: less than 2kb (minified)
npm install @ichnos/core
if you using yarn as package manager
yarn add @ichnos/core
Create Ichnos instance and register event types.
import Ichnos from '@ichnos/core'
const ichnos = new Ichnos({
options: { id: 'GTM-XXX' },
events: [ // register events
{ type: 'addToCart' }
]
})
next, you can fire events with payload as follow:
ichnos.send(
ichnos.events.addToCart({ productId: 'abc' })
)
Name | type | default | comments |
---|---|---|---|
id (required) | string |
||
events (required) | { type: String } |
[] | register event types |
active | boolean |
false |
whether to enable sending gtm events |
layer | string |
dataLayer |
whether to enable sending gtm events |
debug | boolean |
false |
show logs in the console |
array of events types to register to ichnos instance, Example:
const ichnos = new Ichnos({
// ...
events: [{ type: 'addToCart' }]
// ...
})
then, you can use it to generate event with payload before send
ichnos.send(
ichnos.events.addToCart({ productId: 'abc'})
)
Events defined with a lifecycle in ichnos to reduce any boilerplate and redundunt code and make it simple to roll out your tracking events. below list of hooks can be applied:
beforeSend(type:string, payload: any, history: gtmEvents[])
hook called before send gtm event to the datalayer
below is example to attach event
property to all the events schema.
import Ichnos from '@ichnos/core'
const ichnos = new Ichnos({
// ...
hook: {
beforeSend: (type, payload, history) => {
let event = payload;
if(type === 'addToCart'){
return {
userId: 'xyz'
...event
}
}
return event;
}
}
})
//...
ichnos.send(ichnos.events.addToCart({ productId: '123' })); // { userId: 'xyz', productId: '123' }
- @ichnos/vue - Vue integration
- @ichnos/react
- @ichnos/preact
- @ichnos/angular