Bigcommerce

Get Started

Verbinden Ihres Shops #

1. 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 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 Store hinzufügen.

2. Besucher-Tracking installieren #

Wichtig: In BigCommerce müssen Sie als Store Owner eingeloggt sein, um auf diese Einstellungen zugreifen zu können.

  1. Gehen Sie in Ihrem BigCommerce-Adminbereich zu Storefront > My Themes und klicken Sie auf Make a copy. Dies erstellt eine sichere Theme-Kopie zum Installieren von Clerk.
  1. Klicken Sie beim neuen Theme auf die drei Punkte (…) und wählen Sie Apply, um es als aktives Theme festzulegen.
  1. Klicken Sie auf Advanced > Edit Theme Files, um den Theme Editor zu öffnen.
  1. Ö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_PUBLIC_API_KEY' });

  {{#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 in my.clerk.io > Developers > API Keys finden.

  1. Klicken Sie auf Save & apply file.

3. Bestell-Tracking installieren #

  1. Gehen Sie in Ihrem BigCommerce-Adminbereich zu Advanced Settings > Data Solutions.
  2. Aktivieren Sie Affiliate Conversion Tracking und klicken Sie auf Save.
  1. Öffnen Sie den Affiliate Conversion Tracking-Tab.
  2. Fügen Sie den folgenden Code in das untere 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.

4. Produkte synchronisieren #

  1. Gehen Sie in Ihrem BigCommerce-Adminbereich zu Advanced Settings > API Accounts.
  2. Klicken Sie auf Create API Account und wählen Sie Create V2/V3 API Token.
  1. Benennen Sie den Account “Clerk.io” und gewähren Sie Lesezugriff auf:
    • Content
    • Information & Settings
    • Orders
    • Order Transactions
    • Products

Nach der Konfiguration des API-Accounts müssen Sie nur noch Ihren Shop synchronisieren.

  1. Gehen Sie in Clerk zu my.clerk.io > Data > Configuration und wählen Sie BigCommerce als Ihre Synchronisationsmethode.
  2. Fügen Sie Store Hash, Client ID, Client Secret und Access Token in die BigCommerce-Konfiguration ein und speichern Sie.

Nach dem Speichern starten Sie die Datensynchronisation, wenn Sie bereit sind.

Elemente in der Vorschau anzeigen #

Um mit der Vorschau der Clerk.io-Elemente in Ihrem Webshop zu beginnen, müssen Sie zunächst auf das Theme zugreifen, in das Sie Clerk.io integriert haben.

Melden Sie sich im BigCommerce-Adminportal Ihres Shops an und wählen Sie dann im linken Menü “Storefront” > “My Themes”:

Nachdem Sie Ihr Theme gefunden haben, klicken Sie unten rechts auf die drei Punkte und wählen dann “Customize”:

Nachdem Sie auf “Customize” geklickt haben, können Sie nun den Theme-Stil auswählen, den Sie anpassen möchten. Stellen Sie sicher, dass dieser Stil dem von Ihnen gewählten Theme entspricht (zum Beispiel, wenn Sie mit “Theme Light” arbeiten, wählen Sie hier “Light”):

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

Sobald Sie sich auf der Preview-Seite befinden, achten Sie darauf, oben auf dem Bildschirm “Preview” auszuwählen. In der oberen linken Ecke können Sie die konkrete Shopseite auswählen, die Sie in der Vorschau anzeigen möchten, in diesem Beispiel die Homepage:

Hinweis:

Im Vorschau-Modus erlaubt BigCommerce es nicht, Variablen auf eine durchgeklickte Seite zu übernehmen. Wenn Sie beispielsweise Produkte im Preview in den Warenkorb legen, sind diese nach dem Durchklicken nicht mehr darin enthalten.

Um Clerk.io-Elemente zu testen, die Variablen-Seitenübergänge erfordern, sollten Sie diese Variablen “hart codieren”. Setzen Sie beispielsweise Ihre Suchanfrage auf ein bestimmtes Schlüsselwort oder wählen Sie eine bestimmte Produkt-ID aus, die in den Warenkorb gelegt wird.

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