Başlayın

IMA SDK'ları, multimedya reklamlarını 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. Uygulamalar, IMA DAI SDK'larını kullanarak reklam ve içerik videosu için (VOD veya canlı içerik) akış isteğinde bulunur. SDK, daha sonra birleştirilmiş bir video akışı döndürür. Böylece uygulamanızda reklam ve içerik videosu arasında geçiş yapma işlemini yönetmenize gerek kalmaz.

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

IMA DAI'ya genel bakış

IMA DAI'yı uygulamak için bu kılavuzda gösterilen iki ana SDK bileşeni bulunur:

  • StreamRequest: VODStreamRequest veya LiveStreamRequest: Akış isteğini tanımlayan bir nesne. Akış istekleri, seç-izle video veya canlı yayınlar için olabilir. İstekler bir içerik kimliğinin yanı sıra bir 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 işleyen bir nesne. Akış yöneticisi, izleme ping'lerini de gerçekleştirir ve akış ile reklam etkinliklerini yayıncıya yönlendirir.

Ön koşullar

Başlamadan önce aşağıdakilere ihtiyacınız olacaktır:

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

1. Geliştirme sunucusu başlatma

IMA SDK, bağımlıları yüklendiği sayfayla aynı protokol aracılığıyla yüklediğinden, uygulamanızı test etmek için bir web sunucusu kullanmanız gerekir. Yerel geliştirme sunucusu başlatmanın en basit yolu, Python'un yerleşik sunucusunu kullanmaktır.

  1. index.html dosyanızı çalıştıran dizinden bir komut satırı kullanarak:

    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.

2. Basit bir video oynatıcı oluşturma

İlk olarak, tıklama için kullanılacak basit bir HTML5 video öğesi ve bir div oluşturmak üzere dai.html'yi değiştirin. 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 öğesini değiştirin. Son olarak, dai.js'de akış isteği bilgilerini saklayacak değişkenler ve sayfa yüklendiğinde çalıştırılacak 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 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'

// Live stream asset key.
var TEST_ASSET_KEY = "sN_IYUG8STe1ZzhIIE_ksA";

// VOD content source and video IDs.
var TEST_CONTENT_SOURCE_ID = "2528370";
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');
}

3. IMA SDK'yı yükleyin

Ardından, dai.js etiketinden önce dai.html'de 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>

...

4. StreamManager'ı ilk kullanıma hazırlayın ve bir akış isteğinde bulunun

Reklam grubu istemek için DAI akışları isteme ve yönetmeden sorumlu bir ima.dai.api.StreamManager oluşturun. Oluşturucu, bir video öğesi alır ve elde edilen ö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 hem VOD hem de canlı yayınlar için işlevler vardır. Bu işlevler sırasıyla VODStreamRequest ve LiveStreamRequest örneklerini oluşturur ve ardından, streamRequest parametreleriyle streamManager.requestStream() yöntemini çağırır. Canlı yayınlar için zamanlanmış meta veri etkinliklerini dinlemek ve etkinlikleri StreamManager ürününe yönlendirmek için bir işleyici eklemeniz de gerekir. Kullanım alanınıza uygun bir kodla ilgili yorum yapabilir veya kodu iptal edebilirsiniz. Her iki yöntem de isteğe bağlı bir API anahtarı alır. Şifrelenmiş yayın kullanıyorsanız DAI kimlik doğrulama anahtarı oluşturmanız gerekir.

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

5. Akış etkinliklerini yönetme

Son olarak, önemli video etkinlikleri için etkinlik işleyicileri uygulamanız gerekir. Bu basit örnekte, bir onStreamEvent() işlevi çağırılarak LOADED, ERROR, AD_BREAK_STARTED ve AD_BREAK_ENDED etkinlikleri işlenir. Bu işlev, SDK yüklenirken gerekli olan reklam yükleme ve oynatıcı kontrollerini devre dışı bırakmanın yanı sıra akış yüklemesini ve hataları ele alır. Akış yüklendiğinde video oynatıcı, sağlanan bir loadUrl() işlevini kullanarak URL'yi yükler ve oynatır.

Ayrıca, video öğeleri pause ve start etkinlikleri için etkinlik dinleyicileri ayarlamanız gerekir. Böylece, reklam araları sırasında IMA duraklatıldığında kullanıcının oynatmaya devam etmesi sağlanır.

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. Şu anda IMA SDK ile 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.