IMA SDK'ları, multimedya reklamları web sitelerinize ve uygulamalarınıza entegre etmeyi 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
Google Cloud Video Birleştirici API'sine kayıtlı canlı yayınları oynatma
Bu kılavuzda, Google Cloud Video Stitcher API'ye kayıtlı bir etkinlik için canlı yayın isteğinde bulunmak ve canlı yayını oynatmak amacıyla HTML5 için IMA DAI SDK'sının nasıl kullanılacağı ve oynatma sırasında reklam arası nasıl ekleneceği gösterilmektedir.
Bu kılavuzda, IMA DAI ile ilgili Başlangıç kılavuzundaki temel örnek daha ayrıntılı olarak ele alınmaktadır.
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 veya DASH için Cloud video birleştirme örneğini indirin.
Google Cloud projesi oluşturun
Bir Google Cloud projesi oluşturun ve hizmet hesaplarını projeye erişecek şekilde yapılandırın.
Kendi canlı içeriğinizi veya test canlı yayınını kullanarak canlı yayın etkinliği için yapılandırma oluşturun. Bu kılavuzda HLS yayını kullanılmaktadır.
IMA SDK'sında kullanmak için 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'yi kullanan Google Cloud proje numarası:
PROJECT_NUMBER - OAuth jetonu
Video Birleştirici kullanıcı rolüne sahip bir hizmet hesabının kısa süreli 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 yapılandırması 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 yayın isteklerini gösterir. VideoStitcherLiveStreamRequest sınıfını oluştururken DASH akışlarını kullanmaya devam edebilirsiniz. DASH uyumlu oynatıcınızı ayarlarken video oynatıcınızın ilerleme etkinlikleri için StreamManager.processMetadata()'a videonun meta verilerini sağlayabilecek bir dinleyici ayarlamanız gerekir.
Bu işlev üç parametre alır:
type: HLS akışları için'ID3', DASH akışları için'urn:google:dai:2018'olarak ayarlanması gereken bir dize.data: DASH etkinlik mesajları için bu, mesaj veri dizesidir.timestamp: DASH akışları için etkinlik mesajı başlangıç zamanı olan bir sayı.
Meta verileri, oyuncu etkinliklerinizin sağlayabileceği en kısa sürede ve en sık şekilde gönderin. Meta veriler eksikse veya doğru değilse IMA DAI SDK'sı reklam etkinliklerini tetiklemeyebilir. Bu da reklam etkinliklerinin yanlış raporlanmasına neden olur.
HTML5 için IMA DAI örneklerini indirin ve HLS.js Basit ö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 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 sürümlerinde kullanılabilir. Apache HTTP Server veya Node JS gibi başka bir web sunucusu kullanabilirsiniz.
Bir web tarayıcısı açıp video oynatıcıyı görmek için localhost:8000 adresine gidin.
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" kısa filmi başlar. Bu içerik, seç-izle video (VOD) akışı kullanılarak yayınlanır.
Canlı yayın isteğinde bulunma
Sana Özel VOD akışını canlı yayınınızla değiştirmek için Google Ad Manager ile otomatik olarak 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 isteme işlevleri vardır. Bu işlevin Google Cloud Video Stitcher API ile çalışmasını sağlamak için VideoStitcherLiveStreamRequest nesnesi döndürecek 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 paketindeyse http://localhost:8000 kaynağı için CORS'u etkinleştirmeniz gerekir.
Sayfayı tekrar yükleyin. Ardından, özel canlı yayın 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 aktarma 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'ini kullanarak manifest seçeneklerini geçersiz kılabilirsiniz. Bu kod snippet'i, en düşük bit hızından en yüksek bit hızına göre sıralanmış yayınlar içeren iki yayın manifest'i ister.
...
// The following session options are examples. Use session options
// that are compatible with your video stream.
streamRequest.videoStitcherSessionOptions = {
"manifestOptions": {
"includeRenditions": [
{"bitrateBps": 3000, "codecs": "hvc1.1.4.L126.B0, mp4a.40.2"},
{"bitrateBps": 2000, "codecs": "avc1.64001f, mp4a.40.2"},
],
"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ı, manifest'te 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şaretçisini eklemeniz gerekir. Desteklenen HLS ve DASH reklam işaretçileri hakkında daha fazla bilgi için reklam işaretçisi 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 yayınladığınıza ve HTML5 için IMA DAI SDK'sını kullanarak yayın isteğinde bulunduğunuza göre, yayın kaynaklarını temizlemeniz önemlidir.
Gereksiz kaynakları ve öğeleri kaldırmak için canlı yayın temizleme kılavuzunu uygulayın.
Son olarak, Python 3 web sunucusunu başlattığınız terminal penceresinde yerel sunucuyu sonlandırmak için ctrl+C komutunu kullanın.