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