@moonwalker/tracker

Event tracking library.

Usage no npm install needed!

<script type="module">
  import moonwalkerTracker from 'https://cdn.skypack.dev/@moonwalker/tracker';
</script>

README

tracker

Event tracking library.

Example

tracker loads tracking services (such as Segment and GTM) in an iframe. Events are posted to this iframe as they occur throughout the application.

The following example illustrates how to set up tracker for simple event tracking:

import {
    MessageFactory,
    ServiceFactory
} from '@moonwalker/tracker';

// create a (unidirectional) message pipe that allows for posting app events; these events are posted to an iframe 
// with id 'tracker', which in turn forwards an event to one or more tracking services.
//
// In this instance, a tracking servivce named 'console' is configured, which simply logs all app events to the console.
// Also note that the app origin must be specified; in this instance, the app is running @ localhost:9000.
MessageFactory.createPipe({
  iFrameId: 'tracker',
  injectAs: 'fif',

  runInContext: context => context.sandboxAsync(
    (params, onComplete) => {
        const tracker = ServiceFactory(
            {
                services: [ 
                    {
                        name: 'console'
                    }
                ]
            },
            context
        );
        
        onComplete(({ type: event, ...properties }) => tracker(event, properties));
    },
    'http://localhost:9000'
  )
})

// post an app event.
MessageFactory.postMessage('myEvent', 'myData');