@laerdal/eventstore-client

Installation

``sh
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:
`ts
import { initalizeEventStore } from '@laerdal/eventstore-client';

initalizeEventStore({
url: 'https://some-eventstore-api.eu-central-1.amazonaws.com/events',
apiKey: ''
});
`

Connect the user and context to the storing events:
`ts
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!

$3


storeClickEvent - When you want to store event clicks
`tsx
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 = () => (
onClick={(event)=>{
storeClickEvent({
elementId: 'myButton',
name: 'myName',
value: 'myValue'
});
}}
>
myButton

);
`


storeTourGuideEvent - When you want to store tour guide clicks
`tsx
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 = () => (
onClick={(event)=>{
storeTourGuideEvent({
tourAction: 'skip';
tourId: 'tour-guide-skip-button',
currentStep: 2;
totalSteps: 4;
});
}}
>
skipButton

);
`

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

`tsx
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 (
id="observation"
ref={ref}
style={{
height: 200,
width: 200,
backgroundColor: 'red',
display: 'block'
}}
/>
)
}
`

storeFileDownloadEvent - When you want to store file download events
`tsx
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 = () => {(
onClick={(event) => {
storeFileDownloadEvent({
downloadType: 'export'
dataSet: 'filtered',
dataDomain: 'skills'
statusCode: 502,
fileName: 's3://file-export-skills.zip',
errorMessage: 'Flagrant system error',
});
}}
>
download export file

)};

`

storeHistoryChange - When you want to store file download events
`tsx
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]);

``