บทความนี้จะกล่าวถึงหมายเหตุและตัวอย่างที่สาธิตวิธีแสดงโฆษณาคั่นระหว่างหน้าที่กำหนดเองในเกมโดยใช้ไลบรารีแท็กผู้เผยแพร่โฆษณาผ่าน Google (GPT) โฆษณาคั่นระหว่างหน้าที่กำหนดเองในเกมเป็นโฆษณาแบบเต็มหน้าที่จัดการโดย GPT ซึ่งแสดงต่อผู้ใช้ผ่านทริกเกอร์ด้วยตนเอง
เหตุการณ์ GPT ต่อไปนี้ใช้เพื่อแสดงและโต้ตอบกับโฆษณาคั่นระหว่างหน้า
| เหตุการณ์ | เริ่มทำงานเมื่อ... |
|---|---|
|
|
ช่องโฆษณาคั่นระหว่างหน้าที่กำหนดเองของเกมพร้อมที่จะแสดงแล้ว หากต้องการแสดงโฆษณาคั่นระหว่างหน้า ให้เรียก |
โฆษณาคั่นระหว่างหน้าที่กำหนดเองในเกมอาจแสดงผลแบบเต็มหน้าจอหรือภายในเฟรมของเกมก็ได้ โดยขึ้นอยู่กับลักษณะการแสดงเกม ดูข้อมูลเพิ่มเติมเกี่ยวกับโครงสร้างโฆษณาเกม H5
โค้ดตัวอย่างด้านล่างถือว่าเกม H5 ถูกวางในเฟรมบนสุดเดียวกับหน้าเว็บโดยตรง (โดยใช้โครงสร้าง "เต็มหน้าจอ") ในกรณีนี้ โฆษณาคั่นระหว่างหน้าที่กำหนดเองจะแสดงผลแบบเต็มหน้าจอด้วย
อย่างไรก็ตาม โค้ดเดียวกันนี้จะยังใช้ได้เมื่อวางไว้ในเฟรมย่อย (โดยใช้โครงสร้าง "iframe/WebView") หากต้องการจำกัดโฆษณาคั่นระหว่างหน้าที่กำหนดเองใน Canvas ของเกม H5 จะต้องวางเกมใน iFrame
ตัวอย่าง
<!doctype html>
<html>
<head>
<!-- The Google Publisher Tag here, if any, will only be responsible for serving ads outside of the H5 game. -->
<title>Page for this example H5 game</title>
<!-- Your <head> content here. -->
</head>
<body>
<span id="example-text">Example H5 game</span>
<iframe src="https://www.example-game.com" title="Example game" allow="autoplay">
<!-- Sample code is served here. The Google Publisher Tag loaded in this frame will only be used within the H5 game. -->
</iframe>
</body>
</html>
หมายเหตุการใช้งาน
- เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดีที่สุด GPT จะขอเฉพาะโฆษณาคั่นระหว่างหน้าที่กำหนดเองในเกมในหน้าเว็บที่รองรับรูปแบบนี้อย่างเหมาะสม ด้วยเหตุนี้
defineOutOfPageSlot()อาจแสดงผลเป็น Null คุณควรตรวจสอบกรณีนี้เพื่อให้แน่ใจว่าไม่มีการทำงานที่ไม่จำเป็น - ขอเฉพาะโฆษณาคั่นระหว่างหน้าที่กำหนดเองในเกมในหน้าเว็บหรือสภาพแวดล้อมที่คุณต้องการให้โฆษณาคั่นระหว่างหน้าปรากฏ โฆษณาคั่นระหว่างหน้าที่กำหนดเองในเกมมีสิทธิ์แสดงบนเดสก์ท็อป แท็บเล็ต และอุปกรณ์เคลื่อนที่
- โฆษณาคั่นระหว่างหน้าจะปรากฏขึ้นเมื่อคุณเรียกใช้
makeGameManualInterstitialVisibleจากเหตุการณ์GameManualInterstitialSlotReady - โฆษณาคั่นระหว่างหน้าที่กำหนดเองในเกมมีความถี่สูงสุดคงที่ ซึ่งจะป้องกันไม่ให้เหตุการณ์
gameManualInterstitialSlotReadyเริ่มทำงานมากกว่า 1 ครั้งในทุก 120 วินาที
ข้อกำหนดและคำแนะนำ
- โฆษณาคั่นระหว่างหน้าที่กำหนดเองในเกมจะสร้างช่องโฆษณาของตนเอง ซึ่งต่างจากโฆษณาประเภทอื่นๆ ตรงที่ไม่จำเป็นต้องกำหนด
<div>สำหรับโฆษณาคั่นระหว่างหน้าที่กำหนดเองในเกม โฆษณาเหล่านี้จะสร้างและแทรกคอนเทนเนอร์ของตัวเองลงในหน้าโดยอัตโนมัติเมื่อมีโฆษณาเข้ามา - หากใช้สถาปัตยกรรมคำขอรวมครั้งเดียว (SRA) ในหน้าที่มีช่องโฆษณาหลายช่อง อย่าเรียกใช้
display()จนกว่าจะมีการสร้าง div ของช่องโฆษณาแบบคงที่ ตามที่อธิบายไว้ในแนวทางปฏิบัติแนะนำสำหรับโฆษณา การเรียกไปยังdisplay()ครั้งแรกจะขอช่องโฆษณาทุกช่องที่กำหนดไว้ก่อนจุดนั้น แม้ว่าช่องโฆษณาคั่นระหว่างหน้าด้วยตนเองในเกมไม่ต้องมี<div>ที่กำหนดไว้ล่วงหน้า แต่ช่องโฆษณาแบบคงที่ต้องมี การเรียกใช้display()ก่อนที่องค์ประกอบเหล่านี้จะปรากฏในหน้าเว็บอาจส่งผลให้สัญญาณมีคุณภาพต่ำลง ดังนั้น เราขอแนะนำให้คุณหน่วงเวลาการเรียกใช้ครั้งแรกไว้จนกว่าจะกำหนดช่องโฆษณาแบบคงที่ - ในการดูแลการแสดงโฆษณาคั่นระหว่างหน้าด้วยตนเอง คุณต้องตั้งค่าหน่วยโฆษณาและรายการโฆษณาเหมือนกันเป็นโฆษณาคั่นระหว่างหน้าในเว็บแบบมาตรฐาน
ตัวอย่าง
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Game Manual Interstitial Ad Example</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 () {
// Define a game manual interstitial ad slot.
defineGameManualInterstitialSlot();
// Define static ad slots.
staticSlot = googletag.defineSlot(
'/6355419/Travel/Europe', [100, 100], 'static-ad-1')
.addService(googletag.pubads());
// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
function defineGameManualInterstitialSlot() {
gameManualInterstitialSlot = googletag.defineOutOfPageSlot(
'/6355419/Travel/Europe/France/Paris',
googletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIAL);
// Slot returns null if the page or device does not support interstitials.
if (gameManualInterstitialSlot) {
gameManualInterstitialSlot.addService(googletag.pubads());
printStatus('Waiting for interstitial to be ready...');
// Add event listener to register click handler once interstitial loads.
// If this event doesn't fire, try clearing local storage and refreshing
// the page.
googletag.pubads().addEventListener('gameManualInterstitialSlotReady',
(slotReadyEvent) => {
if (gameManualInterstitialSlot === slotReadyEvent.slot) {
printStatus('Interstitial is ready.');
const button = document.getElementById('trigger');
button.style.display = 'block';
button.addEventListener('click', () => {
slotReadyEvent.makeGameManualInterstitialVisible();
printStatus('Interstitial is active.');
}, { once: true });
}
});
googletag.pubads().addEventListener('gameManualInterstitialSlotClosed',
resumeGame);
}
}
function resumeGame() {
document.getElementById('trigger').style.display = 'none';
// Game manual interstitial ad slots are one-time use, so destroy the old slot and create a new one.
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">Game manual interstitial is not supported on this page.</span>
<p>
<button id="trigger">TRIGGER INTERSTITIAL</button>
</p>
</div>
<script>
googletag.cmd.push(function () {
// Ensure the first call to display comes after static ad slot
// divs are defined.
googletag.display(staticSlot);
});
</script>
</body>
</html>
