HTML5 - แบนเนอร์: จำเป็นสำหรับอะไรและทำอย่างไร วิธีสร้างโค้ด html สำหรับแบนเนอร์และภาพเคลื่อนไหวใน Photoshop คำแนะนำใหม่สำหรับการเพิ่มแบนเนอร์ html5 css

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

เราเพิ่มแบนเนอร์ลงในไซต์เพื่อโฆษณาสินค้า บริการ โปรโมชั่นแบรนด์ และอื่นๆ

ด้วยการวางโค้ดแบนเนอร์บนเว็บไซต์ เราต้องการเน้นบางสิ่งบางอย่าง จึงดึงดูดความสนใจได้

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

ตามกฎแล้ว นอกเหนือจากการโปรโมตผลิตภัณฑ์ เพื่อให้รายได้ของคุณสูงขึ้น คุณจะได้รับลิงก์ผู้อ้างอิงเพื่อดึงดูดพันธมิตรรายอื่น

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

คำอธิบาย:

แบนเนอร์พร้อมกราฟิกในตัว แบบฟอร์ม HTML หลายลิงก์

ประเภทรหัส:

เฟรม, โปสเตอร์, อาแจ็กซ์, ส่วนขยาย

รายละเอียดเพิ่มเติม:

ใช้แบนเนอร์ HTML วัตถุกราฟิกและกลไกเชิงโต้ตอบสำหรับการโต้ตอบกับผู้ใช้ แบนเนอร์ HTML สามารถประกอบด้วยหลายวัตถุ สิ่งเหล่านี้อาจเป็นรูปภาพ (รูปภาพธรรมดา) ภาพเคลื่อนไหว Flash ชิ้นส่วนโค้ด HTML ตัวอย่างเช่น แบนเนอร์หนึ่งแบนเนอร์อาจมีหลายลิงก์ ขึ้นอยู่กับว่าผู้เยี่ยมชมคลิกไปที่ใด หน้าที่แตกต่างกันเว็บไซต์.

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

เตรียมโค้ด HTML แบนเนอร์ ซึ่งอาจเป็นโค้ด HTML ใดก็ได้ รวมถึง HTML 5 ซึ่งก็คือ เค้าโครง HTMLแบนเนอร์ด้วย สไตล์ CSSและโค้ดจาวาสคริปต์ ขอแนะนำให้วาง JavaScript และ CSS ไว้ในโค้ด HTML ของแบนเนอร์ แทนที่จะรวมเป็นไฟล์แยกกัน อย่างไรก็ตาม หากจำเป็น อนุญาตให้ใช้ไฟล์แยกกันได้ คุณสามารถใช้ทั้งลิงก์แบบสัมบูรณ์ไปยังไฟล์ที่โหลดลงในแบนเนอร์ (รูปภาพต่างๆ และไฟล์ Flash) และลิงก์ที่เกี่ยวข้องกัน

ข้อสำคัญ: เมื่อใช้เส้นทางสัมพันธ์กับไฟล์ จำเป็นที่ไฟล์แบนเนอร์ทั้งหมดจะต้องอยู่ในโฟลเดอร์เดียวกันกับไฟล์ HTML ที่กำลังจัดเตรียม เหล่านั้น. ไม่ควรมีโฟลเดอร์เพิ่มเติมสำหรับรูปภาพ ไฟล์ js หรือไฟล์มีเดีย ชื่อของไฟล์แบนเนอร์ทั้งหมดจะต้องตรงกัน

หมายเหตุ: สำหรับแบนเนอร์ที่ใช้โค้ด IFrame (มิติ) ไฟล์ HTML ของแบนเนอร์จะต้องเรียกว่า index.html

หมายเหตุ: หากแบนเนอร์ใช้ สคริปต์เพิ่มเติมชื่อจะต้องแตกต่างจาก script.js ชื่อ script.js ถูกสงวนไว้สำหรับสคริปต์ควบคุมแบนเนอร์

ตามค่าเริ่มต้น การคลิกในแบนเนอร์ HTML จะไม่ถูกนับ หากต้องการนับคลิก คุณต้องทำการเปลี่ยนแปลงไฟล์ HTML แบนเนอร์ตามคำแนะนำข้อใดข้อหนึ่งต่อไปนี้:

