Una variazione del layout si verifica quando un elemento visibile sulla pagina cambia posizione o dimensione, influenzando la posizione dei contenuti circostanti. A volte lo spostamento è intenzionale, ad esempio quando un contenitore si espande a seguito di un'azione dell'utente. Tuttavia, la natura dinamica degli annunci può portare a variazioni impreviste del layout, 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 utilizzano i tag publisher di Google (GPT).
In che modo gli annunci causano la variazione del layout
In genere gli annunci vengono richiesti in modo asincrono e aggiungono contenuti dinamicamente alla pagina durante o dopo il caricamento. Durante il recupero degli annunci, il resto della pagina continua a caricarsi e i contenuti non pubblicitari potrebbero diventare visibili all'utente. Se non prevedi uno spazio sufficiente per il caricamento degli annunci, questi possono finire per spostare i contenuti non pubblicitari visibili quando vengono aggiunti alla pagina.
Quando utilizzi i tag publisher di Google, ci sono alcuni punti nel ciclo di vita dell'annuncio in cui può verificarsi il cambiamento di layout:
- Quando viene chiamato
display(). Uno slot può espandersi o contrarsi, a seconda di come è stato configurato. - Quando vengono visualizzati i contenuti dell'annuncio. Le dimensioni di uno spazio possono essere ridimensionate se viene pubblicato un annuncio fluido o se lo spazio disponibile non è sufficiente. A questo punto, uno slot può anche espandersi o comprimarsi, a seconda di come è stato configurato.
- Dopo il rendering dei contenuti dell'annuncio. Alcuni tipi di creatività sono progettati per espandersi dopo essere visualizzati nella pagina.
Tieni presente che più un'area annuncio è in alto nell'area visibile, più contenuti può potenzialmente spostare. Presta particolare attenzione alle aree nella parte superiore dell'area visibile iniziale (sopra la piega). Questi slot possono causare un numero sproporzionato di variazioni del layout perché hanno maggiori probabilità di essere visibili quando vengono caricati i contenuti degli annunci.
Misurare la variazione del layout
Cumulative Layout Shift (CLS) è una metrica Core Web Vitals che puoi utilizzare per quantificare l'impatto delle variazioni del layout sul tuo sito, sia in laboratorio che sul campo.
Nel laboratorio
Gli strumenti di laboratorio misurano il CLS in modo sintetico. Ciò significa che non si basano sull'interazione con utenti reali, il che li rende adatti all'uso nell'integrazione continua e nei flussi di lavoro di sviluppo locale. Tuttavia, in genere questi strumenti misurano il rendimento solo durante il caricamento della pagina e sono limitati nelle condizioni che possono simulare, pertanto i valori registrati potrebbero essere inferiori a quelli che un utente reale potrebbe riscontrare.
Controlli degli annunci dei publisher per Lighthouse è uno strumento che può essere utilizzato per misurare il CLS specificamente attribuibile agli annunci GPT. Per maggiori dettagli, consulta la documentazione relativa al controllo per ridurre la variazione del layout in relazione agli annunci.
Chrome DevTools può anche essere configurato per evidenziare i cambiamenti di layout mentre navighi nel tuo sito. Questo può essere utilizzato per identificare manualmente i cambiamenti di layout che si verificano vicino alle aree annuncio sulla pagina.
Sul campo
Gli strumenti sul campo misurano il CLS percepito dagli utenti reali mentre interagiscono con il tuo sito. Questa procedura è nota come monitoraggio degli utenti reali (RUM). RUM consente di osservare in che modo il CLS è influenzato da fattori reali, come le funzionalità del dispositivo, le condizioni della rete, l'interazione utente e la personalizzazione della pagina, che spesso sono difficili o impossibili da simulare con i test sintetici.
Riduzione al minimo della variazione del layout
L'unico modo garantito per evitare il cambiamento del layout è riservare uno spazio sufficiente per un determinato spazio pubblicitario utilizzando il CSS. Impostare un'altezza e una larghezza fisse direttamente nell'area annuncio div è il modo più efficace per farlo. Tuttavia, anche se questo approccio funziona bene per gli slot pubblicitari statici di dimensioni fisse, scenari più complessi potrebbero richiedere un approccio più articolato. Alcuni scenari comuni sono illustrati nelle sezioni seguenti.
Aree annuncio di più dimensioni
Per gli spazi pubblicitari che accettano più dimensioni, consigliamo uno dei seguenti approcci:
- Riserva spazio per le dimensioni più grandi configurate per la pubblicazione.
- Riserva spazio per la dimensione più piccola configurata per la pubblicazione.
- Riserva spazio per le dimensioni con maggiori probabilità di pubblicazione, determinate esaminando i dati storici di completamento dei report di Google Ad Manager.
Scegliere l'approccio giusto
La prenotazione dello spazio per le dimensioni più grandi configurate per la pubblicazione è il modo più efficace per eliminare i cambiamenti di layout. Tuttavia, questo metodo può comportare uno spazio vuoto aggiuntivo attorno all'annuncio, nel caso in cui venga pubblicata una creatività più piccola delle dimensioni riservate. Se riduci le dimensioni dell'area annuncio in modo che corrispondano a quelle della creatività pubblicata, si verificherebbe un ulteriore cambiamento del layout, pertanto ti consigliamo di evitare questa operazione. In alternativa, puoi utilizzare il centratura verticale e orizzontale per ridurre l'impatto visivo degli spazi vuoti in eccesso.
D'altra parte, la prenotazione dello spazio per la dimensione più piccola configurata per la pubblicazione consente di evitare spazi vuoti eccessivi intorno all'annuncio. Questa può essere una buona opzione se la tua area annuncio viene solitamente riempita con creatività più piccole o nei casi in cui tutte le dimensioni supportate dall'area siano simili. Tuttavia, questo metodo comporta un cambiamento nel layout nel caso in cui venga pubblicata una creatività più grande delle dimensioni riservate (anche se questi cambiamenti sono in genere minori rispetto a quelli che si verificano se non viene riservato alcun spazio).
Per trovare un equilibrio tra spazio vuoto e cambiamenti di layout, puoi riservare una quantità di spazio "media" per gli slot degli annunci. Ad esempio, la prenotazione di 100px
verticalmente comporta un piccolo spazio vuoto quando viene pubblicata una creatività 320x50, ma
riduce il punteggio CLS rispetto alla mancata prenotazione di alcuno spazio. Dovrai sperimentare dimensioni diverse per trovare il miglior equilibrio per il tuo sito.
Quando decidi quanto spazio riservare per un determinato spazio, esaminare i dati storici sul riempimento dei report di Google Ad Manager può aiutarti a prendere una decisione più consapevole. Questo può essere illustrato 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 in verticale può ridurre notevolmente il 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 la prenotazione di 90px verticalmente dovrebbe evitare un cambiamento di layout nella maggior parte dei casi.
Come prenotare uno spazio
Per risolvere il problema, ti consigliamo di specificare 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 prenotare una quantità minima di spazio per l'area annuncio, consentendo al browser di aumentare le dimensioni del contenitore in base alle necessità. In questo modo, nessun contenuto viene tagliato nel caso in cui venga pubblicata una creatività più grande.
Puoi combinare questa tecnica con le query supporti CSS per specificare valori minimi diversi per schermi di dimensioni diverse:
@media screen and (max-width: 960px) {
#ad-slot {
min-height: 100px;
}
}
È preferibile evitare di riservare spazio con JavaScript, in quanto ciò può comportare un cambiamento del layout al momento del caricamento dello script. La prenotazione dello spazio con CSS evita questo rischio.
Aree annunci flessibili
Le aree annuncio flessibili non specificano un insieme fisso di dimensioni supportate. Al contrario, questi spazi si ridimensionano automaticamente in base ai contenuti della creatività che vengono pubblicati, il che consente di supportare creatività di dimensioni indeterminate. Di conseguenza, non è possibile prenotare spazio per queste aree prima di richiedere i contenuti degli annunci e gli annunci con dimensioni fluide causano sempre variazioni del layout.
Per ridurre gli effetti delle variazioni del layout quando utilizzi gli spazi pubblicitari fluidi, consigliamo quanto segue:
- Utilizza le dimensioni
fluidsolo per gli slot sotto la piega. - Recupera gli slot fluidi il prima possibile per ridurre al minimo la possibilità che un utente scorra fino a visualizzarli prima che lo slot venga ridimensionato.
Comprimire ed espandere le aree annuncio
Il metodo collapseEmptyDivs() ti consente di comprimere i div delle aree annuncio in modo che non occupino spazio sulla pagina quando non sono presenti contenuti dell'annuncio da visualizzare. Tuttavia, questa funzionalità deve essere utilizzata con cautela perché può introdurre cambiamenti indesiderati nel layout. Come indicato nella
sezione precedente, il collasso e l'espansione degli spazi annunci possono causare cambiamenti nel layout
in due punti diversi del ciclo di vita dell'annuncio.
Se devi utilizzare questa funzionalità, puoi ridurre l'impatto dei cambiamenti di layout utilizzando i dati storici sul completamento dei report di Ad Manager per implementare le seguenti best practice:
- Gli slot che hanno maggiori probabilità di essere compilati devono sempre essere espandenti all'avvio.
- Gli slot che probabilmente non verranno riempiti devono sempre essere compresi all'inizio.
Per un esempio di implementazione, consulta l'esempio Comprimere le aree annuncio vuote.