Poniższa instrukcja pomoże uruchomić MatBrain™ na swojej stronie internetowej.

Pierwszy skrypt:

<!– MatBrain Widget Container –>
<div id=”matbrain-widget”></div>

Drugi skrypt:

<!– MatBrain Widget Script –><script>
(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>

Krok 1: Edytowanie szablonu listy produktów MatBrain™

W ramach konfiguracji MatBrain™ użytkownicy powinni zmodyfikować szablon listy produktów MatBrain™ (do pobrania poniżej), aby dopasować go do produktów, które obecnie mają w sprzedaży.

Pobierz szablon listy produktów

Sprawdź szablon i:

  • Usuń wszystkie wiersze z produktami, których nie ma w sprzedaży,
  • Zaktualizuj kolumnę URL, wpisując adresy URL stron internetowych dla każdego produktu (szablon zawiera przykładowe linki do produktów).
  • Zaktualizuj linki do obrazów, wpisując adresy URL obrazów ze swojej strony internetowej (szablon zawiera przykładowe linki do obrazów).

Warto zachować niezmienione numery produktów (SKU), ponieważ stanowią one punkt odniesienia dla naszego systemu w ustalaniu wyników. Pozostałe kolumny mogą zmieniać się.

Po zaktualizowaniu pliku CSV należy przesłać go w lokalizację dostępną dla narzędzia MatBrain™. Może to być jedno z następujących miejsc:

  • Biblioteka multimediów witryny internetowej
  • System zarządzania zasobami cyfrowymi (DAM)
  • Dodanie do katalogu witryny internetowej za pośrednictwem SFTP/FTP.

Po przesłaniu pliku CSV należy zanotować jego adres, ponieważ będzie on potrzebny w drugim kroku.

KROK 2: Dodawanie fragmentu kodu (przy użyciu CMS i Google Tag Manager)

Na początku tej instrukcji znajdują się dwa fragmenty kodu, które należy dodać do swojej strony internetowej.

Aby narzędzie MatBrain™ działało, fragmenty kodu muszą znajdować się na tej samej stronie.

Jeśli strona internetowa na to pozwala, oba fragmenty kodu należy dodać do pola edytora tekstu formatowego lub pola WYSIWYG (What you see is what you get). Oba kody należy dodać do sekcji “Tekst” lub “Źródło”, które umożliwia edycję kodu HTML, jak na przykładach poniżej:

Jeśli strona internetowa nie pozwala na stosowanie tagów <script> w polach tekstowych, drugi skrypt można umieścić w Google Tag Manager i uruchomić na stronie internetowej zawierającej pierwszy skrypt. Będzie on wtedy współpracował z pierwszym skryptem na stronie.

Można użyć niestandardowego tagu HTML i skopiować oraz wkleić drugi fragment kodu do nowego tagu. Wówczas należy tak go skonfigurować, aby uruchamiał się na tej samej stronie internetowej, co pierwszy fragment kodu MatBrain™. Widać to na poniższym zrzucie ekranu:

Krok 2: Dodanie fragmentu kodu (programowanie front-end)

Aby osadzenie narzędzia MatBrain™ działało poprawnie, oba fragmenty kodu muszą znajdować się na tej samej stronie.

Fragment kodu można dodać do osobnego pliku .js i dołączyć do szablonu lub po prostu dodać do samego szablonu powyżej tagu <body>.

Krok 3: Zmiana drugiego fragmentu

Aby zakończyć osadzanie MatBrain™ należy skopiować lokalizację pliku CSV z kroku 1 i dodać ją do drugiego skryptu. Lokalizacja powinna zastąpić tekst “https://www.coba.com/tools/matbrain/dummy-data.csv”. Należy upewnić się, że przed i po linku dodano znak ‘.

Krok 3: (Opcjonalnie) zmiana języka

Moduł MatBrain™ jest dostępny w kilku językach. Jeśli chcesz zmienić język, zamień “en” na jeden z poniższych, aby określić, w którym będzie działał MatBrain™.

„en” = English

„fr” = French

„es” = Spanish

„de” = German

„it” = Italian

„pl” = Polish

„sl” = Slovakian

„pt” = Portuguese