ควบคุมการโหลดและรีเฟรชโฆษณา

ในตัวอย่างแนวคิดการเริ่มต้นใช้งานและพื้นฐาน แท็กผู้เผยแพร่โฆษณาผ่าน Google ระบบใช้เมธอด display() ของไลบรารี (GPT) เพื่อลงทะเบียนและแสดงช่องโฆษณา แต่ก็มีบางครั้งที่ มีประสิทธิภาพมากกว่า หรือแม้กระทั่งจำเป็นต่อการแยกการกระทำเหล่านี้ เพื่อเพิ่ม ควบคุมได้อย่างแม่นยำว่าระบบจะโหลดเนื้อหาโฆษณาเมื่อใด เช่น เมื่อทำงานกับ แพลตฟอร์มการจัดการความยินยอม (CMP) หรือการส่งคำขอเนื้อหาโฆษณาจากผู้ใช้ การดำเนินการ

ในคู่มือนี้เราจะสำรวจกลไกที่ 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");

        // 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"
      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. อย่ารีเฟรชเร็วเกินไป

    การรีเฟรชช่องโฆษณาเร็วเกินไปอาจทำให้คำขอโฆษณาถูกควบคุม เพื่อป้องกันปัญหานี้ ให้หลีกเลี่ยงการรีเฟรชสล็อตบ่อยกว่า 1 ครั้งในทุกๆ 30 วินาที

  2. อย่าโทรหา clear() โดยไม่จำเป็น

    เมื่อรีเฟรชช่องโฆษณา ไม่ต้องเรียก PubAdsService.clear() ก่อน ขั้นตอนนี้ไม่จำเป็น เนื่องจาก refresh() แทนที่เนื้อหาของช่องที่ระบุโดยไม่คำนึงถึง เคยโหลดเนื้อหาโฆษณามาก่อนไหม กำลังโทรหา clear() ทันที ก่อนที่จะเรียก refresh() จะเพิ่มระยะเวลาที่ช่องว่างในการเรียก แสดงต่อผู้ใช้

  3. รีเฟรชเฉพาะช่องโฆษณาที่มองเห็นได้

    ใช้ 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();
});