bebeto84 / ichnos

Library for Tracking client-side events via Google Tag Manager (GTM).

Ichnos

Library for Tracking client-side events via Google Tag Manager (GTM).

What is Ichnos?

• 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)

Install

npm install @ichnos/core

if you using yarn as package manager

yarn add @ichnos/core

Getting started

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' })
)

Configurations

config.options

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

config.events

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'})
)

config.hook

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

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' }

Integrations

• @ichnos/vue - Vue integration
• @ichnos/react
• @ichnos/preact
• @ichnos/angular