Zum Hauptinhalt springen

BigCommerce-Integration: Stencil-Snippets

Erfahren Sie, wie Sie neue Stencil-Snippets zu Ihrem BigCommerce-Webshop hinzufügen.

Verfasst von Paulius

Omnisend-Snippets verbinden Ihren BigCommerce Stencil-Webshop mit Omnisend und ermöglichen Funktionen wie Warenkorberholung, Verkaufsverfolgung, Anmeldeformulare, den Produktwähler und mehr. Omnisend fügt diese Snippets automatisch für neue BigCommerce-Stores hinzu. Wenn Sie eine ältere Version des Webshops oder ein benutzerdefiniertes Stencil-Theme verwenden, müssen Sie diese manuell mit dem Script Manager von BigCommerce hinzufügen.

Dieser Artikel zeigt, wie man manuell Stencil-Snippets hinzufügt, um Ihre BigCommerce-Integration abzuschließen.

Verwenden Sie ein Blueprint-Theme? Befolgen Sie die BigCommerce Blueprint Snippets Anleitung stattdessen.


Bevor Sie beginnen

  • Bevor Sie Snippets hinzufügen, müssen Sie verbinden Sie Ihren BigCommerce-Webshop mit Omnisend

  • Verwenden Sie nur einen Snippet-Typ gleichzeitig: Stencil oder Blueprint. Das Mischen beider wird die Funktionalität beeinträchtigen. Wenn Sie sich nicht sicher sind, welches Theme Sie verwenden, Überprüfen Sie den Leitfaden von BigCommerce

  • Beim Wechseln der Themes müssen Sie die Snippets erneut hinzufügen. Theme-Änderungen entfernen vorhandenen Code.

  • Snippets werden automatisch für neue BigCommerce-Stores hinzugefügt. Wenn Sie eine Fehlermeldung wie die folgende sehen, befolgen Sie die manuellen Installationsschritte in diesem Leitfaden.

Hinzufügen der Snippets

Schritt 1. Finden Sie Ihre Webshop-ID

Um die Tracking-Skripte zu aktivieren, müssen Sie XXXXX mit Ihrer tatsächlichen Shop-ID ersetzen. Ohne es funktioniert der Code nicht.

Du kannst deine Shop-ID in der Adressleiste finden, während du in deinem BigCommerce-Kontrollpanel angemeldet bist. Wenn Sie Hilfe beim Finden benötigen, beziehen Sie sich auf den Leitfaden von BigCommerce.

Webshop-Hash in der Adressleiste

⚠️ Kritisch: Ersetzen Sie XXXXX mit Ihrer Shop-ID in allen drei Skripten vor dem Hochladen.

Schritt 2. Scripts im BigCommerce Script Manager hochladen

Laden Sie als Nächstes drei Skripte in Ihren Webshop hoch, indem Sie BigCommerce’s Script Manager verwenden. Gehe zu Storefront Script Manager in deinem BigCommerce-Admin-Panel.

⚠️ Vor dem Hochladen wenden Sie diese Einstellungen auf jedes Skript an:

  • Platzierung: Footer

  • Skriptkategorie: Essentiell

  • Skripttyp: Skript

Sie wiederholen diese Schritte dreimal, indem Sie unterschiedliche Skriptinhalte einfügen und die richtige Position für jedes auswählen.

Skript 1: Omnisend-Skript

Dieses Skript verfolgt das Verhalten der Besucher und ermöglicht Anmeldeformulare, die Wiederherstellung des Warenkorbs und den Produktwähler auf Ihren Verkaufsseiten.

  • Name: Omnisend-Skript

  • Standort: Storefront-Seiten

Fügen Sie das folgende Skript ein:

<script type="text/javascript">
// SOUNDEST-V6-SM
window.SOUNDEST = window.SOUNDEST || {};
// Do not forget to replace XXXXXX with your shop ID! You can find it in your shop's permanent address: https://store-XXXXXX.mybigcommerce.com/. How to find it: https://goo.gl/1XddvQ
SOUNDEST.shopID = "XXXXXX";
SOUNDEST.shopType = "bigcommerce";
SOUNDEST.baseURL = "https://omnisnippet1.com/";
SOUNDEST.jsFile = "bigcommerce-launcher.js";
SOUNDEST.version = new Date().toISOString().slice(0, 13);
SOUNDEST.pageType = "{{page_type}}";
SOUNDEST.productTitle = "{{product.title}}";
SOUNDEST.productID = "{{product.id}}";
SOUNDEST.categoryTitle = "{{category.name}}";
SOUNDEST.categoryID = "{{category.id}}";
SOUNDEST.token = "{{settings.storefront_api.token}}";
!(function (baseURL, version) {
for (
var t = document.getElementsByTagName("script"), o = !1, s = 0;
s < t.length;
s++
)
"string" == typeof t[s].src &&
0 < t[s].src.indexOf(SOUNDEST.jsFile) &&
(o = !0);
if (!o) {
var i = document.createElement("script");
(i.type = "text/javascript"),
(i.async = !0),
(i.src = baseURL + "inshop/" + SOUNDEST.jsFile + "?v=" + version);
var r = document.getElementsByTagName("script")[0];
r.parentNode.insertBefore(i, r);
}
})(SOUNDEST.baseURL, SOUNDEST.version);
</script>

