Una variazione del layout si verifica quando un elemento visibile nella pagina cambia posizione o dimensione, influenzando la posizione dei contenuti circostanti. A volte è intenzionale, ad esempio quando un container si espande in seguito a un'azione dell'utente. Tuttavia, la natura dinamica degli annunci può portare a variazioni del layout impreviste, che hanno un effetto negativo sull'esperienza utente e possono causare gravi problemi di usabilità.
Questa guida spiega come misurare e ridurre al minimo la variazione del layout quando si lavora con i tag publisher di Google (GPT).
In che modo gli annunci causano una variazione del layout
In genere, gli annunci vengono richiesti in modo asincrono e dinamico aggiungendo contenuti alla pagina durante o dopo il caricamento della pagina. Durante il recupero degli annunci, il resto della pagina continua a essere caricato e i contenuti diversi dagli annunci potrebbero diventare visibili all'utente. Se non riservi uno spazio sufficiente per il caricamento degli annunci, questi potrebbero sostituire i contenuti visibili non pubblicitari quando vengono aggiunti alla pagina.
Quando lavori con i tag publisher di Google, in alcuni punti del ciclo di vita degli annunci può verificarsi una variazione del layout:
- Quando viene chiamato
display(). Un'area può espandersi o comprimersi, a seconda della configurazione. - Quando viene visualizzato il contenuto dell'annuncio. Un'area può essere ridimensionata se viene pubblicato un annuncio flessibile o se lo spazio disponibile è insufficiente. A questo punto, un'area può anche espandersi o comprimersi, a seconda della configurazione.
- Dopo il rendering del contenuto dell'annuncio. Alcuni tipi di creatività sono progettati per espandersi dopo essere stati visualizzati sulla pagina.
Tieni presente che più in alto l'area annuncio si trova all'interno dell'area visibile, maggiore sarà la possibilità di spostare i contenuti. Presta particolare attenzione alle aree vicine alla parte superiore dell'area visibile iniziale (above the fold). Queste aree possono causare una quantità sproporzionata di variazioni del layout perché hanno maggiori probabilità di essere visibili quando vengono caricati i contenuti dell'annuncio.
Misurazione della variazione del layout
Cumulative Layout Shift (CLS) è una metrica Core Web Vitals che puoi utilizzare per quantificare l'impatto delle variazioni di layout sul tuo sito, sia nel lab che sul campo.
Nel laboratorio
Gli strumenti del lab misurano la metrica CLS in modo sintetico. Ciò significa che non si basano sull'interazione con l'utente reale, il che le rende adatte all'utilizzo nell'integrazione continua e nei flussi di lavoro di sviluppo locale. Tuttavia, questi strumenti di solito misurano le prestazioni solo durante il caricamento della pagina e sono limitati nelle condizioni che possono simulare, pertanto i valori dei report potrebbero essere inferiori a quelli che sperimenterebbero un utente reale.
Controlli degli annunci dei publisher per Lighthouse è uno strumento che può essere utilizzato per misurare la metrica CLS specificamente attribuibile agli annunci GPT. Per i dettagli, consulta la documentazione relativa all'audit Ridurre la variazione del layout relativo agli annunci.
Chrome DevTools può essere configurato anche per evidenziare le variazioni di layout durante la navigazione nel sito. Questa funzionalità può essere utilizzata per identificare manualmente le variazioni di layout che si verificano vicino alle aree annuncio nella pagina.
Sul campo
Gli strumenti sul campo misurano il CLS riscontrato da utenti reali mentre interagiscono con il tuo sito. Questo processo è comunemente noto come monitoraggio degli utenti reali (RUM). RUM consente di osservare in che modo la CLS è influenzata da fattori reali, come funzionalità del dispositivo, condizioni di rete, interazione dell'utente e personalizzazione delle pagine, che sono spesso difficili o impossibili da simulare con i test sintetici.
Ridurre al minimo la variazione del layout
L'unico modo garantito per evitare la variazione del layout è prenotare una quantità di spazio sufficiente per una determinata area annuncio utilizzando CSS. Il modo più efficace per farlo è impostare altezza e larghezza fisse direttamente nell'area annuncio div. Tuttavia, anche se funziona bene per aree annuncio statiche a dimensioni fisse, gli scenari più complessi potrebbero richiedere un approccio più specifico. Nelle sezioni seguenti vengono descritti alcuni scenari comuni.
Aree annuncio a più dimensioni
Per le aree annuncio che accettano più dimensioni, consigliamo uno dei seguenti approcci:
- Riserva spazio per la dimensione più grande configurata per la pubblicazione.
- Riserva spazio per la dimensione più piccola configurata per la pubblicazione.
- Riserva lo spazio per la dimensione con maggiore probabilità di pubblicazione, determinata esaminando i dati di riempimento storici nei report di Google Ad Manager.
Scegliere l'approccio giusto
Prenotare lo spazio per le dimensioni più grandi configurate per la pubblicazione è il modo più efficace per eliminare le variazioni del layout. Tuttavia, questo metodo può generare spazio vuoto aggiuntivo intorno all'annuncio, nel caso in cui venga pubblicata una creatività di dimensioni inferiori a quelle riservate. Restringere l'area annuncio in modo che corrisponda alle dimensioni della creatività pubblicata comporterebbe un'ulteriore variazione del layout, quindi è consigliabile evitare questa operazione. Al contrario, puoi utilizzare la centratura verticale e orizzontale per ridurre l'impatto visivo dello spazio vuoto in eccesso.
D'altra parte, riservare spazio per la dimensione più piccola configurata in modo da pubblicare consente di evitare l'eccesso di spazio vuoto attorno all'annuncio. Questa opzione può essere una buona soluzione se l'area annuncio viene solitamente riempita con creatività più piccole o se tutte le dimensioni supportate dall'area annuncio sono simili. Tuttavia, questo metodo determina una variazione del layout nel caso in cui venga pubblicata una creatività più grande di quella riservata (sebbene queste variazioni siano generalmente inferiori rispetto alla mancata prenotazione di spazio).
Per trovare un equilibrio tra spazio vuoto e variazioni del layout, puoi prenotare una quantità "media" di spazio per le tue aree annuncio. Ad esempio, la prenotazione di 100px
in verticale comporta un piccolo spazio vuoto quando viene pubblicata una creatività 320x50, ma
riduce il punteggio CLS rispetto alla prenotazione dello spazio. Per trovare il miglior equilibrio per il tuo sito, dovrai
sperimentare con dimensioni diverse.
Per decidere quanto spazio prenotare per una determinata area, l'esame dei dati di riempimento storici dei report di Google Ad Manager può aiutarti a prendere una decisione più informata. Questo può essere illustrato al meglio esaminando alcuni esempi.
Esempio 1
| Dimensioni della creatività (pubblicata) | (%) impressioni dell'ad server |
|---|---|
300x250 |
70% |
320x50 |
30% |
In questo caso, la prenotazione di 250px verticalmente può ridurre notevolmente la CLS poiché la
maggior parte delle creatività pubblicate è 300x250.
Esempio 2
| Dimensioni della creatività (pubblicata) | (%) impressioni dell'ad server |
|---|---|
970x90 |
60% |
728x90 |
10% |
320x50 |
20% |
728x250 |
5% |
300x250 |
5% |
In questo caso, la maggior parte degli annunci ha un'altezza massima di 90px, quindi riservando 90px
verticalmente si dovrebbe evitare una variazione del layout la maggior parte delle volte.
Come prenotare uno spazio
Ti consigliamo di risolvere questo problema specificando le dimensioni dell'area annuncio tramite le proprietà CSS min-height e min-width:
<div id="ad-slot" style="min-width: 300px; min-height: 250px;"></div>
L'utilizzo degli attributi min-height e min-width ti consente di riservare una quantità minima di spazio per l'area annuncio, consentendo comunque al browser di aumentare le dimensioni del contenitore, se necessario. Ciò garantisce che nessun contenuto venga tagliato nell'evento in cui viene pubblicata una creatività più grande.
Puoi combinare questa tecnica con le query supporti CSS per specificare valori minimi diversi per dimensioni dello schermo diverse:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
Evita di prenotare spazio con JavaScript, poiché ciò può causare una variazione del layout nel momento in cui viene caricato lo script. La prenotazione di spazio con CSS evita questo rischio.
Aree annunci flessibili
Le aree annuncio flessibili non specificano un insieme fisso di dimensioni supportate. Queste aree vengono ridimensionate automaticamente per adattarsi ai contenuti delle creatività pubblicati, consentendo loro di supportare creatività di dimensioni indeterminate. Di conseguenza, non è possibile riservare spazio per queste aree prima di richiedere il contenuto dell'annuncio e gli annunci di dimensioni flessibili causano sempre variazioni del layout.
Per mitigare gli effetti delle variazioni del layout quando lavori con aree annuncio flessibili, ti consigliamo di quanto segue:
- Utilizza la dimensione
fluidsoltanto per le aree below the fold. - Recupera aree flessibili il prima possibile per ridurre al minimo la possibilità che un utente le faccia scorrere per visualizzarle prima che l'area venga ridimensionata.
Comprimere ed espandere le aree annuncio
Il metodo collapseEmptyDivs() consente di
comprimere i div delle aree annuncio in modo che non occupino spazio nella pagina quando
non sono presenti contenuti dell'annuncio da visualizzare. Questa funzionalità va usata con cautela, poiché può introdurre variazioni del layout indesiderate. Come indicato nella sezione precedente, la compressione e l'espansione delle aree annuncio possono causare variazioni del layout in due punti diversi del ciclo di vita dell'annuncio.
Se hai bisogno di utilizzare questa funzionalità, puoi ridurre l'impatto delle variazioni di layout utilizzando i dati di riempimento storici dei report di Ad Manager per implementare le seguenti best practice:
- Le aree che hanno maggiori probabilità di essere riempite devono sempre iniziare con espanse.
- Le aree che è improbabile che vengano riempite devono sempre iniziare compresse.
Per un esempio di implementazione, consulta l'articolo Comprimi aree annuncio vuote.