A better API wrapper for segment. Uses a slightly amended script loading method as opposed to the Segment Quick Start Guide. Adds automatic tracking to elements that are clicked.
A polyfill for Element.prototype.closest is required to support older browsers.
// My App: app/utils/analytics.js
import init from '@festicket/analytics';
export { track, identify, page, group, alias, reset } = init(MySegmentAPIKey);
Then later in your application:
import { track } from 'app/utils/analytics';
// Wait for something which you would like to track
myEvtHandle = async () => {
await track(/* some data */);
};
The initialisation process listens to all click events on your page. If you would like to track a click on an element you can use data attributes to both enable and pass data into your analytics events:
<button
data-analytics='true'
data-analytics-my-value='some-value'
>
This is a button
</button>
<!-- Will result in an analytics payload of { myValue: 'some-value' } -->