เรียนรู้พื้นฐานตามตัวอย่าง

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

การปรับขนาดโฆษณา
การกำหนดเป้าหมายคีย์-ค่า
สถาปัตยกรรมคำขอรวมครั้งเดียว

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

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

<script
  async
  src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"
  crossorigin="anonymous"
></script>
<script>
  window.googletag = window.googletag || { cmd: [] };

  googletag.cmd.push(() => {

  });
</script>

ซึ่งจะโหลดไลบรารี GPT และเริ่มต้นทั้งออบเจ็กต์ googletag และ CommandArray การเริ่มต้นออบเจ็กต์เหล่านี้จะทำให้คุณเริ่มใช้อาร์เรย์คำสั่ง GPT ได้ทันที เพิ่มโค้ด JavaScript ที่ตามมากับเนื้อหาของฟังก์ชันว่างที่กำหนดไว้ในข้อมูลโค้ดนี้

กําหนดช่องโฆษณา

หลังจากโหลด GPT แล้ว คุณจะกําหนดช่องโฆษณาได้ ตัวอย่างต่อไปนี้จะกําหนดช่องโฆษณา 3 ช่องที่มีรูปแบบโฆษณา ขนาด และตัวเลือกการกําหนดเป้าหมายที่แตกต่างกัน

ช่องโฆษณาขนาดคงที่

ช่องโฆษณาขนาดคงที่แบบง่ายมีดังนี้

// Define a fixed size ad slot, customized with key-value targeting.
googletag
  .defineSlot("/6355419/Travel/Asia", [728, 90], "banner-ad")
  .addService(googletag.pubads())
  .setTargeting("color", "red")
  .setTargeting("position", "atf");

นอกเหนือจากเส้นทาง ขนาด และรหัส <div> ของหน่วยโฆษณาแล้ว ข้อมูลโค้ดนี้ยังระบุตัวเลือกการกำหนดเป้าหมายหลายรายการด้วย ตัวเลือกเหล่านี้จะจํากัดและแยกความแตกต่างของโฆษณาที่มีสิทธิ์แสดงในช่องนี้ ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดเป้าหมายคีย์-ค่า

ช่องโฆษณา Anchor

นี่คือช่องโฆษณา Anchor ที่อยู่ด้านล่างของวิวพอร์ต

// Define an anchor ad slot that sticks to the bottom of the viewport.
const anchorSlot = googletag.defineOutOfPageSlot(
  "/6355419/Travel",
  googletag.enums.OutOfPageFormat.BOTTOM_ANCHOR,
);

// The slot will be null if the page or device does not support anchors.
if (anchorSlot) {
  anchorSlot.setTargeting("test", "anchor").addService(googletag.pubads());

  document.getElementById("status").textContent =
    "Anchor ad is initialized. Scroll page to activate.";
}

ช่องโฆษณา Anchor เป็นรูปแบบโฆษณาที่ไม่อยู่ในขอบเขตหน้า ซึ่งกำหนดโดยใช้เมธอด defineOutOfPageSlot แทนที่จะเป็นเมธอด defineSlot ปกติ ดูข้อมูลเพิ่มเติมเกี่ยวกับครีเอทีฟโฆษณาที่ไม่อยู่ในขอบเขตหน้า

รูปแบบโฆษณาที่ไม่อยู่ในขอบเขตหน้ามักมีข้อจำกัดเกี่ยวกับประเภทของหน้าและอุปกรณ์ที่มีสิทธิ์แสดง ข้อจํากัดเหล่านี้ทําให้คุณต้องตรวจสอบว่าได้กําหนดค่าช่องเรียบร้อยแล้วก่อนโต้ตอบกับช่อง ดูรายละเอียดได้ในตัวอย่างแสดงโฆษณา Anchor

ช่องโฆษณาแบบไหล

ตัวอย่างช่องโฆษณาแบบยืดหยุ่นสําหรับโฆษณาเนทีฟมีดังนี้

// Define a fluid ad slot that fills the width of the enclosing column and
// adjusts the height as defined by the native creative delivered.
googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

