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

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

    การรีเฟรชช่องโฆษณาเร็วเกินไปอาจส่งผลให้ระบบควบคุมคําขอโฆษณาได้ เพื่อป้องกันเหตุการณ์เช่นนี้ โปรดหลีกเลี่ยงการรีเฟรชช่องบ่อยกว่า 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();
});