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

تنزيل النماذج المضمّنة

ملاحظة مهمة: قبل المتابعة، تعرَّف على كيفية تحميل إعلان مضمّن.

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

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

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

ملاحظة: إذا كنت مهتمًا بتصميم تنسيقات أصلية من البداية، يُرجى الرجوع إلى مستندات الميزات المتقدّمة للتنسيقات الأصلية بدلاً من ذلك.

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

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

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

GADTSmallTemplateView

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

GADTMediumTemplateView

يُعدّ نموذج الحجم المتوسط مخصّصًا لمشاهدة الصفحة من 1/2 إلى 3/4. هذا مناسب لصفحات التسويق أو صفحات البداية، ولكن يمكن أيضًا تضمينه في 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 ولكن لم تغيّر حجم الإطار الذي تم إنشاؤه في طريقة "setup" للفئة الفرعية.

كيف يمكنني تخصيص هذه النماذج بشكل أكبر؟

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

لماذا لا يتم تعديل أنماطي عند ضبطها في ملف xib؟

نحن حاليًا نستبدل جميع أنماط xib بقائمة الأنماط التلقائية في GADTTemplateView.m.

المساهمة

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