Minimizza il Cumulative Layout Shift (CLS) dovuto agli annunci pubblicitari

Minimizza il Cumulative Layout Shift (CLS) dovuto agli annunci pubblicitari

La metrica "CLS" si riferisce al Cumulative Layout Shift, che è una metrica di performance web utilizzata per valutare la stabilità visuale di una pagina web durante il suo caricamento. È importante perché indica quanto una pagina web è stabile visivamente durante il caricamento, il che può influire significativamente sull'esperienza dell'utente.

Ecco perché la metrica CLS è importante
  1. Esperienza dell'utente: Una cattiva esperienza utente può essere causata da spostamenti inaspettati di elementi nella pagina web mentre si carica. Questi spostamenti possono rendere difficile per gli utenti leggere il contenuto, fare clic su elementi desiderati o completare azioni specifiche. La metrica CLS misura quanto spesso si verificano questi spostamenti in modo da poter migliorare l'esperienza dell'utente.
  2. SEO: I motori di ricerca, come Google, tengono conto della metrica CLS nel calcolo del posizionamento nei risultati di ricerca. Una buona metrica CLS può contribuire a migliorare il posizionamento di una pagina web nei risultati di ricerca, mentre una cattiva metrica può influire negativamente sulla visibilità del sito web.
  3. Retenzione degli utenti: Le pagine web con una buona stabilità visuale durante il caricamento tendono a trattenere gli utenti più a lungo. Gli utenti sono più propensi a interagire con il contenuto e a rimanere sul sito se non sono disturbati da spostamenti inaspettati.
Per misurare la metrica CLS, vengono considerati gli spostamenti visibili degli elementi nella pagina web durante il caricamento e viene calcolato un valore cumulativo. Un valore basso indica una maggiore stabilità visuale, mentre un valore elevato indica una minore stabilità.

ATTENZIONE
Procedi con i passaggi successivi, solo dopo aver aperto un Ticket sul nostro VIP Support poiché sarà necessario un intervento tecnico del team di supporto per completare la configurazione degli spazi pubblicitari.

La soluzione al problema del CLS elevato (tramite Wordpress)

Gli annunci pubblicitari possono spesso essere causa di un CLS elevato poiché le dimensioni dei banner pubblicitari possono variare notevolmente e possono essere caricati in ritardo rispetto ai contenuti principali di una pagina web. Questo può causare spostamenti inaspettati dei contenuti e influire negativamente sulla stabilità visuale della pagina.

Per affrontare e risolvere questo problema, in eADV abbiamo integrato nel nostro plugin WordPress eADV VIP (a partire dalla versione 1.1.1), appositamente sviluppato in esclusiva per i soli publishers VIP aderenti al nostro ad-network, alcune direttive CSS ed alcuni shortcode che possono essere utilizzati dai publisher per migliorare il CLS (Cumulative Layout Shift) legato agli annunci pubblicitari.

Le direttive CSS vengono automaticamente integrate nel template ed utilizzate per impostare le dimensioni degli spazi per i banner pubblicitari in modo che il browser possa riservare lo spazio necessario per i banner prima che vengano caricati. Questo aiuta a prevenire spostamenti inaspettati dei contenuti quando i banner vengono finalmente caricati.

Gli shortcode, d'altro canto, devono essere utilizzati dai publisher particolarmente attenti alla metrica CLS per inserire gli spazi pubblicitari, anche detti slot pubblicitari, per far sì che siano gestiti in modo più efficiente durante il caricamento della pagina. Gli shortcode di WordPress sono frammenti di codice compatti e utili che vengono inseriti tra parentesi quadre per incorporare specifiche funzionalità o elementi all'interno delle pagine web. Il termine "shortcode" deriva dalla combinazione delle parole "short" (breve) e "code" (codice) poiché consentono di richiamare rapidamente e in modo conciso porzioni di codice più estese, in generale per arricchire i contenuti delle pagine, ma nel caso specifico per inserire gli slot pubblicitari.

Gli shortcode disponibili e dove inserirli

