قواعد الإعلانات

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

• عند إنشاء AdsManager، سيتم إنشاء contentPlayback يتم تمرير العنصر عبر getAdsManager الاتصال. يجب أن يكون هذا الكائن تحتوي على سمة currentTime تعرض رأس التشغيل الحالي موضع الفيديو. إذا كنت تستخدم عنصر HTML5 video وعرض المحتوى، فيمكنك تمرير هذا العنصر إلى SDK. هذا الكائن تُستخدم لتتبُّع مستوى تقدّم تشغيل المحتوى ليتم عرض الفواصل الإعلانية يتم إدراجها تلقائيًا في الأوقات المحدّدة في "مدير الإعلانات" يجب عليك أيضًا السماح تدرك حزمة SDK أنّك تريد منها معالجة حالة المحتوى نيابةً عنك.

  var adsRenderingSettings = new google.ima.AdsRenderingSettings();
  adsRenderingSettings.restoreCustomPlaybackStateOnAdBreakComplete = true;
  adsManager = adsManagerLoadedEvent.getAdsManager(
      videoContent, adsRenderingSettings); // See API reference for
      
      contentPlayback.
  

• لضمان تشغيل إعلانات ما بعد التشغيل، يجب إعلام حزمة SDK عند نشر المحتوى الانتهاء. الأمر معقد بعض الشيء، إذ تستخدم حزمة SDK مقاطع الفيديو في بعض الحالات لتشغيل الإعلانات، لذا عليك التأكد من أنك تخبر SDK عند الانتهاء من عرض المحتوى، وليس عند الانتهاء من الإعلان يمكنك القيام بذلك باستخدام الرمز أدناه:

  var videoContent = document.getElementById('contentElement');
  var contentEndedListener = function() {adsLoader.contentComplete();};
  
  videoContent.addEventListener('ended', contentEndedListener);
  
  function onContentPauseRequested() {
    contentElement.removeEventListener('ended', contentEndedListener);
    ...
  }
  
  function onContentResumeRequested() {
    contentElement.addEventListener('ended', contentEndedListener);
    ...
  }

• CONTENT_PAUSE_REQUESTED وCONTENT_RESUME_REQUESTED تُستخدم الأحداث لإيقاف المحتوى مؤقتًا واستئنافه عند تشغيل الفواصل الإعلانية.
• إذا كان مشغِّل الفيديو يتيح ميزة السحب للبحث، وخاصية الوقت الحالية تحديثات مشغّل الفيديو أثناء سحب المستخدم، يتعذّر على حزمة تطوير البرامج (SDK) التفريق بين المحتوى الذي يتقدم بشكل طبيعي والذي يبحث فيه المستخدم عن المحتوى. يجب استخدام عنصر contentPlayback مخصص كمعلمة لـ getAdsManager. للاطّلاع على مثال لحالة الاستخدام هذه، يُرجى الاطّلاع على المقالة مشكلة في البحث.

ملاحظة: عند انتهاء تشغيل المحتوى أو توقف المستخدم عن التشغيل، احرص على طلب AdsLoader.contentComplete لإرسال إشارة إلى حزمة تطوير البرامج (SDK) بأنّ المحتوى قد اكتمل. بعد ذلك، تشغّل حزمة تطوير البرامج (SDK) الفاصل الإعلاني بعد التشغيل، في حال تمّت جدولة عرضه. ALL_ADS_COMPLETED يتم رفع الحدث عند تشغيل كل الفواصل الإعلانية. بالإضافة إلى ذلك، ملاحظة يبدأ تتبُّع المحتوى عند استدعاء "init()" وعليك الاتصال دائمًا برقم init() قبل تشغيل المحتوى.

إيقاف التشغيل التلقائي للفواصل الإعلانية

في بعض الحالات، قد تحتاج إلى منع حزمة تطوير البرامج (SDK) من تشغيل الفواصل الإعلانية حتى فأنت جاهز لذلك. في هذه الحالة، يمكنك إيقاف التشغيل التلقائي للفواصل الإعلانية. بل يتم السماح لحزمة SDK بمعرفة الوقت الذي تكون فيه جاهزًا لعرض فاصل إعلاني. مع هذا بمجرد تحميل حزمة SDK فاصلاً إعلانيًا، فإنها تطلق حدث واحد (AD_BREAK_READY). عندما يكون المشغّل جاهزًا لبدء الفاصل الإعلاني، يمكنك الاتصال بـ adsManager.start():

function requestAds() {}
  ...
  adsLoader.getSettings().setAutoPlayAdBreaks(false);
  ...
}

function onAdsManagerLoaded() {
  ...
  // For non-auto ad breaks, listen for ad break ready
  adsManager.addEventListener(
      google.ima.AdEvent.Type.AD_BREAK_READY,
      adBreakReadyHandler);
  ...
}

