النماذج الأصلية

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

نقطة رئيسية: قبل المتابعة، عليك معرفة كيفية تحميل إعلان مدمج مع المحتوى.

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

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

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

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

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

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

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

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

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

المساهمة

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