1. Strona główna
  2. Instrukcje
  3. Instrukcja wdrożenia YouLead w serwisie ecommerce

Instrukcja wdrożenia YouLead w serwisie ecommerce

Standardowe wdrożenie systemu YouLead w serwisie ecommerce polega na wykonaniu następujących operacji:

  1. Instalacja kodu monitorującego
  2. Proces zakładania konta – rejestracja
  3. Zapis do newslettera
  4. Proces logowania do sklepu
  5. Trackowanie oglądania produktów
  6. Trackowanie koszyka
  7. Trackowanie zakupu
  8. Trackowanie dowolnych eventów na stronie
  9. Personalizowane elementy na stronie www

W poniższym opisie mamy do czynienia z dwoma rodzajami API:

  • API javascript – wywołania funkcji bezpośrednio w kodzie HTML w przeglądarce
  • API serwerowe – wywołania z poziomu serwera wymagające autentykacji

Operacje na koncie użytkownika tj. rejestracja i logowanie wymagają użycia metod API serwerowego.

Parametrem wymaganym do wywołań API serwerowego jest API Secret Key, który jest przekazany do klienta razem z niniejszym dokumentem.

Instalacja kodu monitorującego

Kod monitorujący zawiera identyfikator klienta nadawany przez administratora YouLead. Fragment kodu javascript do wklejenia na każdej podstronie serwisu www jest przekazany razem z niniejszą instrukcją.

Kod należy umieścić bezpośrednio przez tagiem zamykającym </body>.

Proces zakładania konta- rejestracja

Rejestracja użytkownika (założenie konta) w serwisie www jest obsługiwana w YouLead za pomocą wywołania metody /Command/Contact/FillForm z metod Api Serwerowego.

Minimalny zestaw danych, które muszą być przekazane do systemu to ylid oraz parametr formData. Parametr ylid należy odczytać z ciasteczka ylid z przeglądarki.

Przykład:

Dla formularza rejestracji na stronie zawierającego pola:

  • adres email
  • imię
  • nazwisko
  • telefon
  • miasto
  • akceptację regulaminu
  • zgodę na przetwarzanie danych osobowych
  • zgodę na komunikację elektroniczną

Parametr formData powinien mieć wartość:

„formData” : {’email’: ‚jan@kowalski.pl’, ‚imie’: ‚Jan’, ‚nazwisko’: ‚Kowalski’, ‚telefon’: ‚500111222’, ‚miejscowosc’: ‚Warszawa’, ‚akceptacja_regulaminu’: ‚1’, ‚zgoda_przetwarzanie’: ‚1’, ‚zgoda_komunikacja’: ‚1’}

Do parametru formData można wstawić również swoje wartości parametrów. W szczególności warto przekazać tutaj parametr userId wewnętrzny identyfikator usera z bazy sklepu.

Warto w parametrze formData przekazać również następujące parametry:

  • pageUrl (adres url strony)
  • sessionId (zawartość ciasteczka ylssid)
  • utm (zawartość ciasteczka ylutm)
  • formId (identyfikator html formularza)

Po poprawnym wywołaniu metody /Command/Contact/FillForm w systemie zakładany jest nowy kontakt – zakładamy unikalność adresu email.

Proszę pamiętać, że po wywołaniu metody /Command/Contact/FillForm należy wydrukować w kodzie strony ciąg zwracany w parametrze returnCode – patrz opis metody w pliku ze specyfikacją API.

Należy również zwrócić uwagę na fakt, że wywołanie metody /Command/Contact/FillForm powinno mieć miejsce po poprawnej walidacji formularza oraz po poprawnym dodaniu użytkownika do bazy sklepu (zakładamy unikalność adresów email).

Przy założeniu, że podczas procesu zakładania konta w sklepie, system sklepu wysyła do użytkownika email z linkiem aktywacyjnym – proces związany z aktywacją konta w serwisie może przebiegać w następujący sposób:

  • Krok 1: Rejestracja użytkownika na stronie sklepie i wywołanie metody YL /Command/Contact/FillForm. W zależności od tego czy user zaznaczy zgodę na komunikację marketingową mamy dwa przypadki:
    • Jeśli zgoda jest zaznaczona – parametr Status wywołania powinien mieć wartość 2 czyli „Do aktywacji”
    • Jeśli zgoda nie jest zaznaczona – parametr Status wywołania powinien mieć wartość 1 czyli „Brak zgody”
  • Krok 2: Po kliknięciu w link aktywacyjny w mailu aktywacyjnym wysyłanym z systemu sklepu następuje wywołanie metody YL /Command/Contact/CustomEvent z parametrem customEventName = „Aktywacja”. W systemie YL zmieniany jest wtedy status na Aktywny oraz zaznaczana jest informacja (Tag) o tym, że konto w systemie jest Aktywne. Jeśli user w formularzu rejestracyjnym nie zaznaczył zgody na komunikację marketingową, wywołanie metody Aktywacyjnej nie zmieni statusu na Aktywny. Powyższą logikę należy zaimplementować w odpowiedniej regule w zdarzeniu „Zdarzenia własne”.

