SmartWeb Classic

Get Started

Installiere Clerk auf SmartWeb Classic, indem du diese einfachen Schritte befolgst

Bringen Sie Clerk in nur wenigen Schritten zum Laufen in Ihrem SmartWeb Classic-Shop. Diese Anleitung führt Sie durch das Verbinden Ihres Shops, die Installation von Tracking-Skripten und die Synchronisierung Ihrer Daten.

Verbinden Sie Ihren Shop #

Der erste Schritt bei der Installation von Clerk ist das Verbinden Ihres Shops mit Ihrem Clerk-Konto.

Nachdem Sie diese einfachen Schritte ausgeführt haben, können Sie Ihren Demo Store sehen, der Ihnen einen persönlichen Überblick darüber gibt, wie Clerk in Ihrem Webshop funktioniert, bevor Sie den Rest des Systems einrichten.

Shop hinzufügen #

Nachdem Sie sich bei my.clerk.io eingeloggt haben, müssen Sie zuerst Ihren Shop hinzufügen:

Add new store form
  1. Geben Sie den Namen und die Domain Ihres Webshops ein.

  2. Wählen Sie SmartWeb als Plattform und wählen Sie Ihre Währung.

  3. Klicken Sie auf Add Store.

Besucher-Tracking installieren #

  1. Gehen Sie in Ihrem SmartWeb Classic-Backend zu Kontrolpanel > Design Manager > Rediger design.

  2. Klicken Sie auf Indsæt Javascript und fügen Sie das Clerk Besucher-Tracking-Skript ein. Klicken Sie anschließend auf Gem.

  3. Stellen Sie sicher, dass das Script im Header unter <head> eingefügt ist.

Insert JavaScript dialog
Tracking script in header

Verwenden Sie INSERT_PUBLIC_API_KEY im folgenden Snippet und ersetzen Sie es durch Ihren Public Key aus my.clerk.io > Developers > API Keys.

<!-- Clerk.io Visitor Tracking (SmartWeb Classic) -->
<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>

Bestell-Tracking installieren #

  1. Gehen Sie in SmartWeb Classic zu Kontrolpanel > Design Manager > Rediger filer > Modules > Checkout.

  2. Öffnen Sie checkout-approved.tpl und fügen Sie den Sales-Tracking-Code am Ende der Datei ein.

Sales tracking code
<span
  class="clerk"
  data-api="log/sale"
  data-sale="{$page.orderId}"
  data-email="{$orderCustomer->Email}"
  data-customer="{$user->Id}"
  data-products='[{$products}]'>
</span>

Daten synchronisieren #

Das Synchronisieren von Daten verbindet Ihren SmartWeb Classic Shop mit Clerk, sodass Clerk Zugriff auf Ihre Produkte, Bestellungen, Kunden und weitere Shopinformationen erhält. Das ermöglicht Clerk, personalisierte Empfehlungen und Suchergebnisse auf Basis Ihrer echten Shopdaten bereitzustellen. Folgen Sie den Schritten im Sync Data guide, um die Datensynchronisation einzurichten.

Clerk.js hinzufügen #

  1. Klicken Sie auf das Einstellungen-Symbol im Seitenmenü Ihres Shops und dann auf Tracking Code.
Settings tracking code
  1. Kopieren Sie das Tracking Script
Tracking script
  1. Fügen Sie diesen Code in die Datei ein, die alle Seiten generiert.

    Dies ist in der Regel Kontrolpanel->Design Manager-> Rediger filer->index.tpl

Index template file
  1. Klicken Sie oben auf der Seite auf Gem, um Ihre Änderungen zu speichern.

