Ü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

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 Birleştirici API'sine kaydedilen VOD yayınlarını oynatma

Bu kılavuz, Google Cloud VOD akışı oturumu istemek ve oynatmak için HTML5 için IMA DAI SDK'sının nasıl kullanılacağını gösterir.

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.

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

Konum

VOD 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

Kısa ömürlü OAuth jetonları 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

VOD yapılandırma kimliği

VOD akışı için VOD yapılandırma kimliği: VOD_CONFIG_ID

VOD yapılandırma kimliği oluşturma hakkında daha fazla bilgiyi Cloud Stitching VOD yapılandırma kılavuzunda bulabilirsiniz.

Geliştirme ortamı yapılandırma

IMA örnek uygulamaları yalnızca HLS akışı isteklerini gösterir. VideoStitcherVodStreamRequest 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 örnek ZIP dosyasını 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 30 saniyede bir reklam araları verilen "Tears of Steel" adlı kısa film başlar.

VOD akışı isteğinde bulunma

Örnek akışı, reklam eklenmiş VOD akışınızla değiştirmek için Google Ad Manager ile otomatik olarak bir reklam oturumu oluşturmak üzere VideoStitcherVodStreamRequest 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 VideoStitcherVodStreamRequest 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 DAI 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() {
  requestVodVideoStitcherStream();

  playButton.style.display = "none";
  playButton.removeEventListener('click', initiatePlayback);
  playButton.addEventListener('click', resumePlayback);
}
...
function requestVodVideoStitcherStream() {
  const streamRequest = new google.ima.dai.api.VideoStitcherVodStreamRequest();
  streamRequest.vodConfigId = 'VOD_CONFIG_ID';
  streamRequest.region = 'LOCATION';
  streamRequest.projectNumber = 'PROJECT_NUMBER';
  streamRequest.oAuthToken = 'OAUTH_TOKEN';
  streamRequest.networkCode = 'NETWORK_CODE';

  streamManager.requestStream(streamRequest);
}

Sayfayı tekrar yükleyin. Ardından, özel VOD akışını isteyebilir ve oynatabilirsiniz.

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

VideoStitcherVodStreamRequest.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);

Temizleme

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

Gereksiz kaynakları ve öğeleri kaldırmak için VOD temizleme 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.