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

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

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

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

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

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

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

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

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

بشكل تلقائي، تكون الإعلانات المصاحبة مُفعّلة لكل طلب إعلان.

3- الإعلانات المصاحبة على الشبكة الإعلانية

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

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

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

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

في حال استضافة حزمة HTML5 SDK في IFrame

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

قم بتحميل HTML5 SDK في IFrame.
حمِّل علامة GPT على صفحة الويب الرئيسية (خارج إطار IFrame).

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

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

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

يجب ألا يتم تحميل علامة GPT داخل إطار IFrame الذي يُحمِّل حزمة تطوير البرامج (SDK).
يجب تحميل جدول تقسيم المعرّف الفريد العمومي في الصفحة العلوية، وليس في إطار IFrame آخر.
يجب تحميل النص البرمجي للخادم الوكيل في الإطار نفسه مثل علامة GPT (أي في الصفحة الرئيسية).

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

يشرح هذا القسم كيفية الإعلان عن الإعلانات المصاحبة في ترميز HTML باستخدام علامة GPT، كما يقدم هذا القسم نموذجًا للرمز لسيناريوهات مختلفة. بالنسبة إلى حزمة HTML5 SDK، تحتاج إلى إضافة بعض 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>

التجربة الآن

يمكنك الاطّلاع على رمز الترميز التالي لعملية تنفيذ قيد التشغيل.

المثال 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>

الإعلانات المصاحبة السائلة على الشبكة الإعلانية

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

صورة تعرض إعدادات الإعلانات المصاحبة في "مدير الإعلانات" لتمييز خيار "الأحجام المصاحبة".

العناصر المصاحبة لسوائل 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>