Skip to main content

Player metrics

The below events are emitted by the Bambuser Live Shopping player, for the purpose of reporting metrics.

There are two ways of accessing player metrics data:

  1. Listening to events emitted
  2. Picking up event data through dataLayer

All events and interactions are listed further down.

Listening to events

By registering an event listener on the top window of the page that you have the player embedded in, all player events/user interactions will be dispatched under bambuser-liveshop-tracking-point event name.

Example: To see a preview of how it works, you can run the below code in a browser console and open the player separately.

  window.addEventListener('bambuser-liveshop-tracking-point', ( {detail}) => {
console.log(detail.event); // e.g. "on-load"
console.log(detail.data); // example output shown below
});
Example output : Full sample data of like interaction payload
{
showId: "XXXXX",
orgId: "YYYYY",
title: "THE SHOW TITLE",
timeline: {
broadcastId: "AAAAAAA-BBB-CCCCC-DDDDD-EEEEEE",
broadcastLength: 119,
isLive: false,
percentWatchedOfShow: 24.751646978557506,
relativeTime: 52.033333,
relativeTimeOfShow: 126.97594900000001,
serverTime: "2020-04-14T10:40:55.869Z",
showLength: 513,
},
interactionType: "like",
count: 1,
}

Picking up events data from dataLayer

It is possible to pick up all the player events (including Conversion tracking event) from the dataLayer object.

img

requirements
  • dataLayer object is available

    Ensure that you have the Tag Manager container code included in the landing page that you have the Player embedded in. Analytics tools such as Google Analytics that use the dataLayer object can pick up Bambuser events from there. For other tools such as Adobe Analytics, Tealium, etc., that have other namings for the data layer object, you need to implement a bridge from the dataLayer to the relevant data layer object to your tracking tool.

  • Add tracking library

    You should add the following script-tag in the pages you have the LiveShopping player embedded.

    <script src="https://cdn.liveshopping.bambuser.com/metrics/bambuser.min.js"></script>

    It adds more tracking features such as pushing player metric events to the dataLayer. This liberary has a very small size of 4kB which does not affect your website performance.

Events

on-load

Emitted when the app has loaded all dependencies and is good to go.

{
showId: "SHOW_ID",
viewerUserAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:81.0) Gecko/20100101 Firefox/81.0",
playerEmbedUrl: "https://www.example.com/live",
}

on-pending

Emitted when countdown/pre-screen is shown.

{
orgId: "CUSTOMER_ID",
showId: "SHOW_ID",
title: "SHOW_TITLE",
viewerUserAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:81.0) Gecko/20100101 Firefox/81.0",
playerEmbedUrl: "https://www.example.com/live",
}

on-play

Emitted when the player has been initialized and video starts playing.

{
showId: "SHOW_ID",
orgId: "CUSTOMER_ID",
title: "SHOW_TITLE",
timeline: {...},
isLive: true,
viewerDevice: "desktop",
viewerUserAgent: "Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:81.0) Gecko/20100101 Firefox/81.0",
isMuted: false,
appReadyTimeToSucceed: 1283, // Miliseconds
}

on-stop

Emitted when the player stops the end of the video.

    {
showId: "SHOW_ID",
orgId: "CUSTOMER_ID",
title: "SHOW_TITLE",
timeline: {...},
isLive: true,
}

on-interaction

Emitted when the user interacts with the app (see below).

Interactions

The on-interaction event can be of any of the following interactionType:


Mute the player

User mutes the player.

  • interactionType: muted
{
interactionType: "muted",
orgId: "CUSTOMER_ID",
showId: "SHOW_ID",
timeline: {...},
title: "SHOW_TITLE",
}

Unmute the player

User unmutes the player.

  • interactionType: unmuted
{
interactionType: "unmuted",
orgId: "CUSTOMER_ID",
showId: "SHOW_ID",
timeline: {...},
title: "SHOW_TITLE",
}

Pause a show

User pauses video.

  • interactionType: pause
{
interactionType: "pause",
orgId: "CUSTOMER_ID",
showId: "SHOW_ID",
timeline: {...},
title: "SHOW_TITLE",
}

Resume a show

User restarts video after having paused it.

  • interactionType: resume
{
interactionType: "resume",
orgId: "CUSTOMER_ID",
showId: "SHOW_ID",
timeline: {...},
title: "SHOW_TITLE",
}

