Ürünlerimiz hakkında görüşlerinizi paylaşmak ve geri bildirimde bulunmak için Google Advertising and Measurement Community sunucusundaki resmi Ad Manager Discord kanalına katılın.

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

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ş yapmayı yönetmeniz gerekmez.

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

Google Cloud Video Stitcher API'ye kaydedilen canlı yayınları oynatma

Bu kılavuzda, Google Cloud Video Stitcher API'ye kaydedilen bir etkinlik için canlı yayın isteğinde bulunmak ve canlı yayın oynatmak üzere HTML5 için IMA DAI SDK'sının nasıl kullanılacağı ve oynatma sırasında nasıl reklam arası ekleneceği gösterilmektedir.

Bu kılavuz, IMA DAI için Başlangıç kılavuzundaki temel örneği genişletir.

Diğer platformlarla entegrasyon veya IMA istemci tarafı SDK'larını kullanma hakkında bilgi edinmek için Interactive Media Ads SDK'ları başlıklı makaleyi inceleyin.

Tamamlanmış bir örnek entegrasyonu görüntülemek veya takip etmek için HLS ya da DASH için Cloud Video Stitcher örneğini indirin.

Google Cloud projesi oluşturun

Google Cloud projesi oluşturun ve hizmet hesaplarını projeye erişecek şekilde yapılandırın.

Kendi içerik canlı yayınınızı veya test canlı yayını kullanarak canlı yayın etkinliği için yapılandırma oluşturun. Bu kılavuzda HLS yayını kullanıldığı varsayılmaktadır.

IMA SDK'da kullanılmak üzere aşağıdaki değişkenleri girin:

Konum

Canlı yapılandırmanızın oluşturulduğu Google Cloud bölgesi: LOCATION

Proje numarası

Video Stitcher API'nin kullanıldığı Google Cloud proje numarası: PROJECT_NUMBER

OAuth jetonu

Video Stitcher kullanıcı rolüne sahip bir hizmet hesabının kısa ömürlü OAuth jetonu:

OAUTH_TOKEN

Hizmet hesapları için kısa ömürlü kimlik bilgileri oluşturma hakkında daha fazla bilgi edinin. OAuth jetonu, süresi dolmadığı sürece birden fazla istekte yeniden kullanılabilir.

Ağ kodu

Reklam isteğinde bulunmak için Ad Manager ağ kodu: NETWORK_CODE

Canlı yapılandırma kimliği: Canlı yayın etkinliğinizi oluştururken belirttiğiniz canlı yapılandırma kimliği: LIVE_CONFIG_ID
Özel öğe anahtarı: Video Stitcher API ile canlı yayın etkinliği için yapılandırma oluşturma işlemi sırasında oluşturulan Ad Manager özel öğe anahtarı: CUSTOM_ASSET_KEY

Geliştirme ortamı yapılandırma

IMA örnek uygulamaları yalnızca HLS akışı isteklerini gösterir. VideoStitcherLiveStreamRequest sınıfını oluştururken DASH akışlarını kullanmaya devam edebilirsiniz. DASH ile uyumlu oynatıcınızı ayarlarken video oynatıcınızın ilerleme etkinlikleri için bir dinleyici ayarlamanız gerekir. Bu dinleyici, videonun meta verilerini StreamManager.processMetadata()'ye sağlayabilir. Bu işlev üç parametre alır:

type: HLS yayınları için 'ID3', DASH yayınları için 'urn:google:dai:2018' olarak ayarlanması gereken bir dize.
data: DASH etkinlik mesajları için bu, mesaj verileri dizesidir.
timestamp: DASH akışları için etkinlik mesajının başlangıç zamanını gösteren bir sayıdır.

Meta verileri, oynatıcı etkinlikleriniz sağlayabildiği sürece en kısa sürede ve en sık şekilde gönderin. Meta veriler eksikse veya doğru değilse IMA DAI SDK, reklam etkinliklerini tetiklemeyebilir. Bu da reklam etkinliklerinin yanlış şekilde raporlanmasına neden olur.

HTML5 için IMA DAI örneklerini indirin ve HLS.js Simple örneğini yeni bir klasöre çıkarın. Bu örnek, test amacıyla yerel olarak barındırabileceğiniz bir web uygulamasıdır.

Örneği yerel olarak barındırmak için yeni klasöre gidin ve bir web sunucusu başlatmak üzere aşağıdaki Python komutunu çalıştırın:

python3 -m http.server 8000

http.server yalnızca Python 3.x'te kullanılabilir. Apache HTTP Server veya Node JS gibi başka bir web sunucusu da kullanabilirsiniz.

