تمت ترجمة هذه الصفحة بواسطة Cloud Translation API‏.

إعلانات مصاحبة

قد تحتاج إلى ربط شرائح الإعلانات HTML داخل الصفحة بشرائح إعلانات الفيديو أو شرائح الإعلانات التي تظهر على سطح الصفحة. تُعرف هذه العلاقة بين مواضع الإعلانات المرتبطة باسم العلاقة الرئيسية-المصاحبة.

بالإضافة إلى طلب إعلانات الفيديو والإعلانات الرئيسية التي تظهر على سطح الفيديو، يمكنك استخدام حزمة تطوير البرامج لإعلانات الوسائط التفاعلية لعرض إعلانات HTML المصاحبة. يتم عرض هذه الإعلانات ضمن بيئة HTML.

استخدام الإعلانات المصاحبة

لاستخدام الإعلانات المصاحبة، اتّبِع الخطوات التالية:

1. حجز إعلاناتك المصاحبة

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

2. طلب إعلاناتك المصاحبة

يتم تفعيل الإعلانات المصاحبة تلقائيًا لكل طلب إعلان.

3- عرض الإعلانات المصاحبة

هناك طريقتان لعرض الإعلانات المصاحبة:

تلقائيًا باستخدام علامة الناشر من Google (GPT)
إذا كنت تستخدِم علامة الناشر من Google (GPT) لتنفيذ إعلاناتك المصاحبة، يتم عرضها تلقائيًا ما دامت هناك خانات إعلانات مصاحبة تمّ تحديدها في صفحة HTML وتمّ تسجيل هذه الإعلانات باستخدام واجهة برمجة التطبيقات (أي أنّه يجب أن يتطابق رقم div التعريفي في JavaScript وHTML). في ما يلي بعض مزايا استخدام مكتبة GPT:
- الوعي بفتحات التطبيقات المصاحبة
- إضافة إعلانات مصاحبة من شبكة الناشر، إذا كان ردّ VAST يحتوي على عدد أقل من الإعلانات المصاحبة مقارنةً بالشرائح المحدّدة في صفحة HTML
- الملء التلقائي للإعلانات المصاحبة في حال عدم توفّر إعلان فيديو
- أماكن الإعلانات المصاحبة المحمَّلة مسبقًا لمشغّلات الفيديو التي تعمل بنظام "انقر للتشغيل"
- عرض التطبيقات المصاحبة تلقائيًا، بما في ذلك HTMLResource وiFrameResource
يدويًا باستخدام Ad API:

استخدام الإعلانات المصاحبة مع علامة "ناشر Google"

تعمل علامة "ناشر Google" (GPT) على التشغيل الآلي لعرض إعلانات HTML المصاحبة على موقعك الإلكتروني. ننصح معظم الناشرين باستخدام GPT. تتعرّف حزمة تطوير البرامج (SDK) لسمة HTML5 على خانات GPT في حال تحميل علامة GPT على صفحة الويب الرئيسية (وليس في إطار IFrame). يمكنك العثور على معلومات أكثر تفصيلاً حول استخدام GPT مع IDE SDK في مستندات GPT.

في حال استضافة حزمة تطوير البرامج (SDK) لبرنامج HTML5 داخل إطار iframe

إذا كنت تستوفي كلا المعيارَين التاليَين، عليك تضمين ملف برمجي إضافي لوكيل لعرض إعلانات GPT المصاحبة بشكل صحيح:

حمِّل حزمة تطوير برامج HTML5 في إطار تفاعلي.
حمِّل علامة "ناشر Google" على صفحة الويب الرئيسية (خارج إطار IFrame).

لعرض المرافقين في هذا السيناريو، عليك تحميل النص البرمجي للوكيل GPT قبل تحميل حزمة SDK:

<script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>

بعض النقاط المهمة الواجب مراعاتها:

