Bài viết này cung cấp các ghi chú và ví dụ minh hoạ cách hiển thị quảng cáo xen kẽ thủ công trong trò chơi bằng cách sử dụng thư viện Thẻ nhà xuất bản của Google (GPT). Quảng cáo xen kẽ thủ công trong trò chơi là quảng cáo toàn trang, do GPT quản lý được hiển thị cho người dùng thông qua trình kích hoạt thủ công.
Sau đây là các sự kiện GPT được dùng để hiển thị và tương tác với quảng cáo xen kẽ:
| Sự kiện | Được kích hoạt khi... |
|---|---|
|
|
Một vùng quảng cáo xen kẽ thủ công trong trò chơi đã sẵn sàng để hiển thị. Để hiển thị quảng cáo xen kẽ, hãy gọi |
Quảng cáo xen kẽ thủ công trong trò chơi có thể hiển thị ở chế độ toàn màn hình hoặc bên trong khung hình của trò chơi, tuỳ thuộc vào cách trò chơi hiển thị. Tìm hiểu thêm về cấu trúc Quảng cáo trong trò chơi H5.
Mã mẫu bên dưới giả định rằng trò chơi H5 được đặt trực tiếp trên cùng một khung trên cùng như trang (sử dụng cấu trúc "Toàn màn hình"). Nếu trường hợp đó xảy ra, quảng cáo xen kẽ thủ công cũng sẽ hiển thị toàn màn hình.
Tuy nhiên, mã này cũng hoạt động khi được đặt bên trong khung con (sử dụng cấu trúc "iFrame/WebView"). Để ràng buộc quảng cáo xen kẽ thủ công với canvas trò chơi H5, bạn cần đặt trò chơi trong iFrame.
Ví dụ:
<!doctype html>
<html>
<head>
<!-- Thẻ nhà xuất bản của Google ở đây (nếu có) sẽ chỉ chịu trách nhiệm phân phát quảng cáo bên ngoài trò chơi H5. -->
<title>Trang cho trò chơi H5 ví dụ này</title>
<!-- Nội dung <head> của bạn ở đây. -->
</head>
<body>
<span id="example-text">Ví dụ về trò chơi H5</span>
<iframe src="https://www.example-game.com" title="Trò chơi ví dụ" allow="autoplay">
<!-- Mã mẫu được phân phát tại đây. Thẻ nhà xuất bản của Google được tải trong khung này sẽ chỉ được dùng trong trò chơi H5. -->
</iframe>
</body>
</html>
Lưu ý về cách sử dụng
- Để đảm bảo trải nghiệm người dùng tối ưu, GPT chỉ yêu cầu quảng cáo xen kẽ thủ công trong trò chơi trên những trang hỗ trợ định dạng chính xác. Do đó,
defineOutOfPageSlot()có thể trả về giá trị rỗng. Bạn nên kiểm tra trường hợp này để đảm bảo không thực hiện bất kỳ công việc nào không cần thiết. - Chỉ yêu cầu quảng cáo xen kẽ thủ công trong trò chơi trên những trang hoặc môi trường mà bạn muốn quảng cáo xen kẽ xuất hiện. Quảng cáo xen kẽ thủ công trong trò chơi đủ điều kiện để phân phát đến máy tính, máy tính bảng và thiết bị di động.
- Quảng cáo xen kẽ xuất hiện khi bạn gọi
makeGameManualInterstitialVisibletừ sự kiệnGameManualInterstitialSlotReady. - Quảng cáo xen kẽ thủ công trong trò chơi có giới hạn tần suất cố định. Điều này ngăn sự kiện
gameManualInterstitialSlotReadykích hoạt nhiều hơn một lần mỗi 120 giây.
Yêu cầu và đề xuất
- Quảng cáo xen kẽ thủ công trong trò chơi tạo ra vùng quảng cáo riêng. Không giống như các loại quảng cáo khác, bạn không cần phải xác định
<div>cho quảng cáo xen kẽ thủ công trong trò chơi. Những quảng cáo này sẽ tự động tạo và chèn vùng chứa riêng vào trang khi quảng cáo được lấp đầy. - Nếu sử dụng cấu trúc yêu cầu duy nhất (SRA) trên một trang có nhiều vùng, đừng gọi
display()cho đến khi div vùng quảng cáo tĩnh được tạo. Như đã giải thích trong Các phương pháp hay nhất về quảng cáo, lệnh gọi đầu tiên tớidisplay()yêu cầu mọi vùng quảng cáo được xác định trước điểm đó. Mặc dù vùng quảng cáo xen kẽ thủ công của trò chơi không yêu cầu<div>xác định trước, nhưng vùng quảng cáo tĩnh thì có. Việc gọidisplay()trước khi các phần tử này xuất hiện trên trang có thể làm các tín hiệu có chất lượng thấp hơn. Vì vậy, bạn nên trì hoãn lệnh gọi ban đầu cho đến khi xác định được các vùng tĩnh. - Việc quản lý quảng cáo xen kẽ thủ công yêu cầu thiết lập đơn vị quảng cáo và mục hàng giống như với quảng cáo xen kẽ trên web chuẩn.
Ví dụ:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ví dụ về quảng cáo xen kẽ thủ công trong trò chơi</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<script>
window.googletag = window.googletag || { cmd: [] };
let gameManualInterstitialSlot;
googletag.cmd.push(function () {
// Xác định vùng quảng cáo xen kẽ thủ công trong trò chơi.
defineGameManualInterstitialSlot();
// Xác định vùng quảng cáo tĩnh.
staticSlot = googletag.defineSlot(
'/6355419/Travel/Europe', [100, 100], 'static-ad-1')
.addService(googletag.pubads());
// Bật SRA và dịch vụ.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
function defineGameManualInterstitialSlot() {
gameManualInterstitialSlot = googletag.defineOutOfPageSlot(
'/6355419/Travel/Europe/France/Paris',
googletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIAL);
// Vị trí trả về giá trị rỗng nếu trang hoặc thiết bị không hỗ trợ quảng cáo xen kẽ.
if (gameManualInterstitialSlot) {
gameManualInterstitialSlot.addService(googletag.pubads());
printStatus('Đang chờ quảng cáo xen kẽ sẵn sàng...');
// Thêm trình nghe sự kiện để đăng ký trình xử lý lượt nhấp khi quảng cáo xen kẽ tải.
// Nếu sự kiện này không kích hoạt, hãy thử xoá bộ nhớ cục bộ và làm mới
// trang.
googletag.pubads().addEventListener('gameManualInterstitialSlotReady',
(slotReadyEvent) => {
if (gameManualInterstitialSlot === slotReadyEvent.slot) {
printStatus('Quảng cáo xen kẽ sẵn sàng.');
const button = document.getElementById('trigger');
button.style.display = 'block';
button.addEventListener('click', () => {
slotReadyEvent.makeGameManualInterstitialVisible();
printStatus('Quảng cáo xen kẽ đang hoạt động.');
}, { once: true });
}
});
googletag.pubads().addEventListener('gameManualInterstitialSlotClosed',
resumeGame);
}
}
function resumeGame() {
document.getElementById('trigger').style.display = 'none';
// Các vùng quảng cáo xen kẽ thủ công trong trò chơi chỉ có thể sử dụng một lần, vì vậy hãy huỷ vùng cũ và tạo vùng mới.
googletag.destroySlots([gameManualInterstitialSlot]);
defineGameManualInterstitialSlot();
googletag.display(gameManualInterstitialSlot);
}
function printStatus(status) {
document.getElementById('status').innerText = status;
}
</script>
<style>
button {
display: none;
}
div.content {
position: fixed;
top: 50%;
}
</style>
</head>
<body>
<div id="static-ad-1" style="width: 100px; height: 100px;"></div>
<div class="content">
<span id="status">Quảng cáo xen kẽ thủ công trong trò chơi không được hỗ trợ trên trang này.</span>
<p>
<button id="trigger">KÍCH HOẠT QUẢNG CÁO XEN KẼ</button>
</p>
</div>
<script>
googletag.cmd.push(function () {
// Đảm bảo lệnh gọi hiển thị đầu tiên xuất hiện sau vùng quảng cáo tĩnh
// div được xác định.
googletag.display(staticSlot);
});
</script>
</body>
</html>
