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

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

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

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

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

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

ก่อนที่จะส่งคำขอโฆษณาเสียงและวิดีโอ ให้ตั้งค่าแฟล็กฟีเจอร์ audioPosterImageEnabled เป็น true และแฟล็กฟีเจอร์ audioPosterImageDefaultUrl เป็น URL ภาพโปสเตอร์เริ่มต้น ใช้ API ของ ImaSdkSettings.setFeatureFlags() ก่อนที่จะสร้าง 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);
}