DAI için IMA SDK'sını ayarlama

Platform seçin: HTML5 Android iOS tvOS Cast Roku

IMA SDK'ları, multimedya reklamları web sitelerinize ve uygulamalarınıza entegre etmeyi kolaylaştırır. IMA SDK'ları, herhangi bir VAST uyumlu reklam sunucusundan reklam isteğinde bulunabilir ve uygulamalarınızda reklam oynatmayı yönetebilir. IMA DAI SDK'ları ile uygulamalar, reklam ve içerik videosu (VOD veya canlı içerik) için bir akış isteğinde bulunur. SDK daha sonra birleşik bir video akışı döndürür. Böylece uygulamanızda reklam ve içerik videosu arasında geçişi yönetmeniz gerekmez.

İlgilendiğiniz DAI çözümünü seçin

Tam kapsamlı DAI

Bu kılavuzda, IMA DAI SDK'nın bir video oynatıcı uygulamasına nasıl entegre edileceği gösterilmektedir. Tamamlanmış bir örnek entegrasyonu görüntülemek veya takip etmek istiyorsanız GitHub'dan basit örneği indirin.

IMA DAI'ye genel bakış

IMA DAI SDK'sını uygulama işlemi, bu kılavuzda gösterildiği gibi iki ana bileşenden oluşur:

  • StreamRequest: VODStreamRequest veya LiveStreamRequest olmalıdır: Bir yayın isteğini tanımlayan nesne. Akış istekleri, seç-izle videolar veya canlı yayınlar için olabilir. Canlı yayın isteklerinde öğe anahtarı belirtilirken VOD isteklerinde CMS kimliği ve video kimliği belirtilir. Her iki istek türü de isteğe bağlı olarak, belirtilen akışlara erişmek için gereken bir API anahtarı ve IMA SDK'nın reklam tanımlayıcılarını Google Ad Manager ayarlarında belirtildiği şekilde işlemesi için bir Google Ad Manager ağ kodu içerebilir.
  • StreamManager: Dinamik reklam ekleme akışlarını ve DAI arka ucuyla etkileşimleri işleyen bir nesne. Akış yöneticisi, izleme ping'lerini de işler ve akış ile reklam etkinliklerini yayıncıya yönlendirir.

Ön koşullar

  • Üç boş dosya
    • dai.html
    • dai.css
    • dai.js
  • Bilgisayarınızda yüklü Python veya test için kullanılacak bir web sunucusu

Geliştirme sunucusu başlatma

IMA DAI SDK, bağımlılıkları yüklendiği sayfayla aynı protokolü kullanarak yüklediğinden uygulamanızı test etmek için bir web sunucusu kullanmanız gerekir. Yerel bir geliştirme sunucusu başlatmanın hızlı bir yolu, Python'ın yerleşik sunucusunu kullanmaktır.

  1. index.html dosyanızı içeren dizinden bir komut satırı kullanarak şunu çalıştırın:

    python -m http.server 8000

  2. Web tarayıcısında http://localhost:8000/ adresine gidin.

    Apache HTTP Server gibi başka bir web sunucusu da kullanabilirsiniz.

Video oynatıcı oluşturma

Öncelikle, HTML5 video öğesi ve tıklama için kullanılacak bir div oluşturmak üzere dai.html dosyasını değiştirin. Aşağıdaki örnekte IMA DAI SDK'sı içe aktarılıyor. Daha fazla bilgi için IMA DAI SDK'sını içe aktarma başlıklı makaleyi inceleyin.

Ayrıca, dai.css ve dai.js dosyalarını yüklemek ve hls.js video oynatıcıyı içe aktarmak için gerekli etiketleri ekleyin. Ardından, sayfa öğelerinin boyutunu ve konumunu belirtmek için dai.css öğesini değiştirin. Son olarak, dai.js içinde akış isteği bilgilerini tutacak değişkenleri, sayfa yüklendiğinde çalışacak bir initPlayer() işlevini tanımlayın ve oynatma düğmesini tıklama üzerine akış isteğinde bulunacak şekilde ayarlayın.

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA SDK DAI Demo (HLS.JS)</h2>
  <video id="video"></video>
  <div id="adUi"></div>
  <button id="play-button">Play</button>
