แสดงภาพโปสเตอร์สําหรับโฆษณาเสียง

โฆษณาที่ใช้ SDK โฆษณาสื่ออินเทอร์แอกทีฟ (IMA) ของ Google สำหรับ HTML5

คู่มือนี้แสดงวิธีใช้ IMA HTML5 SDK เพื่อซ้อนทับวิดีโอเพลเยอร์ด้วยรูปภาพโปสเตอร์เมื่อมีการเล่นโฆษณาเสียง ควรใช้เมื่อตั้งค่า ad_type=audio_video ในคำขอ URL ของ VAST การทำเช่นนี้จะช่วยให้ การสร้างรายได้จากโฆษณามีประสิทธิภาพมากขึ้น เนื่องจากทั้งโฆษณาเสียงและโฆษณาวิดีโอมีสิทธิ์และแสดง ได้สมบูรณ์ ดูรายละเอียดเพิ่มเติมได้ในad_type เอกสารประกอบ และเสียงในเนื้อหา วิดีโอ

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

ข้อกำหนดเบื้องต้น

• แอปที่ใช้ IMA HTML5 SDK สำหรับโฆษณาวิดีโอ ดูข้อมูลเพิ่มเติมได้ที่คู่มือเริ่มต้นใช้งาน IMA HTML5
• ภาพโปสเตอร์เริ่มต้นซึ่งซ้อนทับวิดีโอเพลเยอร์เมื่อแสดงโฆษณาเสียงโดยไม่มีภาพซ้อนทับที่เกี่ยวข้อง รูปภาพต้องมีความกว้างไม่เกินความกว้างของวิดีโอเพลเยอร์ และมีความสูงน้อยกว่าความสูงของวิดีโอเพลเยอร์อย่างน้อย 75 พิกเซล เพื่อให้รูปภาพพอดีกับวิดีโอเพลเยอร์

เปิดใช้ฟีเจอร์ภาพโปสเตอร์

ก่อนที่จะส่งคำขอโฆษณาเสียงและวิดีโอ ให้ตั้งค่าaudioPosterImageEnabled ฟีเจอร์แฟล็กเป็น true และฟีเจอร์แฟล็ก audioPosterImageDefaultUrl เป็น URL รูปภาพโปสเตอร์เริ่มต้น คุณต้องดำเนินการนี้ด้วย ImaSdkSettings.setFeatureFlags() API ก่อนสร้าง AdDisplayContainer เมื่อตั้งค่านี้และโฆษณาเสียง กำลังเล่น IMA จะวางซ้อนรูปภาพที่เกี่ยวข้องกับโฆษณาไว้ด้านบนของ วิดีโอเพลเยอร์โดยอัตโนมัติ IMA จะเลือกรูปภาพโฆษณาที่แสดงร่วมที่ใหญ่ที่สุดซึ่งพอดีกับ วิดีโอเพลเยอร์และสั้นกว่าวิดีโอเพลเยอร์อย่างน้อย 75 พิกเซล หาก VAST ของโฆษณาไม่มีรูปภาพที่ IMA ใช้เป็นภาพซ้อนทับได้ IMA จะใช้รูปภาพเริ่มต้นที่คุณระบุเป็นภาพซ้อนทับ

function initializeIMA() {
  console.log('initializing IMA');
  adContainer = document.getElementById('ad-container');
  google.ima.settings.setFeatureFlags(
    {
      'audioPosterImageEnabled': true,
      'audioPosterImageDefaultUrl':'http://your-ad-overlay/image.png'
    });
  adDisplayContainer = new google.ima.AdDisplayContainer(adContainer, videoElement);
  adsLoader = new google.ima.AdsLoader(adDisplayContainer);

  // Let the AdsLoader know when the video has ended
  videoElement.addEventListener('ended', function() {
    adsLoader.contentComplete();
  });

  var adsRequest = new google.ima.AdsRequest();
  adsRequest.adTagUrl = 'http://your-audio-video-ad-tag';
  ...
  // Pass the request to the adsLoader to request ads
  adsLoader.requestAds(adsRequest);
}