Infinite scroll, come programmarlo su AMP e su Web con Javascript

L’infinite scroll è una tecnica di design e navigazione web che consente agli utenti di visualizzare continuamente il contenuto di una pagina web senza dover fare clic su pagine successive. Invece di presentare tutto il contenuto in una singola pagina, o richiedere ai visitatori di passare manualmente da una pagina all’altra, l’infinite scroll carica automaticamente nuovi contenuti mentre l’utente scorre verso il basso, estendendo così virtualmente la pagina all’infinito.

Questa tecnica è spesso utilizzata per migliorare l’esperienza dell’utente su siti web che presentano grandi quantità di contenuti, come feed social, blog, risultati di ricerca, e-commerce e altro ancora. L’infinite scroll rende più semplice l’esplorazione del contenuto senza interruzioni, mantenendo l’utente coinvolto e consentendo loro di scoprire più facilmente nuovi elementi.

I vantaggi dell’Infinite Scroll

L’infinite scroll offre diversi benefici, sia agli utenti che agli editori dei siti web. Ecco una lista di alcuni dei principali vantaggi associati a questa tecnica:

Per gli utenti:

1. Esperienza Utente Continua: Gli utenti possono navigare senza interruzioni attraverso il contenuto senza dover fare clic su pagine separate, migliorando l’esperienza di navigazione e riducendo la fatica dell’utente.
2. Scoperta Facilitata: L’infinite scroll facilita la scoperta di nuovi contenuti, in quanto il nuovo materiale viene caricato automaticamente mentre si scorre verso il basso, incoraggiando gli utenti a rimanere più a lungo sul sito web.
3. Caricamento Veloce: Poiché il contenuto viene caricato in piccoli blocchi, il caricamento iniziale della pagina è generalmente più veloce rispetto a una pagina con tutto il contenuto pre-caricato.
4. Compatibile con Dispositivi Mobili: È particolarmente adatto per dispositivi mobili, in quanto consente agli utenti di sfogliare facilmente il contenuto senza dover ingrandire o fare clic su piccoli link di paginazione.

Per gli editori:

1. Aumento dell’Engagement: L’infinite scroll può aumentare il tempo di permanenza degli utenti sul sito web poiché li invita a esplorare più contenuti, aumentando così l’engagement degli utenti.
2. Miglior SEO: Se implementato correttamente, l’infinite scroll può migliorare l’ottimizzazione dei motori di ricerca (SEO) aumentando il tempo di permanenza degli utenti e riducendo il tasso di rimbalzo.
3. Maggiore Visualizzazione di Annunci: Gli editori possono inserire annunci pubblicitari tra il contenuto che si carica automaticamente, aumentando così le opportunità di visualizzazione degli annunci e potenzialmente aumentando i ricavi pubblicitari.

Implementare l’Infinite Scroll

Vedremo in questo articolo come strutturare questo sistema sia per la versione Web standard del sito, quindi per i vari dispositivi desktop e mobile, che per AMP, il framework di casa Google per il caricamento veloce dei contenuti sui dispositivi mobile.

L’oggetto amp-next-page per lo "scroll infinito" su AMP

Attraverso il suo framework, AMP mette a disposizione la libreria amp-next-page (la cui documentazione ufficiale è disponibile per la consultazione in questa pagina ) per la gestione dell’infinite scroll, estremamente semplice da utilizzare, come vedremo nell’esempio di questo articolo.

Per prima cosa, nell’header della nostra pagina AMP, dobbiamo richiamare la libreria attraverso la seguente inclusione che, nel momento in cui lo scrivente redige questo articoli, si riferisce alla versione 1.0:

<script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>

Fatto ciò, dobbiamo soltanto scegliere il punto della pagina in cui far aprire il contenuto aggiuntivo, punto che, generalmente, è al termine di quello principale, dopo eventuali icone di condivisione, banner pubblicitari e quant’altro.

Il tag principale contiene dei riferimenti Javascript, formattati in JSON, come di seguito riportato:

<amp-next-page><script type="application/json">
[
  {
    "url": "...",
    "title": "...",
    "image": "..."
  },
  {
    "url": "...",
    "title": "...",
    "image": "..."
  },
  // E così via se si vogliono accodare altri contenuti...
]
</script></amp-next-page>

Ciascun nodo della struttura di dati contiene i seguenti elementi obbligatori:

1. url – l’indirizzo fisico della pagina dedicata al contenuto che stiamo andando ad aggiungere;
2. title – il titolo della pagina di cui sopra;
3. image – l’immagine "di copertina" della pagina di cui sopra.

Facciamo un esempio di una pagina AMP completa che potremmo chiamare articolo-1.html . Segue il codice:

