Get Started

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

Ihren Shop verbinden #

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

Shop hinzufügen #

Nach dem Einloggen bei my.clerk.io müssen Sie als Erstes Ihren Shop hinzufügen:

1. Geben Sie den Namen und die Domain Ihres Onlineshops ein.

2. Wählen Sie die Sprache und Währung aus und wählen Sie BigCommerce als Plattform.

3. Klicken Sie auf Shop hinzufügen.

Besucher-Tracking installieren #

In BigCommerce müssen Sie als Store-Besitzer angemeldet sein, um auf diese Einstellungen zugreifen zu können.

1. Gehen Sie in Ihrem BigCommerce-Adminbereich zu Storefront > My Themes > Advanced > Edit Theme Files.

2. Öffnen Sie in der linken Seitenleiste templates > layout > base.html und fügen Sie das Tracking-Skript im <head>-Bereich direkt vor </head> 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_api_key' });

  // Clerk.js Context
  Clerk('context', {
    product: {{#if cart.items}}[
      {{#each cart.items}}
        "{{product_id}}"{{#unless @last}},{{/unless}}
      {{/each}}
    ]{{else}}{{#if product.id}}"{{product.id}}"{{else}}null{{/if}}{{/if}},

    category: {{#if category.id}}"{{category.id}}"{{else}}null{{/if}},
    page: {{#if page_type}}"{{page_type}}"{{else}}null{{/if}}
  });
  {{#if customer.email}}
  Clerk('call', 'log/email', { email: '{{customer.email}}' });
  {{/if}}
</script>
<!-- End of Clerk.io E-commerce Personalisation tool - www.clerk.io -->

Ersetzen Sie INSERT_PUBLIC_API_KEY durch Ihren Public Key, den Sie unter my.clerk.io > Developers > API Keys finden.

5. Klicken Sie auf Speichern & Datei anwenden.

Bestell-Tracking installieren #

1. Gehen Sie in Ihrem BigCommerce-Adminbereich zu Settings > Advanced > Data Solutions.

2. Aktivieren Sie Affiliate Conversion Tracking und klicken Sie auf Save.

3. Öffnen Sie Affiliate Conversion Tracking und klicken Sie auf Connect, falls BigCommerce Sie auffordert, die Verbindung zu aktivieren.

4. Fügen Sie den folgenden Code unten in das Conversion Tracking Code-Feld ein und klicken Sie auf Save.

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

<!-- Start of Clerk sales tracking -->
<script>
  Clerk('call', 'log/sale/bigcommerce', { sale: '%%ORDER_ID%%' });
</script>
<!-- End of Clerk sales tracking -->

Ersetzen Sie INSERT_PUBLIC_API_KEY durch Ihren Public Key, den Sie unter my.clerk.io > Developers > API Keys. finden.

Daten synchronisieren #

Die Synchronisierung der Daten verbindet Ihren BigCommerce-Shop mit Clerk und ermöglicht Clerk den Zugriff auf Ihre Produkte, Bestellungen, Kunden und weitere Shop-Informationen. So kann Clerk personalisierte Empfehlungen und Suchergebnisse basierend auf Ihren echten Shopdaten bereitstellen. Folgen Sie den Schritten im Sync Data guide, um die Datensynchronisierung einzurichten.

Elemente in der Vorschau anzeigen #

Um mit der Vorschau von Clerk-Elementen in Ihrem Webshop zu beginnen, müssen Sie zunächst das Theme aufrufen, in das Sie Clerk hinzugefügt haben.

Loggen Sie sich in Ihr BigCommerce-Admin-Portal ein und öffnen Sie dann Storefront > My Themes.

Suchen Sie Ihr Theme, klicken Sie auf das Drei-Punkte-Menü und wählen Sie dann Customize.

Nachdem Sie auf „Customize“ geklickt haben, erhalten Sie die Möglichkeit, einen Theme-Stil zum Anpassen auszuwählen.

Wählen Sie den Stil, der Ihrem Theme entspricht. Wählen Sie beispielsweise Light für ein helles Theme.

Wählen Sie den Theme-Stil und klicken Sie dann auf „Continue“.

Sobald Sie sich auf der Vorschauseite befinden, wählen Sie oben auf dem Bildschirm unbedingt „Preview“ aus.

Verwenden Sie das Menü in der oberen linken Ecke, um die gewünschte Shopseite für die Vorschau auszuwählen.

Hinweis:

Im Vorschaumodus erlaubt BigCommerce es nicht, Variablen auf eine angeklickte Seite zu übertragen.

Wenn Sie beispielsweise Produkte im Vorschau-Modus in den Warenkorb legen, werden diese nicht mehr im Warenkorb sein, sobald Sie weiterklicken.

Um Clerk-Elemente zu testen, die das Übertragen von Variablen zwischen Seiten erfordern, sollten Sie diese Variablen „hart codieren“.

Setzen Sie dazu beispielsweise Ihre Suchanfrage auf ein bestimmtes Keyword oder wählen Sie eine bestimmte Produkt-ID, die dem Warenkorb hinzugefügt wird.