</body>
</html>


dai.html
 
#video,
#adUi {
  width: 640px;
  height: 360px;
  position: absolute;
  top: 35px;
  left: 0;
}

#adUi {
  cursor: pointer;
}

#play-button {
  position: absolute;
  top: 400px;
  left: 15px;
}

dai.css
 
// This stream will be played if ad-enabled playback fails.
const BACKUP_STREAM =
    'http://storage.googleapis.com/testtopbox-public/video_content/bbb/' +
    'master.m3u8';

// Live stream asset key.
// const TEST_ASSET_KEY = 'c-rArva4ShKVIAkNfy6HUQ';

// VOD content source and video IDs.
const TEST_CONTENT_SOURCE_ID = '2548831';
const TEST_VIDEO_ID = 'tears-of-steel';

// Ad Manager network code.
const NETWORK_CODE = '21775744923';
const API_KEY = null;

// StreamManager which will be used to request ad-enabled streams.
let streamManager;

// hls.js video player
const hls = new Hls();

// Video element
let videoElement;

// Ad UI element
let adUiElement;

// The play/resume button
let playButton;

// Whether the stream is currently in an ad break.
let adBreak = false;

/**
 * Initializes the video player.
 */
function initPlayer() {
  videoElement = document.getElementById('video');
  playButton = document.getElementById('play-button');
  adUiElement = document.getElementById('adUi');
  createStreamManager();
  listenForMetadata();

  // Show the video controls when the video is paused during an ad break,
  // and hide them when ad playback resumes.
  videoElement.addEventListener('pause', () => {
    if (adBreak) {
      showVideoControls();
    }
  });
  videoElement.addEventListener('play', () => {
    if (adBreak) {
      hideVideoControls();
    }
  });

  playButton.addEventListener('click', () => {
    console.log('initiatePlayback');
    requestStream();
    // Hide this play button after the first click to request the stream.
    playButton.style.display = 'none';
  });
}
dai.js

Duraklatılmış reklam araları sırasında oynatmaya devam etmek için video öğesinin pause ve start etkinlikleri için etkinlik dinleyicileri ayarlayarak oynatıcı kontrollerini gösterin ve gizleyin.

/**
 * Hides the video controls.
 */
function hideVideoControls() {
  videoElement.controls = false;
  adUiElement.style.display = 'block';
}

/**
 * Shows the video controls.
 */
function showVideoControls() {
  videoElement.controls = true;
  adUiElement.style.display = 'none';
}
dai.js

IMA DAI SDK'sını yükleme

Ardından, dai.html dosyasında dai.js etiketinden önce bir komut dosyası etiketi kullanarak IMA çerçevesini ekleyin.

<script src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
dai.html

StreamManager'ı başlatma

Bir dizi reklam istemek için ima.dai.api.StreamManager oluşturun. Bu, DAI yayınlarını istemek ve yönetmekten sorumludur. Oluşturucu, reklam tıklamalarını işlemek için bir video öğesi ve bir reklam kullanıcı arayüzü öğesi alır.

/**
 * Create the StreamManager and listen to stream events.
 */
function createStreamManager() {
  streamManager =
      new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.LOADED, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.ERROR, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED, onStreamEvent);
  streamManager.addEventListener(
      google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED, onStreamEvent);
}
dai.js

Akış isteğinde bulunma

Akış isteğinde bulunmak için işlevler tanımlayın. Bu örnekte hem seç-izle videoları hem de canlı yayınlar için işlevler yer almaktadır. Bu işlevler, VODStreamRequest sınıfının ve LiveStreamRequest sınıfının örneklerini oluşturur. streamRequest örneğinizi aldıktan sonra akış isteği örneğiyle streamManager.requestStream() yöntemini çağırın.

/**
 * Makes a stream request and plays the stream.
 */
function requestStream() {
  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, NETWORK_CODE, API_KEY);
  // Uncomment line below and comment one above to request a LIVE stream.
  // requestLiveStream(TEST_ASSET_KEY, NETWORK_CODE, API_KEY);
}

/**
 * Requests a Live stream with ads.
 * @param {string} assetKey
 * @param {?string} networkCode
 * @param {?string} apiKey
 */
