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

ในตัวอย่างการเริ่มต้นใช้งานและแนวคิดพื้นฐานของเรา มีการใช้เมธอด 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. อย่ารีเฟรชเร็วเกินไป

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

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

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

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

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