ช่องโฆษณาแบบไหลไม่มีขนาดคงที่ ช่องโฆษณาแบบยืดหยุ่นจะปรับขนาดให้พอดีกับเนื้อหาครีเอทีฟโฆษณา คุณกําหนดช่องโฆษณาแบบไหลได้ด้วยตัวเลือกfluidขนาด ดูข้อมูลเพิ่มเติมเกี่ยวกับขนาดโฆษณาและตัวเลือกขนาดที่ใช้ได้

กำหนดการตั้งค่าระดับหน้าเว็บ

ตัวเลือกการกําหนดค่า GPT บางรายการจะมีผลกับทั่วโลก ไม่ใช่กับช่องโฆษณาที่เฉพาะเจาะจง ซึ่งเราเรียกว่าการตั้งค่าระดับหน้าเว็บ

ตัวอย่างวิธีกําหนดการตั้งค่าระดับหน้ามีดังนี้

// Configure page-level targeting.
googletag.pubads().setTargeting("interests", "basketball");

// Enable SRA and services.
googletag.pubads().enableSingleRequest();
googletag.enableServices();

ข้อมูลโค้ดนี้ทํา 3 สิ่งต่อไปนี้

กำหนดค่าตัวเลือกการกำหนดเป้าหมายระดับหน้า ซึ่งใช้กับช่องโฆษณาทุกช่องในหน้าเว็บ
เปิดโหมดสถาปัตยกรรมคำขอรวมครั้งเดียว (SRA) ซึ่งจะรวมคำขอสำหรับช่องโฆษณาหลายช่องไว้ในคำขอโฆษณาเดียว SRA ช่วยปรับปรุงประสิทธิภาพ และจําเป็นต่อการรับประกันว่าระบบจะปฏิบัติตามการยกเว้นโฆษณาของคู่แข่งและ Roadblock เราจึงขอแนะนําให้คุณเปิด SRA ไว้เสมอ ดูข้อมูลเพิ่มเติมเกี่ยวกับการใช้ SRA อย่างถูกต้อง
เปิดใช้บริการที่แนบมากับช่องโฆษณาของเราซึ่งอนุญาตให้ส่งคําขอโฆษณาได้

โฆษณา Display

สุดท้าย ให้เพิ่มข้อมูลโค้ดต่อไปนี้ใน <body> ของหน้าเว็บ

<div class="page-content centered">
  <div id="banner-ad" style="width: 728px; height: 90px"></div>
  <!--
  If the following status is displayed when the page is rendered, try
  loading the page in a new window or on a different device.
-->
  <h1 id="status">Anchor ads are not supported on this page.</h1>
  <!--
  Spacer used for example purposes only. This positions the native ad
  container below the fold to encourage scrolling.
-->
  <div class="spacer"></div>
  <div id="native-ad" class="native-slot"></div>
</div>
<script>
  googletag.cmd.push(() => {
    // Request and render all previously defined ad slots.
    googletag.display("banner-ad");
  });
</script>

ซึ่งจะกําหนดคอนเทนเนอร์ช่องโฆษณา 2 รายการ ได้แก่ banner-ad และ native-ad ค่า id ของคอนเทนเนอร์เหล่านี้สอดคล้องกับค่าที่คุณระบุเมื่อกําหนดช่องโฆษณาก่อนหน้านี้ในตัวอย่างนี้

หลังจากกําหนดช่องโฆษณาทั้งหมดแล้ว ระบบจะเรียกให้แสดง banner-ad เนื่องจากมีการเปิดใช้ SRA การเรียกการแสดงแบบเดี่ยวนี้จะแสดงผลช่องโฆษณาทั้งหมดที่กำหนดไว้จนถึงจุดนี้ หากจําเป็น คุณสามารถควบคุมการโหลดและรีเฟรชโฆษณา รวมถึงลักษณะการรวมกลุ่มได้อย่างแม่นยํายิ่งขึ้นเมื่อเปิดใช้ SRA

ตัวอย่างที่สมบูรณ์

ต่อไปนี้คือซอร์สโค้ดแบบเต็มของหน้าตัวอย่างที่คู่มือนี้อิงตาม นอกจากนี้ คุณยังดูการสาธิตแบบอินเทอร์แอกทีฟของหน้านี้ได้ด้วย

JavaScript

TypeScript

เริ่มเลย

ใช้ TypeScript