ในตัวอย่างเริ่มต้นและแนวคิดพื้นฐาน เราจะใช้เมธอด 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"></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"); // Register click event handler. document.getElementById("showAdButton").addEventListener("click", () => { googletag.cmd.push(() => { googletag.pubads().refresh(); }); }); }); </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"></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()
เพื่อแทนที่เนื้อหาของช่องโฆษณาที่ไม่เคยดูได้ อาจทําให้อัตรามุมมองแอ็กทีฟลดลงอย่างมาก คุณใช้ 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(); });