Like

User taps send a heart. If the user rapidly likes multiple times, a single event may be sent with the number of likes described by the property count in the event data.

  • interactionType: like
{
count: 3,
interactionType: "like",
orgId: "CUSTOMER_ID",
showId: "SHOW_ID",
timeline: {...},
title: "SHOW_TITLE",
}

Share

  1. User taps the share button/icon.

    • interactionType structure: {action-origin}:share

    action-origin:

    • action-bar
    • pending-curtain
    {
    interactionType: "action-bar:share",
    orgId: "CUSTOMER_ID",
    shareUuid: "xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx"
    showId: "SHOW_ID",
    timeline: {...},
    title: "SHOW_TITLE",
    }
  2. When user selects a share option

    • interactionType structure: {action-origin}:share:{option}

    option:

    Option is the channel to which user decided to share the link

    • clipboard
    • whatsapp
    • facebook
    • linkedin
    • email
    {
    interactionType: "action-bar:share:facebook",
    orgId: "CUSTOMER_ID",
    shareUuid: "xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx"
    showId: "SHOW_ID",
    timeline: {...},
    title: "SHOW_TITLE",
    }

Add to Calender

  1. User taps the addToCalendar button.

    • interactionType structure: {action-origin}:addToCalendar.

    action-origin:

    • pending-curtain
     {
    interactionType: "pending-curtain:addToCalendar",
    orgId: "CUSTOMER_ID",
    shareUuid: "xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx"
    showId: "SHOW_ID",
    timeline: {...},
    title: "SHOW_TITLE",
    }
  2. When user selects a calendar option.

    • interactionType structure: {action-origin}:addToCalendar:{option}

    option:

    Option here is the calendar to which user decided to add the event.

    • google
    • apple
    • outlook
    • ics : Downloads the .ics calendar file
    {
    interactionType: "pending-curtain:addToCalendar:apple",
    orgId: "CUSTOMER_ID",
    shareUuid: "xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx"
    showId: "SHOW_ID",
    timeline: {...},
    title: "SHOW_TITLE",
    }

Send chat message

User sends a chat message (does not contain the actual message)

  • interactionType: chatMessage
{
interactionType: "chatMessage",
orgId: "CUSTOMER_ID",
showId: "SHOW_ID",
timeline: {...},
title: "SHOW_TITLE",
}

Close the player

User closes the player.

  • interactionType: close
actionOrigin:
  • player - Dismiss button at the top-right side of the player is clicked
  • outside-player - (On desktop) Outside area of the player is clicked
  • miniplayer - Close button on the minimized player is clicked
{
actionOrigin: "player",
interactionType: "close",
orgId: "CUSTOMER_ID",
showId: "SHOW_ID",
timeline: {...},
title: "SHOW_TITLE",
}

Minimize the player

Player gets minimized

  • interactionType: minimize
{
referrerUrl: "https://www.merchant.com"
interactionType: "minimize",
sessionId: "CUSTOMER_ID",
showId: "SHOW_ID",
source: "embed",
timeline: {...},
userId: "xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
}

Maximizes the player

  • interactionType: restore

Player gets maximized from the minimized position

{
referrerUrl: "https://www.merchant.com"
interactionType: "restore",
sessionId: "CUSTOMER_ID",
showId: "SHOW_ID",
source: "embed",
timeline: {...},
userId: "xxxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx",
}

Show product list

User opens the products list.

  • interactionType: showAllProductsOverlay
{
actionOrigin: "player",
interactionType: "showAllProductsOverlay",
orgId: "CUSTOMER_ID",
showId: "SHOW_ID",
timeline: {...},
title: "SHOW_TITLE",
}

Hide product list

User hides the products list.

  • interactionType: hideAllProductsOverlay
{
actionOrigin: "player",
interactionType: "hideAllProductsOverlay",
orgId: "CUSTOMER_ID",
showId: "SHOW_ID",
timeline: {...},
title: "SHOW_TITLE",
}

Product click

User clicks on the products.

  • interactionType structure: {action-origin}:{product-display-target}
action-origin

Action-origin is the place of the player from where the user click the product.

  • product-list
  • product-highlight

product-display-target

