@laerdal/eventstore-client
v0.8.0
Published
Eventstore javascript client
Downloads
93
Keywords
Readme
@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]);