Standardowe wdrożenie systemu YouLead w serwisie ecommerce polega na wykonaniu następujących operacji:
- Instalacja kodu monitorującego
- Proces zakładania konta – rejestracja
- Zapis do newslettera
- Proces logowania do sklepu
- Trackowanie oglądania produktów
- Trackowanie koszyka
- Trackowanie zakupu
- Trackowanie dowolnych eventów na stronie
- 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
- 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”).
- 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