Powyższe rozwiązanie to metoda „double opt-in”. Możliwy jest również prostszy scenariusz single opt-in polegający na tym, że w pierwszym kroku wywołujemy metodę /Command/Contact/FillForm z parametrem Status = 3. Wtedy nie ma potrzeby w ogóle wywołania metody z Kroku 2.

Zapis do newslettera

Zapis do newslettera jest realizowany podobnie jak rejestracja użytkownika w serwisie za pomocą metody /Command/Contact/FillForm.

Rekomendujemy tutaj metodę double opt-in czyli

  1. Najpierw mamy wywołanie /Command/Contact/FillForm z parametrem Status = 2 (Do aktywacji). Do systemu YL trafia kontakt ze statusem „Do Aktywacji” i wysyłany jest automatycznie email z linkiem aktywacyjnym (konieczna definicja odpowiedniej reguły w systemie YL w zdarzeniu „Wypełniono formularz”).
  2. Jeśli user kliknie w link aktywacyjny Status w systemie zmienia się na Aktywny.

Podobnie jak w przypadku Rejestracji metodę /Command/Contact/FillForm

Proces logowania do sklepu

Po poprawnym zalogowaniu użytkownika w serwisie należy wywołać metodę /Command/Contact/Switch. Podobnie jak w przypadku metody rejestrującej istotne jest wydrukowanie kodu zwracanego w parametrze returnCode.

Trackowanie oglądania produktów

Mówiąc o trackowaniu oglądania produktów należy wziąć pod uwagę dwa elementy:

  • przygotowanie i przekazanie urla do feeda produktowego (szczegółowy opis pliku znajduje się w dokumencie „YouLead – specyfikacja feeda produktowego”
  • We wszystkich miejscach w serwisie www gdzie przeglądane są produkty należy użyć funkcji product z API javascript – przekazując w wywołaniu identyfikator produktu/produktów odpowiadających identyfikatorom zawartym w przekazywanym feedzie produktowym.

Przykład:

ylData = window.ylData = window.ylData || []; ylData.push({ ‚product’: { ‚products’: [‚productId’] } });

Trackowanie koszyka

Po każdorazowej zmianie zawartości koszyka przez użytkownika należy wywołać odpowiednią funkcję przekazującą do systemu całą zawartość koszyka.

Używamy funkcji API Javascript o nazwie cart. Szczegółowy opis metody i parametrów znajduje się w specyfikacji API.

Trackowanie zakupu

Finalizacja zakupu jest przekazywana do systemu za pomocą odpowiedniego wywołania funkcji API javascript o nazwie purchase. Szczegółowy opis metody i parametrów znajduje się w specyfikacji API.

Trackowanie dowolnych eventów na stronie

W celu przekazania do systemu YouLead informacji o zdarzeniu na stronie należy wywołać funkcję API javascript event. Funkcja jest szczegółowo opisana specyfikacji API YouLead.

Przykłady zdarzeń, których wystąpienia można przekazać do YouLead:

  • Przewinięcie slajdera na podstronie serwisu
  • Odsłonięcie przez usera numeru telefonu
  • Wyświetlenie popupu
  • Przechodzenie przez usera poszczególnych etapów kreatora/konfiguratora

Personalizowane elementy na stronie www

Za pomocą YouLead mamy możliwość wyświetlania spersonalizowanych stałych elementów na stronie np. banerów/slajderów. Dodanie takiego elementu sprowadza się do umieszczenia w kodzie html strony odpowiedniego tagu <div> – tam gdzie chcemy, żeby element się pojawił. Podczas renderowania strony div zostanie podmieniony na zawartość spersonalizowaną dla konkretnego użytkownika.

Tag <div>, o którym mowa musi spełniać następujące warunki:

  • id – identyfikator diva musi być skorelowany w aliasem dynamicznego widoku, który jest zdefiniowany w systemie YouLead
  • div powinien mieć klasę css o wartości ‚yldynamiccontent’
  • szerokość, wysokość i miejsce umieszczenia zależą od przeznaczenia i funkcji elementu
Zaktualizowany 27 sierpnia 2021

Czy ten artykuł był pomocny?

Polecane artykuły