ขนาดโฆษณา

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

ในบางกรณี ขนาดโฆษณาอาจถูกลบล้างที่ระดับรายการโฆษณาภายใน 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], "fluid"],
    "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 ใช้ในการปรับขนาดช่องโฆษณาดังนี้

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

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

โดยทั่วไปแล้ว โฆษณาแบบไหลจะใช้เวลาแสดงนานกว่าโฆษณาที่มี ขนาดคงที่
โฆษณาแบบไหลอาจทริกเกอร์การปรับเปลี่ยนเนื้อหาของหน้าใหม่เมื่อมีการปรับขนาด อาจส่งผลลบ ประสิทธิภาพ
โฆษณาแบบไหลอาจแสดงผลไม่ถูกต้องหากองค์ประกอบระดับบนของครีเอทีฟโฆษณา 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], []]
]