ลักษณะการทำงานของโฆษณาวิดีโอเนทีฟและการรองรับฟีเจอร์

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

ลักษณะการทำงานของโฆษณาวิดีโอเนทีฟ

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

การเล่นวิดีโอ

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

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

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

เสียง

  • การเล่นอัตโนมัติจะเริ่มขึ้นด้วยการปิดเสียง
  • ผู้ใช้ต้องคลิกเพื่อเปิดเสียง
 

การรองรับฟีเจอร์และข้อจํากัด

โฆษณาวิดีโอเนทีฟใช้ได้กับตําแหน่งโฆษณาในแอปและเว็บ รวมถึงการจอง ดีลโดยตรง และการสนับสนุนแบบเป็นโปรแกรมทางอ้อมทั้งหมด รายละเอียดต่อไปนี้ใช้กับโฆษณาวิดีโอเนทีฟ

การแสดงผล สไตล์โฆษณาเนทีฟหรือการแสดงผลที่กำหนดเองสำหรับแอปบนอุปกรณ์เคลื่อนที่
การโฮสต์วิดีโอ

VAST ที่โฮสต์โดย Ad Manager หรือบุคคลที่สาม

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

ขนาดสูงสุดของวิดีโอที่โฮสต์ 512 MB*
การติดตามการแสดงผล ระบบจะนับการแสดงโฆษณาวิดีโอเนทีฟหลังจากที่โปรแกรมเล่นเริ่มเล่นโฆษณาแล้ว เพื่อให้สอดคล้องกับมาตรฐานอุตสาหกรรมสำหรับวิดีโอ สำหรับการแสดงผลที่กำหนดเองในแอปบนอุปกรณ์เคลื่อนที่ของเทมเพลตเนทีฟที่กำหนดเอง แอปของคุณต้องเรียกเมธอด recordImpression
โปรแกรมเล่นที่ใช้
  • Android: โปรแกรมเล่น EXO
  • iOS: โปรแกรมเล่นวิดีโอของ Google
  • เว็บ: โปรแกรมเล่น HTML5 ที่รวมอยู่ใน WebView
SDK ที่จำเป็น
(สำหรับแอปบนอุปกรณ์เคลื่อนที่)
สไตล์โฆษณาเนทีฟ
  • SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google เวอร์ชัน 9.0 ขึ้นไปสำหรับ Android
  • iOS 7.16.0 ขึ้นไป

การแสดงผลที่กำหนดเอง
  • SDK โฆษณาในอุปกรณ์เคลื่อนที่ของ Google เวอร์ชัน 10.2 ขึ้นไปสำหรับ Android
  • iOS 7.16.0 ขึ้นไป

* สำหรับเครือข่ายที่ไม่มีบัญชี Ad Manager 360 วิดีโอที่โฮสต์ต้องมีขนาดไม่เกิน 30 MB

ข้อจำกัด

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

เนื้อหาทั้งหมดที่คุณจัดหาให้ Google ใช้งานต้องเป็นไปตามข้อกำหนดในการให้บริการ

ขอวิดีโอเนทีฟผ่าน SDK

โฆษณาวิดีโอเนทีฟสำหรับแอปจะเรียกใช้ได้โดยใช้โค้ดโฆษณาแบนเนอร์แบบดิสเพลย์มาตรฐาน

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

ข้อกำหนดของ HTML และ CSS

เมื่อตั้งค่าสไตล์สำหรับโฆษณาวิดีโอแบบเนทีฟ คุณควรวางวิดีโอเพลเยอร์ไว้ในองค์ประกอบ HTML (div ที่มีมาโคร #%NATIVE_VIDEO_WRAPPER%# จะทริกเกอร์เพลเยอร์) เพื่อรักษาสัดส่วนภาพของเพลเยอร์และพยายามครอบคลุมพื้นที่ภายในองค์ประกอบให้ได้มากที่สุด ด้วยเหตุนี้ โปรดคำนึงถึง 3 สิ่งต่อไปนี้ระหว่างที่คุณกำหนดสไตล์ให้รูปแบบวิดีโอเนทีฟ

1. ระบุขนาดของ div ที่มี Wrapper ของวิดีโอเนทีฟให้ชัดเจน

โปรดระบุขนาดของ div ที่มีมาโคร #%NATIVE_VIDEO_WRAPPER%# โดยละเอียดด้วย CSS โดยจะระบุเป็นเปอร์เซ็นต์หรือพิกเซลก็ได้

.host-div {
   width: 300px;
   height: 200px;
}

2. กำหนดอัตราส่วน div ของวิดีโอและคอนเทนเนอร์ด้วยความระมัดระวังเพื่อหลีกเลี่ยง Padding

หากสัดส่วน div ของคอนเทนเนอร์นั้นต่างจากสัดส่วนของวิดีโอเพลเยอร์ จะมีกรอบระยะห่างจากขอบปรากฏขึ้นรอบๆ วิดีโอ สีของกรอบระยะห่างจากขอบจะเป็นสีใส (แอปในอุปกรณ์เคลื่อนที่) หรือสีดำ (เว็บบนอุปกรณ์เคลื่อนที่และบนเดสก์ท็อป) ตัวอย่างนี้แสดง div ของคอนเทนเนอร์ที่มีสัดส่วน "ความกว้าง:ความสูง" ที่ใหญ่กว่าวิดีโอ

หากต้องการสร้าง div ของคอนเทนเนอร์ที่ไม่มี Padding คอนเทนเนอร์จะต้องมีอัตราส่วนเท่ากับวิดีโอ หากคุณทราบสัดส่วนของวิดีโอล่วงหน้า HTML และ CSS ต่อไปนี้ใช้แสดงผล div ได้อย่างเหมาะสมและมีขนาดพอดีกับวิดีโอ

ตัวอย่างวิดีโอที่มีแถบดำด้านบน-ล่างของภาพ

ตัวอย่าง: สัดส่วน div ใหญ่กว่าวิดีโอ 

HTML
<div class="video-ratio-wrapper">
  <div class="video">
    #%NATIVE_VIDEO_WRAPPER%#
  </div>
</div>
CSS
.video-ratio-wrapper {
  position: relative;
  width: 100%;
}

.video-ratio-wrapper:after {
  padding-top: 56.25%;
  /* 16:9 ratio */
  display: block;
  content: '';
}

.video {
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
}

3. ทำความเข้าใจว่าองค์ประกอบ HTML ซ้อนทับวิดีโอเพลเยอร์ของคุณอย่างไร

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

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

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

SDK ช่วยคุณควบคุมสีของ Padding รอบๆ วิดีโอ พร้อมทำให้ div ของคอนเทนเนอร์มีความโปร่งใสอยู่ต่อไป โดยตั้งค่า background-color ในองค์ประกอบเนื้อหาใน CSS SDK จะใช้ค่านี้เป็นสีของกรอบระยะห่างจากขอบวิดีโอ

body {
  background-color: aliceblue;
}

ข้อมูลนี้มีประโยชน์ไหม

เราจะปรับปรุงได้อย่างไร
ค้นหา
ล้างการค้นหา
ปิดการค้นหา
เมนูหลัก
3984313397822467353
true
ค้นหาศูนย์ช่วยเหลือ
true
true
true
true
true
148
false
false