W tym poradniku pomożemy Ci wdrożyć integrację Universal Integration od edrone na platformie sklepowej WordPress.
Integracja składa się z trzech prostych kroków:
Dodania skryptu inicjalizującego do sekcji
<head>dla każdej podstrony.Wygenerowania feed produktowego na platformie oraz zaimplementowanie go w panelu edrone.
Dodania skryptu przesyłającego informację o wykonanych zamówieniach na stronie z podziękowaniem za zakup (tzw. Thank You Page).
Wszystkie bazowe skrypty, które należy dodać po stronie sklepu, znajdziesz w dokumentacji edrone na stronie docs.edrone.me/universal-integration.html. Znajdziesz tu też krótką instrukcję wyjaśniającą.
WAŻNE! Kod bazowy będzie się różnić od docelowych skryptów, które będziesz dodawać na platformie sklepu. Jest to uzależnione od indywidualnego sposobu udostępniania wartości parametrów przez daną platformę takich jak ‘ID produktu’, ‘adres email’, ‘wartość zamówienia’ itd. Te informacje muszą być wyciągnięte z platformy sklepu i przekazane do naszego skryptu.
Jeżeli chodzi o wymagania dotyczące przygotowania feed produktowego możesz je znaleźć w naszym FAQ na stronie help.edrone.me wpisując w wyszukiwarkę słowo kluczowe 'feed’.
Krok 1. Dodanie skryptu inicjalizującego w sekcji <head>
Przechodząc do rzeczy, w pierwszym kroku dodaj skrypt inicjalizujący do sekcji <head> kodu źródłowego strony sklepu. Kod poniżej jest już odpowiednio przygotowany dla platformy WordPress. Będziesz musiał w nim nanieść jedynie drobną poprawkę dodając w kodzie App ID swojego konta edrone.
function inject_email_to_javascript() {
$current_user = wp_get_current_user();
$email = '';
if ($current_user->exists()) {
$email = $current_user->user_email;
}
?>
<script type="text/javascript">
(function (srcjs) {
let userEmail = "<?php echo $email; ?>";
window._edrone = window._edrone || {};
_edrone.app_id = 'YOUR_APP_ID';
_edrone.platform = 'universal';
if (userEmail !== '') {
_edrone.email = userEmail;
}
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>
<?php
}
add_action('wp_head', 'inject_email_to_javascript');Możesz to wykonać na kilka sposobów (poniżej 3 przykłady):
Implementując nasz kod przy użyciu motywu potomnego.
Wykorzystując dedykowaną wtyczkę, która umieszcza kod w odpowiednim miejscu.
Poprzez wykorzystanie Google Tag Managera.
W tym poradniku wykonamy taką integrację z wykorzystaniem motywu potomnego. Jest to motyw dziedziczący wygląd motywu rodzica, który zawiera nasze własne modyfikacje. Korzystamy z takich motywów po to, aby nasze indywidualne zmiany w kodzie nie były nadpisywane i usuwane przy aktualizacji motywu głównego.
Motyw potomny możesz utworzyć ręcznie bądź przy użyciu dedykowanej wtyczki. Aby było szybciej i prościej, wykorzystamy w tym celu wtyczkę Child Theme Configurator.
WAŻNE! Jeżeli posiadasz już indywidualne zmiany np. w swoich arkuszach stylu lub korzystasz z motywu nie wspieranego przez Child Theme Configurator w wersji bezpłatnej, będziesz musiał dostosować ustawienia wtyczki do swoich potrzeb.
Jeżeli posiadasz już motyw potomny, możesz pominąć etap tworzenia go i wprowadzić zmiany w obecnym.
Podążaj teraz zgodnie z krokami instrukcji. Jesteśmy w panelu głównym WordPress. Przejdź do zakładki Wtyczki > Dodaj nową. Wyszukuj wtyczkę 'Child Theme Configurator’. Zainstaluj ją i aktywuj.
Pojawi się ona w zakładce Narzędzia > Child Themes. Przejdź do niej. W tym miejscu utworzysz swój motyw potomny. W punkcie nr 2 wybierz z listy swój motyw i kliknij Analyze. Jeżeli wyświetli się komunikat ‘This theme appears OK to use as a Child theme’, możesz przejść dalej.
Wszystkie pozostałe ustawienia mogą pozostać niezmienione. W kroku nr 4 możesz zmienić nazwę motywu potomnego. W kroku nr 8 możesz dodać opcję zastępowania ustawień menu tymi z motywu nadrzędnego. Więcej informacji na temat tworzenia motywów potomnych możesz łatwo znaleźć przy użyciu wyszukiwarki Google.
Zatwierdź utworzenie motywu potomnego przyciskiem ‘Create New Child Theme’. Motyw potomny zostanie utworzony.
W zakładce Files znajduje się lista wszystkich plików, które znajdują się w oryginalnym motywie. Widzimy tu, że potrzebny nam plik functions.php skopiowany do motywu potomnego.
Utworzony motyw potomny jest teraz na liście motywów do wyboru w zakładce Wygląd > Motywy. Aktywuj go.
Teraz udaj się do zakładki Wygląd > Edytor plików motywu i przejdź do pliku functions.php. W otwartym pliku na samym jego końcu dodaj kod inicjalizujący edrone.
W dodanym kodzie musisz dokonać zmiany jednego elementu App ID w dwóch miejscach. Chodzi o dodanie odpowiedniego ID konta edrone w przeznaczonych do tego miejscach tak, aby skrypt wiedział na jakie konto ma wysyłać zbierane dane.
App ID konta edrone można znaleźć przechodząc z głównego panelu edrone do zakładki USTAWIENIA > INTEGRACJE. Skopiuj App ID i wklej w wyznaczonych do tego miejscach w dodanym wcześniej kodzie.
Po wykonaniu wszystkich zmian kliknij Aktualizuj plik.
BRAWO! Pierwszy krok za nami. W tym momencie do systemu edrone przesyłane są informacje o wykonywanych na stronie zdarzeniach przez klientów. Przejdźmy do kolejnego kroku.
Krok 2. Dodanie feedu produktowego
Aby nasz system poprawnie identyfikował przesyłane zdarzenia, niezbędne będzie dodanie feed produktowego w postaci linku .xml. Na jego bazie rozpoznajemy zdarzenia takie jak przeglądanie produktu czy dodawanie produktów do koszyka. Dlatego bardzo ważne jest aby feed produktowy był aktualny oraz skonfigurowany zgodnie z naszymi wymogami.
Jest wiele darmowych wtyczek umożliwiających wygenerowanie feed produktowego dla sklepu zbudowanego na WooCommerce. Wykorzystamy teraz jedną z nich do przygotowania takiego pliku.
To z jakiej wtyczki do generowania feed skorzystasz zależy w zupełności od Ciebie. W celach pokazowych na potrzeby tego poradnika korzystamy z wtyczki Product Feed PRO for WooCommerce.
Przejdź do zakładki Wtyczki > Dodaj nową i wpisz w wyszukiwarce ‘feed’. Wybierz teraz jeden z modułów do generowania feed. Kliknij Zainstaluj a następnie Włącz.
Przejdź teraz do generalnych ustawień nowego modułu. Wybierz nazwę projektu, kraj, standard pliku - rekomendowany przez nas to Google Shopping / Google Merchant Center - oraz jego format (XML). Możesz tu też ustawić dodatkowe opcje dotyczące wariantów produktów. Zapisz ustawienia i przejdź dalej.
Znajdujemy się teraz w zakładce mapowania pól. Ważne jest dodanie do feed produktowego wszystkich niezbędnych atrybutów. Wymagania dotyczące przygotowania feed produktowego można znaleźć w naszym FAQ na stronie help.edrone.me.
Mapujemy takie pola jak: ID produktu, tytuł, opis, link URL, zdjęcie główne, dostępność, cena, ścieżka kategorii (przy atrybucie Product type). Pozostałe pola nie są ważne w tym momencie. Zapisz ustawienia i przejdź dalej.
Kolejne dwa kroki możesz pominąć klikając Save mappings oraz Continue. W ostatnim kroku wyłącz śledzenie Google Analytics i wygeneruj feed.
Pojawi się nam okno z utworzonymi projektami. Rozwiń ustawienia klikając koło zębate. Na samym dole można znaleźć link do stworzonego pliku.
Masz już wygenerowany link feed produktowego, więc teraz zaloguj się do panelu edrone i przejdź do zakładki USTAWIENIA > PRODUCT FEED. Następnie kliknij IMPORTUJ NOWY FEED, wklej przygotowany link i kliknij DODAJ.
Gotowe! Feed produktowy został dodany do naszego systemu.
Czas przeprocesowania feed produktowego zależy od wielkości pliku. Nie powinno to zająć dłużej niż kilka minut.
Krok 3. Dodanie kodu na stronie z podziękowaniem po zakupie
Pozostał Ci do wykonania ostatni krok. Dodanie skryptu przesyłającego informacje dotyczące składanych zamówień. W tym celu na stronie z podziękowaniem po zakupie musimy umieścić przygotowany przez nas kod.
Aby tego dokonać wykorzystaj utworzony wcześniej motyw potomny. Przejdź ponownie do zakładki Wygląd > Edytor plików motywu i otwórz plik functions.php.
W otwartym pliku na samym końcu - poniżej wcześniej dodanego kodu inicjalizującego - dodaj kod odpowiedzialny za przesyłanie informacji o zamówieniu. Następnie aktualizuj plik.
function edrone_js_thankyou_page( $order_id ) {
$order = wc_get_order( $order_id );
$email = $order->get_billing_email();
$name = $order->get_billing_first_name();
$order_total = $order->get_total();
$items = $order->get_items();
$product_ids = array();
foreach ( $items as $item ) {
$product_id = $item->get_product_id();
$product_ids[] = $product_id;
}
$product_ids_string = implode('|', $product_ids);
?>
<script type="text/javascript">
var orderDetails = {
orderId: "<?php echo $order_id; ?>",
email: "<?php echo $email; ?>",
name: "<?php echo $name; ?>",
productIds: "<?php echo $product_ids_string; ?>",
orderTotal: "<?php echo $order_total; ?>",
};
window._edrone = window._edrone || {};
_edrone.app_id = 'YOUR_APP_ID';
_edrone.email = orderDetails.email;
_edrone.first_name = orderDetails.name;
_edrone.platform = 'universal';
_edrone.action_type = 'order';
_edrone.product_ids = orderDetails.productIds;
_edrone.order_id = orderDetails.orderId;
_edrone.base_payment_value = orderDetails.orderTotal;
_edrone.order_payment_value = orderDetails.orderTotal;
</script>
<?php
}
add_action( 'woocommerce_thankyou', 'edrone_js_thankyou_page' );
Tak samo jak w przypadku kodu inicjalizującego należy dodać odpowiednie App ID konta edrone w przeznaczonym do tego miejscu.
Kod jest już skonfigurowany w taki sposób, aby po jego implementacji nie trzeba było wykonywać innych, dodatkowych zmian.
To wszystko, integracja jest wykonana poprawnie!
Informacje dodatkowe
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.
Mam nadzieję, że cały proces wykonywania integracji przebiegł pomyślnie. W przypadku dodatkowych pytań zachęcamy do kontaktu.
Potrzebujesz dodatkowej pomocy?
Jeśli masz jakiekolwiek dodatkowe pytania dotyczące integracji WooCommerce w edrone, skontaktuj się z nami na hello@edrone.me