<!DOCTYPE html><html amp lang="it">
  <head>
    <title>Articolo 1</title>
    <link rel="canonical" href="articolo-1-originale.html">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=yes">
    <script async src="https://cdn.ampproject.org/v0.js"></script>
    <script async custom-element="amp-next-page" src="https://cdn.ampproject.org/v0/amp-next-page-1.0.js"></script>

    <style amp-boilerplate>
    body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
    <style amp-custom>
      /*
        Foglio di stile del proprio sito AMP...
      */
    </style>
  </head>
  <body>

    <div id="header" next-page-hide>
      Logo del sito, menu, altro...
    </div>

    <h1>Titolo dell'articolo 1</h1>

    <div><amp-img src="immagine-1.png" width="300" height="150" alt="Immagine 1"></amp-img></div>
    
    <h2>Sottotitolo dell'articolo 1</h2>

    <p>Testo dell'articolo 1, bla bla bla, bla bla bla, bla bla bla...</p>
    <p>Testo dell'articolo 1, bla bla bla, bla bla bla, bla bla bla...</p>
    <p>Testo dell'articolo 1, bla bla bla, bla bla bla, bla bla bla...</p>
    <p>Testo dell'articolo 1, bla bla bla, bla bla bla, bla bla bla...</p>
    <p>Testo dell'articolo 1, bla bla bla, bla bla bla, bla bla bla...</p>
    <p>Testo dell'articolo 1, bla bla bla, bla bla bla, bla bla bla...</p>
    <p>Testo dell'articolo 1, bla bla bla, bla bla bla, bla bla bla...</p>
    <p>Testo dell'articolo 1, bla bla bla, bla bla bla, bla bla bla...</p>

    <amp-next-page><script type="application/json">
    [
      {
        "url": "articolo-2.html",
        "title": "Titolo dell'articolo 2",
        "image": "immagine-2.png"
      }
    ]
    </script></amp-next-page>


    <div id="footer" next-page-hide>
      Info e link a fondo pagina
    </div>

  </body>
</html>

In questo esempio, nel quale il codice dedicato alla funzione next page è evidenziato in grassetto, facciamo riferimento ad un solo articolo da accodare che abbiamo chiamato articolo-2.html che, a sua volta, potrebbe chiamare articolo-3.html e così via. Per fare un esperimento, suggerisco di far puntare "articolo-2.html" ad "articolo-1.html", in modo da vedere il risultato.

Inoltre è possibile notare la presenza di un attributo su alcuni elementi, ossia next-page-hide che, come il suo nome lascia ad intendere, ha lo scopo di nascondere alcuni elementi che non vogliamo vengano replicati allo scroll, quindi può essere applicato su tutti gli elementi di header, footer o altri elementi che desideriamo non vengano visualizzati nuovamente al caricarsi del contenuto aggiuntivo.

In fine, una volta effettuato un test, sarà possibile notare che tra un articolo e l’altro viene inserito in automatico dal framework stesso di AMP un separatore che, per default, assume l’aspetto di una riga grigia, aspetto che è possibile personalizzare via CSS, facendo riferimento alla classe amp-next-page-separator , trattandolo come un qualsiasi box, gestendo margini, bordi e colori.

Ad esempio:

.amp-next-page-separator {
  background: transparent;
  padding: 0;
  margin: 0;
  border: 0;
  height: 5px;
  margin: 20px 0;
  border-top: dotted 5px #FA0;
}

O come meglio ci piace.

Gestione dell’infinite scroll con Javascript su un sito web

Esistono diversi plug-in, librerie e script già pronti per l’implementazione del sistema dell’infinite scroll, realizzati in Javascript "nativo" piuttosto che con jQuery, molto completi e ricchi di funzioni che però talvolta tornano poco utili, rendendo poco pratico utilizzare uno script di diverse decine o centinaia di Kb a fronte di un’esigenza meno complessa nella maggior parte dei casi.

Esigenza che, nell’esempio di questo articolo, è quella di mostrare un solo contenuto aggiuntivo alla fine della lettura del contenuto esplicitamente cliccato dal nostro lettore.

Passiamo ora all’implementazione pratica. Posizioniamoci alla fine del testo di un nostro articolo e iniziamo inserendo un elemento HTML che fungerà da marcatore, identificandolo con un ID:

<div id="nextpage"></div>

Successivamente, creiamo il nostro blocco di codice JavaScript con le seguenti funzionalità:

1. Gestisce l’evento "scroll" della pagina.
2. Verifica se l’elemento HTML "nextpage" è visibile nel "viewport" del browser, cioè se è stato raggiunto dallo scroll.
3. Se è visibile, cambia l’URL e il titolo della pagina, quindi carica il contenuto aggiuntivo.
4. Se non è visibile, ripristina l’URL e il titolo della pagina originale.

Ecco il codice completo:

<script>
var nextpage_once = 0;
window.onscroll = function() {
    var obj_nextpage = document.getElementById("nextpage").getBoundingClientRect();
    if (obj_nextpage.top < window.innerHeight) {
        window.history.replaceState(null, null, "contenuto-aggiuntivo.html");
        document.title = "Titolo della pagina aggiuntiva";
        if (nextpage_once === 0) {
            document.getElementById("nextpage").innerHTML = "Contenuto completo della pagina aggiuntiva...";
            nextpage_once = 1;
        }
    } else {
        window.history.replaceState(null, null, "contenuto-originale.html");
        document.title = "Titolo della pagina originale";
    }
}
</script>

Per prima cosa, creiamo una variabile e la inizializziamo a zero (0). Questa variabile ci servirà per assicurare che il processo di popolamento dei dati non venga eseguito continuamente durante lo scroll.

Successivamente, creiamo un oggetto che, grazie al metodo getBoundingClientRect(), verifica se l’oggetto è nel viewport della pagina. Usiamo questa informazione per definire la condizione. Se la condizione è verificata, cambiamo l’URL e il titolo della pagina, quindi utilizziamo la variabile booleana di controllo (creata precedentemente) per assicurarci che il popolamento dei dati avvenga una sola volta.

Nel blocco "else" della condizione principale, ripristiniamo l’URL e il titolo della pagina originale.