لمناقشة منتجاتنا وتقديم ملاحظات بشأنها، انضمّ إلى قناة Discord الرسمية في "مدير إعلانات Google" على خادم منتدى Google للإعلان والقياس.

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

اختيار النظام الأساسي: HTML5 Android iOS

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

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

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

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

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

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

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

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

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

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

تلقائيًا باستخدام "علامة ناشر Google" (المعروفة بالاختصار GPT)

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

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

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

إذا كنت تستضيف حزمة تطوير البرامج (SDK) بتنسيق HTML5 ضِمن إطار IFrame

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

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

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

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

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

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

تحديد الخانات الإعلانية المصاحبة في HTML

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

المثال 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: مواضع الإعلانات المحمَّلة مسبقًا

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

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

<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>

للتجربة:

يمكنك الاطّلاع على CodePen التالي لمعرفة طريقة التنفيذ.

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

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

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

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

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

يمكن الآن استخدام عناصر 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>

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

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

صورة تعرض إعدادات الإعلان المرافق في "مدير إعلانات 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>

إتاحة الإعلانات المصاحبة تنظيم صفحاتك في مجموعات يمكنك حفظ المحتوى وتصنيفه حسب إعداداتك المفضّلة.

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

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

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

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

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

إذا كنت تستضيف حزمة تطوير البرامج (SDK) بتنسيق HTML5 ضِمن إطار IFrame

تحديد الخانات الإعلانية المصاحبة في HTML

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

للتجربة:

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

للتجربة:

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

للتجربة:

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

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

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

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

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

إعلانات بانر مرنة في Ad API

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