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ủ video của bạn trình phát cùng với một hình ảnh áp phích khi quảng cáo dạng âm thanh được phát. Bạn nên dùng thuộc tính này khi ad_type=audio_video được đặt trong yêu cầu URL VAST của bạn. Thao tác này cho phép được 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à quảng cáo dạng video đều đủ điều kiện và hoàn chỉnh để được phục vụ. Xem ad_type tài liệu và Âm thanh trong video nội dung để biết thêm chi tiết.

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

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

• Một ứng dụng triển khai SDK IMA HTML5 cho quảng cáo dạng video. Xem IMA HTML5 hướng dẫn bắt đầu sử dụng để biết thêm thông tin.
• Một 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ủ có liên quan. Để hình ảnh vừa với trình phát video, chiều rộng của trình phát phải nhỏ hơn hoặc bằng chiều rộng của video trình phát và chiều cao của trình phát phải thấp hơn chiều cao của video ít nhất là 75 px trình phát.

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 audioPosterImageEnabled cờ tính năng thành true và cờ tính năng audioPosterImageDefaultUrl thành URL hình ảnh áp phích mặc định của bạn. Thực hiện việc này bằng ImaSdkSettings.setFeatureFlags() API trước khi tạo AdDisplayContainer. Khi bạn đặt chế độ này và một quảng cáo dạng âm thanh đang phát, IMA sẽ tự động phủ một hình ảnh có liên quan đến quảng cáo lên đầu trình phát video. IMA chọn hình ảnh quảng cáo đồng hành lớn nhất hiện có và phù hợp trong trình phát video và ngắn hơn trình phát video ít nhất 75 px. 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ử dụng hình ảnh mặc định được 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);
}