Ten poradnik pomoże Ci wdrożyć integrację Universal Integration na platformie sklepowej jaką jest Shoper.
Integracja składa się z 3 kroków, czyli:
1. Dodanie skryptu inicjalizującego
2. Wygenerowanie feedu produktowego na platformie oraz zaimplementowanie go w panelu edrone
3. Dodanie skryptu na Thank You Page Twojego sklepu, czyli na stronie potwierdzającej dokonanie zakupów.
Wszystkie skrypty, które należy dodać znajdziesz w dokumentacji edrone na stronie docs.edrone.me, w sekcji Other, a następnie w zakładce “Integrate with universal integration” (LINK). Znajdziesz tu też, krótką i ogólną instrukcję wyjaśniającą.
Krok 1: Dodanie skryptu inicjalizującego.
UWAGA: NA KOŃCU PUNKTU PIERWSZEGO ZNAJDZIESZ JUŻ GOTOWY SKRYPT DO SKOPIOWANIA, W KTÓRYM WYSTARCZY PODMIENIĆ SWOJE APP_ID
Shoper udostępnia na swojej platformie specjalną zakładkę o nazwie “Integracje własne” w sekcji “Dodatki i integracje” w której z łatwością można taki skrypt dodać.
Przejdź do tej zakładki na platformie.
W tej zakładce masz możliwość dodania skryptów w różnych elementach kodu HTML strony. Nasz skrypt inicjalizujący należy dodać w sekcji HEAD kodu HTML i pierwsza konsola nam to umożliwia, tak więc skopiuj skrypt z naszej dokumentacji.
W tym skrypcie należy dokonać pewnej modyfikacji, czyli podmienić identyfikator jakim jest APP ID, oraz parametr email, oraz first_name. APP ID swojego sklepu znajdziesz w panelu edrone w zakładce Ustawienia -> Integracja -> Platformy
Po skopiowaniu należy go podmienić w dwóch miejscach w skrypcie.
Następnie musisz zmienić parametry email i first_name:
Są to dane zmienne - te dane przesyłane do systemu edrone będą się różnić adresem
e-mail i imieniem (przy implementacji drugiego skryptu w punkcie 3 jeszcze innymi, dodatkowymi danymi, ale do tego punktu dopiero dojdziemy), a więc oznacza to, że musimy określić odpowiedni parametr, który będzie wyświetlał tę zmienną wartość.
Do podmiany tych pól musisz wykorzystać dokumentację, którą przygotował Shoper. Wystarczy, że klikniesz sobie link powyżej okna konsoli tekstowej dla "Potwierdzenia złożenia zamówienia" i otworzy Ci się odpowiednia zakładka.
Poszukaj zmiennej odpowiedzialnej za wyświetlanie adresu e-mail i skopiuj go w całości, włącznie z nawiasami. Podmień go w odpowiedniej linijce. Z parametrem first_name zrób dokładnie to samo. Gdy podmienisz odpowiednio potrzebne pola nie zapomnij zapisać skryptu, wciskając przycisk “ZAPISZ”.
Tak powinien wyglądać skrypt po podmianie danych (poza APP ID, ponieważ tam wklejasz swój unikalny identyfikator):
Poniżej znajdziesz gotowy kod, w którym wystarczy, że podmienisz swoje APP ID na swoje unikalne.
<script type="text/javascript">
(function (srcjs) {
window._edrone = window._edrone || {};
_edrone.app_id = 'YOUR_APP_ID';
_edrone.platform = 'universal';
_edrone.email = '{email}';
_edrone.first_name = '{bill_firstname}';
let doc = document.createElement('script');
doc.type = 'text/javascript';
doc.async = true;
doc.src = ('https:' === document.location.protocol ? 'https:' : 'http:') + srcjs;
let s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(doc, s);
})("//d3bo67muzbfgtl.cloudfront.net/edrone_2_0.js?app_id=YOUR_APP_ID");
</script>
Zakończyliśmy punkt pierwszym czyli wdrożenie skryptu inicjalizującego.
Krok 2: Wygenerowanie feedu produktowego i implementacji w systemie edrone.
Przejdź do zakładki “Inne integracje” na platformie Shoper, a następnie kliknij przycisk konfiguruj dla Google Products.
W sekcji tej zmień status na “Aktywność” i kliknij w link do dokumentu XML. W taki sposób wygenerujesz feed produktowy w formie linku XML w formacie Google Merchant Center, który jest jednym z trzech akceptowanych formatów przez edrone (poza CENEO i IAI).
Teraz musisz zaimplementować go w edrone, tak więc przejdź do panelu głównego Twojego sklepu w edrone, a następnie do sekcji Ustawienia -> Product Feed.
Kliknij przycisk "IMPORTUJ NOWY FEED" i wklej link który wygenerował Ci się na platformie. Następnie zaznacz "OK" i feed jest zaimplementowany - uwaga jego przeprocesowanie może potrwać od kilku minut do kilku godzin - w zależności od jego wielkości i ilości produktów, które zawiera.
Krok 3: Implementacja skryptu na Twojej stronie, która wyświetla się po złożeniu zamówienia.
UWAGA: NA KOŃCU PUNKTU TRZECIEGO ZNAJDZIESZ JUŻ GOTOWY SKRYPT DO SKOPIOWANIA, W KTÓRYM WYSTARCZY PODMIENIĆ SWOJE APP_ID
Skrypt jest ten troszkę bardziej skomplikowany niż poprzedni, dlatego pokażę Ci jak powinien on wyglądać i możesz odtworzyć go, prawie że 1 do 1 na swojej platformie.
Ponownie przejdź na platformę sklepową, do sekcji “Własne integracje”.
Tym razem skorzystamy z pola o nazwie “Potwierdzenie złożenia zamówienia”, czyli właśnie nasze Thank You Page.
Przekopiuj sobie skrypt z dokumentacji - tym razem kolejny z nich, który się tam znajduje i wklej go do konsoli.
Tak jak w przypadku pierwszego skryptu, wymaga on modyfikacji zmiennych wartości.
Pierwszą z nich jest podmiana w polu APP ID, dokładnie w ten sam sposób jak w poprzednim skrypcie - możesz go sobie nawet przekopiować z pierwszego pola tekstowego.
W następnych krokach musisz podmienić pozostałe pola, czyli email, first_name, product_id, order_id oraz order_value za pomocą odpowiednich znaczników, które są akceptowalne przez platformę sklepową Shoper - dokładnie tak jak w przypadku pierwszego skryptu inicjalizującego. Przejdź ponownie do dokumentacji platformy Shoper.
Bardziej złożone jest pole odpowiedzialne za product_ids - bez większych szczegółów, ale informacje o produkcie są przekazywane w pętli, dlatego to pole będzie wyglądać trochę inaczej, ale nie martw się - możesz odtworzyć dokładnie to co zrobię i będzie to poprawne.
W przypadku product_ids mamy znacznik początkowy i końcowy, pomiędzy którymi musi się wyświetlać znacznik określający id produktu i, który musimy rozdzielić jeszcze znakiem PIPE (znajdziesz go pod backspacem na klawiaturze).
Pozostałe pole podmieniamy dokładnie tak jak zmienną e-mail, czyli szukamy w dokumentacji odpowiednie znaczniki i wklejamy do naszego skryptu.
Gdy podmienimy wszystkie niezbędne pola to klikamy u dołu “ZAPISZ”.
Poniżej znajdziesz gotowy kod, w którym wystarczy, że podmienisz swoje APP ID na swoje unikalne.
<script type="text/javascript">
(function () {
window._edrone = window._edrone || {};
_edrone.app_id = 'YOUR_APP_ID';
_edrone.email = '{email}'
_edrone.first_name = '{bill_firstname}';
_edrone.platform = 'universal';
_edrone.action_type = 'universal_order'
_edrone.product_ids = '{products}{products.product_id}|{/products}'; // use "|" sign to separate products from each other
_edrone.order_id = '{order_id}';
_edrone.base_payment_value = '{sum}';
_edrone.order_payment_value = '{sum}';
})();
</script>
Weryfikacja
Jeżeli chcesz zweryfikować poprawność wykonanej integracji, w panelu edrone przejdź do zakładki USTAWIENIA > INTEGRACJE > EVENT MONITOR. Możesz tutaj sprawdzić jakie zdarzenia są przesyłane do edrone.
Skontaktuj się również ze swoim opiekunem lub napisz na hello@edrone.me. Sprawdzimy dla Ciebie poprawność wykonanej integracji oraz wykonamy podpięcia pod wszystkie formularze zapisu do newslettera dostępne na stronie sklepu.
Potrzebujesz dodatkowej pomocy?
Jeśli masz jakiekolwiek dodatkowe pytania dotyczące integracji Shoper w edrone, skontaktuj się z nami na hello@edrone.me