วิธีการปรับเปลี่ยนโค้ดโฆษณาที่ปรับเปลี่ยนตามพื้นที่โฆษณา

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

ก่อนเริ่มต้น:

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

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

ตัวอย่างของขนาดหน่วยโฆษณาที่แน่นอนตามความกว้างของหน้าจอ

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

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

• สำหรับความกว้างหน้าจอไม่เกิน 500px: หน่วยโฆษณา 320x100
• สำหรับความกว้างหน้าจอระหว่าง 500px ถึง 799px: หน่วยโฆษณา 468x60
• สำหรับความกว้างหน้าจอ 800px ขึ้นไป: หน่วยโฆษณา 728x90

<style>
.example_responsive_1 { width: 320px; height: 100px; }
@media(min-width: 500px) { .example_responsive_1 { width: 468px; height: 60px; } }
@media(min-width: 800px) { .example_responsive_1 { width: 728px; height: 90px; } }
</style>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:block"
     data-ad-client="ca-pub-1234567890123456"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

วิธีการนำโค้ดตัวอย่างมาปรับใช้ในเว็บไซต์ของคุณเอง

1. สร้างหน่วยโฆษณา Display ในบัญชี AdSense โดยดูให้แน่ใจว่าเลือกปรับเปลี่ยนตามพื้นที่โฆษณาไว้ในส่วน "ขนาดโฆษณา" จดบันทึกข้อมูลต่อไปนี้จากโค้ดโฆษณาที่ปรับเปลี่ยนตามพื้นที่โฆษณา
   • รหัสผู้เผยแพร่โฆษณา เช่น ca-pub-1234567890123456
   • รหัสของหน่วยโฆษณา (data-ad-slot) เช่น 1234567890
2. ในโค้ดตัวอย่าง ให้ทำดังนี้
   • แทนที่ example_responsive_1 ทุกอินสแตนซ์ด้วยชื่อที่ไม่ซ้ำ เช่น Home_Page, front_page_123 ฯลฯ
     หมายเหตุ:

     • ชื่อเฉพาะที่คุณใช้ต้องประกอบด้วยตัวอักษรภาษาอังกฤษ (A-Z) ตัวเลข และขีดล่างเท่านั้น และอักขระตัวแรกต้องเป็นตัวอักษรภาษาอังกฤษ
     • คุณต้องใช้ชื่อที่ไม่ซ้ำกันในแต่ละครั้งที่นำโค้ดตัวอย่างมาปรับใช้
   • แทนที่ ca-pub-1234567890123456 ด้วยรหัสผู้เผยแพร่โฆษณาของคุณเอง
   • แทนที่ 8XXXXX1 ด้วยรหัสของหน่วยโฆษณาของคุณเอง
3. กำหนดขนาดหน้าจอที่คุณต้องการสำหรับหน่วยโฆษณาต่อความกว้างหน้าจอ ดังนี้
   • หากคุณพอใจกับขนาดหน่วยโฆษณาที่มีอยู่ในโค้ดตัวอย่างแล้ว คุณก็ไม่จำเป็นต้องทำการเปลี่ยนแปลงใดๆ
   • หากคุณต้องการกำหนดขนาดหน่วยโฆษณาตามความกว้างหน้าจอที่แตกต่างกัน ให้ทำดังนี้ในโค้ดตัวอย่าง
     • แทนที่ 320px และ 100px ด้วยความกว้างและความสูงของหน่วยโฆษณาที่คุณต้องการใช้สำหรับความกว้างหน้าจอไม่เกิน 500px
     • แทนที่ 468px และ 60px ด้วยความกว้างและความสูงของหน่วยโฆษณาที่คุณต้องการใช้สำหรับความกว้างหน้าจอระหว่าง 500px และ 799px
     • แทนที่ 728px และ 90px ด้วยความกว้างและความสูงของหน่วยโฆษณาที่คุณต้องการใช้สำหรับความกว้างหน้าจอ 800px ขึ้นไป
4. คัดลอกและวางโค้ดโฆษณาที่คุณแก้ไขไว้ในซอร์สโค้ด HTML ของหน้าเว็บที่ต้องการให้โฆษณาปรากฏ
   เคล็ดลับ: เมื่อวางโค้ดโฆษณาแล้ว เราขอแนะนำให้คุณทดสอบโฆษณาในอุปกรณ์และหน้าจอต่างๆ เพื่อให้แน่ใจว่าลักษณะการทำงานที่ปรับเปลี่ยนตามอุปกรณ์นั้นถูกต้องแล้ว

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

หากคุณพบว่าโค้ดโฆษณาที่ปรับเปลี่ยนตามอุปกรณ์ของเราไม่สามารถทำตามที่คุณต้องการ ก็แก้ไขโค้ดโฆษณาเพื่อระบุขนาดที่แน่นอนของหน่วยโฆษณาผ่านทาง CSS ได้

