Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

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ız gerekmez.

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

Tam hizmetli DAI

Bu kılavuzda, IMA DAI SDK'sı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ı 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. Canlı yayın istekleri bir öğe anahtarı belirtirken VOD istekleri bir İYS kimliği ve video kimliği belirtir. 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'sının Google Ad Manager ayarlarında belirtildiği gibi reklam tanımlayıcılarını 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 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ğinden 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.

Komut satırını kullanarak index.html dosyanızı içeren dizinden şunları çalıştırın:
```
python -m http.server 8000
```
Not: http.server yalnızca Python 3.x sürümünde kullanılabilir.
Web tarayıcısında http://localhost:8000/

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

Video oynatıcı oluşturma

Öncelikle, dai.html dosyasını değiştirerek bir HTML5 video öğesi ve tıklama için kullanılacak bir div oluşturun. Aşağıdaki örnekte IMA DAI SDK'sı içe aktarılmaktadır. 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ısını 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şkenler, sayfa yüklendiğinde çalışacak bir initPlayer() işlevi tanımlayın ve oynat düğmesini tıklandığında 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 oynatmayı devam ettirmek için video öğesinin pause ve start etkinlikleri için oynatıcı kontrollerini göstermek ve gizlemek üzere etkinlik dinleyicileri ayarlayın.

/**
 * 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 reklam grubu istemek için DAI akışlarını istemekten ve yönetmekten sorumlu bir ima.dai.api.StreamManager oluşturun. Tanımlayıcı, reklam tıklamalarını işlemek için bir video öğesi ve 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ği gönderme

Akış isteğinde bulunacak işlevleri tanımlayın. Bu örnekte, hem seç-izle videolar hem de canlı yayınlar için VODStreamRequest sınıfı ve LiveStreamRequest sınıfı örnekleri oluşturan işlevler yer alır. streamRequest örneğini oluşturduktan sonra, yayın 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 hiçbir akış DAI kimlik doğrulama anahtarı kullanılarak korunmadığından apiKey kullanılmaz.

Yayın meta verilerini ayrıştırma (yalnızca canlı yayın)

Canlı yayınlar için, zamanlanmış meta veri etkinliklerini dinleyecek ve IMA'nın reklam araları sırasında reklam etkinlikleri yayınlaması için etkinlikleri StreamManager sınıfına iletecek bir işleyici de eklemeniz gerekir:

/**
 * Set up metadata listeners to pass metadata to the StreamManager.
 */
function listenForMetadata() {
  // Only used in LIVE streams. 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.

Akış etkinliklerini işleme

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

/**
 * 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ı, loadUrl() işlevini kullanarak sağlanan URL'yi yükler ve oynatır.

İş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.