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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

يجب عدم تحميل أيّ علامة GPT داخل إطار iframe الذي يحمّل حزمة تطوير البرامج (SDK).
يجب تحميل علامة 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، ما يتيح لك ضبط فلاتر على الإعلانات المصاحبة حسب نوع التصميم ونسبة الملاءمة التقريبية ونوع المورد ومعايير الحجم. لمزيد من المعلومات حول هذه الإعدادات، يُرجى الاطّلاع على مستندات واجهة برمجة تطبيقات CompanionAdSelectionSettings IMA.

يمكن الآن استخدام عناصر 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 الآن الإعلانات المصاحبة المرنة. يمكن تغيير حجم هذه الإعلانات المصاحبة لتتطابق مع حجم الخانة الإعلانية. وتملأ هذه الإعلانات %100 من عرض قسم 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 للإعلانات المصاحبة، يمكنك الإعلان عن خانة إعلانية مصاحبة مرنة من خلال تعديل 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

إعلانات مصاحبة مرنة لواجهة برمجة التطبيقات للإعلانات

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