Product-display-target is an action that happens when the user clicks a product. Based on the player setup, different types may get emitted (see below)

  • show-product-detail-in-new-tab (Default)
  • show-product-detail-in-player (Requires cart integration)
  • show-product-detail-behind-player (Requires Miniplayer)
{
interactionType: "product-list:show-product-detail-behind-player",
showId: "SHOW_ID",
orgId: "CUSTOMER_ID",
timeline: {...},
vendor: "hydratable-product",
id: "tpl:xxxxxxxxxx",
title: "PRODUCT_TITLE",
sku: "123-M-Black",
actionOrigin: "productsList",
}

Add to cart

User clicks the add-to-cart button. Only available if you have cart integration.

  • interactionType: addToCart
{
interactionType: "addToCart",
showId: "SHOW_ID",
orgId: "CUSTOMER_ID",
title: "SHOW_TITLE",
timeline: {...},
items: [
{
id: "tpl:xxxxxxxxxx",
vendor: "hydratable-product",
sku: "123-M-Black",
quantity: 1,
title: "PRODUCT_TITLE",
size: "M",
variation: "Black",
price: {
original: "199",
amount: "149",
currency: "USD",
hasDiscount: true,
},
}
]
}

Checkout

User clicks the checkout button.

  • interactionType: checkout
{
interactionType: "checkout",
showId: "SHOW_ID",
orgId: "CUSTOMER_ID",
title: "SHOW_TITLE",
timeline: {...},
items: [
{
id: "tpl:xxxxxxxxxx",
vendor: "hydratable-product",
sku: "123-M-Black",
quantity: 1,
title: "PRODUCT_TITLE",
size: "M",
variation: "Black",
price: {
original: "199",
amount: "149",
currency: "USD",
hasDiscount: true,
},
}
],
totalCount: 1,
totalPrice: {
amount: 149,
currency: "USD",
}
}

Show Cart

User opens the player cart by clicking on the cart icon.

  • interactionType structure: {action-origin}:show-cart
action-origin
  • action-bar
  • product-detail
{
interactionType: "action-bar:show-cart",
showId: "SHOW_ID",
orgId: "CUSTOMER_ID",
timeline: {...},
title: "PRODUCT_TITLE",
}

Hide cart

User closes the player cart by clicking on the cart icon from action bar.

  • interactionType structure:{action-origin}:hide-cart
action-origin
  • action-bar
  • cart-overlay
{
interactionType: "cart-overlay:hide-cart",
showId: "SHOW_ID",
orgId: "CUSTOMER_ID",
timeline: {...},
title: "PRODUCT_TITLE",
}

Turn on Closed Caption

User enabled the closed caption (if available).

  • interactionType: closedCaptionsOn
{
interactionType: "closedCaptionsOn",
orgId: "CUSTOMER_ID",
showId: "SHOW_ID",
textTrackAvailable: true,
timeline: {...},
title: "SHOW_TITLE",
}

Turn off Closed Caption

User disabled closed captions.

  • interactionType: closedCaptionsOff
{
interactionType: "closedCaptionsOff",
orgId: "CUSTOMER_ID",
showId: "SHOW_ID",
textTrackAvailable: true,
timeline: {...},
title: "SHOW_TITLE",
}

Timeline

All events' payload includes timeline property. You'll find time-related information about the emitted event within this object.

Live

timeline: {
broadcastId: "AAAAAAA-BBB-CCCCC-DDDDD-EEEEEE",
isLive: true,
relativeTime: 52.033333, // Current watched time of the current *broadcast*
serverTime: "2020-04-14T10:40:55.869Z", // Timestamp of the current scene when it was live
}

Archived

timeline: {
broadcastId: "AAAAAAA-BBB-CCCCC-DDDDD-EEEEEE",
broadcastLength: 119, // Length of the current broadcast
isLive: false,
percentWatchedOfShow: 24.751646978557506,
relativeTime: 52.033333, // Current time of the current *broadcast* in playback
relativeTimeOfShow: 126.975949, // Current time of the whole *show*'s playback
serverTime: "2020-04-14T10:40:55.869Z", // Timestamp of the current scene when it was live
showLength: 513, // Total length of the show (including all broadcasts)
}

A show consists of one or more broadcasts! Playback of an archived show includes all available broadcasts in the player timeline. You can find the borders between different broadcasts(if available) with a yellow point.

broadcasts of a show