• เฟิร์มแวร์คลิกเพื่อคลิกสำหรับโฆษณา HTML
• เปิด โปรแกรมแก้ไขข้อความไฟล์ HTML แบนเนอร์ รวมไฟล์ html.js:

  หากแบนเนอร์อยู่บนเซิร์ฟเวอร์บุคคลที่สาม ให้ระบุเส้นทางแบบเต็มไปยังไฟล์ html.js:

  หมายเหตุ: ไม่จำเป็นต้องดาวน์โหลดปลั๊กอิน html.js หรือสร้างขึ้นเอง ปลั๊กอินนี้โฮสต์อยู่บนเซิร์ฟเวอร์ AdRiver และคุณสามารถเชื่อมต่อปลั๊กอินดังกล่าวในไฟล์ที่เตรียมไว้ได้

• หากต้องการนับคลิกและติดตามลิงก์ที่ระบุในระบบเมื่อโหลดแบนเนอร์ (ช่องแบนเนอร์ลิงก์) ให้ใช้ฟังก์ชัน ar_callLink สามารถเรียกฟังก์ชันนี้ตามเหตุการณ์ใดๆ สำหรับแท็กใดๆ ในโค้ดแบนเนอร์ได้ เช่น: ไปที่เว็บไซต์

  ไปที่เว็บไซต์

  พารามิเตอร์ที่เป็นไปได้:

  วัตถุเหตุการณ์ (คลิก เลื่อนเมาส์ ฯลฯ) เมื่อทำการโอน พารามิเตอร์นี้พิกัดการคลิกภายใน IFrame พร้อมแบนเนอร์จะถูกเพิ่มลงในลิงก์การคลิก

  พารามิเตอร์ทั้งหมดเป็นทางเลือก

• เพื่อนับการคลิกลิงก์ในแบนเนอร์ HTML โดยใช้ลิงก์คลิก AdRiver

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

ขนาดของไฟล์ที่อัพโหลดจะต้องตรงกัน

หมายเหตุ: สำหรับแบนเนอร์ HTML บนโค้ดร่วมกับสคริปต์ควบคุม อ่านเพิ่มเติม

แบนเนอร์ HTML5 เป็นแบนเนอร์ที่แสดงเนื้อหา HTML ที่กำหนดเองหรือรูปภาพ รหัส HTML สามารถเป็นได้ตามปกติ หน้า HTMLด้วยสไตล์และสคริปต์ มันถูกวางไว้ใน iframe และจำกัดการเข้าถึงเนื้อหาของเว็บไซต์

การใช้เทมเพลต "แบนเนอร์ HTML5" สามารถเพิ่มแบนเนอร์ได้สองวิธี:
1. ต้องเตรียมเฉพาะภาพเท่านั้น การมีลิงก์ที่จะไปที่ในพารามิเตอร์แบนเนอร์จะควบคุมความสามารถในการคลิกของรูปภาพ
2. ได้เตรียมโฆษณา HTML ในตัวแก้ไขตามคำแนะนำ: หรือ
หากมีการเพิ่มทั้งโค้ด HTML และรูปภาพลงในแบนเนอร์ โค้ด HTML จะปรากฏขึ้น

พารามิเตอร์ที่กำหนดค่าได้เมื่อเพิ่มลงใน ADFOX:
- ความกว้าง ความสูงของแบนเนอร์
- สไตล์ CSS ที่กำหนดเองสำหรับคอนเทนเนอร์ที่มีแบนเนอร์

1. ตรวจสอบข้อกำหนดโค้ด HTML

• ขนาดไฟล์ HTML สูงสุดที่อนุญาตคือ 65,000 ไบต์
• ขอแนะนำให้วาง JavaScript และ CSS ไว้ในโค้ด HTML ของแบนเนอร์ หากโค้ด HTML ที่ได้มีขนาดเกินขนาดสูงสุดที่อนุญาต จำเป็นต้องลดโค้ดโดยใส่ JavaScript และ CSS เข้าไป แยกไฟล์:
  - บันทึกโค้ด js และ css ลงในไฟล์แยกกันโดยมีนามสกุล .js หรือ .css
  - ไฟล์ไม่ควรมีน้ำหนักเกิน 300Kb;
  - อัปโหลดไฟล์ไปยังแท็บ "ไฟล์" ของแคมเปญโฆษณาและรวมลิงก์ผลลัพธ์ไปยังไฟล์ในโค้ด HTML

  ตัวอย่างการเชื่อมต่อไฟล์ js และ css:

  รหัส HTML ไม่อนุญาตให้ใช้เส้นทางไฟล์แบบสัมพันธ์

