Custom Analytics | Web SDK | LiveLike Developer Hub

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 })
  })
})