Modèles d'annonces natives

Télécharger des modèles natifs

Important : Avant de continuer, vous devez savoir comment charger une annonce native. Pour en savoir plus sur ce type d'annonce, consultez notre playbook sur les annonces natives.

Les annonces natives vous permettent de personnaliser vos annonces, ce qui améliore l'expérience utilisateur. Une meilleure expérience utilisateur peut augmenter l'engagement et améliorer votre rendement global.

Pour tirer le meilleur parti des annonces natives, il est important de styliser vos mises en page d'annonces afin qu'elles paraissent être une extension naturelle de votre application. Pour vous aider à vous lancer, nous avons créé des modèles natifs.

Les modèles natifs sont des vues complètes du code de vos annonces natives, conçues pour une implémentation rapide et une modification facile. Grâce aux modèles natifs, vous pouvez intégrer votre première annonce native en quelques minutes et personnaliser rapidement son apparence sans trop de code. Vous pouvez placer ces modèles n'importe où, par exemple dans une TableView utilisée dans un flux d'actualités, dans une boîte de dialogue ou ailleurs dans votre application.

Remarque : Si vous souhaitez concevoir vos propres mises en page natives à partir de zéro, revenez plutôt à la documentation Native Advanced.

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 ne s'ajustera à la largeur de leurs vues parentes que si vous appelez addHorizontalConstraintsToSuperviewWidth. Si vous n'appelez pas addHorizontalConstraintsToSuperviewWidth, chaque modèle affiche 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 les 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 haut sur 355 points de large.

GADTMediumTemplateView

Le modèle moyen est conçu pour une vue d'une demi-page à trois quarts de page. Cette valeur est utile pour les pages de destination ou de garde, 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 entendu, vous pouvez également modifier le code source et les fichiers xib en fonction de 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. Veillez à 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 procédure pour utiliser un modèle. Notez que le seul moyen 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

/// 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];

Mettre en forme les clés du dictionnaire

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 que vous n'avez pas modifié la taille du frame 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 fichiers xib avec des objets de vue associés, comme tout autre fichier xib et classe de vue personnalisée que vous connaissez peut-être du développement iOS. Si vous préférez créer vos annonces natives à partir de zéro, consultez notre guide sur le format natif avancé.

Pourquoi mes styles ne se mettent-ils pas à jour lorsque je les définis dans Xib ?

Nous remplaçons actuellement tous les styles xib par le dictionnaire des styles par défaut dans GADTTemplateView.m.

Contribuer

Nous avons conçu 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.