• โปรเจ็กต์สามารถมีได้เพียงไฟล์เดียวที่มีนามสกุล .html
• จำนวนไฟล์สูงสุดที่อนุญาตในโครงการคือ 50;
• ประเภทไฟล์ที่อนุญาตในโครงการ: css, js, html, gif, png, jpg, jpeg, svg, json, flv, mp4, ogv, ogg, webm, avi, swf;
• ขนาดสูงสุดของแต่ละไฟล์ (ใช้กับไฟล์ภายในไฟล์เก็บถาวรด้วย):
  - 300กิโลไบต์;
  - 1MB สำหรับไฟล์วิดีโอ
• ชื่อไฟล์ต้องประกอบด้วยตัวเลขหรือตัวอักษรภาษาอังกฤษและขีดล่างเท่านั้น ไม่อนุญาตให้ใช้ตัวอักษรรัสเซีย ช่องว่าง เครื่องหมายคำพูด และอักขระพิเศษในชื่อไฟล์
• คุณไม่สามารถใช้ตัวอักษรรัสเซียในชื่อของตัวแปรและวัตถุได้
  ข้อยกเว้นเพียงอย่างเดียวคือข้อความบนแบนเนอร์
• รูปแบบของโปรเจ็กต์ที่เสร็จแล้วเป็นไฟล์ zip

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

คุณสามารถใช้ภาพ SVG เป็นเวกเตอร์ ซึ่งหมายความว่าจะดูดีขึ้นบนอุปกรณ์ทุกชนิด - มือถือและเดสก์ท็อป นอกจากนี้ยังมีขนาดไฟล์เล็กและสามารถเคลื่อนไหวได้

รูปแบบภาพที่ยอมรับได้: png, gif, jpg, svg
น้ำหนักสูงสุดของหนึ่งไฟล์: 300Kb.

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

Adobe Animate CC Editor - แบนเนอร์ปุ่มเดียว

Adobe Animate CC Editor - แบนเนอร์พร้อมหลายปุ่ม

1. ดาวน์โหลดเทมเพลตสำหรับแบนเนอร์ที่มีปุ่มหลายปุ่ม

2. สร้างโปรเจ็กต์ HTML5 Canvas ใน Adobe Animate (หรือเปิดโปรเจ็กต์ที่มีอยู่)

3. เมื่อเพิ่มปุ่มหรือคลิปภาพยนตร์ที่ฝังอยู่ในฉาก สิ่งสำคัญคือต้องตั้งชื่ออินสแตนซ์เพื่อให้คุณสามารถเพิ่มการคลิกไปยังปุ่มที่ต้องการได้ เราขอแนะนำให้ใช้ชื่อ ปุ่ม 1 - ปุ่ม 9.

ดูเพิ่มเติมที่:

คำแนะนำในการเพิ่มปุ่มและการกำหนดชื่ออินสแตนซ์

1. สร้างวัตถุบางอย่างบนฉาก เช่น โดยใช้เครื่องมือสี่เหลี่ยมผืนผ้า
จากนั้นเลือกมันและ เมนูบริบทเลือก "แปลงเป็นสัญลักษณ์..."

2. ในกล่องโต้ตอบที่ปรากฏขึ้น ให้เลือกประเภท: ปุ่ม ชื่อสามารถไม่เปลี่ยนแปลงได้ คลิกตกลง

3. กำหนดชื่ออินสแตนซ์ให้กับปุ่มนี้เพื่อให้คลิกใช้งานได้

4. เขียนโค้ดสำหรับปุ่มนี้ในการดำเนินการ:

