ภาพโปสเตอร์โฆษณาเสียง

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