ปรับ Adsense ให้รองรับหลายๆ ขนาดหน้าจอ (Responsive Design)

กระแส Responsive Design ที่ปรับหน้าของตัวเว็บให้เหมาะสมกับอุปกรณ์แต่ละแบบที่กำลังเข้าถึงหน้าเว็บนั้นๆ กำลังเป็นหัวข้อที่กำลังทำให้การออกแบบเว็บในปีนี้ แต่ปัญหาของเว็บจำนวนหนึ่งคือตัว Ads ในบางผู้ให้บริการไม่ได้ออกแบบมารองรับและปรับสภาพขนาดแต่อย่างใด ซึ่งเว็บผมก็เจออยู่คือ Adsense นั้นจะเป็นลักษณะความกว้างและสูงตายตัว ทำให้ลำบากต่อการปรับแต่ง

แต่หลังจากที่ได้ค้นหา ก็พบว่ามีคนใช้ Media Query ใน CSS3 มาช่วย แต่ปัญหาคือ การทำแบบนี้จะผิดข้อกำหนดของ Google ที่ไม่ยอมให้ Adsense นั้นอยู่ใน tag “display:none;” หรือหลบด้วยการเลื่อนตำแหน่งไปซ่อน ซึ่งผิด TOS เต็มๆ และยังมีผลทางเทคนิคในเรื่องของการโหลด JavaScript เกินความจำเป็นทำให้หน้าเว็บโหลดช้า

แต่ก็เจอทางออกจนได้จาก Google Approves Responsive AdSense Ads นั้นสามารถใช้โค้ดจาก How to use Google AdSense Ads on Responsive Websites ได้ ผมจึงนำมาปรับแต่งเล็กน้อยเพื่อให้เหมาะสมกับขนาดหน้าจอ 4 screen (960px, 800px, 480px และ 320px) ที่ Theme ของ Blog นี้ทำงานอยู่ ตามโค้ดด้านล่างนี้ คราวนี้ Ads ก็รองรับการทำงานควบคู่กับ Theme แบบ Responsive Design แล้วครับ

javascript

  1. <script type="text/javascript">
  2.    
  3.     var width = window.innerWidth
  4.       || document.documentElement.clientWidth
  5.       || document.body.clientWidth;
  6.  
  7.     google_ad_client = "ca-publisher-id";
  8.    
  9.     if (width > 800) {
  10.       // For 960px
  11.       google_ad_slot = "ad-unit-1";
  12.       google_ad_width = 728;
  13.       google_ad_height = 90;
  14.     } else if ((width < 800) && (width > 480)) {
  15.       // Load 800px
  16.       google_ad_slot = "ad-unit-2";
  17.       google_ad_width = 468;
  18.       google_ad_height = 60;
  19.     } else if ((width < 480) && (width > 320)) {
  20.       // For 480px
  21.       google_ad_slot = "ad-unit-3";
  22.       google_ad_width = 320;
  23.       google_ad_height = 50;
  24.     } else {              
  25.       // For 320px
  26.       google_ad_slot = "ad-unit-4";
  27.       google_ad_width = 234;
  28.       google_ad_height = 60;
  29.     }
  30.    
  31. </script>
  32. <script type="text/javascript"
  33. src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
  34. </script>

Leave a Reply