تنسيقات الإعلانات الأنيقة باستخدام النماذج الأصلية

اختيار النظام الأساسي: iOS Flutter Android (الإصدار القديم)

تنزيل نماذج "الإعلانات المدمجة مع المحتوى"

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

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

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

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

أحجام النماذج

يتوفّر حجمان للنماذج: صغير ومتوسط. يتم تمثيل كل قالب بواسطة فئة. الفئتان هما GADTSmallTemplateView وGADTMediumTemplateView. توسّع كلتا الفئتين GADTTemplateView. يحتوي كلا النموذجَين على نسبة عرض إلى ارتفاع ثابتة، والتي سيتم تغيير حجمها لملء عرض طرق العرض الرئيسية فقط إذا طلبت addHorizontalConstraintsToSuperviewWidth. إذا لم يتم استدعاء addHorizontalConstraintsToSuperviewWidth، سيتم عرض كل نموذج بحجمه التلقائي.

GADTSmallTemplateView

النموذج الصغير مثالي للخلايا التي يبلغ حجمها UICollectionView أو UITableView. على سبيل المثال، يمكنك استخدامها في "الإعلانات ضمن الخلاصة" أو في أي مكان تحتاج فيه إلى عرض إعلاني مستطيل رفيع. الحجم التلقائي لهذا النموذج هو 91 نقطة ارتفاعًا و355 نقطة عرضًا.

GADTMediumTemplateView

تم تصميم النموذج المتوسط ليكون عرضًا من نصف إلى ثلاثة أرباع الصفحة. هذا مفيد للصفحات المقصودة أو صفحات البداية، ولكن يمكن أيضًا تضمينه في UITableViews. الحجم التلقائي لهذا النموذج هو 370 نقطة ارتفاعًا و355 نقطة عرضًا.

تتيح جميع نماذجنا ميزة التنسيق التلقائي، لذا يمكنك تجربة مواضع مختلفة. بالطبع، يمكنك أيضًا تغيير الرمز المصدر وملفات xib لتناسب متطلباتك.

تثبيت نماذج "الإعلانات المدمجة مع المحتوى"

لتثبيت "النماذج المدمجة مع المحتوى"، ما عليك سوى تنزيل ملف zip وسحبه إلى مشروع Xcode. تأكَّد من وضع علامة في المربّع نسخ العناصر إذا لزم الأمر.

استخدام نماذج "الإعلانات المدمجة مع المحتوى"

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

Objective-C

/// Step 1: Import the templates that you need.
#import "NativeTemplates/GADTSmallTemplateView.h"
#import "NativeTemplates/GADTTemplateView.h"
...

// STEP 2: Initialize your template view object.
GADTSmallTemplateView *templateView =
    [[NSBundle mainBundle] loadNibNamed:@"GADTSmallTemplateView" owner:nil options:nil]
      .firstObject;

// STEP 3: Template views are just GADNativeAdViews.
_nativeAdView = templateView;
nativeAd.delegate = self;

// STEP 4: Add your template as a subview of whichever view you'd like.
// This must be done before calling addHorizontalConstraintsToSuperviewWidth.
// Please note: Our template objects are subclasses of GADNativeAdView so
// you can insert them into whatever type of view you’d like, and don’t need to
// create your own.
[self.view addSubview:templateView];

// STEP 5 (Optional): Create your styles dictionary. Set your styles dictionary
// on the template property. A default dictionary is created for you if you do
// not set this. Note - templates do not currently respect style changes in the
// xib.

NSString *myBlueColor = @"#5C84F0";
NSDictionary *styles = @{
    GADTNativeTemplateStyleKeyCallToActionFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyCallToActionFontColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyCallToActionBackgroundColor :
        [GADTTemplateView colorFromHexString:myBlueColor],
    GADTNativeTemplateStyleKeySecondaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeySecondaryFontColor : UIColor.grayColor,
    GADTNativeTemplateStyleKeySecondaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyPrimaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyPrimaryFontColor : UIColor.blackColor,
    GADTNativeTemplateStyleKeyPrimaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyTertiaryFont : [UIFont systemFontOfSize:15.0],
    GADTNativeTemplateStyleKeyTertiaryFontColor : UIColor.grayColor,
    GADTNativeTemplateStyleKeyTertiaryBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyMainBackgroundColor : UIColor.whiteColor,
    GADTNativeTemplateStyleKeyCornerRadius : [NSNumber numberWithFloat:7.0],
};

