Hình ảnh áp phích quảng cáo dạng âm thanh

Hướng dẫn này minh hoạ cách sử dụng SDK IMA HTML5 để phủ một hình ảnh áp phích lên trình phát video khi phát quảng cáo dạng âm thanh. Bạn nên sử dụng thuộc tính này khi đặt ad_type=audio_video trong yêu cầu URL VAST. Việc này sẽ giúp cải thiện khả năng kiếm tiền từ quảng cáo vì cả quảng cáo dạng âm thanh và video đều đủ điều kiện và hoàn tất để phân phát. Hãy xem tài liệu về ad_type và Nội dung âm thanh trong video để biết thêm thông tin chi tiết.

Bạn có thể làm theo hướng dẫn này, thực hiện các thay đổi đối với nội dung tích hợp IMA cơ bản, hoặc xem âm thanh trong ứng dụng mẫu video để tích hợp đầy đủ tính năng này.

Điều kiện tiên quyết

• Ứng dụng triển khai SDK IMA HTML5 cho quảng cáo dạng video. Xem hướng dẫn bắt đầu sử dụng IMA HTML5 để biết thêm thông tin.
• Hình ảnh áp phích mặc định phủ lên trình phát video khi quảng cáo dạng âm thanh được phân phát mà không có hình ảnh lớp phủ phù hợp. Để hình ảnh vừa với trình phát video, chiều rộng của hình ảnh phải nhỏ hơn hoặc bằng chiều rộng của trình phát video và chiều cao của hình ảnh phải thấp hơn ít nhất 75 px so với chiều cao của trình phát video.

Bật tính năng hình ảnh áp phích

Trước khi đưa ra yêu cầu quảng cáo dạng âm thanh và video, hãy đặt cờ tính năng audioPosterImageEnabled thành true và cờ tính năng audioPosterImageDefaultUrl thành URL hình ảnh áp phích mặc định. Hãy thực hiện việc này bằng API ImaSdkSettings.setFeatureFlags() trước khi tạo AdDisplayContainer. Khi bạn đặt chế độ này và quảng cáo dạng âm thanh đang phát, IMA sẽ tự động phủ một hình ảnh liên quan đến quảng cáo lên đầu trình phát video. IMA sẽ chọn hình ảnh quảng cáo đồng hành lớn nhất có sẵn vừa với trình phát video và ngắn hơn ít nhất 75 px so với trình phát video. Nếu VAST của quảng cáo không bao gồm hình ảnh mà IMA có thể sử dụng làm lớp phủ, thì IMA sẽ sử dụng hình ảnh mặc định mà bạn đã chỉ định làm lớp phủ.

function initializeIMA() {
  console.log('initializing IMA');
  adContainer = document.getElementById('ad-container');
  google.ima.settings.setFeatureFlags(
    {
      'audioPosterImageEnabled': true,
      'audioPosterImageDefaultUrl':'http://your-ad-overlay/image.png'
    });
  adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);
  adsLoader = new google.ima.AdsLoader(adDisplayContainer);

  // Let the AdsLoader know when the video has ended
  videoElement.addEventListener('ended', function() {
    adsLoader.contentComplete();
  });

  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = 'http://your-audio-video-ad-tag';
  ...
  // Pass the request to the adsLoader to request ads
  adsLoader.requestAds(adsRequest);
}