Instrukcja dodawania dynamicznych elementów

Popup

Utworzenie widoku

Utworzenie nowego widoku jest możliwe w zakładce Ustawienia/Widoki. W polu „Treść” należy dodać kod HTML, który będzie wyświetlany. Trzeba również nadać „Alias”, który będzie później wykorzystywany do identyfikacji popupa.

Mechanizmem wyświetlania popupów można sterować za pomocą „Podstawowych ustawień”.

„Tryb” – wskazuje kiedy popup zostanie wyświetlony. W trybie „delay” popup zostanie wyświetlony od razu po upłynięciu czasu wskazanego w polu „Delaytime”. Natomiast w trybie „onClose”: musi upłynąć wskazany czas i klient musi podjąć próbę opuszczenia strony.

W sekcji „Ustawienia powtarzania” można zdefiniować czy popup powinien wyświetlać się co odświeżenie strony (wartość 1 w polu „Pageviewinterval”), co sesję („Sessioninterval”), czy raz na dzień („Dayinterval”).

Po zakończonej edycji należy zapisać przygotowany w ten sposób widok.

Umożliwienie wyświetlania popupa

W celu umożliwienia wyświetlania popupa, należy dodać do sekcji Ustawienia/YLCUSTOM kod analogiczny do poniższego:

 if(window.location.href.indexOf('##DOMENA_STRONY##’) != -1 && window.location.href.indexOf('##PARAMETR_TESTOWY##') != -1) {    
   var popupTestowy = document.createElement('div');
   popupTestowy.id = 'popupTestowy ';
   popupTestowy.className = 'ylpopup';
   popupTestowy.style.display = "none";
   popupTestowy.style.width = "600px";
   document.getElementsByTagName('body')[0].appendChild(popupTestowy);
}

Gdzie:

popupTestowy – alias widoku, zdefiniowany w pkt. 1.

##DOMENA_STRONY## – domena strony, na której powinien wyświetlić się popup.

##PARAMETR_TESTOWY## – ciąg znaków, który musi być zawarty w URL, aby popup mógł się wyświetlić. Parametr testowy jest wykorzystywany do testowego wyświetlania popupa tylko pod wskazanym adresem. Po zakończeniu testów można tam wstawić pusty ciąg znaków, czyli:

window.location.href.indexOf('') != -1

Przykładowy kod wyświetlający popup o aliasie „popupDemo” pod adresem https://www.youlead.pl/?popupDemo:

if(window.location.href.indexOf('youlead.pl’) != -1 && window.location.href.indexOf('popupDemo') != -1) {
    var popupDemo = document.createElement('div');
    popupDemo.id = 'popupDemo';
    popupDemo.className = 'ylpopup';
    popupDemo.style.display = "none";
    popupDemo.style.width = "600px";
    document.getElementsByTagName('body')[0].appendChild(popupDemo);
}

Podczas edycji YLCUSTOM należy zwrócić szczególną uwagę na fakt, że w tej zakładce jest umieszczona zawartość pliku JS. Wobec tego jego zawartość powinna być poprawnie walidowana i nie może zawierać błędów. Zrobienie błędu w YLCUSTOM może skutkować wyłączeniem wszystkich popupów na stronie.

Personalizowany element na stronie

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 z 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

Po dodaniu wskazanego diva, należy utworzyć nowy widok w zakładce Ustawienia/Widoki. Jego alias powinien być taki sam jak identyfikator diva, do którego ma zostać wstrzyknięty. Do pola „Treść” należy dodać kod HTML, który będzie wyświetlany. Typ widoku należy ustawić na „empty”.

Widok

Podczas dodawania dynamicznych elementów są wykorzystywane Widoki, które można edytować z zakładce Ustawienia/Widoki. Stanowią one fragmenty kodu, które mogą zostać wykonane w popupie lub personalizowanym elemencie na stronie. Są definiowane z użyciem składni ASP.NET Razor, więc mogą zawierać odpowiednio zagnieżdżony kod HTML, CSS, JavaScript i C#.

Do widoków są wstrzykiwane dane użytkownika, dla którego został uruchomiony widok. Dzięki temu można z nich skorzystać za pomocą odwołania do obiektu Model.ClientOverview.

Obiekt Model.ClientOverview zawiera m. in.:

• identyfikator użytkownika w YouLead: ClientId;
• Informację czy użytkownik jest anonimowy: Anonymous;
• Adres mailowy: Email;
• Imię oraz nazwisko: FirstName, LastName;
• Numer telefonu: Phone;
• Nazwa firmy: FirmName;
• Miasto: City;
• UTMy z pierwszej wizyty: UtmSource, UtmMedium, UtmTerm, UtmContent, UtmCampaign;
• Data utworzenia użytkownika: CreatedAt;
• Data ostatniej modyfikacji użytkownika: LastModified.

Przykład wywołania: Model.ClientOverview.ClientId

Ponadto w widokach jest dostęp do koszyka użytkownika (SingleCart) oraz kolekcji:

ProductOverviews – produkty oglądane przez użytkownika;

ClientsTags – tagi użytkownika;

ClientsProfiles – lejki użytkownika;

ClientsAttributes – atrybuty użytkownika.

AllProducts – wszystkie produkty z feeda produktowego.

Przykład widoku wyświetlającego nazwy aktywnych tagów anonimowego użytkownika:

@using System.Linq
@using Intelisoft.Youlead.Domain.ReadModels.DynamicViews

@if ((bool)Model.ClientOverview.Anonymous)
{
    var clientTags = Model.ClientsTags.Where(t => t.HasTag == 1);
    foreach(var tag in clientTags)
    {
      <p>@tag.Name</p>
    }
}