Modelli di annunci nativi

Scarica modelli nativi

Punto chiave: prima di continuare, scopri come caricare un annuncio nativo. Scopri di più sugli annunci nativi nel nostro playbook.

Con gli annunci nativi puoi personalizzare i tuoi annunci, in modo da migliorare l'esperienza utente. Esperienze utente migliori possono aumentare il coinvolgimento e migliorare il tuo rendimento complessivo.

Per ottenere il massimo dagli annunci nativi, è importante definire lo stile dei layout degli annunci in modo che sembrino un'estensione naturale dell'app. Per aiutarti a iniziare, abbiamo creato i modelli nativi.

I modelli nativi sono visualizzazioni complete di codice per gli annunci nativi, progettate per un'implementazione rapida e una facile modifica. Con i modelli nativi, puoi implementare il tuo primo annuncio nativo in pochi minuti e personalizzare rapidamente l'aspetto senza dover scrivere molto codice. Puoi posizionare questi modelli dove preferisci, ad esempio in una TableView utilizzata in un feed di notizie, in una finestra di dialogo o in qualsiasi altro punto della tua app.

Nota: se vuoi progettare i tuoi layout nativi da zero, rivolgiti alla documentazione relativa ai layout nativi avanzati.

Questa guida ti mostrerà come scaricare, includere e utilizzare i modelli nativi nelle tue app per iOS. Si presuppone che tu abbia già utilizzato correttamente l'SDK per caricare un annuncio nativo.

Dimensioni modello

Esistono due dimensioni dei modelli: piccola e media. Ogni modello è rappresentato da una classe. Le classi sono GADTSmallTemplateView e GADTMediumTemplateView. Entrambe le classi sono valide per GADTTemplateView. Entrambi i modelli hanno un'area immagine fissa, che viene ridimensionata per riempire la larghezza delle visualizzazioni principali solo se chiami addHorizontalConstraintsToSuperviewWidth. Se non chiami addHorizontalConstraintsToSuperviewWidth, ogni modello verrà eseguito con le sue dimensioni predefinite.

GADTSmallTemplateView

Il modello piccolo è ideale per le celle UICollectionView o UITableView. Ad esempio, puoi utilizzarlo per gli annunci in-feed o ovunque sia necessaria una visualizzazione dell'annuncio rettangolare sottile. Le dimensioni predefinite di questo modello sono 91 punti di altezza e 355 punti di larghezza.

GADTMediumTemplateView

Il modello medio è pensato per una visualizzazione di 1/2-3/4 di pagina. È ideale per le pagine di destinazione o di apertura, ma può essere incluso anche in UITableViews. Le dimensioni predefinite di questo modello sono 370 punti di altezza e 355 punti di larghezza.

Tutti i nostri modelli supportano il layout automatico, quindi non esitare a sperimentare con il posizionamento. Naturalmente, puoi anche modificare il codice sorgente e i file xib in base alle tue esigenze.

Installazione dei modelli di annunci nativi

Per installare i modelli nativi, scarica il file ZIP e trascinalo nel progetto Xcode. Assicurati di selezionare Copia elementi se necessario.

Utilizzo dei modelli di annunci nativi

Dopo aver aggiunto la cartella al progetto e incluso la classe pertinente nel file, segui questa ricetta per utilizzare un modello. Tieni presente che l'unico modo per modificare le proprietà di carattere e stile è utilizzare il dizionario di stili. Al momento, abbiamo sostituito qualsiasi stile impostato nel file xib stesso.

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

Chiavi del dizionario di stili

Il modo più rapido per personalizzare i modelli è creare un dizionario con le seguenti chiavi:

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;

Domande frequenti

Perché ricevo un'eccezione quando cerco di creare un'istanza dell'oggetto modello?

Questo può accadere se hai modificato le dimensioni della vista nel file xib, ma non hai modificato le dimensioni del frame creato nel metodo "setup" della sottoclasse.

Come faccio a personalizzare ulteriormente questi modelli?

Questi modelli sono solo xib con oggetti di visualizzazione associati, come qualsiasi altro xib e classe di visualizzazione personalizzata che potresti utilizzare per lo sviluppo per iOS. Se preferisci creare gli annunci nativi da zero, consulta la nostra guida sul formato nativo avanzato.

Perché i miei stili non vengono aggiornati quando li imposto nel xib?

Al momento, sostituiamo tutti gli stili xib con il dizionario di stili predefinito in GADTTemplateView.m.

Contribuisci

Abbiamo creato modelli di annunci nativi per aiutarti a sviluppare rapidamente annunci nativi. Sarebbe fantastico se potessi contribuire al nostro repo GitHub aggiungendo nuovi modelli o funzionalità. Inviaci una richiesta di pull e daremo un'occhiata.