StreamsPlaybackEncodingBitmovin Dashboard

Analyze Quickstart Guide for JavaScript v2

Suggest Edits

It can be useful to monitor the trends and behaviors of your users' video playback sessions. For example, you might want to assess the popularity of a video, identify prime viewing times, etc. Metrics like these are tracked using Bitmovin's analytics functionality. This functionality is enabled when you programmatically configure Bitmovin's Player on your webpage and the metrics are viewed using Bitmovin's Analytics Dashboard.

The Playback Quickstart for JavaScript v2 showed how to embed a player into a webpage to stream an encoded video. This Quickstart shows how to modify that player's configuration to produce analytics and how to access the resulting data in the dashboard.

The following subsections describe everything necessary to analyze video playback:

Prerequisites

The following items are required to complete this tutorial:

Step 1 – Locate Your Bitmovin Analytics License Key

In order to generate analytics data from the Bitmovin web player, you must first provide the player with your Bitmovin Analytics key. This key is available via the Bitmovin Analytics Dashboard.

Follow the steps below to locate and copy your key:

  1. Open the Bitmovin Dashboard in a browser and log in.
  2. Navigate to Analytics in the left-hand navigation bar, expand the dropdown, and select Licenses:
240
  1. Click on default-license in the list.
  2. Locate the Analytics Key and hover your mouse over it to display the copy icon:
921
  1. Click the copy icon to copy the key. This key will be used in the next section.

Step 2 – Add Analytics to the Player Configuration

Follow the steps below to add the necessary analytics fields to the player configuration:

  1. Open your index.html file, locate the playerConfig object, and add an analytics object:
<body>
  <!-- STEP 2 - Provide a player container element-->
  <div id="my-player"></div>

  <script>
    //<!-- STEP 3 - Configure and Initialize the player-->
    var playerConfig = {
      "key": "946D8",
      "playback": {
        "muted": true,
        "autoplay": false
      },


      "analytics": {
        "key": "<YOUR-ANALYTICS-KEY>",
        "videoId": "my-first-encoded-video",
        "title": "A descriptive video title",
        "userId": "jsmith1",
        "cdnProvider": "CDN provider",
        "customData1": "My custom data",
        "experimentName": "My A/B Testing Experiment A"
      }

    }
    
    ...
  1. Replace <YOUR-ANALYTICS-KEY> with the analytics key you copied in the previous section.

👍

Tip

The analytics object can optionally contain:

  • up to five custom fields in named customData1, customData2, etc. with custom values (e.g., custom metrics that you'd like to report).
  • a field named experimentName that can be useful for tracking A/B tests.
  1. Populate the remaining fields of the analytics sub object with meaningful values for your video solution. These will appear in the Analytics Dashboard later on. See Analytics Configuration Overview for the full list of metadata fields.

Step 3 – Add Metadata

You can optionally add metadata when loading a video. Bitmovin's analytics will automatically pick up the new metadata and use it.

Follow the steps below to add metadata:

  1. Locate the sourceConfig object in your index.html file.
  2. Add an analytics sub object and enter the metadata fields. See Analytics Configuration Overview for the full list of metadata fields:
<!DOCTYPE html>
<html lang="en">
<head>
  
...
  
</head>
<body>
  <!-- Provide a player container element-->
  <div id="my-player"></div>

  <script>
    
     ...
    
      var sourceConfig = {
        "title": "Default Demo Source Config",
        "description": "Select another example in \"Configure a Source for the player\" to test it here",
        "dash": "https://bmtestbucket2022.s3.us-west-2.amazonaws.com/myvideo/stream.mpd",      
        "poster": "https://bitmovin-a.akamaihd.net/content/MI201109210084_1/poster.jpg",

        "analytics": {
          "title": "New Video Name",
          "videoId": "my-first-encoded-video"
        }
    }
    
    ...

Step 4 – Test the Analytics

Everything is now in place to use analytics.

Follow the steps below to test that the analytics you've configured work correctly:

  1. Save your index.html file.
  2. Ensure your web server is running.
  3. Open your web browser, navigate to http://localhost:8080/, and play the video.
  4. Navigate to Bitmovin's Analytics Dashboard in a different browser window.
  5. Ensure the Analytics dropdown is expanded and select Audience.
  6. Ensure Plays is selected and verify that both the Plays graph and list show at least one video play. The graph in the example below shows several plays:
1179

📘

Note

You may need to click the refresh button on the screen before you can see data.

  1. Navigate to the Breakdown section near the bottom of the screen which shows metadata, select Experiment, and verify that the experimentName configured in Step 2 is present:
916
  1. Select Custom Data 1 further down under Breakdown and verify that the value for customData1 configured in Step 2 is present.
  2. (Optional) Click on the other menus under Audience or under the Analytics dropdown to view other analytics metrics.

This concludes the analytics tutorial. You've now verified that Bitmovin's analytics functionality is working correctly for your video.

Updated almost 2 years ago