Skip to main content

Media analytics

What you learn​

You're instantiating DIVA Player in your web front-end and relying on third party video streaming source.

The goal of this article is to build the simplest front-end to stream a video from your video production with active media analytics provider such as Conviva and Youbora media analytics.

Media Analytic event behavior​

DIVA Player provides callback functions to customize the media analytic events payload to send to the media analytics provider.

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: Custom tag generator.
  • customDimensions: Custom dimensions.

Code sample​

Instantiate the media analytics plugin with its configuration:

import { ConvivaPlugin, ConvivaDeviceCategory, ConvivaDeviceType, VideoMetadataClean } from '@deltatre-vxp/diva-sdk/diva-web-conviva-plugin';

const mediaAnalyticsPlugin = new ConvivaPlugin();
mediaAnalyticsPlugin.init({
  playerVersion: "x.y.z",
  customerKey: "<conviva customer key>";
  playerName: "DIVA Player",;
  viewerId: "<user viewerId>",
  cdnName: "<cdn name>",
  customTagGenerator: (videoMetadata: VideoMetadataClean) => ({
    assetState: videoMetadata.assetState ?? '[unknown]',
    eventId: videoMetadata.eventId ?? '',
    is24_7: `${videoMetadata.assetState === 'live' && videoMetadata.dvrType === 'none'}`,
    is360: `${!!videoMetadata.stereoMode && videoMetadata.stereoMode !== 'none'}`,
    platform: CONVIVA_PLATFORM ?? '',
    spoilerMode: videoMetadata?.behaviour?.spoilerMode ?? '[unknown]',
    videoId: videoMetadata.videoId,
    videoTitle: videoMetadata.title ?? '[unknown]',
  }),
  customDeviceMetadataGenerator: () => ({
    DeviceBrand: 'Apple',
    DeviceManufacturer: 'Apple',
    DeviceModel: 'MacBookPro',
    DeviceType: ConvivaDeviceType.DESKTOP,
    OperatingSystemName: 'WINDOWS',
    OperatingSystemVersion: '8',
    DeviceCategory: ConvivaDeviceCategory.WINDOWS_DEVICE,
  }),
  gatewayUrl: "<conviva gateway url>",
  isWebTV: false,
});

Then connect the media analytics plugin to the DIVA Player:

import { DivaWebComponent } from "@deltatre-vxp/diva-sdk/diva-web-sdk";
import type { DivaConfiguration, VideoMetadata, VideoMetadataClean } from "@deltatre-vxp/diva-sdk/diva-web-sdk";
// Import SDK style
import "@deltatre-vxp/diva-sdk/diva-web-sdk/index.min.css";

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: 'https://imasdk.googleapis.com/js/sdkloader/ima3.js',
  googleDAI: 'https://imasdk.googleapis.com/js/sdkloader/ima3_dai.js',
  googleCast: 'https://www.gstatic.com/cv/js/sender/v1/cast_sender.js?loadCastFramework=1',
  threeJs: 'https://cdnjs.cloudflare.com/ajax/libs/three.js/0.148.0/three.min.js',
};

const config: DivaConfiguration = {
  videoId: "<video id>",
  libs: libs,
  setting: {
    general: {
      culture: 'en-GB',
  }
  }, 
  dictionary: {
  messages: {},
  },
  videoMetadataProvider: async (
    videoId: string,
    currentVideoMetadata?: VideoMetadataClean,
    playbackState?: {
      chromecast?: boolean | undefined;
    }): Promise<VideoMetadata> => {
    return {
      "title": "Video Title",
      "sources": [
        {
        "uri": "<stream URL>",
        "format": "HLS"
        }
      ],
      "videoId": "<video id>",
    };
  },
  onMediaAnalyticEvent(event) {
    mediaAnalyticsPlugin.handleEvent(event);
  },
};

export const App = () => {
  return <DivaWebComponent config={config} />;
};