Thêm tính năng hỗ trợ quảng cáo đồng hành

Chọn nền tảng: HTML5 Android iOS

Bạn có thể muốn liên kết các vùng quảng cáo HTML trên trang với các vùng quảng cáo dạng video hoặc lớp phủ. Mối quan hệ giữa các vùng quảng cáo được liên kết này được gọi là mối quan hệ chính-đồng hành.

Ngoài việc yêu cầu quảng cáo chính dạng video và lớp phủ, bạn có thể sử dụng SDK IMA để hiển thị quảng cáo HTML đồng hành. Các quảng cáo này xuất hiện trong môi trường HTML

Sử dụng quảng cáo đồng hành

Để sử dụng quảng cáo đồng hành, hãy thực hiện các bước sau:

1. Đặt trước quảng cáo đồng hành

Trước tiên, bạn phải đặt trước những quảng cáo đồng hành mà bạn muốn hiển thị cùng với quảng cáo chính. Bạn có thể quản lý quảng cáo đồng hành trong Ad Manager . Bạn có thể phân phát tối đa 6 quảng cáo đồng hành cho mỗi quảng cáo chính. Kỹ thuật này, khi một người mua duy nhất kiểm soát tất cả quảng cáo trên trang, còn được gọi là khoanh vùng quảng cáo.

2. Yêu cầu quảng cáo đồng hành

Theo mặc định, quảng cáo đồng hành được bật cho mỗi yêu cầu quảng cáo.

3. Hiển thị quảng cáo đồng hành

Có 2 cách để kết xuất quảng cáo đồng hành:

  • Tự động sử dụng Thẻ nhà xuất bản của Google (GPT).

    Nếu bạn đang sử dụng GPT để triển khai quảng cáo đồng hành, thì các quảng cáo này sẽ tự động xuất hiện miễn là có các vùng quảng cáo đồng hành được khai báo trên trang HTML và các quảng cáo này được đăng ký bằng API (tức là mã div trong JavaScript và HTML phải khớp). Một số lợi ích khi sử dụng GPT là:

    • Nhận ra vị trí quảng cáo đồng hành.
    • Chèn lấp quảng cáo đồng hành từ mạng của nhà xuất bản, nếu phản hồi VAST chứa ít quảng cáo đồng hành hơn so với số vùng được xác định trên trang HTML.
    • Tự động điền quảng cáo đồng hành nếu quảng cáo dạng video bị thiếu.
    • Vùng quảng cáo đồng hành được tải sẵn cho trình phát video nhấp để phát.
    • Kết xuất quảng cáo đồng hành tự động, bao gồm HTMLResource và iFrameResource.

  • Thủ công sử dụng Ad API.

Sử dụng quảng cáo đồng hành với Thẻ nhà xuất bản của Google

Thẻ nhà xuất bản của Google (GPT) tự động hoá việc hiển thị quảng cáo HTML đồng hành trên trang web của bạn. Hầu hết nhà xuất bản nên sử dụng GPT. SDK HTML5 nhận ra các vùng GPT nếu GPT được tải trên trang web chính (không phải trong IFrame). Bạn có thể tìm thêm thông tin chi tiết về cách sử dụng GPT với SDK IMA trong tài liệu về GPT.

Nếu bạn lưu trữ SDK HTML5 trong IFrame

Nếu đáp ứng cả 2 tiêu chí sau, bạn cần thêm một tập lệnh proxy bổ sung để quảng cáo đồng hành GPT xuất hiện đúng cách:

  1. Tải SDK HTML5 trong IFrame.
  2. Tải GPT trên trang web chính (bên ngoài IFrame).

Để quảng cáo đồng hành xuất hiện trong trường hợp này, bạn phải tải tập lệnh proxy GPT trước khi tải SDK:

<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>

Điều quan trọng cần nhớ:

  • Không được tải GPT bên trong IFrame đang tải SDK.
  • GPT phải được tải trên trang đầu, không phải trong một IFrame khác.
  • Tập lệnh proxy phải được tải trong cùng một khung với GPT (tức là trên trang chính).

Khai báo vùng quảng cáo đồng hành trong HTML

Phần này giải thích cách khai báo quảng cáo đồng hành trong HTML bằng GPT và cung cấp mã mẫu cho nhiều trường hợp. Đối với SDK HTML5, bạn cần thêm một số JavaScript vào trang HTML và khai báo các vùng quảng cáo đồng hành.

Ví dụ 1: Triển khai vị trí quảng cáo cơ bản

Mã mẫu sau đây cho biết cách thêm tệp gpt.js vào trang HTML và khai báo vị trí quảng cáo. Vị trí quảng cáo được khai báo là 728x90px. GPT cố gắng điền vùng quảng cáo bằng mọi quảng cáo đồng hành được trả về trong phản hồi VAST khớp với kích thước này. Sau khi các vùng quảng cáo được khai báo, hàm googletag.display() có thể kết xuất các vùng quảng cáo đó ở bất cứ nơi nào được gọi trên trang. Vì các vùng quảng cáo là vùng quảng cáo đồng hành, nên quảng cáo không xuất hiện ngay lập tức. Thay vào đó, quảng cáo xuất hiện cùng với quảng cáo video chính.