function requestLiveStream(assetKey, networkCode, apiKey) {
  const streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.networkCode = networkCode;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

/**
 * Requests a VOD stream with ads.
 * @param {string} cmsId
 * @param {string} videoId
 * @param {?string} networkCode
 * @param {?string} apiKey
 */
function requestVODStream(cmsId, videoId, networkCode, apiKey) {
  const streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.networkCode = networkCode;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}
dai.js

Her iki akış isteği yöntemi de isteğe bağlı bir API anahtarı alır. Korunan bir akış kullanıyorsanız DAI kimlik doğrulama anahtarı oluşturmanız gerekir. Daha fazla bilgi için DAI video akışı isteklerinin kimliğini doğrulama başlıklı makaleyi inceleyin. Bu örnekteki akışlardan hiçbiri DAI kimlik doğrulama anahtarı kullanılarak korunmadığı için apiKey kullanılmaz.

Akış meta verilerini ayrıştırma

Ayrıca, zamanlanmış meta veri etkinliklerini dinlemek ve etkinlikleri, reklam araları sırasında reklam etkinliklerinin yayınlanması için IMA'ya yönelik StreamManager sınıfına iletmek üzere bir işleyici eklemeniz gerekir:

/**
 * Set up metadata listeners to pass metadata to the StreamManager.
 */
function listenForMetadata() {
  // Timed metadata is handled differently by different video players, and the
  // IMA SDK provides two ways to pass in metadata,
  // StreamManager.processMetadata() and StreamManager.onTimedMetadata().
  //
  // Use StreamManager.onTimedMetadata() if your video player parses
  // the metadata itself.
  // Use StreamManager.processMetadata() if your video player provides raw
  // ID3 tags, as with hls.js.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in our metadata, we pass in the type - ID3, the
      // tag data (a byte array), and the presentation timestamp (PTS).
      data.samples.forEach(function(sample) {
        streamManager.processMetadata('ID3', sample.data, sample.pts);
      });
    }
  });
}
dai.js

Bu kılavuzda akış oynatma için hls.js oynatıcı kullanılmaktadır ancak meta veri uygulamanız, kullandığınız oynatıcının türüne bağlıdır.

Yayın etkinliklerini işleme

Önemli video etkinlikleri için etkinlik işleyicileri uygulayın. Bu örnekte, LOADED, ERROR, AD_BREAK_STARTED ve AD_BREAK_ENDED etkinlikleri bir onStreamEvent() işlevi çağrılarak işlenir. Bu işlev, akış yükleme, akış hataları ve reklam oynatma sırasında oynatıcı kontrollerinin devre dışı bırakılması gibi IMA SDK'nın gerektirdiği işlemleri gerçekleştirir.

/**
 * Responds to a stream event.
 * @param {!google.ima.dai.api.StreamEvent} e
 */
function onStreamEvent(e) {
  switch (e.type) {
    case google.ima.dai.api.StreamEvent.Type.LOADED:
      console.log('Stream loaded');
      loadUrl(e.getStreamData().url);
      break;
    case google.ima.dai.api.StreamEvent.Type.ERROR:
      console.log('Error loading stream, playing backup stream.' + e);
      loadUrl(BACKUP_STREAM);
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED:
      console.log('Ad Break Started');
      adBreak = true;
      hideVideoControls();
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      adBreak = false;
      showVideoControls();
      break;
    default:
      break;
  }
}

/**
 * Loads and plays a Url.
 * @param {string} url
 */
function loadUrl(url) {
  console.log('Loading:' + url);
  hls.loadSource(url);
  hls.attachMedia(videoElement);
  hls.on(Hls.Events.MANIFEST_PARSED, function() {
    console.log('Video Play');
    videoElement.play();
  });
}
dai.js

Akış yüklendiğinde video oynatıcı, sağlanan URL'yi loadUrl() işlevini kullanarak yükler ve oynatır.

İşte bu kadar. Artık IMA DAI SDK ile reklam isteğinde bulunup reklam görüntüleyebilirsiniz. Daha gelişmiş SDK özellikleri hakkında bilgi edinmek için diğer kılavuzlara veya GitHub'daki örneklere göz atın.