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
messagesentWhen the current user sends a message{message: Object, roomId: string}
messagereceivedWhen a message is received from any user{message: Object, roomId: string}
messagedeletedWhen the producer deletes a message{message: Object, roomId: string}
messagefailedWhen the request fails when sending a message{message: Object, roomId: string}
reactionaddedWhen a chat reaction is added{message: Object, roomId: string}
reactionremovedWhen a chat reaction is removed{message: Object, roomId: string}
roomenteredWhen the user loads a chat room{ room: Element, roomId: string }
roomexitedWhen a user leaves a chat room{ roomId: string }
messagehistoryWhen 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
beforewidgetattachedWhen a widget is created but hasn't yet been attached to the DOM{widget: Object}
widgetattachedWhen a widget gets attached to the DOM{element: Element, widget: Object}
beforewidgetdetachedBefore a widget gets detached from the DOM{element: Element, widget: Object}
widgetdetachedWhen a widget gets detached from the DOM{element: Element, widget: Object}
dismissWhen the user closes the widget{element: Element, widget: Object}
expireWhen the widget interactivity time elapses naturally{element: Element, widget: Object}
rankchangeWhen a user's leaderboard rank changes and receives rewards{element: Element, widget: Object, rewards: Array}

The list of available interactivity events include:

votePoll widget vote
answerQuiz widget answer
predictionPrediction widget answer
cheerCheer widget vote
sliderSlider widget vote

The order in which the events are fired is as follows:

  1. beforewidgetattached
  2. widgetattached
  3. [ vote / answer / prediction / cheer / slider]
  4. beforewidgetdetached
  5. [ dismiss / expire ]
  6. 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 })
  })
})