Analytics
The Engagement SDK allows you to hook into our analytic events, making it possible for you to pass through the analytics data to your own provider.
Implementation
The following snippet shows how you can use your own provider by passing it into the init function as analyticsProvider
.
LiveLike.init({
clientId: "your-client-id",
analyticsProvider: yourAnalyticsProvider,
})
The yourAnalyticsProvider
is the instance of your analytics provider. It should have a track
function that takes two parameters - event name and event object.
See the Analytics Event Glossary for the full list of available analytics events.
Using DOM events to implement custom analytics
If you want to integrate your own custom analytics solution, you can use the DOM events fired by the various elements provided by the Web SDK.
Chat Analytics
Use DOM events to track the events you need. Attach listeners directly to the <livelike-chat>
element. The list of available events include:
Event Name | ||
---|---|---|
messagesent | When the current user sends a message | {message: Object, roomId: string} |
messagereceived | When a message is received from any user | {message: Object, roomId: string} |
messagedeleted | When the producer deletes a message | {message: Object, roomId: string} |
messagefailed | When the request fails when sending a message | {message: Object, roomId: string} |
reactionadded | When a chat reaction is added | {message: Object, roomId: string} |
reactionremoved | When a chat reaction is removed | {message: Object, roomId: string} |
roomentered | When the user loads a chat room | { room: Element, roomId: string } |
roomexited | When a user leaves a chat room | { roomId: string } |
messagehistory | When messages have been loaded | { messages: Array } |
const chatNode = document.querySelector('livelike-chat')
chatNode.addEventListener('messagesent', function (ev) {
/* User sent a chat message! */
myAnalytics.trackEvent('Message Sent', { messageId: ev.detail.message.id })
})
Widgets Analytics
Use DOM events to track the events you need. Attach listeners directly to the <livelike-widgets>
element. There are two kinds of events that can be tracked on the widget element. Events that relate to the creation, DOM attachment, and detachment of the actual widget itself, and events that relate to widget interactivity. The event's return two possible properties, widget
, the object containing all the widget data, and element
, the Element that is inserted into the DOM. The list of available widget events include:
Event name | ||
---|---|---|
beforewidgetattached | When a widget is created but hasn't yet been attached to the DOM | {widget: Object} |
widgetattached | When a widget gets attached to the DOM | {element: Element, widget: Object} |
beforewidgetdetached | Before a widget gets detached from the DOM | {element: Element, widget: Object} |
widgetdetached | When a widget gets detached from the DOM | {element: Element, widget: Object} |
dismiss | When the user closes the widget | {element: Element, widget: Object} |
expire | When the widget interactivity time elapses naturally | {element: Element, widget: Object} |
rankchange | When a user's leaderboard rank changes and receives rewards | {element: Element, widget: Object, rewards: Array} |
The list of available interactivity events include:
vote | Poll widget vote |
answer | Quiz widget answer |
prediction | Prediction widget answer |
cheer | Cheer widget vote |
slider | Slider widget vote |
The order in which the events are fired is as follows:
- beforewidgetattached
- widgetattached
- [ vote / answer / prediction / cheer / slider]
- beforewidgetdetached
- [ dismiss / expire ]
- widgetdetached
const widgetsNode = document.querySelector('livelike-widgets')
widgetsNode.addEventListener('dismiss', function (ev) {
/* A widget was explicitly dismissed by the user */
myAnalytics.trackEvent('Widget Dismissed', { widgetId: ev.detail.widget.id })
})
['vote', 'answer', 'cheer'].forEach(function (eventName) {
widgetsNode.addEventListener(eventName, function (ev) {
/* A widget was interacted with */
myAnalytics.trackEvent('Widget Interacted', { widgetId: ev.detail.widget.id })
})
})
Updated about 1 year ago