Dưới đây là ví dụ về cách triển khai:

<html>
  <head>
    <!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
    <!--<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>-->
    <!-- HEAD part -->
    <!-- Initialize the tagging library -->
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>

    <!-- Register your companion slots -->
    <script>
       window.googletag = window.googletag || { cmd: [] };

       googletag.cmd.push(function() {
         // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
         googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
             .addService(googletag.companionAds())
             .addService(googletag.pubads());
         googletag.companionAds().setRefreshUnfilledSlots(true);
         googletag.pubads().enableVideoAds();
         googletag.enableServices();
       });
    </script>
  </head>

  <body>
    <!-- BODY part -->
    <!-- Declare a div where you want the companion to appear. Use
          googletag.display() to make sure the ad is displayed. -->
    <div id="companionDiv" style="width:728px; height:90px;">
      <script>
         // Using the command queue to enable asynchronous loading.
         // The unit does not actually display now - it displays when
         // the video player is displaying the ads.
         googletag.cmd.push(function() { googletag.display('companionDiv'); });
      </script>
    </div>
  <body>
</html>

Dùng thử

Bạn có thể xem codepen sau đây để biết cách triển khai đang hoạt động.

Ví dụ 2: Triển khai vùng quảng cáo động

Đôi khi, bạn có thể không biết số lượng vùng quảng cáo trên một trang cho đến khi nội dung trang được kết xuất. Mã mẫu sau đây cho biết cách xác định các vùng quảng cáo trong khi trang kết xuất. Ví dụ này giống với Ví dụ 1 ngoại trừ việc ví dụ này đăng ký các vùng quảng cáo ở nơi chúng thực sự xuất hiện.

<html>
  <head>
    <!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
    <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script> -->
    <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
    <!-- HEAD part -->
    <!-- Initialize the tagging library -->
    <script>
      window.googletag = window.googletag || { cmd: [] };

      googletag.cmd.push(function() {
        googletag.companionAds().setRefreshUnfilledSlots(true);
        googletag.pubads().enableVideoAds();
        googletag.enableServices();
      });
    </script>
  </head>

  <body>
    <!-- BODY part -->
    <!-- Declare a div where you want the companion to appear. Use
        googletag.display() to make sure the ad is displayed. -->
    <div id="companionDiv" style="width:728px; height:90px;">
      <script>
        // Using the command queue to enable asynchronous loading.
        // The unit does not actually display now - it displays when
        // the video player is displaying the ads.
        googletag.cmd.push(function() {
          // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
          googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
              .addService(googletag.companionAds())
              .addService(googletag.pubads());
          googletag.display('companionDiv');
        });
      </script>
    </div>
  <body>
</html>

Dùng thử

Bạn có thể xem mã sau đây để biết cách triển khai đang hoạt động.

Ví dụ 3: Vùng quảng cáo được tải sẵn

Trong một số trường hợp, bạn có thể cần hiển thị nội dung nào đó trong vị trí quảng cáo trước khi quảng cáo đồng hành được yêu cầu. Quảng cáo đồng hành thường được yêu cầu cùng với quảng cáo dạng video. Yêu cầu này có thể xảy ra sau khi trang tải. Ví dụ: quảng cáo đồng hành chỉ có thể tải sau khi người dùng nhấp vào video nhấp để phát. Trong trường hợp như vậy, bạn cần có khả năng yêu cầu quảng cáo thông thường để điền vào vị trí quảng cáo trước khi quảng cáo đồng hành được yêu cầu. Để hỗ trợ trường hợp sử dụng này, bạn có thể hiển thị quảng cáo web tiêu chuẩn trong vùng quảng cáo đồng hành. Đảm bảo quảng cáo web được nhắm mục tiêu đến các vùng quảng cáo đồng hành. Bạn có thể nhắm mục tiêu đến các vùng quảng cáo đồng hành giống như cách bạn nhắm mục tiêu đến các vùng quảng cáo web tiêu chuẩn.

Dưới đây là ví dụ về cách triển khai vừa mô tả:

<html>
  <head>
    ...
    <!-- Register your companion slots -->
    <script>
      window.googletag = window.googletag || { cmd: [] };

      googletag.cmd.push(function() {
        // Supply YOUR_PRELOAD_NETWORK and YOUR_PRELOAD_UNIT_PATH.
        googletag.defineSlot('/YOUR_PRELOAD_NETWORK/YOUR_PRELOAD_UNIT_PATH', [728, 90], 'companionDiv')
            .addService(googletag.companionAds())
            .addService(googletag.pubads());
        googletag.companionAds().setRefreshUnfilledSlots(true);
        googletag.pubads().enableVideoAds();
        googletag.enableServices();
      });
    </script>
  </head>
  ...
</html>

Dùng thử

Bạn có thể xem code-pen sau đây để biết cách triển khai đang hoạt động.

Sử dụng quảng cáo đồng hành với Ad API

