ในตัวอย่างการเริ่มต้นใช้งานและแนวคิดพื้นฐานของเรา มีการใช้เมธอด display() ของไลบรารีแท็กผู้เผยแพร่โฆษณาผ่าน Google (GPT) เพื่อลงทะเบียนและแสดงช่องโฆษณา แต่ก็มีบางครั้งที่
ที่ต้องการหรือแม้กระทั่งจำเป็นต่อการแยกการดำเนินการเหล่านี้ เพื่อเพิ่ม
ควบคุมได้อย่างแม่นยำว่าระบบจะโหลดเนื้อหาโฆษณาเมื่อใด เช่น เมื่อทํางานร่วมกับแพลตฟอร์มการจัดการความยินยอมหรือขอเนื้อหาโฆษณาตามการกระทําของผู้ใช้
ในคู่มือนี้เราจะสำรวจกลไกที่ GPT มีให้เพื่อ ควบคุมการโหลดเนื้อหาโฆษณาและดึงเนื้อหาโฆษณาใหม่ตามคำขอ ดูโค้ดแบบเต็มสำหรับตัวอย่างนี้ได้ในหน้าตัวอย่างคําขอตามเหตุการณ์
ควบคุมการโหลดโฆษณา
โดยค่าเริ่มต้น ลักษณะการทำงานของเมธอด display() คือ
ลงทะเบียน ส่งคำขอ และแสดงเนื้อหาโฆษณาในช่องโฆษณา คุณปิดใช้การขอและการแสดงผลเนื้อหาโฆษณาโดยอัตโนมัติได้โดยใช้เมธอด PubAdsService.disableInitialLoad()
เมื่อปิดใช้การโหลดครั้งแรก การเรียก display() จะลงทะเบียนเฉพาะช่องโฆษณาเท่านั้น
จะไม่มีการโหลดเนื้อหาโฆษณาจนกว่าจะมีการดำเนินการครั้งที่ 2 ซึ่งจะช่วยให้คุณควบคุมเวลาที่สร้างคําขอโฆษณาได้อย่างแม่นยำ
คุณต้องเรียกใช้ disableInitialLoad() ก่อนเปิดใช้บริการและก่อนเรียกใช้ display() เพื่อหลีกเลี่ยงคำขอโฆษณาที่ไม่ได้ตั้งใจ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Request GPT ads based on events." />
<title>Event-based ad requests</title>
<script
async
src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
crossorigin="anonymous"
></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
// Define the ad slot.
googletag
.defineSlot("/6355419/Travel", [728, 90], "div-for-slot")
.setTargeting("test", "event")
.addService(googletag.pubads());
// Disable initial load.
// This prevents GPT from automatically fetching ads when display is called.
googletag.pubads().disableInitialLoad();
googletag.enableServices();
});
</script>
<style></style>
</head>
<body>
<div id="div-for-slot" style="width: 300px; height: 250px"></div>
<script>
googletag.cmd.push(() => {
// Register the ad slot.
// An ad will not be fetched until refresh is called.
googletag.display("div-for-slot");
});
</script>
</body>
</html>ในตัวอย่างนี้ ระบบปิดใช้การโหลดเริ่มต้นเพื่อให้มั่นใจว่าจะไม่มีคําขอโฆษณาและไม่มีการแสดงผลเนื้อหาโฆษณาเมื่อเรียกใช้ display() ช่องพร้อมที่จะรับและแสดงโฆษณาแล้ว แต่ระบบจะไม่ส่งคําขอโฆษณาจนกว่าจะมีการรีเฟรชช่อง
รีเฟรช
เมธอด PubAdsService.refresh() ใช้ในการป้อนข้อมูล
หรือช่องโฆษณาที่มีเนื้อหาโฆษณาใหม่ เมธอดนี้สามารถใช้บนช่องโฆษณาที่มี
ยังไม่ได้โหลดเนื้อหาใดๆ (เนื่องจาก disableInitialLoad()) หรือแทนที่
เนื้อหาของช่องโฆษณาที่มีอยู่แล้ว อย่างไรก็ตาม มีเพียงช่องที่ลงทะเบียนโดยการเรียกใช้ display() เท่านั้นที่มีสิทธิ์รีเฟรช
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="description" content="Request GPT ads based on events." />
<title>Event-based ad requests</title>
<script
async
src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
crossorigin="anonymous"
></script>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(() => {
// Define the ad slot.
googletag
.defineSlot("/6355419/Travel", [728, 90], "div-for-slot")
.setTargeting("test", "event")
.addService(googletag.pubads());
// Disable initial load.
// This prevents GPT from automatically fetching ads when display is called.
googletag.pubads().disableInitialLoad();
googletag.enableServices();
});
</script>
<style></style>
</head>
<body>
<div id="div-for-slot" style="width: 300px; height: 250px"></div>
<button id="showAdButton">Show/Refresh Ad</button>
<script>
googletag.cmd.push(() => {
// Register the ad slot.
// An ad will not be fetched until refresh is called.
googletag.display("div-for-slot");
// Register click event handler.
document.getElementById("showAdButton").addEventListener("click", () => {
googletag.cmd.push(() => {
googletag.pubads().refresh();
});
});
});
</script>
</body>
</html>ในตัวอย่างที่แก้ไขแล้วนี้ เมื่อผู้ใช้คลิกปุ่ม "แสดง/รีเฟรชโฆษณา" ระบบจะเรียกใช้เมธอด
refresh() ซึ่งจะทริกเกอร์คำขอดึงเนื้อหาโฆษณาใหม่
และโหลดลงในช่องที่ลงทะเบียน โดยเขียนทับเนื้อหาที่มีอยู่แล้ว
โปรดทราบว่าในตัวอย่างก่อนหน้านี้ มีการเรียกเมธอด refresh() โดยไม่มี
พารามิเตอร์ ซึ่งมีผลของการรีเฟรชช่องโฆษณาที่ลงทะเบียนไว้ทั้งหมด
อย่างไรก็ตาม คุณยังสามารถรีเฟรชช่องโฆษณาที่ต้องการได้โดยส่งอาร์เรย์
ลงในเมธอด refresh() ดูตัวอย่างรีเฟรชช่องโฆษณา
แนวทางปฏิบัติแนะนำ
เมื่อทํางานกับ refresh() คุณควรปฏิบัติตามแนวทางปฏิบัติแนะนำบางอย่าง
อย่ารีเฟรชเร็วเกินไป
การรีเฟรชช่องโฆษณาเร็วเกินไปอาจทำให้คำขอโฆษณาถูกควบคุม เพื่อป้องกันปัญหานี้ ให้หลีกเลี่ยงการรีเฟรชสล็อตบ่อยกว่า 1 ครั้งในทุกๆ 30 วินาที
อย่าโทรหา
clear()โดยไม่จำเป็นเมื่อรีเฟรชช่องโฆษณา อย่าเรียกใช้
PubAdsService.clear()ก่อน ขั้นตอนนี้ไม่จำเป็น เนื่องจากrefresh()แทนที่เนื้อหาของช่องที่ระบุโดยไม่คำนึงถึง เคยโหลดเนื้อหาโฆษณามาก่อนไหม การเรียกclear()ทันทีก่อนเรียกrefresh()จะทําให้ผู้ใช้เห็นช่องว่างนานขึ้นเท่านั้นรีเฟรชเฉพาะช่องโฆษณาที่มองเห็นได้
การใช้
refresh()เพื่อแทนที่เนื้อหาของช่องโฆษณาที่ไม่เคยมีการแสดงผลอาจทำให้อัตรา ActiveView ลดลงอย่างมาก ImpressionViewableEvent เพื่อ กำหนดว่าช่องโฆษณาจะแสดงเมื่อใด ดังที่แสดงดังต่อไปนี้ ตัวอย่าง:googletag.cmd.push(function() { var REFRESH_KEY = 'refresh'; var REFRESH_VALUE = 'true'; googletag.defineSlot('/6355419/Travel',[728, 90], 'div-for-slot') .setTargeting(REFRESH_KEY, REFRESH_VALUE) .setTargeting('test', 'event') .addService(googletag.pubads()); // Number of seconds to wait after the slot becomes viewable. var SECONDS_TO_WAIT_AFTER_VIEWABILITY = 60; googletag.pubads().addEventListener('impressionViewable', function(event) { var slot = event.slot; if (slot.getTargeting(REFRESH_KEY).indexOf(REFRESH_VALUE) > -1) { setTimeout(function() { googletag.pubads().refresh([slot]); }, SECONDS_TO_WAIT_AFTER_VIEWABILITY * 1000); } }); googletag.enableServices(); });