يجب ألا يتم تحميل علامة GPT داخل إطار iframe الذي يحمّل حزمة تطوير البرامج.
يجب تحميل علامة "ناشر Google" في أعلى الصفحة، وليس في إطار IFrame آخر.
يجب تحميل النص البرمجي للوكيل في الإطار نفسه الذي يتم تحميل GPT فيه (أي في الصفحة الرئيسية).

الإفصاح عن الشرائح الإعلانية المصاحبة في ملف HTML

يوضّح هذا القسم كيفية الإفصاح عن الإعلانات المصاحبة في HTML باستخدام GPT ويقدّم عيّنات من الرموز البرمجية لسيناريوهات مختلفة. بالنسبة إلى حزمة تطوير البرامج (SDK) لبرنامج HTML5، تحتاج إلى إضافة بعض JavaScript إلى صفحة HTML وتحديد مواضع الإعلانات المصاحبة.

ملاحظة: في كلّ من الأمثلة التالية، احرص على تقديم network وunit-path صالحَين في دعوة الأسلوب googletag.defineSlot (المتوفّرة في علامة <head> أو <body>، استنادًا إلى المثال الفعلي الذي تستخدمه).

المثال 1: تنفيذ مساحة الإعلان الأساسية
المثال 2: تنفيذ خانة الإعلان الديناميكية
المثال 3: خانات الإعلانات المحمَّلة مسبقًا

المثال 1: تنفيذ مساحة الإعلان الأساسية

يوضّح نموذج الرمز البرمجي التالي كيفية تضمين ملف gpt.js في صفحة HTML وتعريف مساحة إعلانية. مساحة الإعلان المعلَن عنها هي ‎728×90 بكسل. تحاول استراتيجية GPT ملء المساحة باستخدام أي إعلانات مصاحبة يتم عرضها في استجابة نموذج عرض إعلانات الفيديو (VAST) والتي تتطابق مع هذا الحجم. بعد تحديد موضع الإعلان ، يمكن للدالة googletag.display() عرضها في أي مكان يتم استدعاؤها فيه على الصفحة. وبما أنّ الخانات الإعلانية هي خانات إعلانية مصاحبة، لا يتم عرض الإعلانات على الفور. بدلاً من ذلك، تظهر بجانب إعلان الفيديو الرئيسي.

في ما يلي مثال على التنفيذ:

 <html>
   <head>
     <!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
     <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script>-->
     <!-- HEAD part -->
     <!-- Initialize the tagging library -->
     <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>

     <!-- Register your companion slots -->
     <script>
       window.googletag = window.googletag || { cmd: [] };

       googletag.cmd.push(function() {
         // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
         googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
             .addService(googletag.companionAds())
             .addService(googletag.pubads());
         googletag.companionAds().setRefreshUnfilledSlots(true);
         googletag.pubads().enableVideoAds();
         googletag.enableServices();
       });
     </script>
   </head>

   <body>
     <!-- BODY part -->
     <!-- Declare a div where you want the companion to appear. Use
          googletag.display() to make sure the ad is displayed. -->
     <div id="companionDiv" style="width:728px; height:90px;">
       <script>
         // Using the command queue to enable asynchronous loading.
         // The unit does not actually display now - it displays when
         // the video player is displaying the ads.
         googletag.cmd.push(function() { googletag.display('companionDiv'); });
       </script>
     </div>
   <body>
 </html>

جرّبه الآن

يمكنك الاطّلاع على رمز Codepen التالي لتنفيذ نموذج عملي.

المثال 2: تنفيذ خانة الإعلان الديناميكية

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