Phần này mô tả cách hiển thị quảng cáo đồng hành bằng API Ad.

Hiển thị quảng cáo đồng hành

Để hiển thị quảng cáo đồng hành, trước tiên, hãy tham chiếu đến đối tượng Ad thông qua bất kỳ sự kiện AdEvent nào được gửi từ AdsManager. Bạn nên sử dụng sự kiện AdEvent.STARTED, vì việc hiển thị quảng cáo đồng hành phải trùng với việc hiển thị quảng cáo chính.

Tiếp theo, hãy sử dụng đối tượng Ad này để gọi getCompanionAds() nhằm lấy một mảng đối tượng CompanionAd. Tại đây, bạn có thể chỉ định CompanionAdSelectionSettings, cho phép bạn đặt bộ lọc trên quảng cáo đồng hành theo loại mẫu quảng cáo, tỷ lệ phù hợp gần đúng, loại tài nguyên và tiêu chí về kích thước. Để biết thêm thông tin về các chế độ cài đặt này, hãy xem tài liệu về API IMA CompanionAdSelectionSettings.

Giờ đây, bạn có thể sử dụng các đối tượng CompanionAd do getCompanionAds trả về để hiển thị quảng cáo đồng hành trên trang theo các nguyên tắc sau:

  1. Tạo vị trí quảng cáo đồng hành <div> có kích thước bắt buộc trên trang.
  2. Trong trình xử lý sự kiện cho sự kiện STARTED, hãy truy xuất đối tượng Ad bằng cách gọi getAd().
  3. Sử dụng getCompanionAds() để lấy danh sách quảng cáo đồng hành khớp với cả kích thước vùng quảng cáo đồng hành và CompanionAdSelectionSettings và có cùng số thứ tự với mẫu quảng cáo chính. Các mẫu quảng cáo thiếu thuộc tính số thứ tự được coi là có số thứ tự là 0.
  4. Lấy nội dung từ thực thể CompanionAd và đặt nội dung đó làm HTMl bên trong của <div> trong vùng quảng cáo đó.

Mã mẫu

<!--Set a companion ad div in html page. -->
<div id="companion-ad-300-250" width="300" height="250"></div>

<script>

  // Listen to the STARTED event.
  adsManager.addEventListener(
    google.ima.AdEvent.Type.STARTED,
    onAdEvent);

  function onAdEvent(adEvent) {
    switch (adEvent.type) {
      case google.ima.AdEvent.Type.STARTED:
        // Get the ad from the event.
        var ad = adEvent.getAd();
        var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
        selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
        selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
        selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.IGNORE;
        // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
        var companionAds = ad.getCompanionAds(300, 250, selectionCriteria);
        var companionAd = companionAds[0];
        // Get HTML content from the companion ad.
        var content = companionAd.getContent();
        // Write the content to the companion ad slot.
        var div = document.getElementById('companion-ad-300-250');
        div.innerHTML = content;
        break;
    }
  }
</script>

Hiển thị quảng cáo đồng hành linh hoạt

IMA hiện hỗ trợ quảng cáo đồng hành linh hoạt. Các quảng cáo đồng hành này có thể đổi kích thước để phù hợp với kích thước của vị trí quảng cáo. Các quảng cáo này sẽ điền 100% chiều rộng của div gốc, sau đó đổi kích thước chiều cao để phù hợp với nội dung của quảng cáo đồng hành. Các quảng cáo này được đặt bằng cách sử dụng kích thước quảng cáo đồng hành Fluid trong Ad Manager. Hãy xem hình ảnh sau đây để biết vị trí đặt giá trị này.

Hình ảnh cho thấy chế độ cài đặt quảng cáo đồng hành của Ad Manager. Làm nổi bật lựa chọn kích thước quảng cáo đồng hành.

Quảng cáo đồng hành linh hoạt GPT

Khi sử dụng quảng cáo đồng hành GPT, bạn có thể khai báo vùng quảng cáo đồng hành linh hoạt bằng cách cập nhật tham số thứ hai của phương thức defineSlot().

<!-- Register your companion slots -->
<script>
  googletag.cmd.push(function() {
    // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
    googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', ['fluid'], 'companionDiv')
        .addService(googletag.companionAds())
        .addService(googletag.pubads());
    googletag.companionAds().setRefreshUnfilledSlots(true);
    googletag.pubads().enableVideoAds();
    googletag.enableServices();
  });
</script>

Quảng cáo đồng hành linh hoạt Ad API

Khi sử dụng Ad API cho quảng cáo đồng hành, bạn có thể khai báo vùng quảng cáo đồng hành linh hoạt bằng cách cập nhật google.ima.CompanionAdSelectionSettings.SizeCriteria thành giá trị SELECT_FLUID.

<script>

  ...
    // Get the ad from the event.
    var ad = adEvent.getAd();
    var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
    selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
    selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
    selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_FLUID;
    // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
    // Note: Companion width and height are irrelevant when fluid size is used.
    var companionAds = ad.getCompanionAds(0, 0, selectionCriteria);
    var companionAd = companionAds[0];
  ...
    }
  }
</script>