Les annonces natives vous permettent de personnaliser vos annonces et d'améliorer ainsi l'expérience utilisateur. Une meilleure expérience utilisateur peut augmenter l'engagement et améliorer votre rendement global.
Pour profiter pleinement des annonces natives, il est important de styliser vos mises en page d'annonces afin qu'elles s'intègrent naturellement à votre application. Pour vous aider à vous lancer, nous avons créé des modèles natifs.
Les modèles natifs sont des vues complètes en termes de code pour vos annonces natives. Ils sont conçus pour une implémentation rapide et une modification facile. Les modèles natifs vous permettent d'implémenter votre première annonce native en quelques minutes seulement. Vous pouvez également personnaliser rapidement son apparence sans avoir à écrire beaucoup de code. Vous pouvez placer ces modèles où vous le souhaitez, par exemple dans une TableView utilisée dans un flux d'actualités, dans une boîte de dialogue ou ailleurs dans votre application.
Ce guide vous explique comment télécharger, inclure et utiliser des modèles natifs dans vos applications iOS. Il suppose que vous avez déjà utilisé le SDK pour charger une annonce native.
Tailles des modèles
Il existe deux tailles de modèles : petite et moyenne. Chaque modèle est représenté par une classe. Les classes sont GADTSmallTemplateView et GADTMediumTemplateView. Les deux classes étendent GADTTemplateView. Les deux modèles ont un format fixe, qui s'adaptera pour remplir la largeur de leurs vues parentes uniquement si vous appelez addHorizontalConstraintsToSuperviewWidth.
Si vous n'appelez pas addHorizontalConstraintsToSuperviewWidth, chaque modèle affichera sa taille par défaut.
GADTSmallTemplateView
Le petit modèle est idéal pour les cellules UICollectionView ou UITableView. Par exemple, vous pouvez l'utiliser pour des annonces In-Feed ou partout où vous avez besoin d'une vue d'annonce rectangulaire fine. La taille par défaut de ce modèle est de 91 points de hauteur et 355 points de largeur.
GADTMediumTemplateView
Le modèle moyen est conçu pour une vue de 1/2 à 3/4 page. Cette méthode est idéale pour les pages de destination ou d'accueil, mais peut également être incluse dans UITableViews. La taille par défaut de ce modèle est de 370 points de haut sur 355 points de large.
Tous nos modèles sont compatibles avec la mise en page automatique. N'hésitez donc pas à tester différents emplacements. Bien sûr, vous pouvez également modifier le code source et les fichiers xib pour répondre à vos besoins.
Installer les modèles d'annonces natives
Pour installer les modèles natifs, il vous suffit de télécharger le fichier ZIP et de le faire glisser dans votre projet Xcode. Assurez-vous de cocher la case Copier les éléments si nécessaire.
Utiliser les modèles d'annonces natives
Une fois que vous avez ajouté le dossier à votre projet et inclus la classe appropriée dans votre fichier, suivez cette recette pour utiliser un modèle. Notez que la seule façon de modifier les propriétés de police et de style est d'utiliser le dictionnaire de styles. Nous remplaçons actuellement tout style défini dans le fichier xib lui-même.
Objective-C
///Step1:Importthetemplatesthatyouneed.#import "NativeTemplates/GADTSmallTemplateView.h"#import "NativeTemplates/GADTTemplateView.h"...//STEP2:Initializeyourtemplateviewobject.GADTSmallTemplateView*templateView=[[NSBundlemainBundle]loadNibNamed:@"GADTSmallTemplateView"owner:niloptions:nil].firstObject;//STEP3:TemplateviewsarejustGADNativeAdViews._nativeAdView=templateView;nativeAd.delegate=self;//STEP4:Addyourtemplateasasubviewofwhicheverviewyou'd like.//ThismustbedonebeforecallingaddHorizontalConstraintsToSuperviewWidth.//Pleasenote:OurtemplateobjectsaresubclassesofGADNativeAdViewso//youcaninsertthemintowhatevertypeofviewyou’dlike,anddon’tneedto//createyourown.[self.viewaddSubview:templateView];//STEP5(Optional):Createyourstylesdictionary.Setyourstylesdictionary//onthetemplateproperty.Adefaultdictionaryiscreatedforyouifyoudo//notsetthis.Note-templatesdonotcurrentlyrespectstylechangesinthe//xib.NSString*myBlueColor=@"#5C84F0";NSDictionary*styles=@{GADTNativeTemplateStyleKeyCallToActionFont:[UIFontsystemFontOfSize:15.0],GADTNativeTemplateStyleKeyCallToActionFontColor:UIColor.whiteColor,GADTNativeTemplateStyleKeyCallToActionBackgroundColor:[GADTTemplateViewcolorFromHexString:myBlueColor],GADTNativeTemplateStyleKeySecondaryFont:[UIFontsystemFontOfSize:15.0],GADTNativeTemplateStyleKeySecondaryFontColor:UIColor.grayColor,GADTNativeTemplateStyleKeySecondaryBackgroundColor:UIColor.whiteColor,GADTNativeTemplateStyleKeyPrimaryFont:[UIFontsystemFontOfSize:15.0],GADTNativeTemplateStyleKeyPrimaryFontColor:UIColor.blackColor,GADTNativeTemplateStyleKeyPrimaryBackgroundColor:UIColor.whiteColor,GADTNativeTemplateStyleKeyTertiaryFont:[UIFontsystemFontOfSize:15.0],GADTNativeTemplateStyleKeyTertiaryFontColor:UIColor.grayColor,GADTNativeTemplateStyleKeyTertiaryBackgroundColor:UIColor.whiteColor,GADTNativeTemplateStyleKeyMainBackgroundColor:UIColor.whiteColor,GADTNativeTemplateStyleKeyCornerRadius:[NSNumbernumberWithFloat:7.0],};templateView.styles=styles;//STEP6:Settheadforyourtemplatetorender.templateView.nativeAd=nativeAd;//STEP7(Optional):Ifyou'd like your template view to span the width of your//superviewcallthismethod.[templateViewaddHorizontalConstraintsToSuperviewWidth];[templateViewaddVerticalCenterConstraintToSuperview];
Clés du dictionnaire de style
Le moyen le plus rapide de personnaliser vos modèles consiste à créer un dictionnaire avec les clés suivantes :
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;
Questions fréquentes
Pourquoi une exception s'affiche-t-elle lorsque j'essaie d'instancier l'objet de modèle ?
Cela peut se produire si vous avez modifié la taille de la vue dans le fichier xib, mais pas celle du cadre créé dans la méthode "setup" de la sous-classe.
Comment puis-je personnaliser davantage ces modèles ?
Ces modèles ne sont que des xibs avec des objets de vue associés, comme tout autre xib et classe de vue personnalisée que vous avez peut-être l'habitude d'utiliser dans le développement iOS.
Si vous préférez créer vos annonces natives de A à Z, consultez notre guide sur le format natif avancé.
Pourquoi mes styles ne sont-ils pas mis à jour lorsque je les définis dans le fichier xib ?
Nous remplaçons actuellement tous les styles xib par le dictionnaire de styles par défaut dans GADTTemplateView.m.
Contribuer
Nous avons créé des modèles natifs pour vous aider à développer rapidement des annonces natives.
Nous serions ravis de vous voir contribuer à notre dépôt GitHub pour ajouter de nouveaux modèles ou fonctionnalités. Envoyez-nous une demande d'extraction et nous l'examinerons.
Sauf indication contraire, le contenu de cette page est régi par une licence Creative Commons Attribution 4.0, et les échantillons de code sont régis par une licence Apache 2.0. Pour en savoir plus, consultez les Règles du site Google Developers. Java est une marque déposée d'Oracle et/ou de ses sociétés affiliées.
Dernière mise à jour le 2025/09/02 (UTC).
[[["Facile à comprendre","easyToUnderstand","thumb-up"],["J'ai pu résoudre mon problème","solvedMyProblem","thumb-up"],["Autre","otherUp","thumb-up"]],[["Il n'y a pas l'information dont j'ai besoin","missingTheInformationINeed","thumb-down"],["Trop compliqué/Trop d'étapes","tooComplicatedTooManySteps","thumb-down"],["Obsolète","outOfDate","thumb-down"],["Problème de traduction","translationIssue","thumb-down"],["Mauvais exemple/Erreur de code","samplesCodeIssue","thumb-down"],["Autre","otherDown","thumb-down"]],["Dernière mise à jour le 2025/09/02 (UTC)."],[[["\u003cp\u003eNative Templates offer pre-built layouts for native ads, enabling quick implementation and customization for a better user experience within iOS apps.\u003c/p\u003e\n"],["\u003cp\u003eTwo template sizes, small and medium, are available, designed for various ad placements like in-feed ads or landing pages, and can be easily integrated using provided code snippets.\u003c/p\u003e\n"],["\u003cp\u003eTemplates can be further personalized by adjusting font, color, and background styles using a styles dictionary with specific keys for different ad elements.\u003c/p\u003e\n"],["\u003cp\u003eTo utilize the templates, developers need to download the provided zip file, add it to their Xcode project, and follow the step-by-step instructions for implementation and customization.\u003c/p\u003e\n"],["\u003cp\u003eDevelopers can explore the GitHub repository to contribute new templates or features, enhancing the Native Templates offering for iOS native ads.\u003c/p\u003e\n"]]],["Native Templates are pre-designed, customizable views for native ads in iOS apps, available for download from GitHub. Two sizes, small (`GADTSmallTemplateView`) and medium (`GADTMediumTemplateView`), are provided, with default and scalable dimensions. To use, download the templates, import them into your project, initialize a template view object, set it as a subview, optionally define a styles dictionary for font and color customization, assign the native ad, and add constraints for width scaling. Style settings in the xib are overridden.\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-ios-native-templates)\n| **Key Point:** Before continuing, know how to [load a native\n| ad](/admob/ios/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 TableView used in a news feed, in a dialog, or anywhere else\nin your app.\n| **Note:** If you're interested in designing your own native layouts from scratch, return to the [Native Advanced](/admob/ios/native/advanced) documentation instead.\n\nThis guide will show you how to download, include, and use Native Templates in\nyour iOS apps. It assumes you've already successfully used the SDK to load a\nnative ad.\n\nTemplate sizes\n\nThere are two template sizes: small and medium. Each template is represented\nby a class. The classes are `GADTSmallTemplateView` and\n`GADTMediumTemplateView`. Both classes extend `GADTTemplateView`. Both\ntemplates have a fixed aspect ratio, which will scale to fill the width of\ntheir parent views only if you call `addHorizontalConstraintsToSuperviewWidth`.\nIf you don't call `addHorizontalConstraintsToSuperviewWidth`, each template\nwill render its default size.\n\nGADTSmallTemplateView\n\nThe small template is ideal for `UICollectionView` or `UITableView` cells. For\ninstance you could use it for in-feed ads, or anywhere you need a thin\nrectangular ad view. The default size of this template is 91 points high by 355\npoints wide.\n\nGADTMediumTemplateView\n\nThe medium template is meant to be a 1/2 to 3/4-page view. This is good for\nlanding or splash pages, but can also be included in `UITableViews`. The\ndefault size of this template is 370 points high by 355 points wide.\n\nAll of our templates support autolayout, so feel free to experiment with\nplacement. Of course, you can also change the source code and xib files to\nsuit your requirements.\n\nInstalling the native ad templates\n\nTo install the Native Templates, simply download the zip and drag it into your\nXcode project. Make sure you check **Copy items if needed**.\n\nUsing the native ad templates\n\nOnce you've added the folder to your project and included the relevant class in\nyour file, follow this recipe to use a template. Note that the only way\nto change font and style properties is using the styles dictionary---we\ncurrently override any style set in the xib itself.\n\nObjective-C \n\n```python\n/// Step 1: Import the templates that you need.\n#import \"NativeTemplates/GADTSmallTemplateView.h\"\n#import \"NativeTemplates/GADTTemplateView.h\"\n...\n\n// STEP 2: Initialize your template view object.\nGADTSmallTemplateView *templateView =\n [[NSBundle mainBundle] loadNibNamed:@\"GADTSmallTemplateView\" owner:nil options:nil]\n .firstObject;\n\n// STEP 3: Template views are just GADNativeAdViews.\n_nativeAdView = templateView;\nnativeAd.delegate = self;\n\n// STEP 4: Add your template as a subview of whichever view you'd like.\n// This must be done before calling addHorizontalConstraintsToSuperviewWidth.\n// Please note: Our template objects are subclasses of GADNativeAdView so\n// you can insert them into whatever type of view you'd like, and don't need to\n// create your own.\n[self.view addSubview:templateView];\n\n// STEP 5 (Optional): Create your styles dictionary. Set your styles dictionary\n// on the template property. A default dictionary is created for you if you do\n// not set this. Note - templates do not currently respect style changes in the\n// xib.\n\nNSString *myBlueColor = @\"#5C84F0\";\nNSDictionary *styles = @{\n GADTNativeTemplateStyleKeyCallToActionFont : [UIFont systemFontOfSize:15.0],\n GADTNativeTemplateStyleKeyCallToActionFontColor : UIColor.whiteColor,\n GADTNativeTemplateStyleKeyCallToActionBackgroundColor :\n [GADTTemplateView colorFromHexString:myBlueColor],\n GADTNativeTemplateStyleKeySecondaryFont : [UIFont systemFontOfSize:15.0],\n GADTNativeTemplateStyleKeySecondaryFontColor : UIColor.grayColor,\n GADTNativeTemplateStyleKeySecondaryBackgroundColor : UIColor.whiteColor,\n GADTNativeTemplateStyleKeyPrimaryFont : [UIFont systemFontOfSize:15.0],\n GADTNativeTemplateStyleKeyPrimaryFontColor : UIColor.blackColor,\n GADTNativeTemplateStyleKeyPrimaryBackgroundColor : UIColor.whiteColor,\n GADTNativeTemplateStyleKeyTertiaryFont : [UIFont systemFontOfSize:15.0],\n GADTNativeTemplateStyleKeyTertiaryFontColor : UIColor.grayColor,\n GADTNativeTemplateStyleKeyTertiaryBackgroundColor : UIColor.whiteColor,\n GADTNativeTemplateStyleKeyMainBackgroundColor : UIColor.whiteColor,\n GADTNativeTemplateStyleKeyCornerRadius : [NSNumber numberWithFloat:7.0],\n};\n\ntemplateView.styles = styles;\n\n// STEP 6: Set the ad for your template to render.\ntemplateView.nativeAd = nativeAd;\n\n// STEP 7 (Optional): If you'd like your template view to span the width of your\n// superview call this method.\n[templateView addHorizontalConstraintsToSuperviewWidth];\n[templateView addVerticalCenterConstraintToSuperview];\n```\n\nStyle dictionary keys\n\nThe fastest way to customize your templates is to make a dictionary with the\nfollowing keys:\n\nObjective-C \n\n```scilab\n/// Call to action font. Expects a UIFont.\nGADTNativeTemplateStyleKeyCallToActionFont\n\n/// Call to action font color. Expects a UIColor.\nGADTNativeTemplateStyleKeyCallToActionFontColor;\n\n/// Call to action background color. Expects a UIColor.\nGADTNativeTemplateStyleKeyCallToActionBackgroundColor;\n\n/// The font, font color and background color for the first row of text in the\n/// template.\n\n/// All templates have a primary text area which is populated by the native ad's\n/// headline.\n\n/// Primary text font. Expects a UIFont.\nGADTNativeTemplateStyleKeyPrimaryFont;\n\n/// Primary text font color. Expects a UIFont.\nGADTNativeTemplateStyleKeyPrimaryFontColor;\n\n/// Primary text background color. Expects a UIColor.\nGADTNativeTemplateStyleKeyPrimaryBackgroundColor;\n\n/// The font, font color and background color for the second row of text in the\n/// template.\n\n/// All templates have a secondary text area which is populated either by the\n/// body of the ad, or by the rating of the app.\n\n/// Secondary text font. Expects a UIFont.\nGADTNativeTemplateStyleKeySecondaryFont;\n\n/// Secondary text font color. Expects a UIColor.\nGADTNativeTemplateStyleKeySecondaryFontColor;\n\n/// Secondary text background color. Expects a UIColor.\nGADTNativeTemplateStyleKeySecondaryBackgroundColor;\n\n/// The font, font color and background color for the third row of text in the\n/// template. The third row is used to display store name or the default\n/// tertiary text.\n\n/// Tertiary text font. Expects a UIFont.\nGADTNativeTemplateStyleKeyTertiaryFont;\n\n/// Tertiary text font color. Expects a UIColor.\nGADTNativeTemplateStyleKeyTertiaryFontColor;\n\n/// Tertiary text background color. Expects a UIColor.\nGADTNativeTemplateStyleKeyTertiaryBackgroundColor;\n\n/// The background color for the bulk of the ad. Expects a UIColor.\nGADTNativeTemplateStyleKeyMainBackgroundColor;\n\n/// The corner rounding radius for the icon view and call to action. Expects an\n/// NSNumber.\nGADTNativeTemplateStyleKeyCornerRadius;\n```\n\nFAQs\n\nWhy do I get an exception when I try to instantiate the template object?\n: This can happen if you've changed the size of the view in the xib file but\n haven't changed the size of the frame created in the \"setup\" method of the\n subclass.\n\nHow can I further customize these templates?\n: These templates are just xibs with associated view objects, like any other\n xib and custom view class you may be used to from iOS development.\n If you prefer to build your native ads from scratch, see our\n [Native Advanced guide](/admob/ios/native/advanced).\n\nWhy aren't my styles updating when I set them in the xib?\n: We currently override all xib styles by the default styles dictionary in\n `GADTTemplateView.m`.\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-ios-native-templates)\nrepo to add new templates or features. Send us a pull request and we'll take a\nlook."]]