Guida al layout delle inserzioni di Audience Network per iOS

Quando un'inserzione è visibile sullo schermo, mantenerne una parte coperta da barre di navigazione, barre delle tab, barre degli strumenti e altre visualizzazioni dei predecessori non consente un'esperienza utente ottimale. L'esempio sotto a sinistra mostra un'inserzione visualizzata nella parte superiore dello schermo dell'iPhone X e parzialmente coperta dal bordo superiore. L'esempio a destra mostra un design migliore con la giusta quantità di spazio tra il bordo superiore dello schermo dell'iPhone X e la visualizzazione dell'inserzione.

iOS 11 e versioni successive hanno introdotto una nuova guida al layout chiamata safeAreaLayoutGuide, che verrà utilizzata per definire un'area sicura in cui disegnare il contenuto dell'app, compresa l'inserzione che si desidera visualizzare sullo schermo. L'area sicura è definita dal riquadro verde nell'esempio in alto. Utilizzando questa nuova guida al layout, esaminiamo l'implementazione tecnica del rendering di un'inserzione nativa nella tua app. Puoi adottare lo stesso metodo per il rendering di banner.

Prerequisiti

Assicurati di aver completato l'esempio di inserzione nativa, banner nativo o banner.

iOS 11+: guida al layout dell'area sicura

Versioni iOS precedenti: guida al layout superiore e inferiore

iOS 11+: guida al layout dell'area sicura

1. Se la tua app utilizza Interface Builder con Xcode 9+ e targetizzazione per iOS 11+, devi abilitare le guide al layout dell'area sicura. Apri il tuo Interface Builder e clicca sulla scena del controller della visualizzazione. Vedrai le opzioni del documento di Interface Builder sulla destra. Seleziona Use Safe Area Layout Guides (Usa guide al layout dell'area sicura).
   
   
2. Seleziona Ad UI view (Visualizzazione interfaccia utente inserzioni) in View Controller Scene (Scena del controller della visualizzazione) e vai a Size Inspector. Aggiungi la spaziatura a sinistra, a destra, in alto e in basso tra il layout di sicurezza e assegna valori di spaziatura ottimali come mostrato di seguito:
   
   
3. Crea ed esegui la tua app: vedrai l'inserzione mostrata sullo schermo con uno spazio ottimale tra l'angolo arrotondato, i sensori e la barra di stato sullo schermo.
   
   

Versioni iOS precedenti: guida al layout superiore e inferiore

1. Per supportare le versioni iOS precedenti a iOS 11, usa la guida al layout superiore e inferiore per risolvere il problema dell'area sicura. Assicurati che le guide al layout superiore e inferiore siano incluse in View Controller Scene (Scena del controller della visualizzazione) come mostrato di seguito:
   
   
2. Seleziona Ad UI view (Visualizzazione interfaccia utente inserzioni) in View Controller Scene (Scena del controller della visualizzazione) e vai a Size Inspector. Aggiungi la spaziatura in alto e in basso tra il layout superiore e inferiore e assegna valori di spaziatura ottimali come mostrato di seguito:
   
   

Conformità ai criteri delle inserzioni native

Per poter creare un prodotto di qualità, gli sviluppatori devono rispettare la Normativa di Audience Network di Meta ogni volta che viene implementato il layout delle inserzioni native o dei banner nativi. Devi sempre dare agli utenti il pieno controllo sul clic. Soprattutto per gli elementi cliccabili nell'inserzione, devi assicurarti che solo i titoli, gli URL, le call to action e le risorse di immagine delle inserzioni siano cliccabili. Inoltre, lo spazio bianco nel testo del titolo o nelle visualizzazioni delle immagini non deve essere cliccabile.

Esempio di configurazione errata degli elementi cliccabili

Ogni volta che sviluppi il layout per un'inserzione nativa o un banner nativo, non devi utilizzare larghezza e altezza fisse per UILabel in modo da evitare la presenza di white space nel titolo, nel corpo, nel contesto social e nell'etichetta sponsorizzata dell'inserzione. Sotto è riportato un esempio di quello che non dovresti mai fare:

Esempio di configurazione corretta degli elementi cliccabili

Per creare un'inserzione nativa di qualità, sviluppa un layout di vincolo dinamico per un'inserzione nativa o un banner nativo. Ad esempio, se utilizzi il layout automatico dello storyboard, potresti usare Trailing Space >= x invece di Trailing Space = x o Width <= y invece di Width = y. Sotto puoi vedere come dovrebbe apparire il layout se rispetti la Normativa di Audience Network di Meta: