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

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

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

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

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

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

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

/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);

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

يتيح لك "مدير إعلانات Google" تحديد أحجام إعلانات متعدّدة يمكن أن تكون مؤهَّلة للعرض في 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. تأخذ هذه العملية مَعلمة تحتوي على معلومات وقت التشغيل، مثل معلومات الاستهداف وتصنيفات الاستبعاد ورقم التعريف الذي قدّمه الناشر.

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

مصادر إضافية