إعلانات البانر

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

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

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

المتطلبات الأساسية

اختبار الإعلانات دائمًا باستخدام الإعلانات الاختبارية

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

ومع ذلك، بعد تسجيل تطبيق في واجهة الويب الخاصة بـ "مدير إعلانات Google" وإنشاء أرقام تعريف خاصة بوحداتك الإعلانية لاستخدامها في تطبيقك، عليك إعداد جهازك بشكل صريح كجهاز اختباري أثناء عملية التطوير.

/21775744923/example/adaptive-banner

إعداد حزمة تطوير البرامج (SDK) للإعلانات على الأجهزة الجوّالة

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

using GoogleMobileAds;
using GoogleMobileAds.Api;

public class GoogleMobileAdsDemoScript : MonoBehaviour
{
    public void Start()
    {
        // Initialize Google Mobile Ads SDK.
        MobileAds.Initialize((InitializationStatus initStatus) =>
        {
            // This callback is called once the MobileAds SDK is initialized.
        });
    }
}

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

مثال BannerView

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

إنشاء طريقة عرض بانر

الخطوة الأولى في استخدام عرض بانر هي إنشاء مثيل لعرض بانر.

// Create a 320x50 banner at top of the screen.
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", AdSize.Banner, AdPosition.Top);
AdManagerBannerViewSnippets.cs

استبدِل AD_UNIT_ID برقم تعريف وحدتك الإعلانية.

يحتوي الدالة الإنشائية الخاصة بـ AdManagerBannerView على المَعلمات التالية:

  • ‫adUnitId: رقم تعريف الوحدة الإعلانية لإعلان البانر المطلوب تحميله.
  • AdSize: حجم البانر الذي تريد استخدامه
  • AdPosition: الموضع الذي يجب وضع مشاهدات البانر فيه

(اختياري) إنشاء طريقة عرض بانر بموضع مخصّص

للحصول على تحكّم أكبر في موضع عرض بانر على الشاشة مقارنةً بما توفّره قيم AdPosition، استخدِم الدالة الإنشائية التي تتضمّن الإحداثيات x وy كمعلَمات:

// Create a 320x50 banner views at coordinate (0,50) on screen.
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", AdSize.Banner, 0, 50);
AdManagerBannerViewSnippets.cs

يتم وضع الزاوية العلوية اليمنى لعرض البانر عند قيمتَي x وy اللتين تم تمريرهما إلى الدالة الإنشائية، حيث يكون الموضع الأصلي هو أعلى يمين الشاشة.

(اختياري) إنشاء طريقة عرض بانر بحجم مخصّص

بالإضافة إلى استخدام الثابت AdSize، يمكنك أيضًا تحديد حجم مخصّص لإعلانك:

// Create a 250x250 banner at the bottom of the screen.
AdSize adSize = new AdSize(250, 250);
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", adSize, AdPosition.Bottom);
AdManagerBannerViewSnippets.cs

(اختياري) أحجام إعلانات متعدّدة

تتيح لك "إدارة الإعلانات" تحديد أحجام إعلانات متعددة يمكن أن تكون مؤهّلة للعرض في AdManagerBannerView. قبل تنفيذ هذه الميزة في حزمة تطوير البرامج (SDK)، أنشئ عنصرًا يستهدف الوحدات الإعلانية نفسها المرتبطة بتصاميم إعلانات بأحجام مختلفة.

في تطبيقك، مرِّر مَعلمات AdSize متعدّدة إلى ValidAdSizes:

// Create a 250x250 banner at the bottom of the screen.
adManagerBannerView = new AdManagerBannerView("AD_UNIT_ID", AdSize.Banner, AdPosition.Top);

// Add multiple ad sizes.
adManagerBannerView.ValidAdSizes = new List<AdSize>
{
    AdSize.Banner,
    new AdSize(120, 20),
    new AdSize(250, 250),
};
AdManagerBannerViewSnippets.cs

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

تحميل إعلان بانر

بعد إعداد AdManagerBannerView، يمكنك المتابعة لتحميل إعلان باستخدام طريقة LoadAd() في فئة AdManagerBannerView. تتلقّى هذه الدالة مَعلمة تتضمّن معلومات وقت التشغيل، مثل معلومات الاستهداف وتصنيفات الاستبعاد والمعرّف الذي يقدّمه الناشر.

لتحميل إعلان، أنشئ AdManagerAdRequest ومرِّره إلى الطريقة LoadAd().

// Send a request to load an ad into the banner view.
adManagerBannerView.LoadAd(new AdManagerAdRequest());
AdManagerBannerViewSnippets.cs

الاستماع إلى الأحداث الناتجة عن عرض البانر

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

