Get Started

Bringen Sie Clerk in wenigen Schritten in 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.

Ihren Shop verbinden #

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

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

Shop hinzufügen #

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

1. Geben Sie den Name und die Domain Ihres Webshops ein.

2. Wählen Sie SmartWeb als Platform und wählen Sie Ihre Currency.

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 dann auf Gem.

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

Verwenden Sie INSERT_PUBLIC_API_KEY im folgenden Snippet und ersetzen Sie ihn 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, damit Clerk auf Ihre Produkte, Bestellungen, Kunden und weitere Shopinformationen zugreifen kann. Das ermöglicht Clerk, personalisierte Empfehlungen und Suchergebnisse basierend auf Ihren tatsächlichen Shopdaten bereitzustellen. Befolgen Sie die Schritte im Sync Data guide zum Einrichten der Datensynchronisation.

Clerk.js hinzufügen #

1. Öffnen Sie in my.clerk.io Developers > Clerk.js.

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 abschließ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 das gleiche SmartWeb Classic / Hostedshop Backend teilen.

Der einfachste Weg, Clerk in mehreren Sites in Standard-Setups zu implementieren, ist, für jede Site einen separaten Store in my.clerk.io. zu erstellen.

So können Sie Produkte, Verkäufe, Währungen usw. trennen, um jede Site übersichtlich zu verwalten.

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

2. Wenn Sie die Ersteinrichtung abgeschlossen haben, gehen Sie zurück zur Startseite von my.clerk.io (durch Klicken auf das Clerk-Logo in der oberen linken Ecke des Seitenmenüs) und klicken Sie anschließend auf "+ Add new store", die letzte Option in der Dropdown-Liste (in der Regel unter den bestehenden Stores und Ihrem Firmennamen):

3. Klicken Sie auf der Add New Store Seite auf Advanced, um alle Einstellungen anzuzeigen.

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

Dies übernimmt die Elements und Designs von Ihrem Haupt-Store.

5. Jetzt können Sie die Setup-Anleitung erneut befolgen, um Clerk zu aktivieren, indem Sie auf Getting Started klicken, um Sync Data für die neue Site auszuführen.

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 durch die Setup-Anleitung bei my.clerk.io aktivieren.

8. Sobald die Data Sync abgeschlossen ist, ist Ihre Site bereit und verwendet das gleiche Setup wie Ihr Haupt-Store.

Denken Sie daran, Headlines in 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.