เริ่มต้นใช้งานแท็กผู้เผยแพร่โฆษณาผ่าน Google

แท็กผู้เผยแพร่โฆษณาผ่าน Google (GPT) คือไลบรารีการติดแท็กโฆษณาสำหรับ Google Ad Manager

คุณใช้ GPT เพื่อสร้างคำขอโฆษณาแบบไดนามิกได้ GPT จะใช้รายละเอียดที่สำคัญ เช่น รหัสหน่วยโฆษณา ขนาดโฆษณา และการกำหนดเป้าหมายเอง จากนั้นจะสร้างคำขอและแสดงโฆษณาบนหน้าเว็บ

ดูรายละเอียดเพิ่มเติมเกี่ยวกับ GPT ได้ที่ศูนย์ช่วยเหลือของ Ad Manager

ตัวอย่างการใช้เพื่อเริ่มต้นใช้งาน GPT มีดังนี้ หากต้องการความช่วยเหลือเพิ่มเติมเกี่ยวกับ GPT โปรดดูตัวเลือกการสนับสนุน

แสดงโฆษณาทดสอบ

ตัวอย่างต่อไปนี้จะแนะนำการสร้างหน้าทดสอบที่ใช้ GPT เพื่อโหลดโฆษณาทั่วไปจากเครือข่ายทดสอบของ Google

โค้ดแบบเต็มสำหรับตัวอย่างนี้ดูได้บนหน้าตัวอย่างของแสดงโฆษณาทดสอบ

  1. สร้างเอกสาร HTML พื้นฐาน

    ในเครื่องมือแก้ไขข้อความ ให้สร้างเอกสาร HTML พื้นฐานชื่อ hello-gpt.html

    <!doctype html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="description" content="Display a fixed-sized test ad." />
    <title>Display a test ad</title>
    <style></style>
  </head>
  <body>
    <script>
      googletag.cmd.push(() => {
        // Request and render an ad for the "banner-ad" slot.
        googletag.display("banner-ad");
      });
    </script>
  </body>
</html>

  2. โหลดไลบรารี GPT

    โหลดไลบรารี GPT โดยเพิ่มโค้ดต่อไปนี้ลงใน <head> ของเอกสาร HTML

    โค้ดนี้จะโหลดไลบรารี GPT จาก https://securepubads.g.doubleclick.net/tag/js/gpt.js เมื่อโหลดไลบรารีเรียบร้อยแล้ว ไลบรารีจะประมวลผลคำสั่งที่อยู่ในคิวของออบเจ็กต์ googletag

    <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Display a fixed-sized test ad." />
  <title>Display a test ad</title>
  <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
  <style></style>
</head>

  3. กำหนดช่องโฆษณา

    กำหนดช่องโฆษณาและเริ่มต้น GPT โดยใช้เมธอด googletag.enableServices()

    ก่อนอื่น โค้ดนี้จะดูแลให้ออบเจ็กต์ googletag พร้อมใช้งาน จากนั้นจัดคิวคำสั่งที่สร้างช่องโฆษณาและเปิดใช้งาน GPT

    ช่องโฆษณาในตัวอย่างนี้จะโหลดโฆษณาขนาด 300x250 จากหน่วยโฆษณาที่ระบุโดยเส้นทาง /6355419/Travel/Europe/France/Paris โฆษณาดังกล่าวจะแสดงในองค์ประกอบ <div id="banner-ad"> ในส่วนเนื้อหาของหน้า ซึ่งจะมีการเพิ่มเอาไว้ในลำดับถัดไป

    <head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <meta name="description" content="Display a fixed-sized test ad." />
  <title>Display a test ad</title>
  <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
  <script>
    window.googletag = window.googletag || { cmd: [] };

    googletag.cmd.push(() => {
      // Define an ad slot for div with id "banner-ad".
      googletag
        .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "banner-ad")
        .addService(googletag.pubads());

      // Enable the PubAdsService.
      googletag.enableServices();
    });
  </script>
  <style></style>
</head>

  4. ระบุตำแหน่งที่โฆษณาจะปรากฏ

    ระบุตำแหน่งที่โฆษณาจะปรากฏบนหน้าเว็บโดยการเพิ่มโค้ดต่อไปนี้ลงใน <body> ของเอกสาร HTML

    โปรดทราบว่ารหัสของ <div> นี้ตรงกับรหัสที่ระบุเมื่อกำหนดช่องโฆษณา

    <body>
  <div id="banner-ad" style="width: 300px; height: 250px"></div>
  <script>
    googletag.cmd.push(() => {
      // Request and render an ad for the "banner-ad" slot.
      googletag.display("banner-ad");
    });
  </script>
</body>

  5. ดูตัวอย่างหน้าทดสอบ

    บันทึกไฟล์ hello-gpt.html และเปิดในเว็บเบราว์เซอร์ เมื่อโหลดแล้ว หน้าจะแสดงโฆษณาทดสอบในเนื้อความของหน้าเว็บ

แสดงโฆษณาของคุณเอง

หากต้องการแสดงโฆษณาของคุณเอง ให้ใช้ไฟล์ hello-gpt.html จากแสดงโฆษณาทดสอบ จากนั้นแทนที่โค้ดในส่วนหัวด้วยโค้ดที่ระบุพื้นที่โฆษณาจากเครือข่าย Ad Manager ของคุณเอง

  1. สร้างแท็กโฆษณาสำหรับหน่วยโฆษณาที่คุณต้องการแสดง เรียนรู้เพิ่มเติมเกี่ยวกับการสร้างแท็กโฆษณาในศูนย์ช่วยเหลือของ Ad Manager

  2. คัดลอกโค้ดแท็กโฆษณาที่ให้ไว้ในส่วนส่วนหัวเอกสาร และใช้เพื่อแทนที่โค้ดที่เกี่ยวข้องใน <head> ของเอกสาร HTML

    <head>
 <meta charset="utf-8">
 <title>Hello GPT</title>
 <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
 <script>
   window.googletag = window.googletag || {cmd: []};
   googletag.cmd.push(function() {
     googletag
         .defineSlot(
             'ad-unit-path', [width, height], 'div-id')
         .addService(googletag.pubads());
     googletag.enableServices();
   });
 </script>
</head>

  3. บันทึกไฟล์ hello-gpt.html ที่อัปเดตแล้วและเปิดในเว็บเบราว์เซอร์

ถัดไป
เรียนรู้พื้นฐาน