Player Metrics

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

Events

  • on-load

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

      Example
      {
      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-play

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

      Example
      {
      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
      }
  • on-stop

    • Emitted when the player stops the the end of the video.

      Example
      {
      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:

The show interactions

muted

User mutes the player.

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

unmuted

User unmutes the player.

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

pause

User pauses video.

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

resume

User restarts video after having paused it.

Example
{
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.

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

chatMessage

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

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

close

User closes the player.

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

showAllProductsOverlay

User opens the products list.

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

hideAllProductsOverlay

User close the products list.

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

  • When the user clicks on a product

    • The origin of the click can be productList or highlight.

    • Based on the player setup, different interaction types may get emitted (see below)

      goToProductNewWindow

      (Default setup) User get navigated to the PDP in a new tab

      Example
      {
      interactionType: "goToProductNewWindow",
      showId: "SHOW_ID",
      orgId: "CUSTOMER_ID",
      timeline: {...},
      vendor: "hydratable-product",
      id: "tpl:xxxxxxxxxx",
      title: "PRODUCT_TITLE",
      sku: "123-M-Black",
      actionOrigin: "productsList"
      }

      goToProductSurfBehind

      (Default setup + Miniplayer enabled) The player gets minimized and the user can surf PDP in the background

      Example
      {
      interactionType: "goToProductSurfBehind",
      showId: "SHOW_ID",
      orgId: "CUSTOMER_ID",
      timeline: {...},
      vendor: "hydratable-product",
      id: "tpl:xxxxxxxxxx",
      title: "PRODUCT_TITLE",
      sku: "123-M-Black",
      actionOrigin: "productsList"
      }

      showProduct

      (Cart-Integrated setup) User see the product details card

      Example
      {
      interactionType: "product-detail:show:in-player",
      showId: "SHOW_ID",
      orgId: "CUSTOMER_ID",
      timeline: {...},
      vendor: "hydratable-product",
      id: "tpl:xxxxxxxxxx",
      title: "PRODUCT_TITLE",
      sku: "123-M-Black",
      actionOrigin: "productsList"
      }

addToCart

User clicks the add-to-cart button.

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

checkout

User clicks the checkout button.

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

Timeline

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

Example

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?
info

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.

alt text


Listening to events

window.addEventListener('bambuser-liveshop-tracking-point', ({detail}) => {
console.log(detail.event); // e.g. "on-load"
console.log(detail.data);
});

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
}

Pick up events data from dataLayer

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

alt text

Requirements:

  • dataLayer object is available

    Make sure that you have the GTM container code included in the landing page that you have the Player embedded in.

  • Add tracking library

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

    <script src="https://dp64mxip2za0c.cloudfront.net/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.