Integrate the Open Measurement SDK

Suggest Edits

If you want to support ad tracking with the Open Measurement SDK) you can easily do so with the Bitmovin player. The integration depends on the ad module you are using. The Open Measurement SDK is designed to provide third party viewability and verification measurement for ads served to web video and mobile app environments.

Usage with the IMA Module

The google IMA SDK has support for the OMSDK out of the box. The only configurable behavior is the access mode for the ads via omidAccessModeRules which controls the access the ad has to the rest of the page. In the Bitmovin player you can control this via the advertising.trackers.omSdk.onAccessMode config:

var playerConfig = {
  key: 'your-player-key',
  advertising: {
    adBreaks: [
      {
        tag: {
          url: 'https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=',
          type: bitmovin.player.AdTagType.VAST,
        },
        position: 'pre',
      },
    ],
    trackers: {
      omSdk: {
        onAccessMode() {
          return {
            domain: ['INTEGRAL_AD_SCIENCE', 'GOOGLE', 'OTHER'],
            limited: ['MEETRICS', 'MOAT'],
          };
        },
      },
    },
  },
};

Support for this was added in Bitmovin player version 8.187.0, before that the access rules would not be set, but the normal OMSDK support provided by IMA would still work.

Usage with the Bitmovin ad module

Support for the OMSDK together with the Bitmovin ad Module is provided through the module AdvertisingOmSdk. Once you have included the module, you now have to at least configure your partner name and partner version.

Simple HTML page

Here is a minimal example how to setup the player to use the OMSDK in a single html page.

<script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8/modules/bitmovinplayer-advertising-bitmovin.js"></script>
<script type="text/javascript" src="https://cdn.bitmovin.com/player/web/8/modules/bitmovinplayer-advertising-omsdk.js"></script>
<script type="text/javascript">
  // add the modules
  bitmovin.player.Player.addModule(bitmovin.player['advertising-bitmovin'].default);
  bitmovin.player.Player.addModule(bitmovin.player['advertising-omsdk'].default);

  var playerConfig = {
    key: 'your-player-key',
    advertising: {
      adBreaks: [
        {
          tag: {
            url: 'https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=',
            type: bitmovin.player.AdTagType.VAST,
          },
          position: 'pre',
        },
      ],
      trackers: {
        omSdk: {
          partnerName: 'myOmsdkPartnerName',
          partnerVersion: '1.0.0',
          onAccessMode(ad) {
            return {
              limited: [/not-my-domain/],
              full: [/my-domain/],
            };
          },
        },
      },
    },
  };

  var player = new bitmovin.player.Player(document.getElementById('player-container'), playerConfig);
  player.load({
    dash: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
  });
</script>

NPM Package

Or you can use npm to build your own application and take full advantage of the type system:

import {
  Player,
  PlayerConfig,
  SourceConfig,
} from 'bitmovin-player/modules/bitmovinplayer-core';
import * as EngineBitmovinModule from 'bitmovin-player/modules/bitmovinplayer-engine-bitmovin';
import * as MseRendererModule from 'bitmovin-player/modules/bitmovinplayer-mserenderer';
import * as ContainerMp4Module from 'bitmovin-player/modules/bitmovinplayer-container-mp4';
import * as XmlModule from 'bitmovin-player/modules/bitmovinplayer-xml';
import * as DashModule from 'bitmovin-player/modules/bitmovinplayer-dash';
import * as DrmModule from 'bitmovin-player/modules/bitmovinplayer-drm';
import * as ABRModule from 'bitmovin-player/modules/bitmovinplayer-abr';
import * as ContainerTsModule from 'bitmovin-player/modules/bitmovinplayer-container-ts';
import * as AdvertisingModule from 'bitmovin-player/modules/bitmovinplayer-advertising-core';
import * as BitmovinAdModule from 'bitmovin-player/modules/bitmovinplayer-advertising-bitmovin';
import * as OmSdkModule from 'bitmovin-player/modules/bitmovinplayer-advertising-omsdk';
import * as StyleModule from 'bitmovin-player/modules/bitmovinplayer-style';
import * as UiModule from 'bitmovin-player/modules/bitmovinplayer-ui';

