Get Started

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

Verbindung Ihres Shops #

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

Nachdem Sie diese einfachen Schritte befolgt haben, können Sie Ihren Demo Store sehen, der Ihnen eine persönliche Übersicht 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 angemeldet haben, müssen Sie als Erstes Ihren Shop hinzufügen:

1. Geben Sie den Name 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. Dann klicken Sie auf Gem.

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

Verwenden Sie INSERT_PUBLIC_API_KEY im untenstehenden 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 hinzu.

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

Die Synchronisierung der Daten verbindet Ihren SmartWeb Classic-Shop mit Clerk, sodass Clerk auf Ihre Produkte, Bestellungen, Kunden und andere Shop-Informationen zugreifen kann. So kann Clerk personalisierte Empfehlungen und Suchergebnisse auf Basis Ihrer aktuellen Shop-Daten bereitstellen. Befolgen Sie die Schritte im Sync Data guide, um die Datensynchronisierung einzurichten.

Clerk.js hinzufügen #

1. Klicken Sie auf das Settings icon im Seitenmenü Ihres Shops und dann auf Tracking Code.

2. Kopieren Sie das Tracking Script

3. Fügen Sie diesen Code in die Datei ein, die alle Seiten generiert.

   Dies ist normalerweise Kontrolpanel->Design Manager-> Rediger filer->index.tpl

4. 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 %}

3. Klicken Sie auf Gem, um Ihre Änderungen zu speichern.

Mehrere Sites #

Clerk kann problemlos in mehreren Sites integriert werden, die dasselbe SmartWeb Classic / Hostedshop Backend nutzen.

Die einfachste Methode, Clerk in mehreren Sites bei Standard-Setups zu implementieren, ist das Erstellen eines separaten Stores für jede Site in my.clerk.io.

So können Sie Produkte, Verkäufe, Währungen usw. für jede Site einzeln verwalten.

1. Erstellen Sie zunächst Ihren main Store und folgen Sie der Setup-Anleitung, 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 Ersteinrichtung abgeschlossen haben, gehen Sie zurück zur Startseite von my.clerk.io (indem Sie auf das Clerk-Logo oben links im Seitenmenü klicken) und klicken Sie dann auf "+ Add new store", die letzte Option der Dropdown-Liste (in der Regel unter Ihrem bestehenden Store(s) und Ihrem Firmennamen):

3. Auf der Seite Add New Store klicken Sie auf Advanced, um alle Einstellungen zu sehen.

4. Füllen Sie die Details Ihres Webshops aus und wählen Sie Ihren main Store im Dropdown Copy Elements From Existing Store aus, dann klicken Sie auf Add Store.

Dabei werden die Elements und Designs aus Ihrem main Store übernommen.

5. Nun können Sie erneut die Setup-Anleitung befolgen, um Clerk durch Klicken auf Getting Started zu aktivieren und die Sync Data-Funktion für die neue Site zu nutzen.

6. Wechseln Sie in Ihrem SmartWeb Classic Backend zu der Site, die Sie einrichten möchten.

7. Dadurch können Sie Clerk auf der Site über die Setup-Anleitung bei my.clerk.io aktivieren.

8. Sobald die Data Sync abgeschlossen ist, ist Ihre Site bereit und nutzt das gleiche Setup wie Ihr main Store.

Denken Sie daran, auch die Headlines unter Element-> Edit -> Select Design in die richtige Sprache zu übersetzen.

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