Ecco i dettagli e le informazioni utili sugli shortcode forniti da eADV per l'inserimento degli slot pubblicitari sul sito web:
  1. [eadv-billboard]: Questo shortcode deve essere utilizzato per inserire lo slot pubblicitario del formato billboard in alto in tutte le pagine del sito, di solito vicino al logo o vicino al menù principale di navigazione. Lo slot billboard deve essere posizionato nella parte superiore di una pagina web ed è ampio, spesso utilizzato per la pubblicità di alto valore.
  2. [eadv-bottom]: Questo shortcode deve essere utilizzato per inserire lo slot pubblicitario del formato bottom in basso in tutte le pagine del sito. Lo slot bottom deve essere di solito posizionato nella parte inferiore di una pagina web ed è ideale per rendere visibili gli annunci agli utenti dopo aver esaminato il contenuto principale.
  3. [eadv-aside]: Questo shortcode deve essere utilizzato per inserire lo slot pubblicitario del formato aside nella colonna di destra o di sinistra in tutte le pagine del sito in versione Desktop. Lo shortcode [eadv-aside] supporta un attributo chiamato "n" che consente di inserire più volte lo stesso slot nella stessa pagina. Ad esempio, [eadv-aside] può essere utilizzato per il primo slot, [eadv-aside n=2] per il secondo slot, [eadv-aside n=3] per il terzo slot. È necessario inserire almeno 1 slot per il formato aside posizionato in una barra laterale o in una colonna adiacente al contenuto principale.
  4. [eadv-in-content]: Questo shortcode deve essere utilizzato per inserire lo slot pubblicitario del formato in-content tra i contenuti del sito nella home page, nelle pagine di categoria e negli articoli. Questo slot consente di integrare gli annunci direttamente nel flusso di contenuti, migliorando la visibilità. Lo shortcode [eadv-in-content] supporta un attributo chiamato "n" che consente di inserire più volte lo stesso slot nella stessa pagina. Ad esempio, [eadv-in-content] può essere utilizzato per il primo slot, [eadv-in-content n=2] per il secondo slot, [eadv-in-content n=3] per il terzo slot, e così via. È necessario inserire almeno 3 slot in-content ogni 3/4 paragrafi dell'articolo e 3/4 sezioni della home page o della pagina di categoria. 
  5. [eadv-related]: Questo shortcode deve essere utilizzato per inserire lo slot pubblicitario del formato related, che di solito viene visualizzato al termine degli articoli. È un ottimo posizionamento per annunci correlati al contenuto dell'articolo.
Questi shortcode offrono una flessibilità significativa nella gestione degli annunci pubblicitari sul tuo sito web, consentendo di posizionarli in modo strategico e personalizzato per soddisfare le tue esigenze e migliorare l'esperienza dei visitatori.

Di seguito un esempio del posizionamento degli shortcode sopra descritti.

Fix CLS

Dopo aver attivato il plugin e inserito gli shortcode per la gestione degli spazi pubblicitari sul sito web, è importante che il publisher contatti il VIP Support di eADV. Questo passaggio è essenziale per garantire che il setup degli spazi pubblicitari sia completato in modo corretto e che tutto funzioni come previsto. Il publisher può contattare il team di supporto aprendo un ticket di assistenza. Questo ticket consentirà al team di supporto di raccogliere tutte le informazioni necessarie sull'intervento effettuato, compresi i dettagli sugli shortcode utilizzati, i posizionamenti specifici e qualsiasi altra configurazione importante.

L'interazione con il team di supporto è fondamentale per assicurarsi che la pubblicità venga visualizzata in modo efficace e che sia in linea con gli obiettivi del publisher. Inoltre, il team di supporto può fornire assistenza personalizzata per ottimizzare le prestazioni degli annunci pubblicitari e risolvere eventuali problemi o domande che il publisher potrebbe avere.

Come inserire lo slot in-content ogni N paragrafi nel testo dell'articolo?

L'inserimento strategico di shortcode all'interno degli articoli su WordPress può rappresentare una sfida per molti utenti. Apri un ticket di assistenza per chiedere al nostro Team di supporto cosa inserire nel campo "Extra Options" del plugin per automatizzare la pubblicazione degli shortcode ogni N paragrafi nel testo degli articoli.

La soluzione al problema del CLS elevato (tramite codice HTML, in alternativa a Wordpress)

Gli annunci pubblicitari possono spesso essere causa di un CLS elevato poiché le dimensioni dei banner pubblicitari possono variare notevolmente e possono essere caricati in ritardo rispetto ai contenuti principali di una pagina web. Questo può causare spostamenti inaspettati dei contenuti e influire negativamente sulla stabilità visuale della pagina.

Per affrontare e risolvere questo problema, è necessario che il publisher riservi degli spazi per i banner pubblicitari tramite la creazione di alcuni slot con codice html <div> ed altezza minima prefissata.

A tale scopo è utile impostare direttamente in pagina il seguente CSS in-line:
  1. <style>
  2.     .eadv-billboard{min-height:270px;}@media screen and (max-width:991px){.eadv-billboard{min-height:120px;}}
  3.     .eadv-in-content{min-height:290px;}
  4.     .eadv-aside{min-height:610px;}
  5.     .eadv-related{min-height:550px;}
  6.     .eadv-bottom{min-height:270px;}@media screen and (max-width:467px){.eadv-bottom{min-height:620px;}}
  7. </style>

