บทความนี้จะกล่าวถึงหมายเหตุและตัวอย่างที่สาธิตวิธีแสดงโฆษณาคั่นระหว่างหน้าในเกม H5 โดยใช้ไลบรารีแท็กผู้เผยแพร่โฆษณาผ่าน Google (GPT)
โฆษณาคั่นระหว่างหน้าในเกมเป็นโฆษณาแบบเต็มหน้าที่จัดการโดย GPT ซึ่งจะแสดงต่อผู้ใช้ผ่านทริกเกอร์แบบแมนนวลในเกมที่ทำงานบนหน้าเว็บ
ในหน้านี้
- ข้อกำหนดและคำแนะนำ
- เริ่มต้นใช้งานการติดแท็ก
- การดูแลการแสดงโฆษณา
- การดูแลการแสดงโฆษณาชุดวิดีโอ: โฆษณาคั่นระหว่างหน้าในเกม H5 | โฆษณาที่มีการให้รางวัลสำหรับเกม H5
- การรายงาน
ข้อกำหนดและคำแนะนำ
- ผู้เผยแพร่โฆษณาไม่ได้รับอนุญาตให้ใช้โฆษณาคั่นระหว่างหน้าในเกม H5 ในพื้นที่โฆษณาที่ไม่ใช่เกม การใช้รูปแบบนี้จะถือว่าผู้เผยแพร่โฆษณายอมรับเงื่อนไขนี้โดยอัตโนมัติ นอกจากนี้ คุณยังควรปฏิบัติตามนโยบายผู้เผยแพร่โฆษณาของ Google และหลักเกณฑ์ของ Google Ad Manager Partner ด้วย
- Google ขอสงวนสิทธิ์ในการอนุมัติหรือไม่อนุมัติผู้เผยแพร่โฆษณาได้ทุกเมื่อ และหลังจากนั้นระบบจะนำผู้เผยแพร่โฆษณาที่ละเมิดนโยบายออกจากรายการที่อนุญาต
- โฆษณาคั่นระหว่างหน้าในเกมจะสร้างช่องโฆษณาของตนเอง ซึ่งต่างจากโฆษณาประเภทอื่นๆ ตรงที่ไม่จำเป็นต้องกำหนดองค์ประกอบ <div> สำหรับโฆษณาคั่นระหว่างหน้าในเกม โฆษณาเหล่านี้จะสร้างและแทรกคอนเทนเนอร์ของตัวเองลงในหน้าโดยอัตโนมัติเมื่อมีโฆษณาเข้ามา
- หากใช้สถาปัตยกรรมคำขอรวมครั้งเดียว (SRA) ในหน้าที่มีช่องโฆษณาหลายช่อง อย่าเรียกใช้
display()จนกว่าจะมีการสร้าง div ของช่องโฆษณาแบบคงที่ ตามที่อธิบายไว้ในแนวทางปฏิบัติแนะนำสำหรับโฆษณา การเรียกไปยังdisplay()ครั้งแรกจะขอช่องโฆษณาทุกช่องที่กำหนดไว้ก่อนจุดนั้น แม้ว่าช่องโฆษณาคั่นระหว่างหน้าในเกมไม่ต้องมี <div> ที่กำหนดไว้ล่วงหน้า แต่ช่องโฆษณาแบบคงที่ต้องมี การเรียกใช้display()ก่อนที่องค์ประกอบเหล่านี้จะปรากฏในหน้าเว็บอาจส่งผลให้สัญญาณมีคุณภาพต่ำลง ดังนั้น เราขอแนะนำให้คุณหน่วงเวลาการเรียกใช้ครั้งแรกไว้จนกว่าจะกำหนดช่องโฆษณาแบบคงที่ - ในการดูแลการแสดงโฆษณาคั่นระหว่างหน้าด้วยตนเอง คุณต้องตั้งค่าหน่วยโฆษณาและรายการโฆษณาเหมือนกันเป็นโฆษณาคั่นระหว่างหน้าในเว็บแบบมาตรฐาน
เริ่มต้นใช้งานการติดแท็ก
- สร้างช่อง GPT โดยใช้
googletag.defineOutOfPageSlot()และตั้งค่ารูปแบบ OutOfPage เป็นgoogletag.defineOutOfPageSlot()
ดูคำแนะนำทางเทคนิคสำหรับนักพัฒนาซอฟต์แวร์ GPT สำหรับโฆษณาคั่นระหว่างหน้าในเกม H5 - เมื่อกำหนดช่องแล้ว ให้เพิ่ม Listener เหตุการณ์ซึ่งจะรอเหตุการณ์
gameManualInterstitialSlotReadyใน Callback ของ Listener เหตุการณ์ ให้เรียกใช้เมธอดmakeGameManualInterstitialVisible()ในออบเจ็กต์เหตุการณ์ที่ระบุเพื่อแสดงโฆษณา - เมื่อคุณประกาศช่องโฆษณาแบบคงที่อื่นๆ ทั้งหมดแล้ว การเรียกใช้
googletag.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 () {
// กำหนดช่องโฆษณาคั่นระหว่างหน้าที่กำหนดเองในเกม
defineGameManualInterstitialSlot();
// กำหนดช่องโฆษณาคงที่
staticSlot = googletag.defineSlot(
'/6355419/Travel/Europe', [100, 100], 'static-ad-1')
.addService(googletag.pubads());
// เปิดใช้ SRA และบริการ
googletag.pubads().enableSingleRequest();
googletag.enableServices();
});
function defineGameManualInterstitialSlot() {
gameManualInterstitialSlot = googletag.defineOutOfPageSlot(
'/6355419/Travel/Europe/France/Paris',
googletag.enums.OutOfPageFormat.GAME_MANUAL_INTERSTITIAL);
// ช่องโฆษณาแสดงค่า Null หากหน้าหรืออุปกรณ์ไม่รองรับโฆษณาคั่นระหว่างหน้า
if (gameManualInterstitialSlot) {
gameManualInterstitialSlot.addService(googletag.pubads());
printStatus('Waiting for interstitial to be ready...');
// ใส่ Listener เหตุการณ์ เพื่อรีจิสเตอร์ตัวแฮนเดิลคลิกเมื่อโฆษณาคั่นระหว่างหน้าโหลด
// หากเหตุการณ์นี้ไม่เริ่มทำงาน ให้ลองล้างพื้นที่เก็บข้อมูลในเครื่องแล้วรีเฟรช
// หน้า
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';
// ช่องโฆษณาคั่นระหว่างหน้าแบบกำหนดเองในเกมเป็นแบบใช้ครั้งเดียว ดังนั้นให้ลบล้างช่องเก่าแล้วสร้างช่องใหม่
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 () {
// ตรวจสอบว่าการเรียกใช้ให้แสดงครั้งแรกมาหลังจากที่กำหนด div ของ
// ช่องโฆษณาคงที่แล้ว
googletag.display(staticSlot);
});
</script>
</body>
</html>
เหตุการณ์ 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
- เพื่อให้ผู้ใช้ได้รับประสบการณ์ที่ดีที่สุด GPT จะขอเฉพาะโฆษณาคั่นระหว่างหน้าในเกมในหน้าเว็บที่รองรับรูปแบบนี้อย่างเหมาะสม ด้วยเหตุนี้
defineOutOfPageSlot()อาจแสดงผลเป็น Null ขอเฉพาะโฆษณาคั่นระหว่างหน้าในเกมบนหน้าเว็บหรือสภาพแวดล้อมที่ต้องการให้โฆษณาคั่นระหว่างหน้าปรากฏ โฆษณาคั่นระหว่างหน้าในเกมมีสิทธิ์แสดงบนเดสก์ท็อป แท็บเล็ต และมือถือ - โฆษณาคั่นระหว่างหน้าจะปรากฏขึ้นเมื่อคุณเรียกใช้
makeGameManualInterstitialVisibleจากgameManualInterstitialSlotReady event - โฆษณาคั่นระหว่างหน้าในเกมมีความถี่สูงสุดคงที่ ซึ่งจะป้องกันไม่ให้เหตุการณ์
gameManualInterstitialSlotReadyเริ่มทำงานมากกว่า 1 ครั้งในทุก 30 วินาที
การดูแลการแสดงโฆษณา
- สร้างหน่วยโฆษณาใหม่หรือนําหน่วยโฆษณาที่มีอยู่มาใช้ซ้ำ เลือกขนาดหน่วยโฆษณาเป็น 320x480, 300x250 และ 336x280
- สร้างรายการโฆษณา เลือกการตั้งค่ารายการโฆษณาที่เหมาะสมตามกรณีการใช้งานของคุณ
| การตั้งค่ารายการโฆษณา | ||||
|---|---|---|---|---|
| กรณีการใช้งาน | ประเภทโฆษณา | ประเภทรายการโฆษณา | ครีเอทีฟโฆษณาที่คาดไว้ | การกำหนดเป้าหมาย > พื้นที่โฆษณา |
| วิธีแสดงโฆษณา Display แบบจองล่วงหน้า | Display |
|
320x480, 300x250 หรือ 336x280 |
หน่วยโฆษณาที่สร้างหรือเลือกในขั้นตอนก่อนหน้า |
| วิธีแสดงโฆษณาที่ไม่ได้จอง | Display |
|
||
| เพื่อแสดงโฆษณาวิดีโอแบบจอง (เช่น แท็ก VAST หรือ MP4) | วิดีโอหรือเสียง |
|
300x250v หรือ 320x480v | |
| วิธีแสดงโฆษณาทดแทน/โฆษณาในการประมูลแบบเปิด | Display | Ad Exchange | ขนาดที่ขอทั้งหมด | |
การดูแลการแสดงโฆษณาชุดวิดีโอ: เริ่มต้นใช้งานโฆษณาคั่นระหว่างหน้าในเกม H5
รับชมวิดีโอจากชุดวิดีโอแบบ 2 ตอนนี้เพื่อช่วยให้คุณเริ่มต้นใช้โฆษณาคั่นระหว่างหน้าในเกม H5 ได้
| ตอนที่ 1: โฆษณาคั่นระหว่างหน้าของเกม H5 ใน Ad Manager |
| H5 Gaming Interstitial Ads on Ad Manager |
| ตอนที่ 2: โฆษณาที่มีการให้รางวัลสำหรับเกม H5 ใน Ad Manager |
| Rewarded Ads for H5 Gaming on Ad Manager |