Player.addModule(EngineBitmovinModule.default);
Player.addModule(MseRendererModule.default);
Player.addModule(ContainerMp4Module.default);
Player.addModule(XmlModule.default);
Player.addModule(DashModule.default);
Player.addModule(DrmModule.default);
Player.addModule(ABRModule.default);
Player.addModule(ContainerTsModule.default);
Player.addModule(AdvertisingModule.default);
Player.addModule(BitmovinAdModule.default);
Player.addModule(OmSdkModule.default);
Player.addModule(StyleModule.default);
Player.addModule(UiModule.default);

const playerConfig: PlayerConfig = {
  key: 'your-player-key', // TODO: replace with your actual player key
  playback: {
    autoplay: true,
    muted: true,
  },
  analytics: {
    key: 'your-analytics-key', // TODO: replace with your actual analytics key
  },
  location: {
    ui: 'https://cdn.bitmovin.com/player/web/8/bitmovinplayer-ui.js',
    ui_css: 'https://cdn.bitmovin.com/player/web/8/bitmovinplayer-ui.css',
  },
  advertising: {
    adBreaks: [
      {
        tag: {
          url: 'https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=',
          type: AdvertisingModule.AdTagType.VAST,
        },
        position: 'pre',
      } as AdvertisingModule.AdBreakConfig,
    ],
    trackers: {
      omSdk: {
        partnerName: 'myOmsdkPartnerName', // TODO: replace with your own partner name
        partnerVersion: '1.0.0', // TODO: use your own partner version
        onAccessMode(_ad) {
          // verification scripts coming from a domain which matches one of these regexes will be loaded with
          // the appropriate access mode. Default is `full`
          return {
            limited: [/not-my-domain/],
            full: [/my-domain/],
          };
        },
        verificationResources: [
          // optional, this can be used to do additional verification of your ad with the OMSDK
          {
            validationScriptUrl:
              './Validation-Script/omid-validation-verification-script-v1.js',
          },
        ],
      },
    },
  },
};

const player = new Player(document.getElementById('player'), playerConfig);

// if you want to use a HLS source, you will need to include the HLS module as well
var source: SourceConfig = {
  dash: 'https://cdn.bitmovin.com/content/assets/art-of-motion-dash-hls-progressive/mpds/f08e80da-bf1d-4e3d-8899-f0f6155f6efa.mpd',
};

player.load(source).then(() => {
  const loadedModules = Player.getModules().join(', ');
  console.log(`Player1 loading complete, player modules: ${loadedModules}`);
});

{
  "name": "modular-player",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "build": "webpack",
    "build:min": "webpack --mode=production"
  },
  "dependencies": {
    "bitmovin-player": "^8.186.0"
  },
  "devDependencies": {
    "ts-loader": "^9.5.1",
    "typescript": "^5.6.3",
    "webpack": "^5.95.0",
    "webpack-cli": "^5.1.4"
  }
}

const path = require('path');

module.exports = (env, arg) => {
  const minify = Boolean(arg.mode === 'production');

  return {
    mode: 'development',
    entry: ['./ModularPlayer.ts'],
    target: 'web',
    devtool: 'source-map',
    optimization: {
      minimize: minify,
    },
    output: {
      path: path.resolve(__dirname, 'dist'),
      filename: '[name].js',
    },
    module: {
      rules: [
        {
          test: /\.tsx?$/,
          use: 'ts-loader',
          exclude: /node_modules/,
        },
      ],
    },
    resolve: {
      extensions: ['.tsx', '.ts', '.js'],
    },
    plugins: [],
  };
};

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Bitmovin Example</title>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>

<style>
    body {
        background-color: grey;
    }
    #player-wrapper {
      width: 90%;
      margin: 20px auto;
    }
</style>
<body>

    <div id="player-wrapper">
        <div id="player"></div>
    </div>

<script src="./dist/main.js" type="text/javascript"></script>

</body>
</html>

Updated about 2 months ago