adManagerBannerView.OnBannerAdLoaded += () =>
{
    // Raised when an ad is loaded into the banner view.
};
adManagerBannerView.OnBannerAdLoadFailed += (LoadAdError error) =>
{
    // Raised when an ad fails to load into the banner view.
};
adManagerBannerView.OnAdPaid += (AdValue adValue) =>
{
    // Raised when the ad is estimated to have earned money.
};
adManagerBannerView.OnAdImpressionRecorded += () =>
{
    // Raised when an impression is recorded for an ad.
};
adManagerBannerView.OnAdClicked += () =>
{
    // Raised when a click is recorded for an ad.
};
adManagerBannerView.OnAdFullScreenContentOpened += () =>
{
    // Raised when an ad opened full screen content.
};
adManagerBannerView.OnAdFullScreenContentClosed += () =>
{
    // Raised when the ad closed full screen content.
};
AdManagerBannerViewSnippets.cs

إيقاف عرض البانر

عند الانتهاء من استخدام عرض البانر، احرص على استدعاء Destroy() لتحرير الموارد.

if (adManagerBannerView != null)
{
    // Always destroy the banner view when no longer needed.
    adManagerBannerView.Destroy();
    adManagerBannerView = null;
}
AdManagerBannerViewSnippets.cs

هذا كل شيء! أصبح تطبيقك الآن جاهزًا لعرض الإعلانات الصورية.

إعادة تحميل إعلان

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

يعرض الجدول التالي أحجام البانر القياسية:

الحجم بوحدات dp (العرض × الارتفاع) الوصف مدى التوفّر ثابت AdSize
320×50 إعلان بانر عادي الهواتف والأجهزة اللوحية BANNER
100x320 بانر كبير الهواتف والأجهزة اللوحية LARGE_BANNER
300×250 مستطيل متوسط من IAB الهواتف والأجهزة اللوحية MEDIUM_RECTANGLE
468×60 بانر كامل الحجم وفقًا لمكتب IAB الأجهزة اللوحية FULL_BANNER
728×90 لوحة الصدارة IAB الأجهزة اللوحية LEADERBOARD
العرض المقدَّم x الارتفاع التكيّفي إعلان بانر تكيُّفي الهواتف والأجهزة اللوحية لا ينطبق
عرض الشاشة x 32|50|90 اللافتة الإعلانية الذكية الهواتف والأجهزة اللوحية SMART_BANNER
مزيد من المعلومات عن إعلانات البانر التكيُّفية، المصمّمة لتحلّ محلّ إعلانات البانر الذكية

أحداث التطبيقات

تتيح لك أحداث التطبيق إنشاء إعلانات يمكنها إرسال رسائل إلى رمز التطبيق. ويمكن للتطبيق بعد ذلك اتّخاذ إجراءات استنادًا إلى هذه الرسائل.

يمكنك الاستماع إلى أحداث التطبيق الخاصة بـ "مدير إعلانات Google" باستخدام AppEvent. ويمكن أن تحدث هذه الأحداث في أي وقت خلال دورة حياة الإعلان، حتى قبل طلب التحميل.

يتم عرض الخطأ OnAppEventReceived عند وقوع حدث تطبيق في إعلان. في ما يلي مثال على كيفية التعامل مع هذا الحدث في الرمز البرمجي:

adManagerBannerView.OnAppEventReceived += (AppEvent args) =>
{
    Debug.Log($"Received app event from the ad: {args.Name}, {args.Data}.");
};
AdManagerBannerViewSnippets.cs

في ما يلي مثال يوضّح كيفية تغيير لون خلفية تطبيقك استنادًا إلى حدث تطبيق يحمل اسم لون:

adManagerBannerView.OnAppEventReceived += (AppEvent args) =>
{
    if (args.Name == "color")
    {
        Color color;
        if (ColorUtility.TryParseHtmlString(args.Data, out color))
        {
            renderer.material.color = color;
        }
    }
};
AdManagerBannerViewSnippets.cs

في ما يلي تصميم الإعلان المقابل الذي يرسل حدث تطبيق التلوين:

<html>
<head>
  <script src="//www.gstatic.com/afma/api/v1/google_mobile_app_ads.js"></script>
  <script>
    document.addEventListener("DOMContentLoaded", function() {
      // Send a color=green event when ad loads.
      admob.events.dispatchAppEvent("color", "green");

      document.getElementById("ad").addEventListener("click", function() {
        // Send a color=blue event when ad is clicked.
        admob.events.dispatchAppEvent("color", "blue");
      });
    });
  </script>
  <style>
    #ad {
      width: 320px;
      height: 50px;
      top: 0;
      left: 0;
      font-size: 24pt;
      font-weight: bold;
      position: absolute;
      background: black;
      color: white;
      text-align: center;
    }
  </style>
</head>
<body>
  <div id="ad">Carpe diem!</div>
</body>
</html>

AppEventSnippets.html

مراجع إضافية