IMA DAI SDK'sını kullanmaya başlama

IMA SDK'ları, multimedya reklamları web sitelerinize ve uygulamalarınıza entegre etmenizi kolaylaştırır. IMA SDK'ları, VAST ile uyumlu herhangi bir reklam sunucusundan reklam isteyebilir 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 yayın isteği gönderir. Ardından SDK, birleştirilmiş bir video akışı döndürür. Böylece uygulamanızda reklam ve içerik videosu arasında geçiş yapmanıza gerek kalmaz.

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

Tam kapsamlı DAI

Bu kılavuzda, IMA DAI SDK'sının basit 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ı uygulamak, bu kılavuzda gösterildiği gibi iki ana bileşenden oluşur:

  • StreamRequest: VODStreamRequest veya LiveStreamRequest: Akış isteğini tanımlayan bir nesne. Akış istekleri, seç-izle videolar veya canlı yayınlar için olabilir. İstekler, bir içerik kimliğinin yanı sıra API anahtarı veya kimlik doğrulama jetonu ve diğer parametreleri belirtir.
  • StreamManager: Dinamik reklam ekleme akışlarını ve DAI arka ucuyla etkileşimleri yöneten bir nesne. Yayın yöneticisi, izleme ping'lerini de yönetir ve yayın ile reklam etkinliklerini yayıncıya iletir.

Ö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'sı, yüklendikleri sayfayla aynı protokolü kullanarak bağımlılıkları yüklediği için uygulamanızı test etmek için bir web sunucusu kullanmanız gerekir. Yerel bir geliştirme sunucusunu başlatmanın hızlı bir yolu, Python'un yerleşik sunucusunu kullanmaktır.

  1. Komut satırını kullanarak index.html dosyanızı içeren dizinden şunları çalıştırın:

    python -m http.server 8000

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

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

Basit bir video oynatıcı oluşturma

Öncelikle, basit bir HTML5 video öğesi ve tıklama için kullanılacak bir div oluşturmak üzere dai.html dosyasını değiştirin. Ayrıca, dai.css ve dai.js dosyalarını yüklemek ve hls.js video oynatıcısını içe aktarmak için gerekli etiketleri de ekleyin. Ardından, sayfa öğelerinin boyutunu ve konumunu belirtmek için dai.css dosyasını değiştirin. Son olarak, dai.js dosyasında, akış isteği bilgilerini tutacak değişkenler ve sayfa yüklendiğinde çalışacak bir initPlayer() işlevi tanımlayın.

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>
<body onLoad="initPlayer()">
  <h2>IMA DAI SDK DAI Demo (HLS.JS)</h2>
    <video id="video"></video>
    <div id="ad-ui"></div>
</body>
</html>

dai.css

#video,
#ad-ui {
  width: 640px;
  height: 360px;
  position: absolute;
  top: 35px;
  left: 0;
}

#ad-ui {
  cursor: pointer;
}

dai.js

var BACKUP_STREAM =
    'https://storage.googleapis.com/interactive-media-ads/media/bbb.m3u8'

// Livestream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

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

var hls = new Hls(); // hls.js video player
var videoElement;
var adUiElement;
var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
}

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.

dai.html

<html>
<head>
  <script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
  <script type="text/javascript" src="//imasdk.googleapis.com/js/sdkloader/ima3_dai.js"></script>
  <script src="dai.js"></script>
  <link rel="stylesheet" href="dai.css" type="text/css">
</head>

StreamManager'ı başlatma ve akış isteği gönderme

Bir reklam grubu istemek için DAI akışlarını istemekten ve yönetmekten sorumlu olan bir ima.dai.api.StreamManager oluşturun. Oluşturucu bir video öğesi alır ve oluşturulan örnek, reklam tıklamalarını işlemek için bir reklam kullanıcı arayüzü öğesi alır.

