หากมีข้อกำหนดเฉพาะสำหรับหน่วยโฆษณา Multiplex ที่ปรับเปลี่ยนตามอุปกรณ์ คุณก็สามารถปรับแต่งรูปแบบการแสดงได้โดยเพิ่มพารามิเตอร์ลงในโค้ดโฆษณา พารามิเตอร์นี้จะช่วยให้คุณเปลี่ยนแปลงสิ่งต่างๆ เช่น เลย์เอาต์ของหน่วยโฆษณา Multiplex รวมถึงกำหนดวิธีจัดเรียงแถวและคอลัมน์ที่มีโฆษณาอยู่ได้
คุณยังสามารถใช้พารามิเตอร์เพื่อตั้งค่าสำหรับอุปกรณ์เคลื่อนที่และเดสก์ท็อปแยกกันได้ด้วย เช่น หากพารามิเตอร์เลย์เอาต์มีค่าเดียว เลย์เอาต์ของหน่วยโฆษณา Multiplex จะเหมือนกันทั้งในอุปกรณ์เคลื่อนที่และเดสก์ท็อป แต่หากมี 2 ค่า เลย์เอาต์ของหน่วยโฆษณา Multiplex ในอุปกรณ์เคลื่อนที่จะเป็นแบบหนึ่ง (ค่าแรก) และในเดสก์ท็อปจะเป็นอีกแบบหนึ่ง (ค่าที่ 2)
โปรดทราบว่าตัวเลือกเหล่านี้ใช้ได้กับหน่วยโฆษณา Multiplex ที่ปรับเปลี่ยนตามอุปกรณ์เท่านั้นและต้องใช้พารามิเตอร์ทั้งหมดเพื่อให้การปรับแต่งทำงาน หลังจากที่แก้ไขโค้ดโฆษณาแล้ว อย่าลืมทดสอบว่าหน่วยโฆษณา Multiplex แสดงในอุปกรณ์และหน้าจอต่างๆ ได้อย่างถูกต้อง
เปลี่ยนเลย์เอาต์ของหน่วยโฆษณา Multiplex
พารามิเตอร์เลย์เอาต์ (data-matched-content-ui-type
) ช่วยให้คุณควบคุมการจัดเรียงข้อความและรูปภาพในหน่วยโฆษณา Multiplex เช่น คุณสามารถเลือกวางรูปภาพและข้อความไว้ข้างกัน หรือวางรูปภาพไว้บนข้อความ เป็นต้น
ตัวเลือกการออกแบบที่ใช้ได้มีดังต่อไปนี้
ในเลย์เอาต์นี้ รูปภาพและข้อความจะปรากฏข้างๆ กัน หากต้องการเลือกเลย์เอาต์นี้ ให้เพิ่มพารามิเตอร์ data-matched-content-ui-type="image_sidebyside"
ลงในโค้ดโฆษณา
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-ui-type="image_sidebyside"
data-matched-content-rows-num="4"
data-matched-content-columns-num="1"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
ในเลย์เอาต์นี้ รูปภาพและข้อความจะปรากฏข้างๆ กันภายในการ์ด หากต้องการเลือกเลย์เอาต์นี้ ให้เพิ่มพารามิเตอร์ data-matched-content-ui-type="image_card_sidebyside"
ลงในโค้ดโฆษณา
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-ui-type="image_card_sidebyside"
data-matched-content-rows-num="4"
data-matched-content-columns-num="1"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
ในเลย์เอาต์นี้ รูปภาพและข้อความถูกจัดเรียงให้รูปภาพปรากฏอยู่บนเหนือข้อความ หากต้องการเลือกเลย์เอาต์นี้ ให้เพิ่มพารามิเตอร์ data-matched-content-ui-type="image_stacked"
ลงในโค้ดโฆษณา
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-ui-type="image_stacked"
data-matched-content-rows-num="3"
data-matched-content-columns-num="1"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
ในเลย์เอาต์นี้ รูปภาพและข้อความถูกจัดเรียงให้รูปภาพปรากฏอยู่บนเหนือข้อความภายในการ์ด หากต้องการเลือกเลย์เอาต์นี้ ให้เพิ่มพารามิเตอร์ data-matched-content-ui-type="image_card_stacked"
ลงในโค้ดโฆษณา
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-ui-type="image_card_stacked"
data-matched-content-rows-num="3"
data-matched-content-columns-num="1"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
เลย์เอาต์ที่มีเฉพาะข้อความเท่านั้นโดยไม่มีรูปภาพ หากต้องการเลือกเลย์เอาต์นี้ ให้เพิ่มพารามิเตอร์ data-matched-content-ui-type="text"
ลงในโค้ดโฆษณา
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-ui-type="text"
data-matched-content-rows-num="4"
data-matched-content-columns-num="1"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
เลย์เอาต์ที่มีเฉพาะข้อความเท่านั้นภายในการ์ด หากต้องการเลือกเลย์เอาต์นี้ ให้เพิ่มพารามิเตอร์ data-matched-content-ui-type="text_card"
ลงในโค้ดโฆษณา
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-ui-type="text_card"
data-matched-content-rows-num="4"
data-matched-content-columns-num="1"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
ระบุจํานวนแถวและคอลัมน์ในหน่วยโฆษณา Multiplex
โฆษณาภายในหน่วยโฆษณา Multiplex จะจัดเรียงอยู่ในตารางกริด คุณสามารถระบุจำนวนแถวและคอลัมน์ที่ต้องการให้แสดงภายในตารางดังกล่าวได้ เช่น คุณอาจกำหนดให้หน่วยโฆษณา Multiplex เป็นสี่เหลี่ยมจัตุรัส 2x2 คอลัมน์ 4x1 ฯลฯ
การกำหนดจำนวนแถวจะต้องใช้พารามิเตอร์ data-matched-content-rows-num
ส่วนจำนวนคอลัมน์จะต้องใช้พารามิเตอร์ data-matched-content-columns-num
คุณต้องตั้งค่าพารามิเตอร์ทั้ง 2 ส่วนนั้นและใช้ data-matched-content-ui-type
ด้วย
- การกำหนดจำนวนแถวและคอลัมน์มีข้อจำกัดบางประการ จำนวนโฆษณาทั้งหมดในหน่วยโฆษณา Multiplex ต้องอยู่ระหว่าง 1 ถึง 30 รายการ หากพยายามแสดงโฆษณาน้อยกว่า 1 รายการหรือมากกว่า 30 รายการ หน่วยโฆษณา Multiplex จะว่างเปล่า
- เราอาจแสดงจำนวนแถวและ/หรือคอลัมน์ได้ไม่ครบตามที่คุณระบุในบางครั้ง เช่น หากคุณกำหนดจำนวนคอลัมน์ไว้หลายรายการ แต่หน่วยโฆษณา Multiplex ไม่กว้างพอที่จะรองรับคอลัมน์ทั้งหมด ในกรณีนี้ เราจะปรับจำนวนแถวและ/หรือคอลัมน์เพื่อให้โฆษณาพอดีกับพื้นที่ที่มีอยู่และมอบประสบการณ์การใช้งานที่ดีได้
ตัวอย่างแถวและคอลัมน์
โค้ดตัวอย่างนี้จะแสดงวิธีการสร้างหน่วยโฆษณา Multiplex ที่มี 4 แถว 1 คอลัมน์ ซึ่งแสดงโฆษณาทั้งหมด 4 รายการ
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-rows-num="4"
data-matched-content-columns-num="1"
data-matched-content-ui-type="image_stacked"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
โค้ดตัวอย่างนี้จะแสดงวิธีการสร้างหน่วยโฆษณา Multiplex ที่มี 2 แถว 2 คอลัมน์ ซึ่งแสดงโฆษณาทั้งหมด 4 รายการ
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-rows-num="2"
data-matched-content-columns-num="2"
data-matched-content-ui-type="image_stacked"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
โค้ดตัวอย่างนี้จะแสดงวิธีการสร้างหน่วยโฆษณา Multiplex ที่มี 3 แถว 3 คอลัมน์ ซึ่งแสดงโฆษณาทั้งหมด 9 รายการ
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-rows-num="3"
data-matched-content-columns-num="3"
data-matched-content-ui-type="image_stacked"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
โค้ดตัวอย่างนี้จะแสดงวิธีการสร้างหน่วยโฆษณา Multiplex ที่มีตารางกริดขนาด 4x1 สำหรับอุปกรณ์เคลื่อนที่และตารางกริดขนาด 2x2 สำหรับเดสก์ท็อป คุณควรใช้โค้ดนี้หากมีเว็บไซต์ที่ปรับเปลี่ยนตามอุปกรณ์
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- pbad -->
<ins class="adsbygoogle"
style="display:block"
data-ad-client="ca-pub-1234567890123456"
data-ad-slot="1234567890"
data-matched-content-rows-num="4,2"
data-matched-content-columns-num="1,2"
data-matched-content-ui-type="image_stacked,image_stacked"
data-ad-format="autorelaxed"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
การแก้ปัญหา
หลังจากที่ปรับแต่งหน่วยโฆษณา Multiplex แล้ว หน่วยโฆษณานี้อาจไม่แสดงตามที่คุณคาดไว้ในบางครั้ง ลองมาดูปัญหาทั่วไปเกี่ยวกับหน่วยโฆษณา Multiplex และวิธีแก้ไขกัน
อาจมาจากสาเหตุ 2 ข้อดังต่อไปนี้
- จํานวนโฆษณาทั้งหมดในหน่วยโฆษณา Multiplex น้อยกว่า 1 รายการหรือมากกว่า 30 รายการ คุณควรเปลี่ยนจํานวนแถวและ/หรือคอลัมน์ในหน่วยโฆษณา Multiplex เพื่อให้มีโฆษณาไม่เกินจํานวนที่กําหนด
- หน่วยโฆษณา Multiplex มีขนาดกว้างเกินไปสําหรับจํานวนโฆษณาที่คุณกำหนดไว้ ในกรณีนี้ คุณควรลดความกว้างของหน่วยโฆษณา Multiplex
ใช้คอนโซลเพื่อค้นหาข้อผิดพลาดในหน่วยโฆษณา Multiplex
คุณสามารถใช้คอนโซลในเบราว์เซอร์เพื่อตรวจสอบความถูกต้องของโค้ดโฆษณา Multiplex ที่คุณแก้ไข เช่น คอนโซลสามารถแจ้งให้คุณทราบหากโค้ดโฆษณาไม่มีพารามิเตอร์ที่จำเป็นต้องใช้หรือหากพารามิเตอร์มีค่าที่ไม่ถูกต้อง
หากใช้ Chrome คุณสามารถทำตามขั้นตอนเหล่านี้เพื่อทดสอบโค้ดโฆษณาในคอนโซลเครื่องมือสำหรับนักพัฒนาเว็บได้
- ไปที่หน้าที่มีหน่วยโฆษณา Multiplex
- กด Ctrl+Shift+J (Windows/Linux) หรือ Cmd+Opt+J (Mac)
- ตรวจสอบแผงควบคุมคอนโซลว่ามีข้อความแสดงข้อผิดพลาดหรือไม่