@mux/mux-data-google-ima

Google IMA Extension to Mux Embed Data SDK for Monitoring Client-Side Ads

Mux Data gives you insight into video engagement and Quality of Experience using client-side SDKs for your player.

This Google IMA SDK extension adds monitoring of client-side ads via the Google IMA HTML5 SDK along with your main content played using HTML5 Video, HLS.js, or dash.js. See all supported players here.

Documentation

Quick Start

If you're not already familiar with monitoring your media using mux-embed, it's recommended you read those docs first:

• Monitor HTML5 Video Element
• Monitor HLS.js
• Monitor Dash.js

If you've already used mux-embed before, working with the google-ima extension will feel fairly familiar.

Install the google-ima extended mux-embed

The google-ima package extends mux-embed to add Google IMA specific integrations and monitoring, so instead of installing mux-embed, you can simply install @mux/google-ima.

npm:

npm install --save @mux/mux-data-google-ima

yarn:

yarn add @mux/mux-data-google-ima

cdn:

<script src="https://src.litix.io/google-ima/0/google-ima-mux.js"></script>

Example HTML5 implementation using HLS.js

<script blocking type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
<script type="text/javascript" src="https://src.litix.io/google-ima/0/google-ima-mux.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<!-- Scrtipt for your Google IMA integration -->
<script type="text/javascript" src="./ads.js"></script>
<div id="videoplayer">
  <video id="content" width="960" height="400"></video>
  <div id="adcontainer"></div>
</div>
<script>
  const player_init_time = mux.utils.now();
  // ... code to setup ima integration
  // For examples, see: https://github.com/googleads/googleads-ima-html5
  const imaAdsLoader = codeToSetupIMAAndGetAdsLoader();

  if (Hls.isSupported()) {
    hls = new Hls({ debug: true });
    hls.loadSource('https://stream.mux.com/a4nOgmxGWg6gULfcBbAa00gXyfcwPnAFldF8RdsNyk8M.m3u8');
    hls.attachMedia(mediaEl);
  }

  // Use mux-embed just like you normally would
  mux.monitor('#content', {
    data: {
      video_title: 'My Video Title',
      player_init_time,
      env_key: 'YOUR_MUX_DATA_ENV_KEY',
    },
    hlsjs: hls,
    // Just pass in your IMA AdsLoader reference, just like Hls.js
    imaAdsLoader,
  });

  // ... code to request ads
  // NOTE: While not necessary, unless you're autoplaying, it's recommended
  // that you don't request ads until after monitoring to get more accurate
  // metrics and not miss events in your view
  requestAds();
</script>