Bir web tarayıcısı açıp localhost:8000 adresine giderek video oynatıcıyı görün. Tarayıcınız HLS.js kitaplığını desteklemelidir.

Her şey düzgün çalışıyorsa video oynatıcıdaki oynat düğmesini tıkladığınızda kısa bir reklamın ardından "Tears of Steel" adlı kısa film başlar. Bu içerik, seç-izle video (VOD) akışı kullanılarak yayınlanır.

Canlı yayın isteğinde bulunma

Örnek VOD akışını canlı akışınızla değiştirmek için Google Ad Manager ile otomatik olarak bir reklam oturumu oluşturan VideoStitcherLiveStreamRequest sınıfını kullanın. İzleme ve hata ayıklama için oluşturulan DAI oturumlarını bulmak üzere Google Ad Manager kullanıcı arayüzünü kullanabilirsiniz.

Mevcut örnekte, VOD akışı veya canlı yayın isteğinde bulunma işlevleri yer alıyor. Google Cloud Video Stitcher API ile çalışması için VideoStitcherLiveStreamRequest nesnesi döndüren yeni bir işlev eklemeniz gerekir.

Aşağıda bununla ilgili bir örnek verilmiştir:

// StreamManager which will be used to request ad-enabled streams.
let streamManager;
...
function initPlayer() {
  videoElement = document.getElementById('video');
  adUiElement = document.getElementById('adUi');
  streamManager = new google.ima.dai.api.StreamManager(
    videoElement,
    adUiElement
  );
  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);

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

  videoElement.addEventListener('pause', () => {
    playButton.style.display = 'block';
  });

  playButton.addEventListener('click', initiatePlayback);
}

function initiatePlayback() {
  requestVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...

function requestVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherLiveStreamRequest();
  streamRequest.liveStreamEventId = 'LIVE_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';
  streamRequest.customAssetKey = 'CUSTOM_ASSET_KEY';

  streamManager.requestStream(streamRequest);
}

Yerel test için canlı yayın dosyaları bir Cloud Storage paketinde bulunuyorsa kaynak http://localhost:8000 için CORS'u etkinleştirmeniz gerekir.

Sayfayı tekrar yükleyin. Ardından, özel canlı yayınlar isteyebilir ve oynatabilirsiniz.

(İsteğe bağlı) Yayın oturumu seçenekleri ekleme

VideoStitcherLiveStreamRequest.videoStitcherSessionOptions kullanarak varsayılan Cloud Video Stitcher API yapılandırmasını geçersiz kılmak için oturum seçenekleri ekleyerek yayın isteğinizi özelleştirin. Tanınmayan bir seçenek sağlarsanız Cloud Video Stitcher API, HTTP 400 hatasıyla yanıt verir. Yardım için sorun giderme kılavuzuna bakın.

Örneğin, aşağıdaki kod snippet'i ile manifest seçeneklerini geçersiz kılabilirsiniz. Bu kod snippet'i, en düşük bit hızından en yükseğe doğru sıralanmış oluşturma biçimlerine sahip iki akış manifesti ister.

...

// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
  "manifestOptions": {
    "bitrateOrder": "ascending"
  }
};

streamManager.requestStream(streamRequest);

Reklam arası ekleme

Google Cloud Video Birleştirici API, her reklam arası için reklam etiketinden alınan reklamları ekler. Reklam araları, manifestte reklam işaretçileri kullanılarak belirtilir. Reklam işaretçileri, canlı yayın kodlayıcısı tarafından eklenir.

Kendi canlı yayınınızı kullanıyorsanız reklam işaretini eklemeniz gerekir. Desteklenen HLS ve DASH reklam işaretçileri hakkında daha fazla bilgi için reklam işaretçileri dokümanlarına bakın.
Google Cloud Livestream API'yi kullanarak canlı yayın oluşturduysanız reklam arası kanal etkinliği ekleyin.

Reklam, reklam arası eklendikten hemen sonra oynatılır.

Temizleme

Google Cloud Video Stitcher API'yi kullanarak başarılı bir şekilde canlı yayın barındırdığınıza ve HTML5 için IMA DAI SDK'yı kullanarak bu yayını istediğinize göre artık tüm yayın kaynaklarını temizlemeniz önemlidir.

Gereksiz kaynakları ve öğeleri kaldırmak için Canlı yayın temizliği kılavuzundaki adımları uygulayın.

Son olarak, Python 3 web sunucusunu başlattığınız terminal penceresinde ctrl+C komutunu kullanarak yerel sunucuyu sonlandırın.