باستخدام الإعلانات المدمجة مع المحتوى، يمكنك تخصيص إعلاناتك، ما يؤدي إلى تحسين تجربة المستخدم. يمكن أن تؤدي تجارب المستخدمين الأفضل إلى زيادة التفاعل وتحسين العائد الإجمالي.
للاستفادة إلى أقصى حدّ من الإعلانات المدمجة مع المحتوى، من المهم تصميم تخطيطات إعلاناتك بطريقة تبدو وكأنّها امتداد طبيعي لتطبيقك. ولمساعدتك في البدء، أنشأنا "نماذج الإعلانات المدمجة مع المحتوى".
"نماذج الإعلانات المدمجة مع المحتوى" هي طرق عرض كاملة الرموز البرمجية للإعلانات المدمجة مع المحتوى، وهي مصمّمة لتنفيذ الإعلانات بسرعة وتعديلها بسهولة. باستخدام "نماذج الإعلانات المدمجة مع المحتوى"، يمكنك عرض إعلانك الأول المدمج مع المحتوى في بضع دقائق فقط، ويمكنك تخصيص مظهره بسرعة بدون الحاجة إلى الكثير من الرموز البرمجية. يمكنك وضع هذه النماذج في أي مكان تريده، مثل طريقة عرض قابلة لإعادة الاستخدام مستخدَمة في خلاصة الأخبار أو في مربّع حوار أو في أي مكان آخر في تطبيقك.
يتم توفير النماذج الأصلية كوحدة في "استوديو Android"، ما يسهّل تضمينها في مشروعك واستخدامها بالطريقة التي تريدها.
أحجام النماذج
يتوفّر نموذجان: صغير ومتوسط. يستخدم كلاهما الفئة TemplateView، وكلاهما له نسبة عرض إلى ارتفاع ثابتة. وسيتم تغيير حجمها لملء عرض طرق العرض الرئيسية.
نموذج صغير
@layout/gnt_small_template_view
يكون النموذج الصغير مثاليًا لعناصر العرض المتكرّرة أو في أي وقت تحتاج فيه إلى عرض إعلان مستطيل طويل. على سبيل المثال، يمكنك استخدامها للإعلانات ضمن الخلاصة.
نموذج متوسط
@layout/gnt_medium_template_view
تم تصميم نموذج الوسائط ليكون نصف صفحة إلى ثلاثة أرباع صفحة، ولكن يمكن استخدامه أيضًا في الخلاصات. وهي مناسبة للصفحات المقصودة أو صفحات البداية.
يمكنك تجربة مواضع مختلفة. بالطبع، يمكنك أيضًا تغيير الرمز المصدري وملفات XML لتناسب متطلباتك.
هناك طريقتان لتصميم النموذج: استخدام XML للتصميم التقليدي واستخدام عنصر NativeTemplateStyle.Builder. يوضّح نموذج الرمز البرمجي أعلاه كيفية استخدام العنصر NativeTemplateStyle.Builder لضبط لون الخلفية الرئيسي، ولكن تتوفّر أيضًا مجموعة متنوعة من الخيارات الأخرى. في ما يلي جميع طرق الإنشاء المتاحة. تعرض أداة الإنشاء NativeTemplateStyle
عنصرًا يتجاوز أي نمط لتنسيق XML. تستخدم تنسيقات XML
gnt_small_template.xml وgnt_medium_template.xml مَعلمات التنسيق نفسها في Android
التي تعرفها.
طُرق الإنشاء لنمط نموذج الإعلان المدمج مع المحتوى
withCallToActionTextTypeface
Typeface callToActionTextTypeface
تمثّل هذه السمة نوع الخط المستخدم في عبارة الحث على اتّخاذ إجراء.
withCallToActionTextSize
float callToActionTextSize
حجم نص عبارة الحث على اتخاذ إجراء
withCallToActionTypefaceColor
int callToActionTypefaceColor
لون نص عبارة الحث على اتخاذ إجراء
withCallToActionBackgroundColor
ColorDrawable callToActionBackgroundColor
لون خلفية عبارة الحث على اتّخاذ إجراء
withPrimaryTextTypeface
Typeface primaryTextTypeface
نوع خط الصف الأول من النص
withPrimaryTextSize
float primaryTextSize
حجم السطر الأول من النص
withPrimaryTextTypefaceColor
int primaryTextTypefaceColor
لون الصف الأول من النص
withPrimaryTextBackgroundColor
ColorDrawable primaryTextBackgroundColor
لون خلفية السطر الأول من النص
withSecondaryTextTypeface
Typeface secondaryTextTypeface
تمثّل هذه السمة الخط الطباعي للسطر الثاني من النص.
withSecondaryTextSize
float secondaryTextSize
حجم السطر الثاني من النص
withSecondaryTextTypefaceColor
int secondaryTextTypefaceColor
لون النص في الصف الثاني من النص
withSecondaryTextBackgroundColor
ColorDrawable secondaryTextBackgroundColor
لون خلفية صف النص الثاني
withTertiaryTextTypeface
Typeface tertiaryTextTypeface
تمثّل هذه السمة الخط الطباعي للصف الثالث من النص.
withTertiaryTextSize
float tertiaryTextSize
حجم الصف الثالث من النص
withTertiaryTextTypefaceColor
int tertiaryTextTypefaceColor
لون نص الصف الثالث
withTertiaryTextBackgroundColor
ColorDrawable tertiaryTextBackgroundColor
لون خلفية الصف الثالث من النص
withMainBackgroundColor
ColorDrawable mainBackgroundColor
يشير هذا العنصر إلى لون الخلفية الرئيسي.
المساهمة
لقد أنشأنا "نماذج الإعلانات المدمجة مع المحتوى" لمساعدتك في تطوير إعلانات مدمجة مع المحتوى بسرعة.
يسرّنا أن نرى مساهماتك في مستودع GitHub لإضافة نماذج أو ميزات جديدة. يُرجى إرسال طلب سحب إلينا وسنراجع المحتوى.
تاريخ التعديل الأخير: 2025-09-06 (حسب التوقيت العالمي المتفَّق عليه)
[[["يسهُل فهم المحتوى.","easyToUnderstand","thumb-up"],["ساعَدني المحتوى في حلّ مشكلتي.","solvedMyProblem","thumb-up"],["غير ذلك","otherUp","thumb-up"]],[["لا يحتوي على المعلومات التي أحتاج إليها.","missingTheInformationINeed","thumb-down"],["الخطوات معقدة للغاية / كثيرة جدًا.","tooComplicatedTooManySteps","thumb-down"],["المحتوى قديم.","outOfDate","thumb-down"],["ثمة مشكلة في الترجمة.","translationIssue","thumb-down"],["مشكلة في العيّنات / التعليمات البرمجية","samplesCodeIssue","thumb-down"],["غير ذلك","otherDown","thumb-down"]],["تاريخ التعديل الأخير: 2025-09-06 (حسب التوقيت العالمي المتفَّق عليه)"],[[["\u003cp\u003eNative Templates are pre-built ad views designed for quick implementation and customization in Android apps, helping create a more natural user experience.\u003c/p\u003e\n"],["\u003cp\u003eThese templates come in small and medium sizes, suitable for various placements like recycler views and landing pages, offering flexibility in integration.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can easily install these templates as an Android Studio module by downloading them from GitHub and adding a dependency in their project's \u003ccode\u003ebuild.gradle\u003c/code\u003e file.\u003c/p\u003e\n"],["\u003cp\u003eUsing templates involves including them in your layout XML and then populating them with a native ad when it's loaded, further customizable with styling options.\u003c/p\u003e\n"],["\u003cp\u003eYou can contribute by adding new templates or features through pull requests on the GitHub repository, fostering collaborative development.\u003c/p\u003e\n"]]],["Native Templates provide pre-built views for native ads, simplifying their implementation and customization. To use them, download the module from GitHub and import it into your Android Studio project. There are two template sizes: small (`gnt_small_template_view`) and medium (`gnt_medium_template_view`). Integrate a template into your layout XML and then use `NativeTemplateStyle.Builder` to style it using different text size, color, background and style properties. Next load your native ad by calling `setNativeAd` and make sure you know how to load native ad.\n"],null,["Select platform: [Android](/admob/android/native/templates \"View this page for the Android platform docs.\") [iOS](/admob/ios/native/templates \"View this page for the iOS platform docs.\") [Flutter](/admob/flutter/native/templates \"View this page for the Flutter platform docs.\")\n\n\u003cbr /\u003e\n\n[Download Native Templates](//github.com/googleads/googleads-mobile-android-native-templates)\n| **Key Point:** Before continuing, know how to [load a native\n| ad](/admob/android/native#load-ad). Learn more about native ads in our [Native Ads\n| Playbook](//admob.google.com/home/resources/native-ads-playbook/).\n\n\nUsing native ads you can customize your ads resulting in a better user\nexperience. Better user experiences can increase engagement and improve your\noverall yield.\n\nIn order to get the most out of native ads, it's important to style your ad\nlayouts so that they feel like a natural extension of your app. To help you get\nstarted, we've created Native Templates.\n\nNative Templates are code-complete views for your native ads, designed for fast\nimplementation and easy modification. With Native Templates, you can implement\nyour first native ad in just a few minutes, and you can quickly customize the\nlook and feel without a lot of code. You can place these templates anywhere you\nwant, such as in a recycler view used in a news feed, in a dialog, or anywhere\nelse in your app.\n| **Note:** If you're interested in designing your own native layouts from scratch, return to the [Native Advanced](/admob/android/native/advanced) documentation instead.\n\nOur native templates are provided as an Android Studio module, so it's easy to\ninclude them in your project and use them however you like.\n\nTemplate sizes\n\nThere are two templates: small and medium. They both use the `TemplateView`\nclass and both have a fixed aspect ratio. They will scale to fill the width of\ntheir parent views.\n\nSmall template \n\n @layout/gnt_small_template_view\n\nThe small template is ideal for recycler views, or any time you need a long\nrectangular ad view. For instance you could use it for in-feed ads.\n\nMedium template \n\n @layout/gnt_medium_template_view\n\nThe medium template is meant to be a one-half to three-quarter page view but\ncan also be used in feeds. It is good for landing pages or splash pages.\n\nFeel free to experiment with placement. Of course, you can also change the\nsource code and XML files to suit your requirements.\n\nInstalling the native ad templates\n\nTo install the native templates, simply [download the zip file (using the\n**Clone or download** option on\nGitHub)](//github.com/googleads/googleads-mobile-android-native-templates) and\nimport the module into your existing Android Studio project.\n\n1. Choose **File \\\u003e New \\\u003e Import Module**.\n\n2. Select the `nativetemplates` folder.\n\n3. Add the following line to your app-level `build.gradle` file:\n\n dependencies {\n ...\n implementation project(':nativetemplates')\n ...\n }\n\nUsing the native ad templates\n\nYou can use the template in any layout XML file, like any other view\ngroup.\n\nUsing the templates is a two-step process:\n\n1. First, you need to include the template as part of your layout.\n\n \u003cLinearLayout\n xmlns:android=\"http://schemas.android.com/apk/res/android\"\n xmlns:app=\"http://schemas.android.com/apk/res-auto\"\n xmlns:tools=\"http://schemas.android.com/tools\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\"\n tools:context=\".MainActivity\"\n tools:showIn=\"@layout/activity_main\" \u003e\n\n \u003c!-- This is your template view --\u003e\n \u003ccom.google.android.ads.nativetemplates.TemplateView\n android:id=\"@+id/my_template\"\n \u003c!-- this attribute determines which template is used. The other option is\n @layout/gnt_medium_template_view --\u003e\n app:gnt_template_type=\"@layout/gnt_small_template_view\"\n android:layout_width=\"match_parent\"\n android:layout_height=\"match_parent\" /\u003e\n\n ...\n \u003c/LinearLayout\u003e\n\n2. Next, you need to give your template your native ad when it loads:\n\n MobileAds.initialize(this);\n AdLoader adLoader = new AdLoader.Builder(this, \"ca-app-pub-3940256099942544/2247696110\")\n .forNativeAd(new NativeAd.OnNativeAdLoadedListener() {\n @Override\n public void onNativeAdLoaded(NativeAd nativeAd) {\n NativeTemplateStyle styles = new\n NativeTemplateStyle.Builder().withMainBackgroundColor(background).build();\n TemplateView template = findViewById(R.id.my_template);\n template.setStyles(styles);\n template.setNativeAd(nativeAd);\n }\n })\n .build();\n\n adLoader.loadAd(new AdRequest.Builder().build());\n\nStyles dictionary keys\n\nThere are two ways to style your template: using traditional layout XML and\nusing our `NativeTemplateStyle.Builder` object. The above code sample\ndemonstrates how to use the `NativeTemplateStyle.Builder` object to set the main\nbackground color, but there are a variety of other options as well. Here are all\nof the available builder methods. The builder returns a `NativeTemplateStyle`\nobject which overrides any XML layout styling. The XML layouts\n`gnt_small_template.xml` and `gnt_medium_template.xml` use the same Android\nstyling parameters that you are already familiar with.\n\n| Builder methods for native template style ||\n|------------------------------------|----------------------------------------------------------------------------------------------|\n| `withCallToActionTextTypeface` | `Typeface callToActionTextTypeface` The typeface for the call to action. |\n| `withCallToActionTextSize` | `float callToActionTextSize` The size of the call to action text. |\n| `withCallToActionTypefaceColor` | `int callToActionTypefaceColor` The color of the call to action text. |\n| `withCallToActionBackgroundColor` | `ColorDrawable callToActionBackgroundColor` The background color of the call to action. |\n| `withPrimaryTextTypeface` | `Typeface primaryTextTypeface` The typeface of the first row of text. |\n| `withPrimaryTextSize` | `float primaryTextSize` The size of the first row of text. |\n| `withPrimaryTextTypefaceColor` | `int primaryTextTypefaceColor` The color of the first row of text. |\n| `withPrimaryTextBackgroundColor` | `ColorDrawable primaryTextBackgroundColor` The background color of the first row of text. |\n| `withSecondaryTextTypeface` | `Typeface secondaryTextTypeface` The typeface of the second row of text. |\n| `withSecondaryTextSize` | `float secondaryTextSize` The size of the second row of text. |\n| `withSecondaryTextTypefaceColor` | `int secondaryTextTypefaceColor` The text color of the second row of text. |\n| `withSecondaryTextBackgroundColor` | `ColorDrawable secondaryTextBackgroundColor` The background color of the second row of text. |\n| `withTertiaryTextTypeface` | `Typeface tertiaryTextTypeface` The typeface of the third row of text. |\n| `withTertiaryTextSize` | `float tertiaryTextSize` The size of the third row of text. |\n| `withTertiaryTextTypefaceColor` | `int tertiaryTextTypefaceColor` The text color of the third row of text. |\n| `withTertiaryTextBackgroundColor` | `ColorDrawable tertiaryTextBackgroundColor` The background color of the third row of text. |\n| `withMainBackgroundColor` | `ColorDrawable mainBackgroundColor` The main background color. |\n\nContribute\n\nWe've made Native Templates to help you develop native ads quickly.\nWe'd love to see you contribute to our\n[GitHub](//github.com/googleads/googleads-mobile-android-native-templates)\nrepo to add new templates or features. Send us a pull request and we'll take a\nlook."]]