Player Metrics

List of events emitted by the Bambuser player for the purpose of reporting 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 the video starts playing.

      Example

      {
        showId: "SHOW_ID",
        orgId: "CUSTOMER_ID",
        title: "SHOW_TITLE",
        timeline: {...},
        isLive: true,
        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 at 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

The user mutes the player.

Example

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

unmuted

The user unmutes the player.

Example

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

pause

User pauses the video.

Example

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

resume

The user restarts the 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

The 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

The user closes the player.

Example

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

showAllProductsOverlay

The user opens the products list.

Example

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

hideAllProductsOverlay

The user closes 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

The 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

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

NOTE

A show consists of one or more broadcasts! The 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

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 the Purchase Tracking‍ event) from the dataLayer object.

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 library has a very small size of 4kB which does not affect your website performance.

Was this article helpful?