ملاحظة: عندما يكون مشغّل الفيديو على وشك عرض الإعلانات، يطلب المواضع. تأكَّد من تحديد الفتحات قبل أن يعرض المشغّل الإعلانات.

 <html>
   <head>
     <!-- Uncomment the line below for the HTML5 SDK caveat proxy -->
     <!-- <script src="https://imasdk.googleapis.com/js/sdkloader/gpt_proxy.js"></script> -->
     <script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
     <!-- HEAD part -->
     <!-- Initialize the tagging library -->
     <script>
       window.googletag = window.googletag || { cmd: [] };

       googletag.cmd.push(function() {
         googletag.companionAds().setRefreshUnfilledSlots(true);
         googletag.pubads().enableVideoAds();
         googletag.enableServices();
       });
     </script>
   </head>

   <body>
     <!-- BODY part -->
     <!-- Declare a div where you want the companion to appear. Use
          googletag.display() to make sure the ad is displayed. -->
     <div id="companionDiv" style="width:728px; height:90px;">
       <script>
         // Using the command queue to enable asynchronous loading.
         // The unit does not actually display now - it displays when
         // the video player is displaying the ads.
         googletag.cmd.push(function() {
           // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
           googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', [728, 90], 'companionDiv')
               .addService(googletag.companionAds())
               .addService(googletag.pubads());
           googletag.display('companionDiv');
         });
       </script>
     </div>
   <body>
 </html>

جرّبه الآن

يمكنك الاطّلاع على الرمز البرمجي التالي لتنفيذ فعّال.

المثال 3: خانات الإعلانات المحمَّلة مسبقًا

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

ملاحظة: نموذج الرمز البرمجي التالي هو نفسه بالضبط الرمز المقدَّم في المثال 1 باستثناء القسم المكتوب بخط عريض. في هذه الحالة، عليك تقديم الشبكة الإعلانية ومسار الوحدة لإعلان التحميل المُسبَق بدلاً من وحدة إعلان الفيديو.

في ما يلي مثال على التنفيذ الموضّح أعلاه:

<html>
  <head>
    ...
    <!-- Register your companion slots -->
    <script>
      window.googletag = window.googletag || { cmd: [] };

      googletag.cmd.push(function() {
        // Supply YOUR_PRELOAD_NETWORK and YOUR_PRELOAD_UNIT_PATH.
        googletag.defineSlot('/YOUR_PRELOAD_NETWORK/YOUR_PRELOAD_UNIT_PATH', [728, 90], 'companionDiv')
            .addService(googletag.companionAds())
            .addService(googletag.pubads());
        googletag.companionAds().setRefreshUnfilledSlots(true);
        googletag.pubads().enableVideoAds();
        googletag.enableServices();
      });
    </script>
  </head>
  ...
</html>

جرّبه الآن

يمكنك الاطّلاع على رمز الترميز التالي لتنفيذ فعّال.

استخدام الإعلانات المصاحبة مع Ad API

يوضّح هذا القسم كيفية عرض الإعلانات المصاحبة باستخدام واجهة برمجة التطبيقات Ad.

عرض الإعلانات المصاحبة

لعرض الإعلانات المصاحبة، عليك أولاً الحصول على إشارة إلى عنصر Ad من خلال أيّ من أحداث AdEvent التي يتم إرسالها من AdsManager. ننصحك باستخدام الحدث AdEvent.STARTED، لأنّ عرض الإعلانات المصاحبة يجب أن يكون متزامنًا مع عرض الإعلان الرئيسي.

بعد ذلك، استخدِم عنصر Ad هذا لاستدعاء getCompanionAds() للحصول على صفيف من عناصر CompanionAd. يتوفّر لك خيار تحديدCompanionAdSelectionSettings، ما يتيح لك ضبط فلاتر على الإعلانات المصاحبة لنوع تصميم الإعلان ونسبة الملاءمة التقريبية ونوع المورد ومعايير الحجم. لمزيد من المعلومات عن هذه الإعدادات، يُرجى الاطّلاع على مستندات واجهة برمجة تطبيقات HTML5.

يمكن الآن استخدام عناصر CompanionAd التي يعرضها getCompanionAds لعرض الإعلانات المصاحبة على الصفحة باستخدام الإرشادات التالية:

