เริ่มต้นใช้งานแท็กผู้เผยแพร่โฆษณาผ่าน 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>
  </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"
    crossorigin="anonymous"
  ></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"
    crossorigin="anonymous"
  ></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 src="https://securepubads.g.doubleclick.net/tag/js/gpt.js" crossorigin="anonymous" async></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 ที่อัปเดตแล้วและเปิดในเว็บเบราว์เซอร์

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