Media analytics

What you learn

You're instantiating DIVA Player in your web front-end and relying on DIVA Back Office as the video streaming source.

The goal of this article is to build the simplest front-end to stream a video from the DIVA Back Office with active Conviva and Youbora media analytics.

Before starting

• Ensure the DIVA Back Office instance you rely on is up and running.
• Ask your video engineers team the <video id> and the related <settings URL>.
• Ensure the settings file contains the mediaAnalytics section:

  "mediaAnalytics": {
    "conviva": {
      "enabled": true,
      "customerKey": "<yourCustomerKey>",
      "playerName": "Diva",
      "viewerId": "<yourViewerIdentifier>",
      "cdnName": "Akamai",
      "touchstoneUrl": "https://<yourSubdomain>.conviva.com"
    },
    "youbora": {
      "enabled": true,
      "playerName": "Diva",
      "cdnName": "<yourCDNName>",
      "userName": "<yourViewerIdentifier>",
      "accountCode": "<yourAccountCode>"
    }
  }
  Based on your project requirements, the settings file only contains either the Conviva or Youbora configuration.

Instantiation

Media analytics code

Enrich the Basic instantiation code with the media analytics configuration:

• viewerId: Viewer id passed down to media analytics platforms.
• userName: User name passed down to media analytics platforms.
• playerVersion: Player version passed down to media analytics platforms.
• cdnName: CDN name parameter passed down to media analytics platforms.
• playerType: Player type parameter passed down to media analytics platforms.
• mediaAnalyticsEventHandler: Additional callback for media analytics events.
• customTag: are key-value pairs that will be returned in the properties field.
• customDimensions: are values that must be configured as an ordered array of values (without keys) and will be displayed in the fields param1, param2, param3, ... up to a maximum of 20.

Check the media analytics events for more details.

Code sample

Write the media analytics configuration:

const mediaAnalyticsParam = {
  viewerId: "DivaWebUser",
  userName: "DivaWebUser",
  playerVersion: getDivaVersion(),
  cdnName: "AKAMAI",
  playerType: "player",
  mediaAnalyticsEventHandler: console.log,
  customTag: () => {
    return {
      tag1Name: "<tag1Name>",
      tagNName: "<tagNName>"
    };
  },
  customDimensions: () => {
    return ["<dimension1>", "<dimensionN>"];
  },
};

Finally, add the mediaAnalyticsParam to the DIVA Player instantiation:

<DivaWebBoAdapter
  settingsURL={"<settingsURL>"}
  languageCode={"en-US"}
  config={config}
  mediaAnalyticsParam={mediaAnalyticsParam}
/>

Working sample code (.tsx)

import React from "react";
import { DivaWebBoAdapter } from "@deltatre-vxp/diva-sdk/diva-web-bo-adapter";
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";

const videoId = "<videoId>";

const libs = {
  mux: "https://cdnjs.cloudflare.com/ajax/libs/mux.js/6.2.0/mux.min.js",
  shaka: "https://cdnjs.cloudflare.com/ajax/libs/shaka-player/4.11.2/shaka-player.compiled.js",
  hlsJs: "https://cdn.jsdelivr.net/npm/hls.js@1.5.7",
  googleIMA: false,
  googleDAI: false,
  googleCast: false,
  threeJs: false
};

const config = {
  videoId: videoId,
  libs: libs,
};

const customTags = {
    "userType": "premium",
    "device": "smart_tv",
    "sessionID": "12345ABC"
};

const customDimensionsArray = [
    "premium",       // param1
    "smart_tv",      // param2
    "12345ABC",      // param3
    "EU",            // param4
    "HD",            // param5
];

const mediaAnalyticsParam = {
  viewerId: "DivaWebUser",
  userName: "DivaWebUser",
  playerVersion: getDivaVersion(),
  cdnName: "AKAMAI",
  playerType: "player",
  mediaAnalyticsEventHandler: console.log,
  customTag: () => {
    return customTags;
  },
  customDimensions: () => {
    return customDimensionsArray;
  },
};

const props = {
  settingsUrl: "<Settings URL>",
  languageCode: "en-US",
  languageDictionary: "en-US",
  onDivaBoAdapterError: console.error,
  config: config,
  mediaAnalyticsParam: mediaAnalyticsParam
}

function App() {
  return (
    <DivaWebBoAdapter
      {
      ...props
      }
    />
  );
}

export default App;