Get Started
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 die Synchronisierung 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 auf 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:
Geben Sie den Namen 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 #
In BigCommerce müssen Sie als Store Owner angemeldet sein, um auf diese Einstellungen zuzugreifen.
Gehen Sie in Ihrem BigCommerce-Adminbereich zu Storefront > My Themes > Advanced > Edit Theme Files.
Öffnen Sie in der linken Seitenleiste templates > layout > base.html und fügen Sie das Tracking-Skript im
<head>-Abschnitt 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 finden unter my.clerk.io > Developers > API Keys.
- Klicken Sie auf Speichern & Datei anwenden.
Bestell-Tracking installieren #
Gehen Sie im BigCommerce-Adminbereich zu Settings > Advanced > Data Solutions.
Aktivieren Sie Affiliate Conversion Tracking und klicken Sie auf Save.
Öffnen Sie Affiliate Conversion Tracking und klicken Sie auf Connect, falls BigCommerce Sie auffordert, die Verbindung zu aktivieren.
Fügen Sie den folgenden Code in das untere Feld 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 finden unter my.clerk.io > Developers > API Keys..
Daten synchronisieren #
Die Synchronisierung der Daten verbindet Ihren BigCommerce-Shop mit Clerk, sodass Clerk auf Ihre Produkte, Bestellungen, Kunden und andere Shop-Informationen zugreifen kann. Dies ermöglicht Clerk, personalisierte Empfehlungen und Suchergebnisse auf Grundlage Ihrer tatsächlichen Shop-Daten bereitzustellen. Befolgen Sie die Schritte 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 auf das Theme zugreifen, bei dem Sie Clerk hinzugefügt haben.
Melden Sie sich im BigCommerce-Adminportal Ihres Shops an und wählen Sie dann “Storefront” > “My Themes” im Menü auf der linken Seite:
Sobald Sie Ihr Theme gefunden haben, klicken Sie unten rechts auf die drei Punkte und wählen Sie anschließend “Customize”:
Nach dem Klick auf “Customize” haben Sie dann die Möglichkeit, einen Theme-Stil zur Anpassung auszuwählen.
Stellen Sie sicher, dass dieser Stil mit dem von Ihnen gewählten Theme übereinstimmt (zum Beispiel, wenn Sie mit “Theme Light” arbeiten, wählen Sie hier “Light”):
Wählen Sie den Theme-Stil aus und klicken Sie auf “Continue”.
Sobald Sie sich auf der Vorschau-Seite befinden, wählen Sie oben auf dem Bildschirm unbedingt “Preview” aus.
In der oberen linken Ecke können Sie die spezifische Webshop-Seite auswählen, die Sie in der Vorschau anzeigen möchten, z.B. die Homepage in diesem Beispiel:
Hinweis:
Im Vorschaumodus erlaubt BigCommerce nicht, Variablen auf eine geklickte Seite zu übertragen.
Wenn Sie z.B. Produkte im Vorschaumodus in den Warenkorb legen, befinden sie sich nach dem Klick auf eine andere Seite nicht mehr im Warenkorb.
Um Clerk-Elemente zu testen, die Variablen-Seitenübergreifend benötigen, stellen Sie sicher, dass Sie diese Variablen “hard coden”.
Setzen Sie zum Beispiel Ihre Suchanfrage auf ein bestimmtes Stichwort oder wählen Sie eine bestimmte Produkt-ID, die dem Warenkorb hinzugefügt wird.
Diese Seite wurde von einer hilfreichen KI übersetzt, daher kann es zu Sprachfehlern kommen. Vielen Dank für Ihr Verständnis.