Để thảo luận và đưa ra ý kiến phản hồi về các sản phẩm của chúng tôi, hãy tham gia kênh Discord chính thức của Ad Manager trong máy chủ Cộng đồng quảng cáo và đo lường của Google.

Trang này được dịch bởi Cloud Translation API.

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 trong trang với các vùng quảng cáo dạng video hoặc quảng cáo lớp phủ. Mối quan hệ giữa các vị trí quảng cáo được liên kết này được gọi là mối quan hệ quảng cáo chính – quảng cáo đồng hành.

Ngoài việc yêu cầu quảng cáo chính dạng video và quảng cáo chính dạng lớp phủ, bạn có thể sử dụng IMA SDK để hiển thị quảng cáo HTML đồng hành. Những 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 đi kèm, hãy thực hiện các bước sau:

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

Trước tiên, bạn phải đặt 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 đi kèm 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 đi kèm đượ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ó hai cách để hiển thị quảng cáo đi kèm:

Tự độngbằ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ì quảng cáo đồng hành sẽ tự động hiển thị 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ã nhận dạng div trong JavaScript và HTML phải khớp). Sau đây là một số lợi ích khi sử dụng GPT:
- 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ị trí được xác định trên trang HTML.
- Tự động điền biểu ngữ đi kèm nếu quảng cáo dạng video bị thiếu.
- Các vùng quảng cáo đồng hành được tải sẵn cho trình phát video nhấp để phát.
- Tự động kết xuất thành phần đồng hành, bao gồm HTMLResource và iFrameResource.
Sử dụng Ad API theo cách thủ công.

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 hiển thị quảng cáo đi kèm HTML trên trang web của bạn. Hầu hết nhà xuất bản nên sử dụng GPT. HTML5 SDK nhận dạng 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 IMA SDK trong tài liệu về GPT.

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

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

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

Để các quảng cáo đi kèm 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 lưu ý:

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

Khai báo các vị trí 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ị trí quảng cáo đồng hành.

Ví dụ 1: Triển khai vùng quảng cáo cơ bản
Ví dụ 2: Triển khai vị trí quảng cáo động
Ví dụ 3: Vị trí quảng cáo được tải sẵn

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

Đoạn mã mẫu sau đây cho biết cách đưa tệp gpt.js vào trang HTML và khai báo một vị trí quảng cáo. Vùng quảng cáo được khai báo là 728x90px. GPT cố gắng điền vào 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ị trí quảng cáo được khai báo, hàm googletag.display() có thể hiển thị các vị trí đó bất cứ khi nào được gọi trên trang. Vì các vị trí này là vị trí đồng hành, nên quảng cáo không hiển thị ngay lập tức. Thay vào đó, quảng cáo đồng hành xuất hiện cùng với quảng cáo video chính.

Sau đâ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ị trí quảng cáo trên một trang cho đến khi nội dung trang được hiển thị. Đoạn mã mẫu sau đây cho thấy cách xác định các vị trí quảng cáo trong khi trang hiển thị. 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ị trí quảng cáo nơi quảng cáo thực sự hiển thị.

<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 đoạn mã sau để 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 đó, bạn cần có khả năng yêu cầu một quảng cáo thông thường để lấp đầy vùng 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ị trí đi kèm. Đảm bảo quảng cáo trên web nhắm đến các vùng quảng cáo đồng hành. Bạn có thể nhắm đến các vùng quảng cáo đi kèm theo cách tương tự như cách bạn nhắm đến các vùng quảng cáo chuẩn trên web.

Sau đây là ví dụ về cách triển khai như mô tả ở trên:

<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 đi kèm 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 lấy một 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 dùng đối tượng Ad này để gọi getCompanionAds() nhằm lấy một mảng các đối tượng CompanionAd. Tại đây, bạn có thể chỉ định CompanionAdSelectionSettings. Lựa chọn này cho phép bạn đặt bộ lọc cho quảng cáo đi kèm theo tiêu chí về loại mẫu quảng cáo, tỷ lệ khớp gần đúng, loại tài nguyên 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 CompanionAdSelectionSettings của IMA.

Giờ đây, bạn có thể dùng các đối tượng CompanionAd do getCompanionAds trả về để hiển thị quảng cáo đi kèm trên trang theo các nguyên tắc sau:

Tạo một vùng quảng cáo đồng hành <div> có kích thước bắt buộc trên trang.
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().
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, đồng thời có cùng số thứ tự với mẫu quảng cáo chính. Những mẫu quảng cáo thiếu thuộc tính trình tự sẽ được coi là có số trình tự là 0.
Lấy nội dung từ một thực thể CompanionAd và đặt nội dung đó làm HTML bên trong của <div> trong vị trí 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 đi kèm linh hoạt

IMA hiện hỗ trợ quảng cáo đồng hành linh hoạt. Các quảng cáo đi kèm này có thể đổi kích thước để phù hợp với kích thước của vùng quảng cáo. Các mẫu này sẽ lấp đầy 100% chiều rộng của div gốc, sau đó thay đổi kích thước chiều cao để phù hợp với nội dung của quảng cáo đi kèm. Bạn có thể đặt kích thước này 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 đi kèm 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 một 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 API đi kèm linh hoạt

Khi sử dụng Ad API cho quảng cáo đi kèm, bạn có thể khai báo một vị trí linh hoạt cho quảng cáo đi kèm 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>

Thêm tính năng hỗ trợ quảng cáo đồng hành Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

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

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

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

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

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

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

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

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

Dùng thử

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

Dùng thử

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

Dùng thử

Sử dụng quảng cáo đi kèm với Ad API

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

Mã mẫu

Hiển thị quảng cáo đi kèm linh hoạt

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

Quảng cáo API đi kèm linh hoạt

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