Bạn nên liên kết vùng quảng cáo HTML trong trang với vùng quảng cáo dạng video hoặc lớp phủ. Mối quan hệ này giữa các vùng quảng cáo liên kết được gọi là mối quan hệ đồng hành chí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 đi kèm. 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 trước 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. Quảng cáo đồng hành có thể được quản lý 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. Khi một người mua duy nhất kiểm soát tất cả quảng cáo trên trang, kỹ thuật này 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. Quảng cáo đồng hành hiển thị
Có 2 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ẽ tự động hiển thị miễn là có vùng quảng cáo đồng hành được khai báo trên trang HTML và những 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 nhau). Một số lợi ích khi sử dụng GPT là:- Nhận biết vị trí quảng cáo đồng hành
- Chèn lấp đồ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 vùng quảng cáo xác định trên trang HTML
- Tự động điền đồng hành nếu thiếu quảng cáo video
- 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ính năng hiển thị đồng hành tự động, 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) sẽ 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 các nhà xuất bản nên sử dụng GPT. SDK HTML5 nhận dạng các khe 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 một Khung nội tuyến
Nếu đáp ứng cả hai tiêu chí sau, bạn cần bao gồm thêm một tập lệnh proxy để các quảng cáo đồng hành GPT của bạn hiển thị chính xác:
- Tải SDK HTML5 trong một Khung nội tuyến.
- Tải GPT trên trang web chính (bên ngoài IFrame).
Để các quảng cáo đồng hành của bạn hiển thị 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 tải bên trong Khung nội tuyến tải SDK.
- GPT phải được tải trên trang trên cùng, chứ không phải trong một Khung nội tuyến 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 các trường hợp khác nhau. Đố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.
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 vùng quảng cáo động
- Ví dụ 3: Vùng quảng cáo được tải trước
Ví dụ 1: Cách 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 vùng quảng cáo. Vùng quảng cáo đã khai báo có kích thước 728x90px. GPT cố gắng lấp đầy vùng bằng
bất kỳ quảng cáo đồng hành nào được trả về trong phản hồi VAST khớp với kích thước này. Sau khi bạn khai báo các vùng quảng cáo, hàm googletag.display() có thể hiển thị các vùng đó ở bất cứ nơi nào nó được gọi trên trang. Do các vùng là các vùng đồng hành, nên quảng cáo sẽ không hiển thị 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 các mã lập trình 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 mình có bao nhiêu vùng quảng cáo trên một trang 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ùng 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 nó đăng ký các vùng quảng cáo nơi chúng 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 hiển thị các ô. Đảm bảo rằng các vùng đượ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 để biết cách triển khai đang hoạt động.
Ví dụ 3: Vùng quảng cáo được tải trước
Trong một số trường hợp nhất định, bạn có thể cần phải hiển thị nội dung nào đó trong vùng 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 chỉ có thể 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ùng 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 trên web chuẩn trong vùng đồng hành. Đảm bảo quảng cáo trên web được nhắm mục tiêu đến các vùng đồng hành. Bạn có thể nhắm mục tiêu các vùng đồng hành theo cách giống như bạn nhắm mục tiêu đến vùng quảng cáo trên web chuẩn.
Lưu ý: Mã mẫu sau giống hệt như 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ì cung cấp đơn vị quảng cáo dạng video.
Dưới đây là ví dụ về cách triển khai vừa được 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 bút mã 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.
Quảng cáo đồng hành hiển thị
Để 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 điều phố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 sẽ trùng với lú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 các đối tượng CompanionAd. Tại đây, bạn có thể chỉ định CompanionAdSelectionSettings. Điều này cho phép bạn đặt bộ lọc trên quảng cáo đồng hành cho loại mẫu quảng cáo, gần như tỷ lệ phần trăm phù hợp, 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, 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 phù hợ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ố trình tự với mẫu quảng cáo chính. Mẫu quảng cáo thiếu thuộc tính trình tự sẽ được coi là có số thứ tự 0. - Lấy nội dung từ thực thể
CompanionAdvà đặt nội dung đó làm HTMl bên trong<div>của 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 cho phù hợp với kích thước của vùng quảng cáo. Các mẫu này lấp đầy 100% chiều rộng của div mẹ, sau đó đổi kích thước chiều cao cho vừa với nội dung của div đồng hành. Các quảng cáo này được đặt 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 đây để biết vị trí đặt giá trị này.
Đồng hành linh hoạt cho GPT
Khi sử dụng quảng cáo đồng hành GPT, bạn có thể khai báo một vùng đồ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 cho API quảng cáo
Khi sử dụng API quảng cáo cho quảng cáo đồng hành, bạn có thể khai báo một vùng đồ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>