Bật quảng cáo hiển thị tuyến tính

IMA SDK cho HTML5 hỗ trợ quảng cáo hiển thị tuyến tính ngoài quảng cáo dạng video tuyến tính. Để biết thông tin chi tiết về quảng cáo dạng video tuyến tính, hãy xem bài viết Thông tin tổng quan về quảng cáo Giải pháp video.

Việc bật quảng cáo hiển thị tuyến tính có thể làm tăng nhu cầu quảng cáo đối với không gian quảng cáo của bạn, vì quảng cáo hiển thị tuyến tính cạnh tranh với quảng cáo dạng video tuyến tính cho không gian quảng cáo của bạn. IMA xử lý việc hiển thị quảng cáo hiển thị tuyến tính, nhưng yêu cầu bạn thiết lập tính năng phát hiện nội dung video. Cách triển khai tính năng phát hiện nội dung IMA sẽ khác nhau tuỳ thuộc vào việc bạn tạo trình phát nội dung trong cùng một khung gốc với trình phát quảng cáo hay tạo trình phát quảng cáo trong một khung khác nguồn gốc.

Hướng dẫn này trình bày cách thiết lập tính năng phát hiện nội dung để bật quảng cáo hiển thị tuyến tính, thay đổi trình phát video nội dung và ngừng thu thập tín hiệu nội dung.

Thiết lập tính năng phát hiện nội dung

Để bật quảng cáo hiển thị tuyến tính cho các yêu cầu quảng cáo, hãy làm như sau:

Cùng nguồn gốc

Nếu IMA SDK có cùng nguồn gốc với trình phát nội dung, hãy làm một trong hai việc sau:

  • Ưu tiên Chuyển trình phát video vào lệnh gọi AdsManagerLoadedEvent.getAdsManager(). Mặc dù getAdsManager() cho phép bạn truyền một đối tượng chứa thuộc tính currentTime, nhưng bạn phải truyền một thực thể HTMLVideoElement vào getAdsManager() để hỗ trợ tính năng phát hiện nội dung.

    function onAdsManagerLoaded(adsManagerLoadedEvent) {
  // Set any AdsRenderingSettings here.
  const adsRenderingSettings = new google.ima.AdsRenderingSettings();

  // Get the ads manager.
  adsManager =
    adsManagerLoadedEvent.getAdsManager(videoElement, adsRenderingSettings);
}

  • Nếu bạn không thể cung cấp trình phát nội dung trong lệnh gọi AdsManagerLoadedEvent.getAdsManager(), hãy gọi phương thức AdsManager.configureAdsManager() bằng trình phát video. Để tính năng phát hiện nội dung hoạt động, nội dung đó phải là HTMLVideoElement.

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager =
    adsManagerLoadedEvent.getAdsManager(null);
  adsManager.configureAdsManager(videoElement);
}

Nếu bạn không thiết lập tính năng Phát hiện nội dung, thì máy chủ quảng cáo do Google phân phát có thể ngừng phân phát quảng cáo hiển thị tuyến tính.

Nếu trình phát nội dung của bạn có cùng nguồn gốc với IMA SDK mà bạn tải, thì bạn không cần thay đổi cách triển khai IMA để xử lý việc thay đổi trình phát nội dung hoặc dừng thu thập tín hiệu nội dung.

Nhiều nguồn gốc

Nếu IMA SDK khác nguồn gốc với trình phát nội dung của bạn, thì IMA có thể thu thập tín hiệu phát hiện nội dung thông qua lớp CrossOriginProxy. Lớp này cho phép IMA SDK xác minh vị trí đặt quảng cáo hiển thị tuyến tính chính xác và thu thập các tín hiệu liên quan đến chủ đề của nội dung video. Nếu đặt SDK IMA trong một iframe trên nhiều miền, bạn phải triển khai lớp CrossOriginProxy.

Nếu bạn tiếp tục đặt trình phát nội dung khác nguồn gốc với SDK IMA mà không triển khai lớp CrossOriginProxy, thì máy chủ quảng cáo của Google có thể ngừng phân phát quảng cáo hiển thị tuyến tính.

Để tải lớp CrossOriginProxy vào ứng dụng, hãy làm như sau:

  1. Trong tệp HTML, hãy nhập tệp ima_proxy.js:

    <html>
  <head>
    <title>IMA HTML5 cross-origin iframe sample</title>
    <link rel="stylesheet" href="style.css">
  </head>

  <body>
    <div id="mainContainer">
      <div id="content">
        <video id="contentElement">
          <source src="https://storage.googleapis.com/gvabox/media/samples/stock.mp4"></source>
        </video>
      </div>

      <!-- The cross-origin iframe where you load IMA SDK and play ads. -->
      <iframe id="adContainerIframe"
              src="https://cross-origin-domain.com/ads-sandbox.html" >
      </iframe>

    </div>
    <button id="playButton">Play</button>

    <script src="//imasdk.googleapis.com/js/sdkloader/ima_proxy.js"></script>
    <script src="main.js"></script>
  </body>
</html>

  2. Trong tệp main.js, hãy lấy thực thể CrossOriginProxy.

  3. Gọi phương thức setVideoElements() bằng một mảng gồm tất cả trình phát video hiển thị quảng cáo trên trang hoặc ứng dụng của bạn.

Trước khi gửi yêu cầu quảng cáo, bạn phải truyền các phần tử video đến thực thể CrossOriginProxy bằng lệnh gọi setVideoElements(). Ví dụ sau đây truyền một mảng chứa một trình phát video nội dung:

// On window load attach an event to the play button click
// that triggers playback of the content video element.
window.addEventListener('load', function(event) {
videoContent = document.getElementById('contentElement');
ima.crossOriginProxy.getInstance().setVideoElements([videoContent]);
playButton = document.getElementById('playButton');
playButton.addEventListener('click', playAds);
});

Thay đổi trình phát video nội dung

Nếu thay đổi hoặc thêm một trình phát video nội dung khác, bạn phải truyền một mảng mới vào phương thức setVideoElements(). Khi bạn thực hiện lệnh gọi setVideoElements() mới, IMA sẽ bắt đầu thu thập tín hiệu cho trình phát nội dung mới và ngừng thu thập tín hiệu cho mọi trình phát nội dung được truyền trong các lệnh gọi trước đó.

Ví dụ sau đây truyền phần tử video mới đến lớp CrossOriginProxy:

function createNewContentPlayer(newPlayerId) {
newVideoContent = document.getElementById(newPlayerId);
ima.crossOriginProxy.getInstance().setVideoElements([newVideoContent]);

// Continue with any other steps needed to initiate the content player
}

Ngừng thu thập tín hiệu khi quảng cáo kết thúc

Khi phát xong quảng cáo và gọi phương thức AdsLoader.destroy(), bạn cũng phải gọi phương thức setVideoElements() bằng một mảng trống. Việc thực hiện lệnh gọi setVideoElements() bằng một mảng trống sẽ loại bỏ tệp đối chiếu đến trình phát nội dung mà IMA lưu giữ và ngăn chặn các vấn đề rò rỉ bộ nhớ.