Incorporare i contenuti utilizzando un codice embed

Con la funzione di incorporazione dei contenuti, è possibile creare sezioni di contenuti in HubSpot e poi incorporarle nel proprio sito web. Per aggiungere un contenuto incorporato a una pagina web esterna, è possibile utilizzare il plugin content embed per l'editor Gutenberg di WordPress, oppure copiare il codice embed direttamente in HubSpot.

Qui di seguito, scoprirete come copiare il codice di incorporamento dei contenuti, insieme alle migliori pratiche per mantenere il punteggio del Cumulative Layout Shift (CLS) della vostra pagina.

Attenzione: il contenuto incorporato non viene caricato attraverso un iframe, ma viene iniettato tramite JavaScript. I motori di ricerca sono in grado di eseguire JavaScript e rileveranno il contenuto incorporato, evitando così i problemi SEO che gli iframe possono presentare.

Copiare il codice incorporato

Per copiare il codice di incorporamento per una sezione di contenuto incorporato:

• Nel tuo account HubSpot, passa a Contenuti > Incorporamenti.
• Passare il mouse su un contenuto incorporato, quindi fare clic su Altro e selezionare Ottieni codice incorporato.
  
  
• Nella finestra di dialogo, fare clic su Copia per copiare il codice embed.

È quindi possibile incollare il codice di incorporamento nel contenuto esterno, se necessario. Quando si incolla il codice embed, tenere presente quanto segue:

• Un contenuto incorporato riceve il suo stile dalla pagina in cui è incorporato, non da HubSpot. Per modificare l'aspetto del contenuto incorporato, è necessario aggiornare il CSS della pagina. Se utilizzate WordPress, imparate come aggiungere un CSS personalizzato.
• Il codice del contenuto incorporato non include il codice di tracciamento di HubSpot. È necessario installare separatamente il codice di tracciamento sulle pagine esterne per sfruttare le funzionalità di HubSpot come l'analisi del traffico e i banner di consenso privato.
• Per incorporare un contenuto tramite il codice embed, HubSpot inserisce il contenuto embed attraverso il footer predefinito del dominio hs-sites. Ciò consente di preservare i piè di pagina specifici del dominio. Tuttavia, qualsiasi contenuto incluso nel piè di pagina hs-sites verrà inserito nella pagina esterna insieme al contenuto incorporato. Ad esempio, se nel piè di pagina del dominio hs-sites è presente una clausola di esclusione del copyright, il copyright apparirà nella pagina esterna insieme al contenuto incorporato. Imparare a modificare il contenuto nei piè di pagina specifici del dominio.
  
  

Comprendere le migliori pratiche per incorporare i contenuti

A seconda di come si utilizza il codice incorporato, è possibile che il contenuto abbia un impatto sul punteggio del Cumulative Layout Shift (CLS) della pagina, che misura quanto il contenuto della pagina si sposta nel viewport del visitatore durante il caricamento. I fattori che influiscono sul punteggio CLS sono due:

• La posizione dell'embed, che comprende se è sopra o sotto la piega e dove è incorporato lo script.
• L'altezza dell'incorporamento, che è direttamente correlata ai moduli inclusi nel contenuto incorporato. Più moduli sono inclusi, più il layout della pagina può spostarsi durante il caricamento dei contenuti.

Se si riscontra un impatto negativo sul punteggio CLS dopo l'incorporazione di contenuti, esaminare le sezioni delle best practice riportate di seguito per individuare potenziali soluzioni.

Incorporare sotto la piega

Quando è possibile, i contenuti dovrebbero essere incorporati sotto la piega della pagina. Questo perché il punteggio CLS si applica al contenuto sopra la piega, poiché è quello che di solito il visitatore vede al primo caricamento della pagina. Incorporare i contenuti sotto la piega riduce qualsiasi spostamento iniziale del layout causato dall'incorporazione dei contenuti, migliorando l'esperienza dell'utente e attenuando il punteggio CLS negativo.

Cambiare la posizione dello script di incorporamento

Per impostazione predefinita, il codice di incorporamento dei contenuti include lo script di incorporamento al suo interno (riga 2 sotto).

<div id="hs-embed-61405464936-1wgzc8">
 <script type="text/javascript" src="[EMBED SCRIPT SRC]">
 </script>
 <script>
 hbspt.content.create({...});
 </script>
</div>

Quando si incorpora un contenuto in una pagina esterna, si consiglia di spostare lo script di incorporamento all'indirizzo <head> della pagina piuttosto che accanto allo script di creazione dell'incorporamento.

Impostare un'altezza minima

L'altezza del contenitore del contenuto incorporato influisce sul grado di spostamento del contenuto circostante durante il caricamento. L'altezza del contenitore dipende dai moduli e dai contenuti inclusi: maggiore è il contenuto dell'embed, maggiore sarà lo spostamento della pagina.

Per questo motivo, se si incorpora il contenuto above the fold, si consiglia di impostare un'altezza minima dell'embed includendo una regola CSS inline min-height nel wrapper del contenitore dell'embed.

Se si incorpora il contenuto in un CMS esterno, potrebbero essere disponibili opzioni di layout nell'editor della pagina esterna per aggiornare l'altezza dell'incorporamento. Altrimenti, è possibile aggiungere manualmente questo stile al contenuto incorporato di primo livello <div>, come mostrato di seguito.

<div id="hs-embed-61405464936-1wgzc8" style="min-height: 500px;">
 <script type="text/javascript" src="[EMBED SCRIPT SRC]"></script>
 <script>
 hbspt.content.create({...});
 </script>
</div>

Attenzione: se si personalizza il contenuto incorporato per ogni pagina, potrebbe essere necessario aggiornare la regola dell'altezza minima su ogni pagina, in modo che il contenuto venga visualizzato correttamente.

Per trovare l'altezza minima, si può ispezionare la pagina in cui è incorporato il contenuto. Per le pagine di HubSpot, è possibile utilizzare la funzione di anteprima della pagina per trovare l'altezza minima prima di pubblicare la pagina. Per saperne di più sull'anteprima dei contenuti in WordPress.

Mentre si visualizza la pagina con il contenuto incorporato:

• Fare clic con il tasto destro del mouse sul contenuto incorporato e selezionare Ispeziona.
• Nel pannello dell'ispettore, passare il mouse sul livello superiore <div> del contenuto incorporato.
• Per visualizzare l'altezza calcolata, alcuni browser visualizzano l'altezza del contenitore al passaggio del mouse, oppure si può fare clic sulla scheda Calcolato nel cassetto degli strumenti di sviluppo e cercare l'attributo altezza.