Bạn nên liên kết các vị trí quảng cáo HTML trong trang với vị trí quảng cáo dạng video hoặc lớp phủ. Mối quan hệ này giữa các vị trí quảng cáo được liên kết đượ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à quảng cáo lớp phủ, bạn có thể sử dụng SDK IMA để hiển thị quảng cáo HTML đồng hành. Những quảng cáo này hiển thị 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 quảng cáo đồng hành
Trước tiên, bạn phải đặt trước 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 kiểm soát tất cả quảng cáo trên trang, còn được gọi là quảng cáo rào cản.
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ó hai cách để hiển thị 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ẽ hiển thị tự động miễn là 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ý với API (tức là mã 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 biết 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 hiển thị được xác định trên trang HTML
- Tự động điền quảng cáo đi kèm nếu thiếu quảng cáo dạng video
- Vùng quảng cáo đồng hành được tải trước cho trình phát video nhấp để phát
- Tự động kết xuất đồng hành, bao gồm
HTMLResourcevà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 đồng hành HTML 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ị trí 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ấy thông tin chi tiết hơn 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 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 ứng dụng đồng hành GPT hiển thị chính xác:
- Tải SDK HTML5 trong IFrame.
- Tải GPT trên trang web chính (bên ngoài IFrame).
Để hiển thị đồng hành 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 tải GPT bên trong IFrame đang tải SDK.
- Bạn phải tải GPT trên trang đầu, chứ 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ị 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 tình huống. Đố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.
Lưu ý: Trong mỗi ví dụ sau, hãy nhớ cung cấp network và unit-path hợp lệ trong lệnh gọi phương thức googletag.defineSlot (nằm trong thẻ <head> hoặc <body>, tuỳ thuộc vào ví dụ thực tế mà bạn đang sử dụng).
- Ví dụ 1: Triển khai vùng quảng cáo cơ bản
- Ví dụ 2: Triển khai khung quảng cáo động
- Ví dụ 3: Vị trí quảng cáo được tải trước
Ví dụ 1: Triển khai vùng quảng cáo cơ bả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 đã khai báo là 728x90px. GPT sẽ cố gắng lấp đầy vị trí này 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 khung quảng cáo được khai báo, hàm googletag.display() có thể hiển thị các khung quảng cáo đó 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 sẽ không xuất hiện ngay lập tức. Thay vào đó, các quảng cáo này sẽ xuất hiện cùng với quảng cáo dạng 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.
Ví dụ 2: Triển khai vùng quảng cáo động
Đôi khi, bạn có thể không biết trang có bao nhiêu vị trí quảng cáo cho đến khi nội dung trang được hiển thị. Mã mẫu sau đây cho biết cách xác định 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 đăng ký các vị trí quảng cáo nơi quảng cáo thực sự hiển thị.
Lưu ý: Khi sắp hiển thị quảng cáo, trình phát video sẽ yêu cầu các vị trí. Đảm bảo rằng các vị trí được xác định trước khi trình phát hiển thị quảng cáo.
<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 để triển khai thành công.
Ví dụ 3: Vùng quảng cáo được tải trước
Trong một số trường hợp, bạn có thể cần hiển thị nội dung nào đó trong khung quảng cáo trước khi yêu cầu quảng cáo đồng hành. 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 có thể chỉ tải sau khi người dùng nhấp vào một 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 một quảng cáo thông thường để lấp đầy vị trí quảng cáo trước khi yêu cầu quảng cáo đồng hành. Để hỗ trợ trường hợp sử dụng này, bạn có thể hiển thị quảng cáo web chuẩn trong vùng quảng cáo đồng hành. Đảm bảo quảng cáo trên web được nhắm đến các vị trí đồng hành. Bạn có thể nhắm mục tiêu các vị trí đồng hành theo cách tương tự như cách bạn nhắm mục tiêu các vị trí quảng cáo web chuẩn.
Lưu ý: Mã mẫu sau đây giống hệt với mã được cung cấp cho Ví dụ 1, ngoại trừ phần được in đậm. Trong trường hợp này, bạn cung cấp mạng quảng cáo và đường dẫn đơn vị của quảng cáo tải trước thay vì đơn vị quảng cáo dạng video.
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 mã sau đây để biết cách triển khai.
Sử dụng quảng cáo đồng hành bằng 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 khớp 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 nhận một mảng các đối tượng CompanionAd. Tại đây, bạn có thể chọn chỉ định CompanionAdSelectionSettings để đặt bộ lọc cho quảng cáo đồng hành theo loại mẫu quảng cáo, tỷ lệ phần trăm phù hợp gần, loại tài nguyên và tiêu chí 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
HTML5.
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:
- Tạo 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 (BẮT ĐẦU), hãy truy xuất đối tượng
Adbằng cách gọigetAd(). - Sử dụng
getCompanionAds()để nhận 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ể
CompanionAdvà đặt nội dung đó làm HTMl bên trong của<div>của 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 đồng hành linh hoạt
IMA hiện hỗ trợ quảng cáo đồng hành linh hoạt. Những 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ùng quảng cáo. Các div này lấp đầy 100% chiều rộng của div mẹ, sau đó đổi kích thước chiều cao để phù hợp với nội dung của div đồng hành. Bạn có thể đặt các kích thước này bằng cách sử dụng kích thước đồng hành Fluid trong Ad Manager. Hãy xem hình ảnh sau để biết vị trí đặt giá trị này.
Quảng cáo đồng hành linh hoạt GPT
Khi sử dụng thành phần đồng hành GPT, bạn có thể khai báo một khe đồ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>Trình bổ trợ linh hoạt của API quảng cáo
Khi sử dụng Ad API cho quảng cáo đồng hành, 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 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>