Uso de Clerk.js en aplicaciones de una sola página

Cuando se carga una página por primera vez, la biblioteca Clerk.js activa automáticamente una función para mostrar todos los bloques de contenido de esa página.

Sin embargo, para aplicaciones de una sola página que utilizan frameworks como vue.js o next.js, las páginas se renderizan con javascript en lugar de una carga de página estándar.

Debido a esto, es necesario controlar la representación con Clerk.js para que coincida con la forma de cargar las páginas en la aplicación de una sola página.

Incluir Clerk.js

Clerk.js sólo necesita ser cargado una vez, cuando el sitio se carga inicialmente. Después de esto, la librería estará disponible durante toda la sesión. Inclúyelo justo antes de </head> en tu 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 -->

Controlar el renderizado

Esto se hace con la función Clerk("contenido", "#ID")

Cada vez que se carga una página, haz estos pasos en orden:

• Añade el fragmento de Clerk al HTML. Asegúrese de que tiene un ID único al que puede apuntar
• Ejecute Clerk("content", "#ID") para mostrarlo.

Cuando el visitante abandone la página, destruye el fragmento, para asegurarte de que puedes renderizarlo de nuevo si el visitante vuelve a la misma página. Esto es para asegurar que Clerk.js no vea el snippet como previamente renderizado, causando que no se visualice.

Ejemplo:

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

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

Para más información, consulte nuestra documentación sobre Contenido dinámico aquí