Window.buttons.push(//เขียนเส้นทางของปุ่มโดยคั่นด้วยเครื่องหมายจุลภาค โดยเพิ่มส่วนนี้ที่จุดเริ่มต้น this.button1 //สิ้นสุดช่องว่างสำหรับปุ่ม);

1. สมมติว่าปุ่มอยู่ภายในสัญลักษณ์อื่น เช่น ภายในคลิปภาพยนตร์
ใน ในตัวอย่างนี้คลิปหนังเรื่องนี้ได้รับชื่ออินสแตนซ์ว่า "ชื่อ"

2. ดับเบิลคลิกภายในชื่อ จะมีปุ่มซ้อนกัน

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

Window.buttons.push(//เขียนเส้นทางของปุ่มโดยคั่นด้วยเครื่องหมายจุลภาค โดยเพิ่มส่วนนี้ที่จุดเริ่มต้น this.name.button1 //สิ้นสุดช่องว่างสำหรับปุ่ม);

คำแนะนำในการสร้างปุ่มโปร่งใส

1. เลือกองค์ประกอบที่ต้องการและแปลงเป็นสัญลักษณ์

2. ป้อนชื่อและเลือกประเภท: ปุ่ม

3. ดับเบิลคลิกที่สัญลักษณ์เพื่อไปที่สัญลักษณ์:

4. แทรกคีย์เฟรมลงใน Hit Frame

5. ลบเนื้อหาของเฟรมขึ้น บน ล่าง

6. ปุ่มโปร่งใสพร้อมแล้ว:

4. เพิ่มเลเยอร์ Actions ให้กับโปรเจ็กต์ (เราจะเพิ่มโค้ดสำหรับปุ่มต่างๆ เข้าไป)

5. เปิดหน้าต่างเพื่อเขียนโค้ด

Window.buttons.push(//เขียนเส้นทางของปุ่มโดยคั่นด้วยเครื่องหมายจุลภาค โดยเพิ่มส่วนนี้ที่จุดเริ่มต้น //สิ้นสุดช่องว่างสำหรับปุ่ม); setAdfox();

หากปุ่มอยู่ในฉากหลัก ให้เขียนชื่ออินสแตนซ์ตามหลังสิ่งนี้ เป็นต้น

นี่ปุ่ม1

หากปุ่มอยู่ภายในฉากที่ซ้อนกัน หลังจากนั้นให้เขียนชื่ออินสแตนซ์ของฉากก่อน แล้วตามด้วยชื่ออินสแตนซ์ของปุ่ม:

นี้.scene_instance_name.button2

ตัวอย่างโค้ดสุดท้ายในเลเยอร์ Actions:

Window.buttons.push(//เขียนเส้นทางของปุ่มโดยคั่นด้วยเครื่องหมายจุลภาค โดยเพิ่มส่วนนี้ที่จุดเริ่มต้น this.button1, this.scene_instance_name.button2 //สิ้นสุดช่องว่างสำหรับปุ่ม); setAdfox();

7. ปุ่มแรกในบรรทัดโค้ดจะเรียกลิงก์แรกจาก ADFOX ลิงก์ที่สอง - ที่สองเป็นต้น

นอกจากโฆษณา HTML แล้ว ให้ผู้จัดการที่จะเพิ่มแบนเนอร์ลงใน ADFOX พร้อมข้อมูลเกี่ยวกับความสอดคล้องของปุ่มและหมายเลขลิงก์

8. เปิดตัวเลือกการเผยแพร่และเชื่อมต่อเทมเพลตจากจุดแรกและเผยแพร่โปรเจ็กต์โดยเลือกไดเร็กทอรีที่ต้องการ

9. หลังจากเผยแพร่โครงการแล้ว ให้เก็บถาวรในรูปแบบ .zip โฆษณาของคุณพร้อมที่จะอัปโหลดไปยังแบนเนอร์ ADFOX แล้ว

ผู้แก้ไขนักออกแบบเว็บของ Google

โค้ดของแบนเนอร์นี้สามารถใช้เป็นพื้นฐานในการสร้างโฆษณาในตัวแก้ไขได้

เทมเพลตมีสคริปต์ adfox_HTML5.jsและชุดพารามิเตอร์สำหรับ การดำเนินการที่ถูกต้องการเปลี่ยนภาพและการนับเหตุการณ์:
%reference%, %user1%, %eventN% โดยที่ N คือหมายเลขเหตุการณ์ตั้งแต่ 1 ถึง 30

2. คลิกการประมวลผล

เหตุการณ์ทั้งหมดถูกกำหนดให้กับองค์ประกอบภาพเคลื่อนไหวเฉพาะผ่านทางแท็บเหตุการณ์

ส่วนประกอบ Interactive Area ใช้เพื่อเรียกใช้การดำเนินการ
เพิ่มและเลือกกิจกรรม พื้นที่สัมผัส → สัมผัส/คลิก (หรือ "พื้นที่การแตะ > สัมผัส/คลิก" ในเวอร์ชันภาษาอังกฤษ)

ในแท็บ "รหัสที่กำหนดเอง" ให้ระบุการเรียกฟังก์ชันคลิก

2.1 หากใช้ปุ่มกระโดดปุ่มเดียว:

โทรคลิก();

2.2 หากมีปุ่มเปลี่ยนหลายปุ่ม:

โทรคลิก(n);

ที่ไหน

2.3 หากคุณต้องการทริกเกอร์เหตุการณ์จากภาพเคลื่อนไหวโดยไม่มีการเปลี่ยนแปลง ให้ใช้โค้ดต่อไปนี้:

กิจกรรมการโทร (n);

โดยที่ n คือจำนวนเหตุการณ์ที่ควรเรียก

คุณลักษณะของการใช้แบนเนอร์ยืด (ยาง)

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

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

4. การเผยแพร่โครงการ

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

หลังจากเผยแพร่โครงการของคุณแล้ว ให้บีบอัดไฟล์ในรูปแบบ .zip โฆษณาของคุณพร้อมที่จะอัปโหลดไปยังแบนเนอร์ ADFOX แล้ว

บรรณาธิการอื่น ๆ

1. การนับการคลิกบนแบนเนอร์

เพื่อให้ ADFOX คำนวณสถิติการคลิกแบนเนอร์ คุณต้องเขียนตัวแปรในโค้ด HTML ในแท็ก และสำหรับแอตทริบิวต์ href:

%banner.reference_user1%

นอกจากนี้ สำหรับลิงก์ ให้ใช้แอตทริบิวต์เป้าหมายพร้อมกับตัวแปร %banner.target% ในค่าแอตทริบิวต์
หากไม่มีแอตทริบิวต์ ลิงก์จะเปิดขึ้นภายใน iframe กล่าวคือ ไซต์ที่โฆษณาจะเปิดขึ้นในพื้นที่แบนเนอร์

ตัวอย่างโค้ด HTML สำหรับการนับการคลิกแบนเนอร์:

เว็บไซต์ของผู้ลงโฆษณา

ในโค้ด HTML ของแบนเนอร์ที่จะใส่เข้าไป แอปพลิเคชันมือถือหากต้องการนับคลิก ให้ใช้มาโคร: %reference%@%banner.user1%

2. การนับคลิกจากหลายลิงก์ในแบนเนอร์

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

ลิงค์แรก ลิงค์ที่สอง

แทนที่ค่าแอตทริบิวต์ href ด้วยตัวแปร %request.reference%@%banner.eventN% โดยที่ N ควรเป็นหมายเลขเหตุการณ์ตั้งแต่ 1 ถึง 28
ตัวอย่างเช่น:

ลิงค์แรก ลิงค์ที่สอง

ความสอดคล้องของลิงก์และตัวแปรจะต้องรายงานไปยังผู้จัดการที่เพิ่มแบนเนอร์ใน ADFOX เนื่องจากเมื่อเพิ่มแบนเนอร์ คุณจะต้องระบุลิงค์แรกสำหรับกิจกรรม 1 และลิงค์ที่สองสำหรับกิจกรรม 2

หากต้องการเพิ่มแบนเนอร์ใน ADFOX ให้เลือกประเภทแบนเนอร์ที่ต้องการและเทมเพลต "แบนเนอร์ HTML5"

ระบุพารามิเตอร์แบนเนอร์:

เก็บถาวรด้วยโฆษณา HTML5 - อัปโหลดไฟล์เก็บถาวร .zip พร้อมกับโปรเจ็กต์ โดยช่อง "โค้ดโฆษณา HTML5" ควรเว้นว่างไว้ (เนื้อหาในไฟล์ .html ของโปรเจ็กต์จะเต็มไปด้วยเนื้อหาหลังจากเพิ่มแบนเนอร์)

โค้ดโฆษณา HTML5 - อัปโหลดไฟล์ zip พร้อมโปรเจ็กต์ที่เตรียมไว้ บรรณาธิการ HTMLหรือวางโค้ด HTML

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

ลิงก์ไปยังพิกเซลการวัด - โดยค่าเริ่มต้นจะใช้พิกเซล ADFOX //banners.adfox.ru/transparent.gif หากคุณต้องการติดตามการแสดงผลในระบบบุคคลที่สาม ให้ลบพิกเซล ADFOX และระบุลิงก์อื่น

ความกว้างของโฆษณา (px หรือ %) - ระบุความกว้างของแบนเนอร์

ความสูงของโฆษณา (px หรือ %) - ระบุความสูงของแบนเนอร์

รูปภาพ - อัปโหลดรูปภาพ
เงื่อนไขในการแสดงโฆษณา:
- เพิ่มโค้ด HTML และรูปภาพแล้ว - โค้ด HTML จะปรากฏขึ้น
- เพิ่มรูปภาพ - รูปภาพจะแสดง
- เพิ่มโค้ด HTML - โค้ด HTML จะปรากฏขึ้น

ชื่อแอ็ตทริบิวต์คลาสคอนเทนเนอร์แบนเนอร์ - ระบุชื่อ (หรือหลายชื่อโดยคั่นด้วยช่องว่าง) สำหรับแอ็ตทริบิวต์คลาสของคอนเทนเนอร์แบนเนอร์

ใช้ SafeFrame (ใช่|ไม่ใช่) - safeFrame เป็นเทคโนโลยีที่รวมการโฆษณาใน iframe พิเศษที่มี API ที่เข้มงวด SafeFrame ป้องกันไม่ให้โฆษณาที่แสดงผลภายในรวบรวมข้อมูลและโต้ตอบกับส่วนที่เหลือของหน้านอก SafeFrame
ใช่ - เปิดใช้งานการใช้ safeFrame และปฏิเสธการเข้าถึงหน้าเว็บ
ไม่ - อย่าเปิดใช้งาน safeFrame รหัสแบนเนอร์สามารถเข้าถึงหน้าเว็บได้

สไตล์สำหรับบล็อกแบนเนอร์ - สไตล์ที่กำหนดเองสำหรับคอนเทนเนอร์แบนเนอร์ในหนึ่งบรรทัด นอกเหนือจากสไตล์: จอแสดงผล ตัวอย่างเช่น "เส้นขอบ: 1px สีแดงทึบ;" ค่าที่ไม่ถูกต้องจะถูกยกเลิกโดยเบราว์เซอร์

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

เราต้องการ วิธีใหม่ทำแบนเนอร์โฆษณา.

เราต้องการแบนเนอร์แบบตอบสนอง...

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

• โฆษณา HTML สามารถเข้าถึงได้โดยสมบูรณ์ และมาร์กอัปความหมายทำให้โฆษณาเข้ากันได้กับความละเอียดที่แตกต่างกัน
• ข้อความ รูปภาพ วิดีโอ Javascript และแบบฟอร์มสามารถใช้ในแบนเนอร์ได้เช่นเดียวกับหน้าเว็บอื่นๆ
• แบนเนอร์สามารถใช้สคริปต์เซิร์ฟเวอร์แบบไดนามิกและฐานข้อมูลได้หากจำเป็น
• โฆษณา HTML สามารถใช้พื้นที่ดิสก์น้อยมาก
• การโฮสต์แบนเนอร์นั้นเหมือนกับการโฮสต์เว็บโดยพื้นฐาน
• เลขที่ เทคโนโลยีใหม่สำหรับนักพัฒนาเว็บก็เหมือนกับการพัฒนาเว็บทั่วไป
• และแน่นอนว่า โฆษณา HTML5 สามารถปรับให้เข้ากับขนาดใดก็ได้โดยใช้คำสั่งสื่อ CSS3 ซึ่งเป็นสิ่งที่เราต้องการสำหรับแบนเนอร์แบบโต้ตอบ!

เคล็ดลับเดียวคือการทำให้ขนาด iframe ไดนามิกโดยใช้คำสั่งสื่อ CSS3 ฉันจะพูดถึงเรื่องนี้ในภายหลัง... แต่โดยพื้นฐานแล้ว!

ต่อไปนี้เป็นตัวอย่างโฆษณา HTML5 ที่แสดงด้วยขนาดพิกเซลยอดนิยม 125x125:

นี่คือโฆษณาเดียวกันที่มีความกว้างที่ยืดหยุ่น:

สังเกตว่าคนที่สองมีปฏิกิริยาอย่างไร โฆษณาเมื่อคุณปรับขนาดหน้าต่างเบราว์เซอร์... เจ๋งมาก!

รูปแบบที่ปรับเปลี่ยนตามอุปกรณ์ต้องการให้องค์ประกอบของหน้ามีความกว้างที่หลากหลาย ดังนั้นแบนเนอร์จึงต้องเป็นไปตามข้อกำหนดนี้

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

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

ตามทฤษฎีแล้ว เราสามารถสร้างแบนเนอร์แบบตอบสนองที่ใช้งานได้กับความกว้างหรือความสูงเท่าใดก็ได้ แต่การสร้างหรือทดสอบวิธีนี้ไม่สามารถทำได้จริง

ฉันขอแนะนำให้ใช้ความกว้างขั้นต่ำ 88px และมีชุดความสูงมาตรฐานดังต่อไปนี้:

• 31px "ไมโคร"
  ไมโครบาร์ (88 x 31)
• 60px "ปุ่ม"
  ปุ่ม 2 (120 x 60)
  ครึ่งแบนเนอร์ (234 x 60)
  แบนเนอร์แบบเต็ม (468 x 60)
• 90px "แบนเนอร์"
  ปุ่ม 1 (120 x 90)
  ลีดเดอร์บอร์ด (728 x 90)
• 125px "สี่เหลี่ยมผืนผ้าเล็ก"
  ปุ่มสี่เหลี่ยม (125 x 125)
• 250px "สี่เหลี่ยมผืนผ้ากลาง"
  แบนเนอร์แนวตั้ง (120 x 240 * ใกล้พอ!)
  ป๊อปอัปสี่เหลี่ยม (250 x 250)
  สี่เหลี่ยมผืนผ้ากลาง (300 x 250)
• 400px "สี่เหลี่ยมผืนผ้าใหญ่"
  สี่เหลี่ยมผืนผ้าแนวตั้ง (240 x 400)
• 600px "ตึกระฟ้า"
  ตึกระฟ้า (120 x 600)
  ตึกระฟ้ากว้าง (240 x 600)
  โฆษณาครึ่งหน้า (300 x 600)

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

ไม่เพียงเท่านั้น โฆษณาแบนเนอร์สาธิตของฉันมีราคารวมน้อยกว่า 25kb (รูปภาพ HTML, CSS และ JPG) ซึ่งน้อยกว่าขนาดไฟล์สูงสุดสำหรับแบนเนอร์ขนาดเล็กหนึ่งแบนเนอร์!

ลองใช้ขนาดแบนเนอร์ใหม่เหล่านี้โดยใช้เครื่องมือทดสอบโฆษณาที่ปรับเปลี่ยนตามอุปกรณ์

บางครั้งคุณอาจต้องใช้ความสูงที่ตอบสนองได้สำหรับโฆษณา โดยคุณจะต้องปรับขนาด iframe โดยใช้คำสั่งสื่อ CSS ฉันเชื่ออย่างนั้น วิธีที่ดีที่สุดการทำเช่นนี้คือการตั้งค่าความกว้างและความสูงของ iframe เป็น 100% และวางไว้ใน div โดยกำหนดขนาดเฉพาะใน CSS นี่คือสิ่งที่ดูเหมือน:

และนี่คือ CSS:

/* ความสูงเริ่มต้น */ #ad ( ความสูง:60px; ) @media only screen และ (ความสูง:90px) ( /* สูง 90 พิกเซล */ #ad ( height:90px; ) ) @media only screen และ (ความสูง:125px ) ( /* สูง 125 พิกเซล */ #ad ( ความสูง:125px; ) )

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