Utilizzo di Clerk.js con applicazioni a pagina singola

Quando una pagina viene caricata per la prima volta, la libreria Clerk.js lancia automaticamente una funzione per rendere tutti i blocchi di contenuto della pagina.

Tuttavia, per le applicazioni a pagina singola che utilizzano framework come vue.js o next.js, le pagine vengono rese con javascript anziché con un caricamento di pagina standard.

Per questo motivo, è necessario controllare il rendering con Clerk.js, in modo che corrisponda al caricamento delle pagine nell’applicazione a pagina singola.

Includere Clerk.js

Clerk.js deve essere caricato una sola volta, quando il sito viene caricato inizialmente. In seguito, la libreria sarà disponibile per tutta la sessione. Includerla subito prima di </head> nel proprio HTML:

<!-- Start of Clerk.io E-commerce Personalisation tool - www.clerk.io -->
<script type="text/javascript">
    (function(w,d){
    var e=d.createElement('script');e.type='text/javascript';e.async=true;
    e.src='https://cdn.clerk.io/clerk.js';
    var s=d.getElementsByTagName('script')[0];s.parentNode.insertBefore(e,s);
    w.__clerk_q=w.__clerk_q||[];w.Clerk=w.Clerk||function(){w.__clerk_q.push(arguments)};
    })(window,document);

    Clerk('config', {
    key: 'INSERT_PUBLIC_API_KEY'
    });
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Controllo del rendering

Questo viene fatto con la funzione Clerk("content", "#ID").

Ogni volta che viene caricata una pagina, eseguire questi passaggi in ordine:

• Aggiungere lo snippet Clerk all’HTML. Assicurarsi che abbia un ID univoco a cui si possa fare riferimento.
• Eseguire Clerk("content", "#ID") per renderlo

Quando il visitatore lascia la pagina, distruggere lo snippet, per assicurarsi di poterlo rendere di nuovo se il visitatore ritorna alla stessa pagina. Questo per garantire che Clerk.js non veda lo snippet come precedentemente reso, causando la mancata visualizzazione.

Esempio:

<span 
  id="clerk-custom-snippet"
  data-template="@home-page-visitor-recommendations">
</span>

<script>
  Clerk("content", "#clerk-custom-snippet")
</script>

Per maggiori informazioni, consultare la documentazione di Dynamic Content qui