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:

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