ขนาดโฆษณา

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

ในบางกรณี อาจมีการลบล้างขนาดโฆษณาที่ระดับรายการโฆษณาภายใน Google Ad Manager ไปที่ศูนย์ช่วยเหลือเพื่อดูข้อมูลเพิ่มเติม

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

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

คุณสามารถกำหนดช่องโฆษณาที่มีขนาดคงที่เพียงขนาดเดียวได้

googletag
  .defineSlot("/6355419/Travel/Europe/France/Paris", [300, 250], "fixed-size-ad")
  .addService(googletag.pubads());

ในตัวอย่างนี้จะแสดงเฉพาะครีเอทีฟโฆษณาที่มีขนาด 300x250

ประเด็นสำคัญ: เมื่อทำงานกับโฆษณาที่มีขนาดคงที่ เราขอแนะนำอย่างยิ่งให้คุณกำหนดขนาดขององค์ประกอบ <div> ที่ครีเอทีฟโฆษณาจะแสดง เนื่องจากครีเอทีฟโฆษณามักจะแสดงผลแบบไม่พร้อมกัน จึงอาจทำให้องค์ประกอบอื่นๆ ในหน้าเว็บขยับได้หากสงวนพื้นที่ไว้ไม่เพียงพอ

โฆษณาหลายขนาด

หากโฆษณารองรับหลายขนาด ให้ระบุรายการขนาดที่รองรับเมื่อกำหนดช่องโฆษณา

googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "multi-size-ad",
  )
  .addService(googletag.pubads());

ในตัวอย่างนี้ ครีเอทีฟโฆษณาที่มีขนาด 300x250, 728x90 และ 750x200 จะแสดงได้ Ad Manager จะพิจารณาเฉพาะครีเอทีฟโฆษณาที่ตรงกับขนาดเหล่านี้ ในระหว่างกระบวนการเลือกโฆษณา

หากไม่มีการระบุขนาดสำหรับช่องโฆษณา <div> ใน CSS GPT จะตั้งค่าขนาดเท่ากับความสูงที่สั้นที่สุดและความกว้างที่ประกาศที่กว้างที่สุดโดยอัตโนมัติมากกว่า 1 พิกเซลเมื่อมีการเรียกใช้ display() ในกรณีนี้จะเป็น 750x90 อย่างไรก็ตาม การกำหนดขนาดนี้อาจเกิดขึ้นหลังจากที่เนื้อหาอื่นๆ ในหน้าเว็บโหลดแล้ว ซึ่งทำให้เนื้อหาดังกล่าวเปลี่ยนแปลง เพื่อหลีกเลี่ยงไม่ให้เลย์เอาต์เปลี่ยนแปลง ให้จองพื้นที่โดยใช้ CSS ดังที่แสดงในคู่มือลดการเปลี่ยนเลย์เอาต์

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

โฆษณาแบบไหล

โฆษณาแบบไหลไม่มีขนาดคงที่ แต่จะปรับให้เข้ากับเนื้อหาครีเอทีฟโฆษณาที่แสดง ปัจจุบันโฆษณาเนทีฟเป็นโฆษณาแบบไหลเพียงประเภทเดียวที่ Ad Manager รองรับ

เมื่อทำงานกับโฆษณาแบบไหล ระบบอาจระบุขนาด fluid ที่กำหนดเอง

googletag
  .defineSlot("/6355419/Travel", ["fluid"], "native-ad")
  .addService(googletag.pubads());

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

  1. ได้รับการตอบกลับจากโฆษณาแล้ว
  2. เขียนเนื้อหาครีเอทีฟโฆษณาลงใน iframe โดยตั้งค่าความสูงเริ่มต้นเป็น 0px และความกว้างเป็น 100%
  3. เมื่อทรัพยากรทั้งหมดใน iframe โหลดเสร็จแล้ว ระบบจะแสดงครีเอทีฟโฆษณาโดยการตั้งค่าความสูงของ iframe ให้เท่ากับความสูงขององค์ประกอบ <body> ของ iframe

