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:

Listening to events emitted
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.

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",
}

User taps the share button/icon.

interactionType structure: {action-origin}:{share-type}

share-type:

share

share-native

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",
}

{
  interactionType: "action-bar:share-native",
  actionSuccess: true,
  orgId: "CUSTOMER_ID",
  shareUuid: "xxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxx"
  showId: "SHOW_ID",
  timeline: {...},
  title: "SHOW_TITLE",
}

Native share device discrepency

Android - share-native is triggered once user clicks on one of the below options. (ex: clicking on Facebook icon in the bambuser player iOS - share-native is triggered once user interacts with the one of the below options. (ex: sharing the link through Facebook)

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

twitter

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

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",
 }

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)

show-product-detail-none

{
  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",
}

Open Poll

User opened a poll.

interactionType: openPoll

{
  interactionType: "openPoll",
  orgId: "CUSTOMER_ID",
  pollId: "POLL_ID",
  showId: "SHOW_ID",
  timeline: {...},
  title: "SHOW_TITLE",
}

Poll Vote

User voted in a poll.

interactionType: pollVote

{
  interactionType: "pollVote",
  orgId: "CUSTOMER_ID",
  pollId: "POLL_ID",
  showId: "SHOW_ID",
  timeline: {...},
  title: "SHOW_TITLE",
}

Close Poll

User closed the poll modal (only desktop).

interactionType: closePollModal

{
  interactionType: "closePollModal",
  orgId: "CUSTOMER_ID",
  pollId: "POLL_ID",
  showId: "SHOW_ID",
  timeline: {...},
  title: "SHOW_TITLE",
}

User closed the poll drawer (only mobile).

interactionType: closePollDrawer

{
  interactionType: "closePollDrawer",
  orgId: "CUSTOMER_ID",
  pollId: "POLL_ID",
  showId: "SHOW_ID",
  timeline: {...},
  title: "SHOW_TITLE",
}

Replay

User clicked replay after the show ends.

interactionType: replay

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

Timestamp

User clicked on timestamp. Only available if you have cart integration.

interactionType: timestamp-link

{
  interactionType: "timestamp-link",
  orgId: "CUSTOMER_ID",
  showId: "SHOW_ID",
  timeline: {...},
  title: "SHOW_TITLE",
}

Custom CTA link on end curtain

User clicked on the custom CTA link on the end curtain.

interactionType: ended-curtain-cta

{
  interactionType: "ended-curtain-cta",
  orgId: "CUSTOMER_ID",
  showId: "SHOW_ID",
  timeline: {...},
  title: "SHOW_TITLE",
  url: "CUSTOM_URL"
}

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

What is a broadcast? What is a show?

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.

Listening to events​

Picking up events data from dataLayer​

Events​

on-load​

on-pending​

on-play​

on-stop​

on-interaction​

Interactions​

Mute the player​

Unmute the player​

Pause a show​

Resume a show​

Like​

Share​

share-type:​

action-origin:​

option:​

Add to Calender​

action-origin:​

option:​

Send chat message​

Close the player​

Minimize the player​

Maximizes the player​

Show product list​

Hide product list​

Product click​

Add to cart​

Checkout​

Show Cart​

Hide cart​

Turn on Closed Caption​

Turn off Closed Caption​

Open Poll​

Poll Vote​

Close Poll​

Replay​

Timestamp​

Custom CTA link on end curtain​

Timeline​

Live​

Archived​

Listening to events

Picking up events data from `dataLayer`

Events

`on-load`

`on-pending`

`on-play`

`on-stop`

`on-interaction`

Interactions

Mute the player

Unmute the player

Pause a show

Resume a show

Like

Share

share-type:

action-origin:

option:

Add to Calender

action-origin:

option:

Send chat message

Close the player

Minimize the player

Maximizes the player

Show product list

Hide product list

Product click

Add to cart

Checkout

Show Cart

Hide cart

Turn on Closed Caption

Turn off Closed Caption

Open Poll

Poll Vote

Close Poll

Replay

Timestamp

Custom CTA link on end curtain

Timeline

`Live`

`Archived`