SDK HTML5 của IMA hỗ trợ quảng cáo âm thanh có cách thiết lập tương tự như quảng cáo dạng video, nhưng có một vài điểm khác biệt chính. Đối với mọi phần thiết lập IMA không được đề cập 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 một đố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 âm thanh và quảng cáo, 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 dạng âm thanh và 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 IMA HTML5 vẫn yêu cầu AdDisplayContainer ngay cả khi không có phần hiển thị cho quảng cáo hoặc nội dung. Vì lý do này, bạn nên ẩn AdDisplayContainer. Xem ví dụ về cách ẩn phần tử:
style.css
.ad-container {
display: none;
}
Chế độ điều khiển tuỳ chỉnh
Vì AdDisplayContainer bị ẩn, nên bạn cần có các chế độ điều khiển tuỳ chỉnh để xử lý việc phát trong các khoảng nghỉ quảng cáo. AdsManager có các phương thức có thể dùng để triển khai các chế độ điều khiển tuỳ chỉnh này:
Xử lý quảng cáo có thể bỏ qua
Vì không có AdDisplayContainer hiển thị, nên SDK IMA không thể hiển thị 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:
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 có thể bỏ qua quảng cáo hay không và thời điểm có thể bỏ qua quảng cáo. Hàm này phải được gọi trên mỗi sự kiện IMA AD_PROGRESS.
Hãy xem Hướng dẫn bắt đầu sử dụng để 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 dạng â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 một 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. Lớp này sử dụng lớp '.hidden' mà IMA không cung cấp. Lớp .hidden 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 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ề triển khai, hãy truy cập vào Diễn đàn kỹ thuật về SDK IMA.