Bigcommerce

Get Started

Installiere Clerk auf BigCommerce, indem du diesen einfachen Schritten folgst

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

Verbindung Ihres Shops #

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 funktioniert, 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:

Geben Sie den Name und die Domain Ihres Onlineshops ein.
Wählen Sie die Sprache und Währung, und wählen Sie BigCommerce als Plattform.
Klicken Sie auf Add Store.

Besucher-Tracking installieren #

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

Gehen Sie in Ihrem BigCommerce-Admin zu Storefront > My Themes und klicken Sie auf Make a copy.
Dadurch wird eine sichere Kopie des Themes erstellt, um Clerk zu installieren.

Klicken Sie beim neuen Theme auf die drei Punkte (…)
und wählen Sie Apply, um es als aktives Theme festzulegen.

Klicken Sie auf Advanced > Edit Theme Files, um den Theme-Editor zu öffnen.

Ö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' });

  // Clerk.js Context
  Clerk('context', {
    product: {{#if product.id}}'{{product.id}}'{{else}}null{{/if}},
    category: {{#if category.id}}'{{category.id}}'{{else}}null{{/if}},
    page: {{#if product.id}}null{{else}}{{#if category.id}}null{{else}}'{{page_type}}'{{/if}}{{/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 in my.clerk.io > Developers > API Keys finden.

Klicken Sie auf Save & apply file.

Bestell-Tracking installieren #

Gehen Sie in Ihrem BigCommerce-Admin zu Advanced Settings > Data Solutions.
Aktivieren Sie Affiliate Conversion Tracking und klicken Sie auf Save.

Öffnen Sie den Tab Affiliate Conversion Tracking.
Fügen Sie Folgendes in den unteren Bereich des Conversion Tracking Code 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 in 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 andere Shop-Informationen. So kann Clerk personalisierte Empfehlungen und Suchergebnisse auf Basis Ihrer tatsächlichen Shop-Daten bieten. Folgen Sie den Schritten in der Sync Data guide zum Einrichten der Datensynchronisierung.

Elemente in der Vorschau ansehen #

Um mit der Vorschau von Clerk-Elementen in Ihrem Webshop zu beginnen, müssen Sie zunächst auf das Theme zugreifen, in dem Sie Clerk eingebunden haben.

Melden Sie sich im BigCommerce Admin-Portal Ihres Shops an und wählen Sie dann “Storefront” > “My Themes” aus dem Menü auf der linken Seite:

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

Nachdem Sie auf “Customize” geklickt haben, können Sie als Nächstes einen Theme-Stil auswählen, den Sie anpassen möchten.

Achten Sie darauf, dass dieser Stil dem von Ihnen gewählten Theme entspricht (z. B. bei “Theme Light” wählen Sie hier “Light”):

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

Wenn Sie sich auf der Vorschau-Seite befinden, achten Sie darauf, oben auf dem Bildschirm “Preview” auszuwählen.

In der oberen linken Ecke können Sie die spezifische Webshop-Seite auswählen, die Sie in der Vorschau sehen möchten, in diesem Beispiel die Homepage:

Hinweis:

Im Vorschau-Modus erlaubt BigCommerce nicht, Variablen auf eine angeklickte Seite zu übertragen.

Wenn Sie z. B. Produkte im Vorschau-Modus in den Warenkorb legen, befinden sie sich nach dem Weiterklicken nicht mehr im Warenkorb.

Um Clerk-Elemente zu testen, die Variablen benötigen, die von Seite zu Seite übertragen werden, stellen Sie sicher, dass Sie diese Variablen zum Testen “hardcoden”.

Beispielsweise können Sie Ihre Suchanfrage auf ein bestimmtes Stichwort festlegen oder eine bestimmte Produkt-ID für den Warenkorb auswählen.

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