หมายเหตุ: เราไม่แนะนำให้ใช้ฟีเจอร์ขั้นสูงเหล่านี้หากคุณไม่มั่นใจเรื่องการแก้ไขโค้ดโฆษณา

ระบุความกว้างที่ขยายได้และความสูงคงที่

คุณสามารถปรับเปลี่ยนโค้ดโฆษณาที่ปรับเปลี่ยนตามพื้นที่โฆษณาเพื่อระบุความกว้างที่ขยายได้และความสูงคงที่สำหรับหน่วยโฆษณาผ่านทาง CSS ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีทำการปรับเปลี่ยน

ตัวอย่างของความกว้างที่ขยายได้โดยมีความสูงคงที่

ตัวอย่างนี้แสดงวิธีแก้ไขโค้ดโฆษณาที่ปรับเปลี่ยนตามพื้นที่โฆษณาเพื่อระบุความสูงคงที่ที่ 90px และความกว้างที่เปลี่ยนแปลงได้ ตั้งแต่ความกว้างต่ำสุด 400px ถึงความกว้างสูงสุด 970px:
<ins class="adsbygoogle"
   style="display:block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

ระบุขนาดที่แน่นอนตามความกว้างของหน้าจอ

คุณสามารถปรับเปลี่ยนโค้ดโฆษณาที่ปรับเปลี่ยนตามพื้นที่โฆษณาเพื่อระบุขนาดที่แน่นอนสำหรับหน่วยโฆษณาผ่านทาง CSS ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีทำการปรับเปลี่ยน

ตัวอย่างของขนาดที่แน่นอนตามความกว้างของหน้าจอ

หากคุณทราบขนาดหน่วยโฆษณาที่แน่นอนตามอุปกรณ์ซึ่งเหมาะกับเว็บไซต์ที่ปรับเปลี่ยนตามอุปกรณ์มากที่สุด คุณสามารถใช้คิวรี่สื่อ CSS3 ในการกำหนดขนาดของหน่วยโฆษณาที่ปรับเปลี่ยนตามพื้นที่โฆษณาได้ ตัวอย่างต่อไปนี้แสดงวิธีการแก้ไขโค้ดโฆษณาเพื่อใช้คิวรี่สื่อ CSS3:
<style type="text/css">
.adslot_1 { width: 320px; height: 100px; }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
    style="display:block;"
    data-ad-client="ca-pub-1234567890123456"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

กฎ @media เป็นไวยากรณ์ CSS3 ซึ่งเบราว์เซอร์ที่ทันสมัยทั้งหมดรองรับ โปรดจำไว้ว่าการกำหนดขนาดของหน่วยโฆษณาผ่าน CSS ในสไตล์ชีตภายนอกนั้นไม่ได้รับการรองรับอย่างเป็นทางการ

การซ่อนหน่วยโฆษณา

ในบางกรณี โดยเฉพาะบนอุปกรณ์เคลื่อนที่ขนาดเล็กนั้น คุณอาจไม่ต้องการแสดงโฆษณาใดๆ เลย หากต้องการซ่อนหน่วยโฆษณา คุณสามารถตั้งค่าพารามิเตอร์ด้วย CSS Media Queries เพื่อให้ไม่มีการส่งคำขอโฆษณาและไม่มีการแสดงโฆษณา ตัวอย่างต่อไปนี้แสดงให้เห็นถึงวิธีในการปรับเปลี่ยน

ตัวอย่างการซ่อนโฆษณาสำหรับหน้าจอบางขนาด

หากต้องการแสดงโฆษณาบนหน้าจอบางขนาดเท่านั้น คุณสามารถใช้ CSS ช่วยได้ ตัวอย่างต่อไปนี้แสดงวิธีการแก้ไขโค้ดโฆษณาเพื่อใช้คิวรี่สื่อ CSS3 เพื่อซ่อนโฆษณาสําหรับหน้าจอบางขนาด:
<style type="text/css">
.adslot_1 { display:block; width: 320px; height: 50px; }
@media (max-width: 400px) { .adslot_1 { display: none; } }
@media (min-width:500px) { .adslot_1 { width: 468px; height: 60px; } }
@media (min-width:800px) { .adslot_1 { width: 728px; height: 90px; } }
</style>
<ins class="adsbygoogle adslot_1"
   data-ad-client="ca-pub-1234567890123456"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-1234567890123456" crossorigin="anonymous"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

ในตัวอย่างนี้ ระบบจะไม่แสดงโฆษณาหากหน้าจอมีความกว้างน้อยกว่า 400 พิกเซล

หมายเหตุ: แม้จะมีความยืดหยุ่นอย่างที่เห็น แต่โปรดปฏิบัติตามนโยบายตำแหน่งโฆษณา และอย่าลืมว่านโยบายโปรแกรมอนุญาตให้แก้ไขโค้ดได้ในบางลักษณะเท่านั้น