โฆษณาที่ปรับเปลี่ยนตามอุปกรณ์

โฆษณาที่ปรับเปลี่ยนตามอุปกรณ์จะขยายโฆษณาหลายขนาด และให้คุณระบุขนาดครีเอทีฟโฆษณาที่จะแสดงโดยอิงตามขนาดของวิวพอร์ตของเบราว์เซอร์ที่สร้างคำขอ ฟังก์ชันนี้ใช้เพื่อควบคุมขนาดครีเอทีฟโฆษณาที่แสดง ในอุปกรณ์ประเภทต่างๆ (เดสก์ท็อป แท็บเล็ต อุปกรณ์เคลื่อนที่ ฯลฯ)

ซึ่งทำได้โดยกำหนดการแมประหว่างขนาดวิวพอร์ตกับขนาดโฆษณา แล้วเชื่อมโยงการแมปนั้นกับช่องโฆษณา

const responsiveAdSlot = googletag
  .defineSlot(
    "/6355419/Travel/Europe",
    [
      [300, 250],
      [728, 90],
      [750, 200],
    ],
    "responsive-ad",
  )
  .addService(googletag.pubads());

const mapping = googletag
  .sizeMapping()
  .addSize(
    [1024, 768],
    [
      [750, 200],
      [728, 90],
    ],
  )
  .addSize([640, 480], [300, 250])
  .addSize([0, 0], [])
  .build();

responsiveAdSlot.defineSizeMapping(mapping);

ในตัวอย่างนี้ การแมประบุ:

  • เมื่อวิวพอร์ต >= 1024x768 โฆษณาขนาด 750x200 หรือ 728x90 จะแสดงได้
  • เมื่อ 1024x768 > วิวพอร์ต >= 640x480 โฆษณาขนาด 300x250 จะแสดงได้
  • เมื่อวิวพอร์ต < 640x480 โฆษณาจะไม่แสดง

GPT จะตรวจหาขนาดวิวพอร์ตของเบราว์เซอร์ที่ส่งคำขอและใช้การแมปที่ใหญ่ที่สุดที่พอดี ในการกำหนดการแมปที่ใหญ่ที่สุด GPT จะดูจากความกว้างก่อน ตามด้วยความสูง (เช่น [100, 10] > [10, 100]) ในกรณีที่เกิดข้อผิดพลาดในการแมปหรือไม่สามารถระบุขนาดวิวพอร์ตได้ ระบบจะใช้ขนาดที่ระบุใน defineSlot()

จากนั้นการแมปจะเชื่อมโยงกับช่องโฆษณาโดยเรียกใช้เมธอด Slot.defineSizeMapping() เมธอดนี้จะยอมรับอาร์เรย์ของการแมปในรูปแบบต่อไปนี้

[
  [
    [viewport-width-1, viewport-height-1],
    [[ad-width-1, ad-height-1], [ad-width-2, ad-height-2], ...]
  ],
  [
    [viewport-width-2, viewport-height-2],
    [[ad-width-3, ad-height-3], [ad-width-4, ad-height-4], ...]
  ],
  ...
]

ลำดับของขนาดวิวพอร์ตภายในอาร์เรย์นี้จะกำหนดลำดับความสำคัญ SizeMappingBuilder ที่ใช้ในตัวอย่างด้านบนเป็นวิธีที่สะดวกสบายในการสร้างอาร์เรย์ของรูปแบบนี้ โดยขนาดจะเรียงลำดับจากใหญ่ที่สุดไปเล็กที่สุดโดยอัตโนมัติ ในตัวอย่างนี้ เอาต์พุตของ SizeMappingBuilder.build() คือ

[
  [[1024, 768], [[750, 200], [728, 90]]],
  [[640, 480], [[300, 250]]],
  [[0, 0], []]
]