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

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

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

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

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

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

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

/6499/example/banner

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

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

using GoogleMobileAds;
using GoogleMobileAds.Api;

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

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

مثال على BannerView

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

إنشاء عرض بانر

تتمثل الخطوة الأولى لاستخدام عرض البانر في إنشاء مثيل لعرض بانر في نص برمجي C# مرفق بـ GameObject.


  // This ad unit is configured to always serve test ads.
  private string _adUnitId = "/6499/example/banner";

  AdManagerBannerView _bannerView;

  /// <summary>
  /// Creates a 320x50 banner view at top of the screen.
  /// </summary>
  public void CreateBannerView()
  {
      Debug.Log("Creating banner view");

      // If we already have a banner, destroy the old one.
      if (_bannerView != null)
      {
          DestroyAd();
      }

      // Create a 320x50 banner at top of the screen
      _bannerView = new AdManagerBannerView(_adUnitId, AdSize.Banner, AdPosition.Top);
  }

تتضمن الدالة الإنشائية لـ AdManagerBannerView المعلمات التالية:

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

يُرجى الانتباه إلى كيفية استخدام الوحدات الإعلانية المختلفة، وفقًا للنظام الأساسي. عليك استخدام وحدة إعلانية لنظام التشغيل iOS لتقديم طلبات الإعلان على نظام التشغيل iOS ووحدة إعلانية لنظام التشغيل Android لتقديم الطلبات على نظام التشغيل Android.

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

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

// Create a 320x50 banner views at coordinate (0,50) on screen.
_bannerView = new AdManagerBannerView(_adUnitId, AdSize.Banner, 0, 50);

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

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

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

// Use the AdSize argument to set a custom size for the ad.
AdSize adSize = new AdSize(250, 250);
_bannerView = new AdManagerBannerView(_adUnitId, adSize, AdPosition.Bottom);

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

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

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

var adView = new AdManagerBannerView(_adUnitId, AdSize.Banner, AdPosition.Top);
adView.ValidAdSizes = new List<AdSize>
{
    AdSize.Banner, new AdSize(120, 20), new AdSize(250, 250),
};

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

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

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

/// <summary>
/// Creates the banner view and loads a banner ad.
/// </summary>
public void LoadAd()
{
    // create an instance of a banner view first.
    if(_bannerView == null)
    {
        CreateAdManagerBannerView();
    }

    // create our request used to load the ad.
    var adRequest = new AdManagerAdRequest();

    // send the request to load the ad.
    Debug.Log("Loading banner ad.");
    _bannerView.LoadAd(adRequest);
}

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

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

/// <summary>
/// listen to events the banner view may raise.
/// </summary>
private void ListenToAdEvents()
{
    // Raised when an ad is loaded into the banner view.
    _bannerView.OnBannerAdLoaded += () =>
    {
        Debug.Log("Banner view loaded an ad with response : "
            + _bannerView.GetResponseInfo());
    };
    // Raised when an ad fails to load into the banner view.
    _bannerView.OnBannerAdLoadFailed += (LoadAdError error) =>
    {
        Debug.LogError("Banner view failed to load an ad with error : "
            + error);
    };
    // Raised when the ad is estimated to have earned money.
    _bannerView.OnAdPaid += (AdValue adValue) =>
    {
        Debug.Log(String.Format("Banner view paid {0} {1}.",
            adValue.Value,
            adValue.CurrencyCode));
    };
    // Raised when an impression is recorded for an ad.
    _bannerView.OnAdImpressionRecorded += () =>
    {
        Debug.Log("Banner view recorded an impression.");
    };
    // Raised when a click is recorded for an ad.
    _bannerView.OnAdClicked += () =>
    {
        Debug.Log("Banner view was clicked.");
    };
    // Raised when an ad opened full screen content.
    _bannerView.OnAdFullScreenContentOpened += () =>
    {
        Debug.Log("Banner view full screen content opened.");
    };
    // Raised when the ad closed full screen content.
    _bannerView.OnAdFullScreenContentClosed += () =>
    {
        Debug.Log("Banner view full screen content closed.");
    };
}

إتلاف طريقة عرض البانر

عند الانتهاء من استخدام طريقة عرض البانر، تأكَّد من طلب الإجراء "Destroy()" لإصدار الموارد.

/// <summary>
/// Destroys the banner view.
/// </summary>
public void DestroyBannerView()
{
    if (_bannerView != null)
    {
        Debug.Log("Destroying banner view.");
        _bannerView.Destroy();
        _bannerView = null;
    }
}

أكملت هذه الخطوة. تطبيقك جاهز الآن لعرض إعلانات البانر.

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

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

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

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

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

namespace GoogleMobileAds.Api.AdManager;

/// The App event message sent from the ad.
public class AppEvent
{
    // Name of the app event.
    string Name;
    // Argument passed from the app event.
    string Value;
}

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

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

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

_bannerview.OnAppEventReceived += (AppEvent args) =>
{
  if (args.Name == "color")
  {
    Color color;
    if (ColorUtility.TryParseColor(arg.Value, out color))
    {
      gameObject.GetComponent<Renderer>().material.color = color;
    }
  }
};

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

<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: 0px;
      left: 0px;
      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>

مراجع إضافية