Successivamente sarà necessario posizionare i seguenti <div> come specificato di seguito:

Billboard: questo <div> deve essere utilizzato per inserire lo slot pubblicitario del formato billboard in alto in tutte le pagine del sito, di solito vicino al logo o vicino al menù principale di navigazione. Lo slot billboard deve essere posizionato nella parte superiore di una pagina web ed è ampio, spesso utilizzato per la pubblicità di alto valore.
  1. <div id="eadv-billboard" class="eadv-billboard"></div>

Bottom: questo <div> deve essere utilizzato per inserire lo slot pubblicitario del formato bottom in basso in tutte le pagine del sito. Lo slot bottom deve essere di solito posizionato nella parte inferiore di una pagina web ed è ideale per rendere visibili gli annunci agli utenti dopo aver esaminato il contenuto principale.
  1. <div id="eadv-bottom" class="eadv-bottom"></div>

Aside: questo <div> deve essere utilizzato per inserire lo slot pubblicitario del formato aside nella colonna di destra o di sinistra in tutte le pagine del sito in versione Desktop. Il <div> deve avere un attributo "id" numerato e sequenziale per inserire più volte lo stesso slot nella stessa pagina. Ad esempio, l'id eadv-aside può essere utilizzato per il primo slot, l'id eadv-aside-2 per il secondo slot, l'id eadv-aside-3 per il terzo slot. È necessario inserire almeno 1 slot per il formato aside posizionato in una barra laterale o in una colonna adiacente al contenuto principale.
  1. <div id="eadv-aside" class="eadv-aside"></div>
  2. <div id="eadv-aside-2" class="eadv-aside"></div>
  3. <div id="eadv-aside-3" class="eadv-aside"></div>

In-Content: questo <div> deve essere utilizzato per inserire lo slot pubblicitario del formato in-content tra i contenuti del sito nella home page, nelle pagine di categoria e negli articoli. Questo slot consente di integrare gli annunci direttamente nel flusso di contenuti, migliorando la visibilità. Il <div> deve avere un attributo "id" numerato e sequenziale per inserire più volte lo stesso slot nella stessa pagina. Ad esempio, l'id eadv-in-content può essere utilizzato per il primo slot, l'id eadv-in-content-2 per il secondo slot, l'id eadv-in-content-3 per il terzo slot., e così via. È necessario inserire almeno 3 slot in-content ogni 3/4 paragrafi dell'articolo e 3/4 sezioni della home page o della pagina di categoria.
  1. <div id="eadv-in-content" class="eadv-in-content"></div>
  2. <div id="eadv-in-content-2" class="eadv-in-content"></div>
  3. <div id="eadv-in-content-3" class="eadv-in-content"></div>
  4. <div id="eadv-in-content-4" class="eadv-in-content"></div>
  5. <div id="eadv-in-content-5" class="eadv-in-content"></div>

Related: questo <div> deve essere utilizzato per inserire lo slot pubblicitario del formato related, che di solito viene visualizzato al termine degli articoli. È un ottimo posizionamento per annunci correlati al contenuto dell'articolo.
  1. <div id="eadv-related" class="eadv-related"></div>

Questi <div> offrono una flessibilità significativa nella gestione degli annunci pubblicitari sul tuo sito web, consentendo di posizionarli in modo strategico e personalizzato per soddisfare le tue esigenze e migliorare l'esperienza dei visitatori.

Dopo aver inserito i <div> per la gestione degli spazi pubblicitari sul sito web, è importante che il publisher contatti il VIP Support di eADV. Questo passaggio è essenziale per garantire che il setup degli spazi pubblicitari sia completato in modo corretto e che tutto funzioni come previsto. Il publisher può contattare il team di supporto aprendo un ticket di assistenza. Questo ticket consentirà al team di supporto di raccogliere tutte le informazioni necessarie sull'intervento effettuato, compresi i dettagli sui <div> utilizzati, i posizionamenti specifici e qualsiasi altra configurazione importante.

L'interazione con il team di supporto è fondamentale per assicurarsi che la pubblicità venga visualizzata in modo efficace e che sia in linea con gli obiettivi del publisher. Inoltre, il team di supporto può fornire assistenza personalizzata per ottimizzare le prestazioni degli annunci pubblicitari e risolvere eventuali problemi o domande che il publisher potrebbe avere.