Skript 2: Omnisend Sales Tracking-Skript

Dieses Skript verfolgt abgeschlossene Bestellungen und sendet Verkaufsdaten an Omnisend zur Analyse der Kampagnen- und Automatisierungsleistung.

  • Name: Omnisend Sales Tracking-Skript

  • Standort: Die Bestellbestätigung

Fügen Sie das folgende Skript ein:

<script type="text/javascript">
// SOUNDEST-V6-SM
window.SOUNDEST = window.SOUNDEST || {};
// Do not forget to replace XXXXXX with your shop ID! You can find it in your shop's permanent address: https://store-XXXXXX.mybigcommerce.com/. How to find it: https://goo.gl/1XddvQ
SOUNDEST.shopID = "XXXXXX";
SOUNDEST.shopType = "bigcommerce";
SOUNDEST.baseURL = "https://omnisnippet1.com/";
SOUNDEST.jsFile = "bigcommerce-launcher.js";
SOUNDEST.version = new Date().toISOString().slice(0, 13);
SOUNDEST.pageType = "{{page_type}}";
SOUNDEST.productTitle = "{{product.title}}";
SOUNDEST.productID = "{{product.id}}";
SOUNDEST.categoryTitle = "{{category.name}}";
SOUNDEST.categoryID = "{{category.id}}";
SOUNDEST.token = "{{settings.storefront_api.token}}";
!(function (baseURL, version) {
for (
var t = document.getElementsByTagName("script"), o = !1, s = 0;
s < t.length;
s++
)
"string" == typeof t[s].src &&
0 < t[s].src.indexOf(SOUNDEST.jsFile) &&
(o = !0);
if (!o) {
var i = document.createElement("script");
(i.type = "text/javascript"),
(i.async = !0),
(i.src = baseURL + "inshop/" + SOUNDEST.jsFile + "?v=" + version);
var r = document.getElementsByTagName("script")[0];
r.parentNode.insertBefore(i, r);
}
})(SOUNDEST.baseURL, SOUNDEST.version);
</script>

💡 Dieses Skript verwendet den gleichen Code wie Skript 1.

Skript 3: Omnisend Der Checkout Tracking-Skript

Dieses Skript verfolgt das Verhalten beim Checkout, um die Genauigkeit der Warenkorbabbrüche zu verbessern.

  • Name: Omnisend Der Checkout Tracking-Skript

  • Standort: Der Checkout

Fügen Sie das folgende Skript ein:

<script type="text/javascript">
// SOUNDEST-V6-SM
window.SOUNDEST = window.SOUNDEST || {};
// Do not forget to replace XXXXXX with your shop ID! You can find it in your shop's permanent address: https://store-XXXXXX.mybigcommerce.com/. How to find it: https://goo.gl/1XddvQ
SOUNDEST.shopID = "XXXXXX";
SOUNDEST.shopType = "bigcommerce";
SOUNDEST.baseURL = "https://omnisnippet1.com/";
SOUNDEST.jsFile = "bigcommerce-checkout-launcher.js";
SOUNDEST.version = new Date().toISOString().slice(0, 13);
SOUNDEST.pageType = "{{page_type}}";
SOUNDEST.productTitle = "{{product.title}}";
SOUNDEST.productID = "{{product.id}}";
SOUNDEST.categoryTitle = "{{category.name}}";
SOUNDEST.categoryID = "{{category.id}}";
SOUNDEST.token = "{{settings.storefront_api.token}}";
!(function (baseURL, version) {
for (
var t = document.getElementsByTagName("script"), o = !1, s = 0;
s < t.length;
s++
)
"string" == typeof t[s].src &&
0 < t[s].src.indexOf(SOUNDEST.jsFile) &&
(o = !0);
if (!o) {
var i = document.createElement("script");
(i.type = "text/javascript"),
(i.async = !0),
(i.src = baseURL + "inshop/" + SOUNDEST.jsFile + "?v=" + version);
var r = document.getElementsByTagName("script")[0];
r.parentNode.insertBefore(i, r);
}
})(SOUNDEST.baseURL, SOUNDEST.version);
</script>

Hinweis: Dieses Skript verwendet einen anderen Dateinamen (bigcommerce-checkout-launcher.js) als Skripte 1 und 2.

