@laerdal/eventstore-client

@laerdal/eventstore-client

Installation

yarn add @laerdal/eventstore-client

Contribution

We utilize github actions to automatically publish this library - please include the following words in branch names to influence the semantic version.

• major: "BREAKING CHANGE" or "MAJOR"

• minor: "feature"

• patch: This is the default increment if the above words aren't included.

Usage

First initalize the EventStore at the top of your app:

import { initalizeEventStore } from '@laerdal/eventstore-client';

initalizeEventStore({
    url: 'https://some-eventstore-api.eu-central-1.amazonaws.com/events',
    apiKey: '<your API Key here>'
});

Connect the user and context to the storing events:

import { eventStoreIdentify } from '@laerdal/eventstore-client';

// Native DOM
const sessionId = sessionStorage['sessionId'];
const { orgId, orgUnitId, userId, domain: userDomain } = user;
eventStoreIdentify({
    sessionId,
    owner: 'analytics',
    activity: {
        concept: 'dashboard',
        physical: 'rqi2020',
        identifier: 'hendrix',
    },
    orgId,
    orgUnitId,
    userId,
    userDomain,
});


// React
useEffect(()=>{
        const sessionId = sessionStorage['rqi2020token'];
        const { orgId, orgUnitId, clientUserId: userId, tcId: userDomain } = user;
        eventStoreIdentify({
          sessionId,
          owner: 'analytics',
          activity: {
            concept: 'dashboard',
            physical: 'rqi2020',
            identifier: 'hendrix',
          },
          orgId,
          orgUnitId,
          userId,
          userDomain,
        });
}, [user]);

Then add the tracking events you want in to your code!

Events that can be stored

storeClickEvent - When you want to store event clicks

import { storeClickEvent } from '@laerdal/eventstore-client';

// Native DOM
const button = window.getElementById('myButton');
const clickListener = (event) => storeClickEvent({
    elementId: button.id,
    name: 'myName',
    value: 'myValue'
});
button.addEventListener('click', clickListener)

// Remember to unregister when the component dismounts
button.removeEventListener('click', clickListener)

// ---

// React
const myButton = () => (
    <button 
        onClick={(event)=>{
            storeClickEvent({
                elementId: 'myButton',
                name: 'myName',
                value: 'myValue'
            });
        }}
    >
        myButton
    </button>
);

storeTourGuideEvent - When you want to store tour guide clicks

import { storeTourGuideEvent } from '@laerdal/eventstore-client';

// Add in any tour guide buttons like skip / end / any other buttons
// Add in open the tour guide button

// Native DOM
const button = window.getElementById('skipButton');
const clickListener = (event) => storeTourGuideEvent({
    tourAction: 'skip';
    tourId: 'tour-guide-skip-button',
    currentStep: 2;
    totalSteps: 4;
});
button.addEventListener('click', clickListener)

// Remember to unregister when the component dismounts
button.removeEventListener('click', clickListener)

// ---

//React
const SkipButton = () => (
    <button 
        onClick={(event)=>{
            storeTourGuideEvent({
                tourAction: 'skip';
                tourId: 'tour-guide-skip-button',
                currentStep: 2;
                totalSteps: 4;
            });
        }}
    >
        skipButton
    </button>
);

ItemVisible - When you want to store if an item is shown at the screen

import { getTrackedItemVisible } from '@laerdal/eventstore-client';


// Native DOM
const itemToTrack = window.getElementById('itemToTrack');
const itemObserver = getTrackedItemVisible();
itemObserver.observe(itemToTrack)
// Remember to unregister when the component dismounts
itemObserver.unobserve(itemToTrack)

// ---

// React

const myVisibleitem = () => {
    const ref = useRef(null);
    useEffect(()=>{
        const itemVisibleObserver = getTrackedItemVisible();
        if (ref.current) itemVisibleObserver.observe(ref.current);
        return () => {
            if (ref.current) itemVisibleObserver.unobserve(ref.current);
        }
    }, [])

    return (
        <div
            id="observation"
            ref={ref}
            style={{ 
                height: 200, 
                width: 200, 
                backgroundColor: 'red', 
                display: 'block' 
            }}
        />
    )
}

storeFileDownloadEvent - When you want to store file download events

import { storeFileDownloadEvent } from '@laerdal/eventstore-client';

// Specify download types, data sets, data domain, status codes, fileName
// error Message is optional if the statusCode is an error 


// Native DOM
const button = window.getElementById('fileDownload');
const clickListener = (event) => storeFileDownloadEvent({
    downloadType: 'export'
    dataSet: 'filtered',
    dataDomain: 'skills'
    statusCode: 502,
    fileName: 's3://file-export-skills.zip',
    errorMessage: 'Flagrant system error',
});
button.addEventListener('click', clickListener)

// Remember to unregister when the component dismounts
button.removeEventListener('click', clickListener)

// ---

//React
const FileDownloadButton = () => {(
  <button 
    onClick={(event) => {
        storeFileDownloadEvent({
            downloadType: 'export'
            dataSet: 'filtered',
            dataDomain: 'skills'
            statusCode: 502,
            fileName: 's3://file-export-skills.zip',
            errorMessage: 'Flagrant system error',
        });
    }}
    >
    download export file
  </button>
)};

storeHistoryChange - When you want to store file download events

import { storeHistoryChange } from '@laerdal/eventstore-client';
import { useLocation } from 'react-router-dom';

//React
  const location = useLocation();

  useEffect(() => {
      console.log('Route changed to:', location.pathname);
      storeHistoryChange({
        pathname: location.pathname,
      });
  }, [location]);