إعلانات صوتية

تتوافق حزمة تطوير برامج HTML5 لإعلانات الوسائط التفاعلية مع الإعلانات الصوتية التي تتضمّن إعدادًا مشابهًا لإعلانات الفيديو ولكن مع بعض الاختلافات الرئيسية. بالنسبة إلى أي جزء من إعداد إعلانات الوسائط التفاعلية لا يشمله هذا الدليل، يمكنك الاطلاع على HTML5 للبدء الدليل.

استخدام <audio> علامة لتشغيل المحتوى

الدالة الإنشائية AdDisplayContainer يأخذ وسيطة ثانية باسم videoElement تتتبعها إعلانات الوسائط التفاعلية كمحتوى لاعب. تقبل هذه الوسيطة العلامة <video> أو <audio> معًا. للصوت والإعلانات، يقترح هذا الدليل استخدام علامة <audio> لإنشاء AdDisplayContainer إذا كان لديك محتوى فيديو، يمكنك استخدام علامة <video> عرض مزيج من الإعلانات الصوتية وإعلانات الفيديو:

index.html

<audio id="audio-player"></audio>
<div class="ad-container"></div>

ads.js

audioPlayer = document.getElementById('audio-player');
adContainer = document.getElementById('ad-container');
adDisplayContainer = new google.ima.AdDisplayContainer(adContainer,
audioPlayer);

إخفاء AdDisplayContainer

لا تزال حزمة تطوير برامج HTML5 لإعلانات الوسائط التفاعلية تتطلّب سمة AdDisplayContainer حتى في حال عدم توفّرها جزء العرض إلى الإعلانات أو المحتوى ولهذا السبب، ننصحك بإخفاء AdDisplayContainer في ما يلي مثال على كيفية إخفاء العنصر:

style.css

.ad-container {
  display: none;
}

عناصر التحكّم المخصّصة

بما أنّ AdDisplayContainer مخفية، يجب استخدام عناصر تحكّم مخصّصة للتعامل مع هذه العناصر. تشغيل المحتوى أثناء الفواصل الإعلانية تتضمّن الدالة AdsManager طرقًا يمكن استخدامها تنفيذ عناصر التحكم المخصصة التالية:

التعامل مع الإعلانات القابلة للتخطي

نظرًا لعدم وجود AdDisplayContainer مرئي، لا يمكن لحزمة تطوير البرامج لإعلانات الوسائط التفاعلية أن تعرض زر تخطّي الإعلان. للتعامل مع الإعلانات القابلة للتخطي، تنفيذ إعلانات الوسائط التفاعلية التالية الطرق:

يوضح نموذج التعليمات البرمجية أدناه كيفية القيام بذلك.

ads.js

يمكنك إعداد دالة updateSkippable لتحديد ما إذا كان الإعلان يمكن تخطيها. يجب استدعاء هذه الدالة في كل حدث AD_PROGRESS من أحداث إعلانات الوسائط التفاعلية. يمكنك الاطّلاع على دليل البدء للحصول على توجيهات حول كيفية إعداد أدوات معالجة الأحداث لإعلانات الوسائط التفاعلية.

function onAdsManagerLoaded(adsManagerLoadedEvent) {
  adsManager = adsManagerLoadedEvent.getAdsManager(
    audioPlayer);

  ...

  adsManager.addEventListener(
    google.ima.AdEvent.Type.AD_PROGRESS,
    onAdEvent);

  ...

}

function onAdEvent(adEvent) {
  const ad = adEvent.getAd();
  if (ad) {
    currentAd = ad; // currentAd is defined outside of this functions scope.
  }
  switch (adEvent.type) {

    ...

    case google.ima.AdEvent.Type.AD_PROGRESS:
      // See https://developers.google.com/interactive-media-ads/docs/sdks/html5/client-side/reference/js/google.ima.AdProgressData
      const adProgressData = adEvent.getAdData();

      updateSkippable(
        adProgressData.currentTime,
        currentAd.getSkipTimeOffset()
      );
      break;
    ...

  }
}

/**
   * Called when there may be a change in the skippable state.
   * @param {number} currentTime The current time of the
   * currently playing ad.
   * @param {number} skipTimeOffset The number of seconds of playback
   * before the ad becomes skippable. -1 is returned for non skippable
   * ads or if this is unavailable.
   */
  updateSkippable(currentTime, skipTimeOffset) {
    const isAdSkippable = skipTimeOffset !== -1;
    const isSkipCurrentlyAllowed = adsManager.getAdSkippableState();
    const timeTillSkipInSeconds = Math.ceil(skipTimeOffset - currentTime);
    updateSkipUI(
        isAdSkippable, isSkipCurrentlyAllowed, timeTillSkipInSeconds);
  }

على عكس إعلانات الفيديو، لا يمكن لإعلانات الوسائط التفاعلية توفير زر التخطي للإعلانات الصوتية. على المطوّرين إضافة واجهة مستخدم مخصَّصة للإعلانات القابلة للتخطّي، ويمكن إجراء ذلك باستخدام علامة <button> بسيطة. هذه الوظيفة updateSkipUI تعدّل زر التخطّي. حسب ما إذا كان الإعلان قابلاً للتخطي وفي الوقت الحالي مقدار الوقت المتبقّي حتى يصبح الإعلان قابلاً للتخطي. فهي تستفيد من الفئة '.hidden' التي لم يتم توفيرها من قِبل إعلانات الوسائط التفاعلية. تضيف الفئة .hidden display: none; إلى <button>.

/**
 * Updates the skip button UI.
 * @param {boolean} isAdSkippable if the current ad is a skippable ad.
 * @param {boolean} isSkipCurrentlyAllowed if the ad can be skipped now.
 * @param {number} timeTillSkipInSeconds time until the ad can be skipped in
 * seconds.
 */
updateSkipUI(isAdSkippable, isSkipCurrentlyAllowed, timeTillSkipInSeconds) {
  if (isAdSkippable) {
    skipButton.classList.remove('hidden');
    if (isSkipCurrentlyAllowed) {
      skipButton.textContent = 'Skip ad';
      skipButton.disabled = false;
    } else {
      skipButton.textContent = `Skip in ${timeTillSkipInSeconds} seconds`;
      skipButton.disabled = true;
    }
  } else {
    skipButton.classList.add('hidden');
  }
}

أخيرًا، قم بتعيين مستمع لنقرات المستخدم على زر التخطي المخصص. لتخطّي الإعلانات، اتّبِع الخطوات التالية: طلب adsManager.skip() الأخرى.

skipButton.addEventListener('click', () => {
  adsManager.skip();
});

في ما يلي التغييرات الأساسية اللازمة لإعداد حزمة تطوير البرامج لإعلانات الوسائط التفاعلية مع الإعلانات الصوتية. بالنسبة إجابات عن مشاكل التنفيذ، يُرجى زيارة المنتدى الفني لحزمة تطوير البرامج لإعلانات الوسائط التفاعلية