templateView.styles = styles;

// STEP 6: Set the ad for your template to render.
templateView.nativeAd = nativeAd;

// STEP 7 (Optional): If you'd like your template view to span the width of your
// superview call this method.
[templateView addHorizontalConstraintsToSuperviewWidth];
[templateView addVerticalCenterConstraintToSuperview];

مفاتيح قاموس الأنماط

أسرع طريقة لتخصيص النماذج هي إنشاء قاموس بالمفاتيح التالية:

Objective-C

/// Call to action font. Expects a UIFont.
GADTNativeTemplateStyleKeyCallToActionFont

/// Call to action font color. Expects a UIColor.
GADTNativeTemplateStyleKeyCallToActionFontColor;

/// Call to action background color. Expects a UIColor.
GADTNativeTemplateStyleKeyCallToActionBackgroundColor;

/// The font, font color and background color for the first row of text in the
/// template.

/// All templates have a primary text area which is populated by the native ad's
/// headline.

/// Primary text font. Expects a UIFont.
GADTNativeTemplateStyleKeyPrimaryFont;

/// Primary text font color. Expects a UIFont.
GADTNativeTemplateStyleKeyPrimaryFontColor;

/// Primary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeyPrimaryBackgroundColor;

/// The font, font color and background color for the second row of text in the
/// template.

/// All templates have a secondary text area which is populated either by the
/// body of the ad, or by the rating of the app.

/// Secondary text font. Expects a UIFont.
GADTNativeTemplateStyleKeySecondaryFont;

/// Secondary text font color. Expects a UIColor.
GADTNativeTemplateStyleKeySecondaryFontColor;

/// Secondary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeySecondaryBackgroundColor;

/// The font, font color and background color for the third row of text in the
/// template. The third row is used to display store name or the default
/// tertiary text.

/// Tertiary text font. Expects a UIFont.
GADTNativeTemplateStyleKeyTertiaryFont;

/// Tertiary text font color. Expects a UIColor.
GADTNativeTemplateStyleKeyTertiaryFontColor;

/// Tertiary text background color. Expects a UIColor.
GADTNativeTemplateStyleKeyTertiaryBackgroundColor;

/// The background color for the bulk of the ad. Expects a UIColor.
GADTNativeTemplateStyleKeyMainBackgroundColor;

/// The corner rounding radius for the icon view and call to action. Expects an
/// NSNumber.
GADTNativeTemplateStyleKeyCornerRadius;

الأسئلة الشائعة

لماذا يظهر لي استثناء عند محاولة إنشاء مثيل لكائن النموذج؟
يمكن أن يحدث ذلك إذا غيّرت حجم العرض في ملف xib ولكن لم تغيّر حجم الإطار الذي تم إنشاؤه في طريقة "الإعداد" للفئة الفرعية.
كيف يمكنني تخصيص هذه النماذج بشكل أكبر؟
هذه النماذج هي مجرد ملفات xib مع عناصر عرض مرتبطة بها، مثل أي ملف xib آخر وفئة عرض مخصّصة قد تكون معتادًا عليها من تطوير iOS. إذا كنت تفضّل إنشاء "إعلاناتك المدمجة مع المحتوى" من البداية، يمكنك الاطّلاع على دليل "الإعلانات المدمجة مع المحتوى (متقدم)".
لماذا لا يتم تعديل الأنماط عند ضبطها في ملف xib؟
نلغي حاليًا جميع أنماط xib باستخدام قاموس الأنماط التلقائي في GADTTemplateView.m.

المساهمة

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