Site icon บริษัท โค๊ดบี จำกัด

วิธีทำ HTML5 Banner สำหรับ Google Adword

codebee

<p><strong>วิธีทำ HTML5 Banner สำหรับ Google Adword<&sol;strong><&sol;p>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;html5banner&lowbar;by&lowbar;codebee&sol;" target&equals;"&lowbar;blank">ตัวอย่าง html5 banner<&sol;a><br &sol;>&NewLine;<a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;html5banner&lowbar;by&lowbar;codebee&sol;html5banner&lowbar;by&lowbar;codebee&period;zip" target&equals;"&lowbar;blank">ดาวน์โหลดตัวอย่าง html5 banner<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p>สำหรับการทำโฆษณาบน Google Adword นอกจากการสร้างแคมเปญโฆษณาแบบข้อความ<br &sol;>&NewLine;ในเครือข่ายการค้นหาของ Google แล้ว รูปแบบการลงโฆษณาอีกแบบหนึ่งที่ได้รับความนิยมคือ<br &sol;>&NewLine;การลงโฆษณาแบบรูปภาพหรือเครือข่ายดิสเพลย์ ซึ่งเป็นการลงโฆษณาที่สามารถแสดงรูปภาพ<br &sol;>&NewLine;และอนิเมชั่นได้ รูปแบบการโฆษณาแบบนี้จะแสดงบนเว็บไซต์ที่เข้าร่วมกับทาง google<br &sol;>&NewLine;<&excl;--more--><&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;<&sol;br> <&sol;p>&NewLine;<h4>โครงสร้าง assets file<&sol;h4>&NewLine;<p><img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;06&sol;วิธีทำ-html5-banner-3&period;png" alt&equals;"วิธีทำ html5 banner สำหรับ adword" &sol;><&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;<&sol;br> <&sol;p>&NewLine;<h4>ไฟล์ ad-interactivity&period;js<&sol;h4>&NewLine;<p>คือไฟล์ javascript ที่จะเอาไวเก็บคำสั่งต่าง ๆ ของโฆษณา เช่นการคลิกปุ่มเพื่อไปนำผู้ชม<br &sol;>&NewLine;ไปยังเว็บไซต์ของเราหรือหน้า landing page รวมไปถึงการ movement<br &sol;>&NewLine;หรือการเปลี่ยน scene ภายใน html banner ของเรา<&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;<&sol;br> <&sol;p>&NewLine;<h4>โฟลเด้อ img <&sol;h4>&NewLine;<p>เป็นโฟลเด้อสำหรับเก็บรูปภาพทสำหรับไว้แสดงในแบนเนอร์ ตัวอย่างเช่น โลโก้ของบริษัท<br &sol;>&NewLine;หรือรูปภาพที่เกี่ยวข้อง ควรบีบอัดรูปภาพให้มีขนาดที่ไม่หนักจนเกินไป เพื่อการแสดงผลที่รวดเร็ว<&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;<&sol;br> <&sol;p>&NewLine;<h4>ไฟล์ index&period;html<&sol;h4>&NewLine;<p>คือไฟล์หลักที่จะทำการ include ไฟล์ js&comma; css&comma; และโฟลเด้อ img ทั้งหมดมาประมวลผล<br &sol;>&NewLine;แสดงทั้งข้อมูลแบบข้อความและข้อมูลรูปภาพ <&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;<&sol;br> <&sol;p>&NewLine;<h4>ไฟล์ style&period;css<&sol;h4>&NewLine;<p>จะเป็นตัวกำหนดหน้าตาของ html5 banner ขนาดและสี ของข้อความ ขนาดของรูปภาพ<br &sol;>&NewLine;รวมไปถึงการทำอนิเมชั่นแบบคีย์เฟรม จะถูกเขียนไว้ในไฟล์ style&period;css<&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;<&sol;br> <&sol;p>&NewLine;<h4>โฆษณา Google Adword แบบ HTML5 ขนาดโฆษณาที่สามารถใช้งานได้<&sol;h4>&NewLine;<p>แบนเนอร์&colon; 468 x 60<br &sol;>&NewLine;ลีดเดอร์บอร์ด&colon; 728 x 90<br &sol;>&NewLine;ลีดเดอร์บอร์ดสำหรับมือถือ&colon; 320 x 50<br &sol;>&NewLine;สี่เหลี่ยมจัตุรัส&colon; 250 x 250<br &sol;>&NewLine;สี่เหลี่ยมจัตุรัสเล็ก&colon; 200 x 200<br &sol;>&NewLine;สี่เหลี่ยมผืนผ้าใหญ่&colon; 336 x 280<br &sol;>&NewLine;สี่เหลี่ยมผืนผ้าในบรรทัด&colon; 300 x 250<br &sol;>&NewLine;แท่งทรงสูง&colon; 120 x 600<br &sol;>&NewLine;แท่งทรงสูงแบบกว้าง&colon; 160 x 600<br &sol;>&NewLine;ครึ่งหน้า&colon; 300 x 600<br &sol;>&NewLine;ลีดเดอร์บอร์ดขนาดใหญ่&colon; 970 x 90<br &sol;>&NewLine;แบนเนอร์สำหรับอุปกรณ์เคลื่อนที่ขนาดใหญ่&colon; 320 x 100<br &sol;>&NewLine;บิลบอร์ด&colon; 970 x 250<br &sol;>&NewLine;ภาพบุคคล&colon; 300 x 1050<br &sol;>&NewLine;พาโนรามา&colon; 980 x 120<br &sol;>&NewLine;แบนเนอร์ด้านบน&colon; 930 x 180<br &sol;>&NewLine;หน้าจอกว้างสามเท่า&colon; 250 x 360<br &sol;>&NewLine;เน็ตบอร์ด&colon; 580 x 400<&sol;p>&NewLine;<p><&sol;br><br &sol;>&NewLine;<&sol;br> <&sol;p>&NewLine;<h4>กำหนด meta tag ที่จำเป็น ในไฟล์ index&period;html<&sol;h4>&NewLine;<p>ใช้ meta name ad&period;size เพื่อกำหนดขนาดของโฆษณาที่เราต้องการให้แสดงผล<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " title&equals;"ใช้ meta name ad&period;size เพื่อกำหนดขนาดของโฆษณาที่เราต้องการให้แสดงผล" >&lt&semi;meta name&equals;"ad&period;size" content&equals;"width&equals;300&comma; height&equals;250"&sol;&gt&semi;<&sol;pre>&NewLine;<p>ใช้ metaname viewport เพื่อกำหนดให้โฆษณาแสดงผลบนอุปกรณ์สมาร์ทโฟนได้<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " title&equals;"ใช้ metaname viewport เพื่อกำหนดให้โฆษณาแสดงผลบนอุปกรณ์สมาร์ทโฟนได้" >&lt&semi;meta name&equals;"viewport" content&equals;"width&equals;device-width&comma; initial-scale&equals;1"&gt&semi;<&sol;pre>&NewLine;<p>สำหรับฟ้อนที่จะใช้แสดงในโฆษณา google แนะนำให้ใช้ google font ซึ่งจะ support ทุก browser<br &sol;>&NewLine;ฟ้อนทั้งหมดเราสามารถเลือกมาใช้งานได้จาก <a href&equals;"https&colon;&sol;&sol;www&period;google&period;com&sol;fonts" target&equals;"&lowbar;blank">https&colon;&sol;&sol;www&period;google&period;com&sol;fonts<&sol;a><&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " ><link href&equals;"https&colon;&sol;&sol;fonts&period;googleapis&period;com&sol;css&quest;family&equals;Itim&&num;038&semi;subset&equals;thai" rel&equals;"stylesheet"><&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;<&sol;br> <&sol;p>&NewLine;<h4>เกี่ยวกับ AdWords Exit<&sol;h4>&NewLine;<p>AdWords Exit คือ javascript api ของ google สำหรับทำโฆษณาแบบ html5 ที่ต้องการให้มี<br &sol;>&NewLine;ปุ่มคลิกเฉพาะจุดโฆษณา เพื่อไปยังหน้า landing page ถ้าเราไม่ include exitapi&period;js<br &sol;>&NewLine;โฆษณาทั้งแผ่นจะสามารถคลิกได้ทั้งหมด<br &sol;>&NewLine;การ include มาใช้งาน<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;script src&equals;"https&colon;&sol;&sol;tpc&period;googlesyndication&period;com&sol;pagead&sol;gadgets&sol;html5&sol;api&sol;exitapi&period;js"&gt&semi;&lt&semi;&sol;script&gt&semi;<&sol;pre>&NewLine;<p>การเรียกใช้งานในไฟล์ index&period;html<&sol;p>&NewLine;<pre class&equals;"lang&colon;default decode&colon;true " >&lt&semi;a onclick&equals;"ExitApi&period;exit&lpar;&rpar;"&gt&semi;อ่านเพิ่มเติม&lt&semi;&sol;a&gt&semi;<&sol;pre>&NewLine;<p><&sol;br><br &sol;>&NewLine;<&sol;br> <&sol;p>&NewLine;<h4>วิธีตรวจสอบ HTML5 Banner ของเราว่าถูกต้องหรือไม่ ก่อนนำไปใช้งานจริง<&sol;h4>&NewLine;<p>&&num;8211&semi; ทำการ zip ไฟล์ assets ทั้งหมดของเราตั้งชื่อว่า ads&period;zip<br &sol;>&NewLine;&&num;8211&semi; ไปที่เว็บไซต์ <a href&equals;"http&colon;&sol;&sol;platform&period;iabtechlab&period;com&sol;" target&equals;"&lowbar;blank">http&colon;&sol;&sol;platform&period;iabtechlab&period;com&sol;<&sol;a> สมัครสมาชิกและอัพโหลดไฟล์เพื่อทดสอบ<&sol;p>&NewLine;<blockquote><p><a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;html5banner&lowbar;by&lowbar;codebee&sol;" target&equals;"&lowbar;blank">ตัวอย่าง html5 banner<&sol;a><br &sol;>&NewLine;<a href&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;examples&sol;html5banner&lowbar;by&lowbar;codebee&sol;html5banner&lowbar;by&lowbar;codebee&period;zip" target&equals;"&lowbar;blank">ดาวน์โหลดตัวอย่าง html5 banner<&sol;a><&sol;p><&sol;blockquote>&NewLine;<p><img src&equals;"http&colon;&sol;&sol;codebee&period;co&period;th&sol;labs&sol;wp-content&sol;uploads&sol;2016&sol;06&sol;วิธีทำ-html5-banner-4&period;png" alt&equals;"วิธีทำ html5 banner สำหรับ adword" &sol;><&sol;p>&NewLine;

Exit mobile version