SDK Quảng cáo trên phương tiện truyền thông (IMA) cho HTML5.
SDK HTML5 của IMA hỗ trợ quảng cáo âm thanh với chế độ thiết lập tương tự như quảng cáo dạng video nhưng có một số điểm khác biệt chính. Đối với mọi phần thiết lập IMA không có trong hướng dẫn này, hãy xem Hướng dẫn Bắt đầu sử dụng HTML5.
Sử dụng thẻ <audio> để phát nội dung
Hàm khởi tạo cho AdDisplayContainer lấy đối số thứ hai có tên là videoElement mà IMA theo dõi dưới dạng trình phát nội dung. Đối số này chấp nhận cả thẻ <video> hoặc <audio>. Đối với nội dung và quảng cáo âm thanh, hướng dẫn này đề xuất sử dụng thẻ <audio> để tạo AdDisplayContainer. Nếu có nội dung video, bạn có thể sử dụng thẻ <video> để hiển thị kết hợp quảng cáo âm thanh và quảng cáo dạng video:
index.html
<audio id="audio-player"></audio>
<div class="ad-container"></div>
ads.js
audioPlayer = document.getElementById('audio-player');
adContainer = document.getElementById('ad-container');
adDisplayContainer = new google.ima.AdDisplayContainer(adContainer,
audioPlayer);
Ẩn AdDisplayContainer
SDK HTML5 của IMA vẫn yêu cầu có một AdDisplayContainer ngay cả khi quảng cáo hoặc nội dung không có phần hiển thị. Vì lý do này, bạn nên ẩn AdDisplayContainer. Xem ví dụ về cách bạn có thể ẩn phần tử:
style.css
.ad-container {
display: none;
}
Chế độ kiểm soát tuỳ chỉnh
Vì AdDisplayContainer bị ẩn, nên bạn cần có các chế độ kiểm soát tuỳ chỉnh để xử lý quá trình phát trong các khoảng thời gian chèn quảng cáo. AdsManager có các phương thức mà bạn có thể dùng để triển khai các chế độ kiểm soát tuỳ chỉnh này:
Xử lý quảng cáo có thể bỏ qua
Vì không có AdDisplayContainer nào hiển thị, nên IMA SDK không thể hiện nút Bỏ qua quảng cáo. Để xử lý quảng cáo có thể bỏ qua, hãy triển khai các phương thức IMA sau:
Đoạn mã mẫu sau đây minh hoạ cách thực hiện việc này.
ads.js
Bạn có thể thiết lập hàm updateSkippable để xác định xem và khi nào người dùng có thể bỏ qua quảng cáo. Hàm này sẽ được gọi trên mỗi sự kiện AD_PROGRESS IMA.
Hãy xem Hướng dẫn bắt đầu để biết hướng dẫn về cách thiết lập trình nghe cho các sự kiện IMA.
function onAdsManagerLoaded(adsManagerLoadedEvent) {
adsManager = adsManagerLoadedEvent.getAdsManager(
audioPlayer);
...
adsManager.addEventListener(
google.ima.AdEvent.Type.AD_PROGRESS,
onAdEvent);
...
}
function onAdEvent(adEvent) {
const ad = adEvent.getAd();
if (ad) {
currentAd = ad; // currentAd is defined outside of this functions scope.
}
switch (adEvent.type) {
...
case google.ima.AdEvent.Type.AD_PROGRESS:
// See https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/interface/google.ima.AdProgressData
const adProgressData = adEvent.getAdData();
updateSkippable(
adProgressData.currentTime,
currentAd.getSkipTimeOffset()
);
break;
...
}
}
/**
* Called when there may be a change in the skippable state.
* @param {number} currentTime The current time of the
* currently playing ad.
* @param {number} skipTimeOffset The number of seconds of playback
* before the ad becomes skippable. -1 is returned for non skippable
* ads or if this is unavailable.
*/
updateSkippable(currentTime, skipTimeOffset) {
const isAdSkippable = skipTimeOffset !== -1;
const isSkipCurrentlyAllowed = adsManager.getAdSkippableState();
const timeTillSkipInSeconds = Math.ceil(skipTimeOffset - currentTime);
updateSkipUI(
isAdSkippable, isSkipCurrentlyAllowed, timeTillSkipInSeconds);
}
Không giống như quảng cáo dạng video, IMA không thể cung cấp nút bỏ qua cho quảng cáo âm thanh.
Nhà phát triển phải thêm giao diện người dùng tuỳ chỉnh cho quảng cáo có thể bỏ qua. Bạn có thể thực hiện việc này bằng thẻ <button> đơn giản. Hàm updateSkipUI này cập nhật nút bỏ qua dựa trên việc quảng cáo có thể bỏ qua hay không, quảng cáo hiện có thể bỏ qua hay không và thời gian còn lại cho đến khi quảng cáo có thể bỏ qua. Thư viện này sử dụng lớp '.hidden', không phải do IMA cung cấp. Lớp .hidden sẽ thêm display: none; vào <button>.
/**
* Updates the skip button UI.
* @param {boolean} isAdSkippable if the current ad is a skippable ad.
* @param {boolean} isSkipCurrentlyAllowed if the ad can be skipped now.
* @param {number} timeTillSkipInSeconds time until the ad can be skipped in
* seconds.
*/
updateSkipUI(isAdSkippable, isSkipCurrentlyAllowed, timeTillSkipInSeconds) {
if (isAdSkippable) {
skipButton.classList.remove('hidden');
if (isSkipCurrentlyAllowed) {
skipButton.textContent = 'Skip ad';
skipButton.disabled = false;
} else {
skipButton.textContent = `Skip in ${timeTillSkipInSeconds} seconds`;
skipButton.disabled = true;
}
} else {
skipButton.classList.add('hidden');
}
}
Cuối cùng, hãy đặt một trình nghe cho các lượt nhấp của người dùng vào nút bỏ qua tuỳ chỉnh. Để bỏ qua quảng cáo, hãy gọi hàm adsManager.skip().
skipButton.addEventListener('click', () => {
adsManager.skip();
});
Đây là những thay đổi chính cần thiết để thiết lập SDK IMA với quảng cáo âm thanh. Để biết câu trả lời cho các vấn đề về việc triển khai, hãy truy cập vào Diễn đàn kỹ thuật SDK IMA.