Bestellungen tracken #

  1. Gehen Sie im SmartWeb Classic Admin zu Modules → Checkout → checkout-approved.tpl

  2. Fügen Sie den folgenden Sales-Tracking-Code am Ende der Datei ein, direkt vor dem schließenden </div>-Tag.

   {% raw %}{if !empty($page.orderId)}
    {entity controller=order assign=order id=$page.orderId userId=false statusId=false}

    {* Order Customer entity *}
    {entity controller=orderCustomer assign=orderCustomer orderId=$page.orderId}

    {* Order Lines collection *}
    {collection controller=orderLine assign=orderLines orderId=$page.orderId repay=false}

    {* Group order collection by class *}
    {$orderList = $orderLines->groupByClass()}

    {assign var=products value=''}

    {if $orderLines->getActualSize() gt 0}
        {if isset($orderList['CollectionOrderLine'])}
            {foreach $orderList.CollectionOrderLine as $orderLine}
                {$products = $products|cat:{ldelim}|cat:' "id": '|cat:$orderLine->ProductId|cat:', "quantity": '|cat:$orderLine->Amount|cat:', "price": '|cat:$orderLine->Price|cat:{rdelim}}

                {if !$orderLine@last}
                    {$products = $products|cat:', '}
                {/if}
            {/foreach}
        {/if}
    {/if}

    <span
        class="clerk"
        data-api="log/sale"
        data-sale="{$page.orderId}"
        data-email="{$orderCustomer->Email}"
        data-customer="{$user->Id}"
        data-products='[{$products}]'>
    </span>
   {/if}{% endraw %}
Order tracking code
  1. Klicken Sie auf Gem, um Ihre Änderungen zu speichern.

Mehrere Seiten #

Clerk kann ganz einfach in mehreren Seiten integriert werden, die dasselbe SmartWeb Classic / Hostedshop-Backend nutzen.

Die einfachste Möglichkeit, Clerk in mehreren Seiten in Standard-Setups zu implementieren, ist das Anlegen eines separaten Stores für jede Seite unter my.clerk.io.

So können Sie Produkte, Verkäufe, Währungen usw. trennen, um jede Seite im Blick zu behalten.

  1. Beginnen Sie damit, Ihren Haupt-Store zu erstellen und folgen Sie dem Setup-Guide, um Ihren Store mit Clerk zu verbinden und die Recommendations und/oder Search Results auszuwählen, die Sie in Ihrem Webshop anzeigen möchten.

  2. Wenn Sie die Erst-Einrichtung abgeschlossen haben, kehren Sie zur Startseite von my.clerk.io zurück (indem Sie auf das Clerk-Logo oben links im Seitenmenü klicken) und klicken Sie dann auf "+ Add new store", die letzte Option in der Dropdown-Liste (in der Regel unter dem bestehenden Store und Ihrem Firmennamen):

Add new store dropdown
  1. Auf der Add New Store-Seite, klicken Sie auf Advanced, um alle Einstellungen zu sehen.
Advanced settings
  1. Füllen Sie die Details Ihres Webshops aus und wählen Sie Ihren Haupt-Store aus dem Copy Elements From Existing Store-Dropdown, dann klicken Sie auf Add Store.

Dadurch werden die Elements und Designs aus Ihrem Haupt-Store übernommen.

Copy content from existing store
  1. Jetzt können Sie dem Setup-Guide erneut folgen, um Clerk zu aktivieren, indem Sie auf Getting Started klicken, um Data Sync für die neue Seite durchzuführen.
Getting started page
  1. Wechseln Sie in Ihrem SmartWeb Classic-Backend zu der Seite, die Sie einrichten möchten.

  2. So können Sie Clerk auf der Seite über den Setup-Guide auf my.clerk.io aktivieren.

  3. Wenn die Data Sync abgeschlossen ist, ist Ihre Seite bereit und verwendet das gleiche Setup wie Ihr Haupt-Store.

Denken Sie daran, die Überschriften im Element-> Edit -> Select Design auf die richtige Sprache zu übersetzen.

Sie können diesen Prozess für alle Seiten wiederholen, die Sie mit Clerk verwenden möchten.

Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.