ใช้พารามิเตอร์ data-ad-status เพื่อซ่อนหน่วยโฆษณาที่ไม่ได้รับโฆษณา

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

หลังจากหน่วยโฆษณาส่งคำขอโฆษณาเสร็จแล้ว AdSense จะเพิ่มพารามิเตอร์ไปยังองค์ประกอบ <ins> ที่มีชื่อว่า data-ad-status หมายเหตุ: โปรดอย่าสับสนระหว่าง data-ad-status กับ data-adsbygoogle-status ซึ่งเป็นพารามิเตอร์ที่โค้ดโฆษณาของเราใช้เพื่อจุดประสงค์ในการประมวลผลโฆษณา

พารามิเตอร์จะอัปเดตเป็นค่าใดค่าหนึ่งดังต่อไปนี้ ขึ้นอยู่กับว่ามีการส่งโฆษณากลับมาหรือไม่

data-ad-status="filled"	มีการส่งโฆษณาไปยังหน่วยโฆษณาและกำลังแสดงผลอยู่
data-ad-status="unfilled"	ไม่มีการส่งโฆษณากลับมาและหน่วยโฆษณาว่างเปล่า

AdSense ดำเนินการอย่างไรกับหน่วยโฆษณาที่ไม่ได้รับโฆษณา

เมื่อหน่วยโฆษณา AdSense เป็นแบบ "unfilled" เราจะพยายามยุบหน่วยโฆษณาหรือแสดงพื้นที่ว่าง เราจะยุบหน่วยโฆษณาเฉพาะในกรณีที่ไม่ก่อให้เกิดการจัดเรียงหน้าเว็บใหม่ หมายความว่าระบบจะยุบเฉพาะหน่วยโฆษณาที่อยู่นอกวิวพอร์ตเท่านั้น สำหรับหน่วยโฆษณาอื่นๆ ทั้งหมดที่ไม่ได้รับโฆษณา เราจะรักษาขนาดของหน่วยโฆษณาไว้และแสดงพื้นที่ว่างแทน

วิธีซ่อนหน่วยโฆษณาที่ไม่ได้รับโฆษณา

(ขั้นสูง) คุณเลือกได้ว่าจะสร้างการทำงานลักษณะดังกล่าวโดยใช้ CSS หรือ JavaScript เช่น หากต้องการซ่อนหน่วยโฆษณาทั้งหมดที่ไม่ได้รับโฆษณา คุณอาจใช้ CSS เพื่อนำสไตล์ display: none !important; ไปใช้กับองค์ประกอบ

ตัวอย่างที่ 1: การซ่อนหน่วยโฆษณาที่ไม่ได้รับโฆษณาโดยใช้ CSS

คุณสามารถเพิ่มสไตล์ CSS ต่อไปนี้ลงในหน้าเว็บเพื่อซ่อนหน่วยโฆษณาที่ไม่ได้รับโฆษณาโดยอัตโนมัติ

HTML
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

CSS
ins.adsbygoogle[data-ad-status="unfilled"] {
    display: none !important;
}

ตัวอย่างที่ 2: การแสดงรูปภาพเฉพาะในกรณีที่หน่วยโฆษณาไม่ได้รับโฆษณา

หากหน่วยโฆษณาไม่แสดงโฆษณา คุณอาจเลือกแสดงโฆษณาเฮาส์แอ็ดแทนได้ ดังนี้

HTML
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<ins class="adsbygoogle"
     style="display:inline-block;width:300px;height:250px"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="1234567890">
    <a href="/page"><img src="/backup.jpg" width="300px" height="250px"></a>
</ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

CSS
ins.adsbygoogle a {
    display: none !important;
}
ins.adsbygoogle[data-ad-status="unfilled"] a {
    display: block;
}

หรืออีกทางหนึ่ง หากต้องการใช้ JavaScript เพื่ออัปเดตหน้าเว็บ คุณอาจใช้ MutationObserver เพื่อตรวจหาการเปลี่ยนแปลงของพารามิเตอร์ data-ad-status และเรียกใช้โค้ด JavaScript ตามการเปลี่ยนแปลงเหล่านั้น

ข้อจำกัด

ระบบจะเพิ่มพารามิเตอร์ data-ad-status ลงในหน่วยโฆษณาที่อยู่ในหน้าต่างบนสุดเท่านั้น หมายความว่าสำหรับหน่วยโฆษณาที่แสดงผ่านหน้าต่างข้ามโดเมน ระบบจะไม่เพิ่มพารามิเตอร์ data-ad-status ลงในหน่วยโฆษณา

เราไม่แนะนำให้โหลดหน่วยโฆษณา AdSense ให้เป็นแบบซ่อนไว้ตั้งแต่แรก โดยมีเป้าหมายให้หน่วยโฆษณามองเห็นได้เมื่อพารามิเตอร์ data-ad-status มีการเปลี่ยนแปลง หากหน่วยโฆษณาไม่ปรากฏในหน้าเว็บตั้งแต่แรก เราอาจไม่ดำเนินการคำขอโฆษณาสำหรับหน่วยโฆษณานั้น