Bringen Sie unser MatBrain™ in wenigen Minuten auf Ihre Website mit unserem einfachen Leitfaden.
Script Eins:
<div id=“matbrain-widget“></div>
Script Zwei:
(function() {
var script = document.createElement(„script“);
script.src = „https://www.coba.com/tools/matbrain/matbrain-widget.js“;
script.onload = function() {
MatBrainWidget.init({
container: „#matbrain-widget“,
domain: window.location.origin,
// Path to CSV file containing SKU, URL, and Image mappings
csvPath: ‚https://www.example.xyz/media/sku-list.csv‘,
// Additional configuration options
theme: „default“,
language: „en“,
debug: false
});
};
document.head.appendChild(script);
})();
</script>
Schritt 1: Bearbeitung der Vorlage für die MatBrain™-SKU-Liste
Im Rahmen der Einrichtung für MatBrain™ sollten Nutzer die Vorlage für die MatBrain™-SKU-Liste (unten herunterladen) so anpassen, dass sie zu den Produkten passt, die Sie aktuell verkaufen.
Laden Sie die SKU-Listenvorlage herunter.
Bitte prüfen Sie die Vorlage und:
1. Entfernen Sie alle Reihen von Produkten, die sie nicht verkaufen.
2. Aktualisieren Sie die URL-Spalte mit den Seiten-URLs für jedes Produkt von der Vertriebswebsite. Die Vorlage enthält derzeit Beispiellinks
- 1. Aktualisieren Sie die Bildlinks zu URLs der Bilder von ihrer Webseite. Die Vorlage enthält derzeit Beispiellinks.
Bitte behalten Sie die SKUs, da dies eine Referenz in unser System ist. Die anderen Spalten können sich ändern.
Sobald die CSV-Vorlage aktualisiert wurde, muss der Benutzer die CSV-Datei an einem für das MatBrain-Tool™ zugänglichen Ort hochladen. Dies können verschiedene Orte sein:
1. Die Medienbibliothek der Website
2. Ein Digital-Asset-Management (DAM)
3. Website-Verzeichnis über SFTP/FTP
Nachdem die CSV hochgeladen wurde, notieren Sie sich die URL der CSV, da sie in Schritt 2 erforderlich ist.
Schritt 2: Hinzufügen des Snippets (mit CMS und Google Tag Manager)
Oben auf dieser Seite befinden sich zwei Code-Schnipsel, die auf ihrer Webseite hinzugefügt werden müssen.
Beide Code-Schnipsel müssen auf derselben Webseite vorhanden sein, damit das MatBrain-Embed™ funktioniert.
Wenn die Website es erlaubt, können beide Codes in ein Rich Text Editor-Feld oder WYSIWYG-Feld eingefügt werden. Bitte fügen Sie beide Codes in den Bereich ‚Text‘ oder ‚Quelle‘ des Feldes ein, der HTML-Bearbeitung erlaubt. Beispiele dafür sind unten zu sehen:
Wenn die Website keine <script> Tags in Textfeldern erlaubt, kann das zweite Skript im Google Tag Manager hinterlegt und auf der Webseite mit dem ersten Skript ausgelöst werden. Das funktioniert dann mit dem ersten Skript auf der Seite.
Sie können den benutzerdefinierten HTML-Tag verwenden und den zweiten Code-Snippet in einen neuen Tag kopieren und einfügen. Der Trigger sollte so eingestellt sein, dass er auf derselben Webseite wie der erste MatBrain™-Code-Snippet ausgelöst wird. Bitte sehen Sie sich den untenstehenden Screenshot an:
Schritt 2: Den Ausschnitt hinzufügen (Frontend-Einbindung)
Beide Codeschnipsel müssen auf derselben Seite vorhanden sein, damit das MatBrain™-Embed korrekt funktioniert.
Der Snippet kann einer separaten .js-Datei hinzugefügt und in die Vorlage aufgenommen werden oder einfach direkt zur Vorlage über dem Tag </body> hinzugefügt werden.
Schritt 3: Korrektur des zweiten Ausschnitts
Um die Installation des MatBrain™ abzuschließen, bitte den Standort der CSV aus Schritt 1 kopieren und dem zweiten Skript hinzufügen. Der Standort sollte den Text „https://www.coba.com/tools/matbrain/dummy-data.csv“ ersetzen. Bitte stellen Sie sicher, dass vor und nach dem Link ein ‚ hinzugefügt wird.
Schritt 3: (Optional) Änderung der Sprache
Das MatBrain™-Embed ist in mehreren Sprachen verfügbar. Wenn Sie die Sprache ändern möchten, ersetzen Sie bitte das „en“ durch eines der folgenden, um zu bestimmen, in welcher Sprache das MatBrain™ angezeigt wird.
„en“ = Englisch
„fr“ = Französisch
„es“ = Spanisch
„de“ = Deutsch
„it“ = Italienisch
„pl“ = Polnisch
„sl“ = Slowakisch
„pt“ = Portugiesisch
