Modelli nativi

Scarica modelli nativi

Punto chiave: prima di continuare, scopri come caricare un annuncio nativo.

Con gli annunci nativi puoi personalizzare gli annunci migliorando l'esperienza utente. Esperienze utente migliori possono aumentare il coinvolgimento e migliorare il rendimento complessivo.

Per ottenere il massimo dagli annunci nativi, è importante applicare uno stile ai layout degli annunci in modo che sembrino un'estensione naturale della tua 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 personalizzarne rapidamente l'aspetto senza molto codice. Puoi posizionare questi modelli ovunque tu voglia, ad esempio in un oggetto TableView usato in un feed di notizie, in una finestra di dialogo o in qualsiasi altro punto dell'app.

Nota: se ti interessa progettare i tuoi layout nativi da zero, torna alla documentazione sugli annunci nativi avanzati.

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

Dimensioni modello

Esistono due dimensioni per i modelli: piccola e media. Ogni modello è rappresentato da una classe. I corsi sono GADTSmallTemplateView e GADTMediumTemplateView. Entrambe le classi estendono GADTTemplateView. Entrambi i modelli hanno proporzioni fisse, che verranno ridimensionate per riempire la larghezza delle viste principali solo se chiami addHorizontalConstraintsToSuperviewWidth. Se non richiami addHorizontalConstraintsToSuperviewWidth, ogni modello mostrerà le dimensioni predefinite.

GADTSmallTemplateView

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

GADTMediumTemplateView

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

Tutti i nostri modelli supportano il layout automatico, quindi ti invitiamo a fare delle prove con il posizionamento. Ovviamente puoi anche modificare il codice sorgente e i file xib per adattarli alle tue esigenze.

Installare i 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.

Utilizzare i modelli di annunci nativi

Dopo aver aggiunto la cartella al progetto e incluso la classe pertinente nel file, segui questa formula per utilizzare un modello. Tieni presente che l'unico modo per modificare le proprietà di carattere e stile è tramite il dizionario degli stili: al momento sostituiamo qualsiasi stile impostato nell'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];

Applicare uno stile alle chiavi dizionario

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 provo a creare un'istanza dell'oggetto modello?

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

Come posso personalizzare ulteriormente questi modelli?

Questi modelli sono solo xib a cui sono associati oggetti View, come qualsiasi altra classe di visualizzazione personalizzata e xib a cui potresti abituare dallo sviluppo iOS. Se preferisci creare annunci nativi da zero, consulta la nostra guida sugli annunci nativi avanzati.

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

Al momento eseguiamo l'override di tutti gli stili xib dal dizionario degli stili predefinito in GADTTemplateView.m.

Contribuisci

Abbiamo creato i modelli nativi per aiutarti a sviluppare rapidamente annunci nativi. Ci piacerebbe che partecipassi al nostro repository GitHub per aggiungere nuovi modelli o funzionalità. Inviaci una richiesta di pull e controlleremo.