หน่วยโฆษณา

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

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

สิ่งสำคัญ:

หมายเหตุ: ตัวอย่างการแก้ไขโค้ดโฆษณา 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"></script>
<!-- example_responsive_1 -->
<ins class="adsbygoogle example_responsive_1"
     style="display:inline-block"
     data-ad-client="ca-pub-XXXXXXX11XXX9"
     data-ad-slot="8XXXXX1"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

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

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

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

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

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

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

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

ตัวอย่างของความกว้างที่ขยายได้โดยมีความสูงคงที่
ตัวอย่างนี้แสดงถึงวิธีการแก้ไขโค้ดโฆษณาที่ปรับเปลี่ยนตามอุปกรณ์ เพื่อระบุความสูงคงที่ 90px และความกว้างที่เปลี่ยนแปลงได้ ตั้งแต่ความกว้างต่ำสุด 400px ถึงความกว้างสูงสุด 970px
<ins class="adsbygoogle"
   style="display:inline-block;min-width:400px;max-width:970px;width:100%;height:90px"
   data-ad-client="ca-pub-1234"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></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:inline-block;"
    data-ad-client="ca-pub-1234"
    data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>
กฎ @media เป็นรูปแบบคำสั่ง CSS3 ซึ่งเบราว์เซอร์รุ่นใหม่ๆ ทั้งหมดรองรับ หากคุณต้องการรองรับเบราว์เซอร์รุ่นเก่า เช่น Internet Explorer 7 หรือเก่ากว่า เราขอแนะนำให้ระบุขนาดเริ่มต้นไว้ตั้งแต่แรก วิธีนี้จะช่วยให้มั่นใจได้ว่าโฆษณาจะแสดง แม้ไม่มีการรองรับคิวรี่สื่อ โปรดจำไว้ว่าการกำหนดขนาดของโค้ดโฆษณาผ่าน CSS ในสไตล์ชีตภายนอกนั้นไม่ได้รับการรองรับอย่างเป็นทางการ

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

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

ตัวอย่างการซ่อนโฆษณาสำหรับหน้าจอบางขนาด
หากต้องการแสดงโฆษณาบนหน้าจอบางขนาดเท่านั้น คุณสามารถใช้ CSS ช่วยได้ ตัวอย่างต่อไปนี้จะแสดงวิธีแก้ไขโค้ดโฆษณาเพื่อให้ใช้คิวรี่สื่อ CSS3 ในการซ่อนโฆษณาสำหรับหน้าจอบางขนาด
<style type="text/css">
.adslot_1 { display:inline-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-1234"
   data-ad-slot="5678"></ins>
<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<script>(adsbygoogle = window.adsbygoogle || []).push({});</script>

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

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

หากต้องการความช่วยเหลือเพิ่มเติม

ลงชื่อเข้าใช้เพื่อดูตัวเลือกการสนับสนุนเพิ่มเติมในการแก้ไขปัญหาของคุณอย่างรวดเร็ว