Ardından, akış isteğinde bulunan işlevleri tanımlayın. Bu örnekte, sırasıyla VODStreamRequest ve LiveStreamRequest örnekleri oluşturan ve ardından streamRequest parametreleriyle streamManager.requestStream() işlevini çağıran hem seç-izle videolar hem de canlı yayınlar için işlevler yer alır. Canlı yayınlar için zamanlanmış meta veri etkinliklerini dinleyecek ve etkinlikleri StreamManager'e iletecek bir işleyici de eklemeniz gerekir. Kullanım alanınıza uyacak şekilde kodu yorumlayabilir veya koddaki yorumları kaldırabilirsiniz. Her iki yöntem de isteğe bağlı bir API anahtarı kullanır. Korunan bir akış kullanıyorsanız DAI kimlik doğrulama anahtarı oluşturmanız gerekir.

Bu örnekteki hiçbir akış korunmadığından apiKey kullanılmaz.

dai.js

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement)

  // Timed metadata is only used for LIVE streams.
  hls.on(Hls.Events.FRAG_PARSING_METADATA, function(event, data) {
    if (streamManager && data) {
      // For each ID3 tag in the metadata, 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);
      });
    }
  });

  requestVODStream(TEST_CONTENT_SOURCE_ID, TEST_VIDEO_ID, null);
  // Uncomment the line below and comment out the one above to request a
  // LIVE stream instead of a VOD stream.
  //requestLiveStream(TEST_ASSET_KEY, null);
}

function requestVODStream(cmsId, videoId, apiKey) {
  var streamRequest = new google.ima.dai.api.VODStreamRequest();
  streamRequest.contentSourceId = cmsId;
  streamRequest.videoId = videoId;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

function requestLiveStream(assetKey, apiKey) {
  var streamRequest = new google.ima.dai.api.LiveStreamRequest();
  streamRequest.assetKey = assetKey;
  streamRequest.apiKey = apiKey;
  streamManager.requestStream(streamRequest);
}

Akış etkinliklerini işleme

Son olarak, önemli video etkinlikleri için etkinlik dinleyicileri uygulamanız gerekir. Bu basit örnekte, onStreamEvent() işlevi çağrılarak LOADED, ERROR, AD_BREAK_STARTED ve AD_BREAK_ENDED etkinlikleri ele alınmaktadır. Bu işlev, oynatma listesinin yüklenmesini ve hatalarını yönetir. Ayrıca, reklam oynatılırken oynatıcı kontrollerini devre dışı bırakır. Bu, SDK tarafından zorunlu kılınmıştır. Akış yüklendiğinde video oynatıcı, loadUrl() işlevini kullanarak sağlanan URL'yi yükler ve oynatır.

Ayrıca, IMA reklam araları sırasında duraklatıldığında kullanıcının oynatmayı devam ettirmesine izin vermek için video öğesinin pause ve start etkinlikleri için etkinlik dinleyicileri de ayarlayabilirsiniz.

DAI ile çalışmak için özel oynatıcınızın, canlı yayınlar için ID3 etkinliklerini örnek kodda gösterildiği gibi IMA DAI SDK'larına iletmesi gerekir.

dai.js

var isAdBreak;

function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(videoElement, adUiElement);
  videoElement.addEventListener('pause', onStreamPause);
  videoElement.addEventListener('play', onStreamPlay);

  streamManager.addEventListener(
    [google.ima.dai.api.StreamEvent.Type.LOADED,
     google.ima.dai.api.StreamEvent.Type.ERROR,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_STARTED,
     google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED],
    onStreamEvent,
    false);
...
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');
      isAdBreak = true;
      videoElement.controls = false;
      adUiElement.style.display = 'block';
      break;
    case google.ima.dai.api.StreamEvent.Type.AD_BREAK_ENDED:
      console.log('Ad Break Ended');
      isAdBreak = false;
      videoElement.controls = true;
      adUiElement.style.display = 'none';
      break;
    default:
      break;
  }
}

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();
  });
}

function onStreamPause() {
  console.log('paused');
  if (isAdBreak) {
    videoElement.controls = true;
    adUiElement.style.display = 'none';
  }
}

function onStreamPlay() {
  console.log('played');
  if (isAdBreak) {
    videoElement.controls = false;
    adUiElement.style.display = 'block';
  }
}

İşte bu kadar. Artık IMA DAI SDK'sını kullanarak reklam isteğinde bulunuyor ve reklamları görüntülüyorsunuz. Daha gelişmiş SDK özellikleri hakkında bilgi edinmek için diğer kılavuzları veya GitHub'daki örnekleri inceleyin.