Sobald alle Skripte hinzugefügt und gespeichert sind, wird Ihr BigCommerce-Webshop vollständig mit der Omnisend-Überwachung verbunden sein.

Kontakte synchronisieren

Alle Kontakte, die über BigCommerce hinzugefügt oder aktualisiert werden, werden automatisch zu Ihrer Omnisend Die ZielgruppeDie Liste hinzugefügt. Diese Kontakte erhalten ebenfalls die Markierung "source: bigcommerce".

Dies ermöglicht es Ihnen, Kontakte, die von BigCommerce synchronisiert wurden, einfach zu filtern und zu segmentieren. Sie können ein Segment basierend auf Die Markierung ist Quelle:bigcommerce erstellen. Erfahren Sie mehr über die Segmentierung in Omnisend.

Häufig gestellte Fragen

Warum wurden die Snippets nicht automatisch installiert, nachdem ich meinen Webshop verbunden habe?
Die automatische Snippet-Installation funktioniert für die meisten neuen BigCommerce-Stores, aber einige ältere Stores oder benutzerdefinierte Stencil-Themen erfordern eine manuelle Installation. Überprüfen Sie nach dem Verbinden Ihres Webshops innerhalb von 10 Minuten den Script Manager. Wenn keine Omnisend-Skripte angezeigt werden, befolgen Sie die manuellen Installationsschritte in diesem Leitfaden.

Wie überprüfe ich, ob Omnisend-Snippets bereits installiert sind?
Gehe zu BigCommerce → Storefront → Script Manager. Suchen Sie nach drei Omnisend-Skripten: "Omnisend-Skript" (Storefront-Seiten), "Omnisend Verkaufsverfolgungsskript" (Die Bestellbestätigung), und "Omnisend Der Checkout Tracking-Skript" (Der Checkout). Wenn alle drei erscheinen, sind die Snippets installiert.

Ich habe Snippets manuell hinzugefügt, aber Formulare und der Produktwähler funktionieren nicht. Warum?
You likely have duplicate snippets (automatic + manual).Gehe zu BigCommerce → Storefront → Script Manager. Wenn Omnisend-Skripte dort aufgeführt sind, entfernen Sie alle Snippets, die Sie manuell zu den Footer- oder Header-Dateien Ihres Themas hinzugefügt haben. Behalten Sie nur die Skripte im Skript-Manager. Doppelte Snippets beeinträchtigen die Funktionalität.

Kann ich sowohl Blueprint- als auch Stencil-Snippets gleichzeitig verwenden?
Nein. Die Verwendung beider wird die Funktionalität beeinträchtigen. Verwenden Sie nur einen Snippet-Typ basierend auf Ihrem Theme. Wenn Sie von Blueprint zu Stencil (oder umgekehrt) wechseln, entfernen Sie zuerst die alten Snippets und fügen Sie dann die richtigen hinzu.

Ich habe mein BigCommerce-Theme aktualisiert/wechseln, und jetzt funktionieren die Formulare nicht. Was ist passiert?

Theme-Updates oder -wechsel entfernen vorhandene Scripts von BigCommerce. Gehe zu BigCommerceStorefrontScript Manager und überprüfe, ob die drei Omnisend-Scripts noch vorhanden sind. Wenn sie fehlen, befolgen Sie die manuellen Installationsschritte, die oben aufgeführt sind.

Ich sehe "XXXXXX" im Skriptcode. Was soll ich tun?
Ersetzen Sie XXXXXX mit deiner tatsächlichen BigCommerce Shop-ID in allen Scripts. Finde deine Shop-ID in deiner BigCommerce-Admin-URL: https://store-XXXXXX.mybigcommerce.com/. Zum Beispiel, wenn Ihre URL https://store-abc123.mybigcommerce.com/, replace XXXXXX durch abc123 in jedem Skript vor dem Speichern.

Die Wiederherstellung des Warenkorbs funktioniert nicht. Könnte es ein Problem mit dem Snippet sein?

Ja. Die Wiederherstellung des Warenkorbs erfordert, dass alle drei Skripte korrekt funktionieren. Überprüfe BigCommerce Storefront Script Manager und bestätige:

  • Omnisend-Skript ist eingestellt auf Storefront-Seiten (verfolgt Warenkorb-Hinzufügungen).

  • Omnisend Sales Tracking-Skript ist eingestellt auf Die Bestellbestätigung (verfolgt abgeschlossene Bestellungen).

  • Omnisend Der Checkout Tracking-Skript ist eingestellt auf Der Checkout (verfolgt den Checkout-Abbruch).

Wenn ein Skript fehlt oder an der falschen Stelle gesetzt ist, wird die Wiederherstellung des Warenkorbs nicht ausgelöst.


Möchten Sie mit dem Support sprechen? Verwenden Sie den In-App-Chat oder senden Sie Ihre Fragen an [email protected]

Hat dies deine Frage beantwortet?