function adBreakReadyHandler() {
  // Once we're ready to play ads. To skip this ad break, simply return
  // from this handler without calling adsManager.start().
  adsManager.start();
}

جرّبه الآن

يمكنك الاطّلاع أدناه على طريقة تنفيذ ناجحة.

مشكلة التقديم/الترجيع

إذا كنت تستخدم قواعد الإعلانات، قد تواجه مشكلة في التقديم عن طريق النقر والسحب. على وجه التحديد، بعد أن ينقر المستخدم ويسحب للتنقل عبر الفيديو خلال الإعلانات المتسلسلة، قد تشاهد لوحتين أو أكثر من هذه الإعلانات المتشابكة سيستأنف المحتوى. ويحدث ذلك بسبب تحديث وقت تشغيل الفيديو أثناء التي يسعى إليها المستخدم في حال إجراء استطلاع لحزمة تطوير البرامج (SDK) في الوقت الحالي أثناء تجربة المستخدم تجاوز إعلان، فقد يعتقد أنّه يجب تشغيله. عندما ينعكس المحتوى تُستأنف، تُشغِّل ذلك الإعلان، ثم أحدث إعلان منذ بدء التقديم/الترجيع. بالنسبة إلى تمثيلاً مرئيًا لهذه المسألة، انظر الرسم التخطيطي التالي:

الطريقة البسيطة لحل هذه المشكلة هي توفير الوقت الحالي عندما يبدأ المستخدم تقديم الطلب والإبلاغ عن الوقت الذي تطلب فيه حزمة تطوير البرامج (SDK) ذلك إلى أن التشغيل العادي. لعرض تمثيل مرئي لهذا الحلّ، راجع الرسم التخطيطي أدناه:

يتيح لك هذا الحلّ تخطّي إعلان أثناء التشغيل بنسبة 0:10 وتشغيل الفيديو بنسبة 0:20 فقط أثناء التشغيل. ويتم ذلك باستخدام أداة تتبُّع مخصّصة لرأس التشغيل، كما هو موضّح أدناه. الرمز أدناه يحتوي على تعديلات (موضحة بالخط الغامق) لـ ads.js في HTML5 المتقدم نموذج متاح على صفحة التنزيل

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.videoPlayer_.contentPlayer.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

المشكلات المعروفة في Safari للجوّال

يجب أن تعمل هذه الطريقة على جميع صفحات الويب باستثناء Safari للأجهزة الجوّالة. على الجهاز الجوّال في متصفّح Safari، لا يتم تنفيذ خاصية التقديم/الترجيع في علامة الفيديو بشكل صحيح ( يكون ناتجها دائمًا false). لحلّ هذه المشكلة، عليك إجراء عملية تحقّق بنفسك لمعرفة ما إذا كان المستخدم يتنقل عبر الفيديو أم لا. رمز النموذج لهذه الطريقة يتابعها. مرة أخرى، الأسطر الغامقة أدناه هي تعديلات على التعليمات البرمجية الحالية.

var Ads = function(application, videoPlayer) {
  ...
  this.currentTime = 0;
  setInterval(this.updateCurrentTime, 1000);
  this.seeking = false;
  this.seekCheckInterval = 1000;
  // You may need to adjust this value, depending on your platform
  this.seekThreshold = 100;
  this.previousTime = 0;
  setInterval(
      Application.bind(this, this.checkForSeeking),
      this.seekCheckInterval);
};

Ads.prototype.updateCurrentTime = function() {
  if (!this.seeking) {
    this.currentTime = this.videoPlayer_.contentPlayer.currentTime;
  }
};

Ads.prototype.checkForSeeking = function() {
  var currentTime = this.videoPlayer_.contentPlayer.currentTime;
  // How much time has passed since you last ran this method, in milliseconds
  var diff = (currentTime - this.previousTime) * 1000;
  // If that difference is greater than the time since you last ran this method,
  // plus the threshold, the user was seeking
  if (Math.abs(diff)  > this.interval + this.threshold) {
    this.seeking = true;
  } else {
    this.seeking = false;
  }
  // Grab the current video time again to make up for time spent in this method
  previousTime = this.videoPlayer_.contentPlayer.currentTime;
};

Ads.prototype.onAdsManagerLoaded_ = function(adsManagerLoadedEvent) {
  this.application_.log('Ads loaded.');
  this.adsManager_ = adsManagerLoadedEvent.getAdsManager(this);
  this.processAdsManager_(this.adsManager_);
};

بعد تطبيق هذه التغييرات، تستخدم حزمة SDK الآن السمة currentTime في Ads. لتحديد وقت تشغيل الفواصل الإعلانية، وليس السمة currentTime المحتوى التابع لمشغِّل الفيديو.