أنشئ شريحة إعلانية مصاحبة <div> بالحجم المطلوب على الصفحة.
في معالِج الحدث للحدث STARTED، استرجع العنصر Ad من خلال استدعاء getAd().
استخدِم getCompanionAds() للحصول على قائمة بالإعلانات المصاحبة التي تطابق حجم الشريحة الإعلانية المصاحبة و CompanionAdSelectionSettings وتتضمّن رقم التسلسل نفسه الذي يتضمّنه تصميم الإعلان الرئيسي. يتم التعامل مع تصميمات الإعلانات التي لا تتضمّن سمة التسلسل على أنّها تتضمّن رقم التسلسل 0.
احصل على المحتوى من مثيل CompanionAd واضبطه على أنّه علامة HTML الداخلية لعنصر <div> في خانة الإعلان هذه.

نموذج التعليمات البرمجية

<!--Set a companion ad div in html page. -->
<div id="companion-ad-300-250" width="300" height="250"></div>

<script>

  // Listen to the STARTED event.
  adsManager.addEventListener(
    google.ima.AdEvent.Type.STARTED,
    onAdEvent);

  function onAdEvent(adEvent) {
    switch (adEvent.type) {
      case google.ima.AdEvent.Type.STARTED:
        // Get the ad from the event.
        var ad = adEvent.getAd();
        var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
        selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
        selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
        selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.IGNORE;
        // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
        var companionAds = ad.getCompanionAds(300, 250, selectionCriteria);
        var companionAd = companionAds[0];
        // Get HTML content from the companion ad.
        var content = companionAd.getContent();
        // Write the content to the companion ad slot.
        var div = document.getElementById('companion-ad-300-250');
        div.innerHTML = content;
        break;
    }
  }
</script>

عرض إعلانات مصاحبة سلسة

تتيح منصّة IMA الآن الإعلانات المصاحبة السلسة. يمكن تغيير حجم هذه الإعلانات المصاحبة لمطابقة حجم خانة الإعلان. تملأ هذه العناصر عرض div الرئيسي بالكامل، ثم يتم تغيير حجم ارتفاعها ليناسب محتوى العنصر المصاحب. ويتم ضبطها باستخدام حجم Fluid المصاحب في "مدير إعلانات Google". اطّلِع على الصورة التالية لمعرفة مكان ضبط هذه القيمة.

صورة تعرض إعدادات الإعلانات المصاحبة في "مدير إعلانات Google" تسليط الضوء على خيار الأحجام المصاحبة

إعلانات مُصاحبة قابلة للتعديل في GPT

عند استخدام رفقاء GPT، يمكنك تحديد خانة رفيق سائلة من خلال تعديل المَعلمة الثانية لطريقة defineSlot().

 <!-- Register your companion slots -->
 <script>
   googletag.cmd.push(function() {
     // Supply YOUR_NETWORK and YOUR_UNIT_PATH.
     googletag.defineSlot('/YOUR_NETWORK/YOUR_UNIT_PATH', ['fluid'], 'companionDiv')
         .addService(googletag.companionAds())
         .addService(googletag.pubads());
     googletag.companionAds().setRefreshUnfilledSlots(true);
     googletag.pubads().enableVideoAds();
     googletag.enableServices();
   });
 </script>

العناصر المصاحبة لـ Ad API

عند استخدام Ad API للإعلانات المصاحبة، يمكنك تحديد خانة إعلان مصاحب متغيرة من خلال تعديل قيمة google.ima.CompanionAdSelectionSettings.SizeCriteria إلى SELECT_FLUID.

<script>

  ...
    // Get the ad from the event.
    var ad = adEvent.getAd();
    var selectionCriteria = new google.ima.CompanionAdSelectionSettings();
    selectionCriteria.resourceType = google.ima.CompanionAdSelectionSettings.ResourceType.STATIC;
    selectionCriteria.creativeType = google.ima.CompanionAdSelectionSettings.CreativeType.IMAGE;
    selectionCriteria.sizeCriteria = google.ima.CompanionAdSelectionSettings.SizeCriteria.SELECT_FLUID;
    // Get a list of companion ads for an ad slot size and CompanionAdSelectionSettings
    // Note: Companion width and height are irrelevant when fluid size is used.
    var companionAds = ad.getCompanionAds(0, 0, selectionCriteria);
    var companionAd = companionAds[0];
  ...
    }
  }
</script>