Verwendung von Clerk.js mit Single-Page-Anwendungen

Wenn eine Seite zum ersten Mal geladen wird, löst die Clerk.js Bibliothek automatisch eine Funktion aus, um alle Inhaltsblöcke auf dieser Seite zu rendern.

Bei Single-Page-Apps, die Frameworks wie vue.js oder next.js verwenden, werden die Seiten jedoch mit Javascript gerendert, anstatt eine Standardseite zu laden.

Aus diesem Grund müssen Sie das Rendering mit Clerk.js so steuern, dass es mit dem Laden von Seiten in einer Single-Page-App übereinstimmt.

Clerk.js einbinden

Clerk.js muss nur einmal geladen werden, wenn die Seite zum ersten Mal geladen wird. Danach steht die Bibliothek während der gesamten Sitzung zur Verfügung. Fügen Sie sie kurz vor dem </head> in Ihr HTML ein:

<!-- 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 -->

Rendering steuern

Dies geschieht mit der Funktion Clerk("Inhalt", "#ID")

Führen Sie jedes Mal, wenn eine Seite geladen wird, diese Schritte der Reihe nach aus:

• Fügen Sie das Clerk-Snippet in den HTML-Code ein. Stellen Sie sicher, dass es eine eindeutige ID hat, die Sie ansprechen können.
• Führen Sie Clerk("Inhalt", "#ID") aus, um es zu rendern

Wenn der Besucher die Seite verlässt, zerstören Sie das Snippet, um sicherzustellen, dass Sie es wieder rendern können, wenn der Besucher auf dieselbe Seite zurückkehrt. Damit soll sichergestellt werden, dass Clerk.js das Snippet nicht als zuvor gerendert ansieht, was dazu führt, dass es nicht angezeigt wird.

Beispiel:

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

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

Weitere Informationen finden Sie in unserer Dokumentation zu Dynamic Content hier