Modelli nativi

Seleziona la piattaforma: Android iOS Flutter

Scaricare i modelli nativi

Utilizzando gli annunci nativi puoi personalizzare gli annunci, ottenendo un'esperienza utente migliore. Un'esperienza utente migliore può aumentare il coinvolgimento e migliorare il rendimento complessivo.

Per ottenere il massimo dagli annunci nativi, è importante definire lo stile dei 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 del codice per i tuoi 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 ovunque tu voglia, ad esempio in una TableView utilizzata in un feed di notizie, in una finestra di dialogo o in qualsiasi altro punto della tua app.

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

Dimensioni dei modelli

Esistono due dimensioni del modello: piccola e media. Ogni modello è rappresentato da una classe. Le classi sono GADTSmallTemplateView e GADTMediumTemplateView. Entrambe le classi estendono GADTTemplateView. Entrambi i modelli hanno proporzioni fisse, che vengono scalate per riempire la larghezza delle relative visualizzazioni principali solo se chiami addHorizontalConstraintsToSuperviewWidth. Se non chiami addHorizontalConstraintsToSuperviewWidth, ogni modello renderizzerà le dimensioni predefinite.

GADTSmallTemplateView

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

GADTMediumTemplateView

Il modello medio è pensato per una visualizzazione di pagina da metà a tre quarti. È ideale per le pagine di destinazione o di caricamento, ma può essere incluso anche in UITableViews. Le dimensioni predefinite di questo modello sono 370 punti di altezza per 355 punti di larghezza.

Tutti i nostri modelli supportano il layout automatico, quindi puoi sperimentare 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

Una volta aggiunta la cartella al progetto e inclusa 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 degli stili. Al momento ignoriamo 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 stile

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?
Ciò può accadere se hai modificato le dimensioni della visualizzazione nel file xib, ma non hai modificato le dimensioni del frame creato nel metodo "setup" della sottoclasse.
Come posso 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 aver utilizzato nello sviluppo per iOS. Se preferisci creare i tuoi annunci nativi da zero, consulta la nostra guida al formato nativo avanzato.
Perché i miei stili non vengono aggiornati quando li imposto nel file XIB?
Attualmente eseguiamo l'override di tutti gli stili xib con il dizionario degli stili predefiniti in GADTTemplateView.m.

Contribuisci

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