نماذج مدمجة مع المحتوى

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

تنزيل "النماذج الأصلية"

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

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

"نماذج الإعلانات المدمجة مع المحتوى" هي طرق عرض كاملة الرموز البرمجية للإعلانات المدمجة مع المحتوى، وهي مصمّمة لتنفيذ الإعلانات بسرعة وتعديلها بسهولة. باستخدام "نماذج الإعلانات المدمجة مع المحتوى"، يمكنك عرض إعلانك الأول المدمج مع المحتوى في بضع دقائق فقط، ويمكنك تخصيص مظهره بسرعة بدون الحاجة إلى الكثير من الرموز البرمجية. يمكنك وضع هذه النماذج في أي مكان تريده، مثل 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 youd like, and dont 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 لإضافة نماذج أو ميزات جديدة. يُرجى إرسال طلب سحب إلينا وسنراجع المحتوى.