Bannery rekomendacji

Bannery to bloki polecanych produktów, które pomogą Ci zwiększyć konwersję w Twoim sklepie. Klienci chętnie korzystają z rekomendacji produktów i ofert typu upsell – dzięki temu kupują więcej.

Bannery rekomendacji działają na podstawie danych dotyczących zachowań klientów na Twojej stronie, a także na podstawie danych o produkcie. Typy rekomendacji, jakie możesz dzięki temu stworzyć i wyświetlić to:

• Spersonalizowane,
• Uzupełniające,
• Bestsellery,
• Popularne,
• Podobne,
• Cross-selling,
• Rekomendacje alternatywne – dla nowych klientów bez historii zakupowej i wizyt.

Rekomendacje umieścisz bezpośrednio na dowolnej stronie swojego sklepu np. stronie głównej, podstronie z opisem produktu czy stronie koszyka.  A z pomocą prostego edytora z łatwością dostosujesz wygląd bannera do stylu i wyglądu swojego e-sklepu.

Wymagania

Bannery rekomendacji działają na podstawie danych pozyskanych ze strony Twojego sklepu. Żeby rekomendacje wyświetlały się prawidłowo, upewnij się, że kanał Web Tracking jest poprawnie skonfigurowany

Bannery – panel kontrolny

W panelu bocznym wybierz Automatyzacja, a następnie kliknij sekcję Bannery. Wyświetli się tabela zawierająca wszystkie stworzone przez Ciebie bannery pogrupowane według statusów:

• Wszystkie – tu znajdziesz zbiór wszystkich stworzonych bannerów rekomendacji.
• Aktywny – wyświetla bannery, które są w użyciu. Masz do dyspozycji opcje podglądu aktywnych bannerów, możesz wstrzymać ich wyświetlanie lub je usunąć. Nie możesz ich edytować.
• Nieaktywny – na tej liście znajdują się wszystkie niewyświetlane już bannery.  Z tego miejsca możesz je podejrzeć, edytować, aktywować oraz usunąć.
• Szkice – wyświetla bannery w trakcie tworzenia. Ich szkice możesz podejrzeć, edytować lub usunąć.
• Usunięty – trafia tu każdy usunięty banner. Masz do dyspozycji jedynie opcję podglądu.

Tabele zawierają kolumny:

• Status – wyświetla aktualny stan bannera: szkic, aktywny, nieaktywny.
• ID – numer identyfikacyjny scenariusza.
• Nazwa – tytuł nadany przy tworzeniu bannera. 
• Wyświetlenia – informuje, ile razy został wyświetlony dany banner.
• Kliknięcia – informuje, ile razy klient kliknął banner.
• Ostatnia kolumna zawiera akcje związane z zarządzaniem bannerami – podgląd, aktywuj, dezaktywuj, edytuj, usuń.

Dla wszystkich tabel dostępne jest sortowanie oraz zaawansowane filtrowane umieszczone w nagłówkach kolumn. Pod tabelą znajdziesz paginację oraz ustawisz ilość wierszy wyświetlanych w tabeli.

Czas na stworzenie bannera z rekomendacjami

Tworzenie bannerów

Nad tabelą, po prawej stronie kliknij przycisk Stwórz banner.

Na górze znajdziesz pasek postępu z kolejnymi etapami tworzenia bannera rekomendacji. Jest ich pięć. Etap, nad którym aktualnie pracujesz podkreślony jest kolorową linią. Możesz swobodnie poruszać się między etapami klikając na nie. Nie spowoduje to utraty wprowadzonych danych.

Etap 1: Podstawowe ustawienia

W tym miejscu:

1. Wpisz nazwę bannera, będzie ona widoczna w tabelach w panelu kontrolnym.
2. Z rozwijalnej listy wybierz adres strony WWW, na której będzie wyświetlany banner.
3. Opcjonalnie ustaw zakres czasowy – datę i czas – w jakim ma wyświetlać się banner.

Etap 2: Warunki i odbiorcy

Tutaj zadecydujesz, w jakiej sytuacji wyświetli się banner. Nie jest to etap obowiązkowy i możesz go pominąć. Wtedy banner rekomendacji wyświetli się na wszystkich stronach Twojego sklepu.

W sekcji Warunki masz do wyboru:

1. Typ strony – zawęź możliwość wyświetlania bannera do wybranego typu strony:
   • Strony produktu – banner wyświetli się na stronach produktowych w Twoim sklepie,
   • Strony koszyka – banner wyświetli się, gdy klient wejdzie na stronę koszyka,
   • Strony potwierdzenia – banner wyświetli się na stronie z potwierdzeniem zamówienia,
   • Innej – na pozostałych stronach Twojego sklepu.
2. Adres strony – doprecyzuj, jakie słowa kluczowe, frazy lub elementy nazwy domeny muszą znaleźć się w adresie URL strony, żeby wyświetlił się na niej banner. Do wyboru masz:
   • Warunek: równa się, rozpoczyna się, zawiera, wyrażenie regularne.  
   • Wartość – pole, w którym umieszczasz słowo kluczowe lub adres URL.
   • Wartość testowa – wprowadź adres strony lub podstrony, na której chcesz przetestować banner. Następnie kliknij Test i sprawdź, czy banner wyświetla się na stronie.
3. Czas trwania sesji – ustaw przedział czasowy, po którym wyświetli się banner, gdy użytkownik wejdzie na stronę, np. między 10 a 20 sekund.
4. Liczba odwiedzonych stron – ustaw liczbę stron, po których ma się wyświetlić banner. Wskaż również typ strony, jakie musiał odwiedzić użytkownik, aby banner został wyświetlony:
   • Dowolna strona,
   • Strona produktu,
   • Strona koszyka,
   • Strona potwierdzenia płatności.

W sekcji Odbiorcy ustawisz, którzy klienci zobaczą banner:

1. Nowy / powracający – wybierz typ użytkownika z rozwijanej listy.
2. Klient / nie-klient – wybierz, czy banner ma się wyświetlić aktualnym klientom Twojego sklepu, czy wyłącznie osobom, które nie są jeszcze Twoimi klientami.
3. Zgody – zdecyduj, ile i jakich zgód muszą udzielić odbiorcy, żeby można było im wyświetlć banner.
4. Źródło sesji – określ, skąd mają przyjść klienci, którym wyświetli się banner, np. media społecznościowe, bezpośrednie wejście na stronę.

Etap 3: Treść

Do projektowania bannerów rekomendacji służy edytor. Takiego samego edytora używasz do tworzenia e-maili i pop-upów w platformie.

Jeśli to Twoja pierwsza styczność z edytorem w platformie ExpertSender, dokładny opis jego funkcji oraz bloków do tworzenia treści znajdziesz w artykule: Jak działa edytor wiadomości?

Przejdźmy do ustawień bannera rekomendacji.

1. Kliknij opcję Treść na pasku postępu.
2. Otworzy się okno edytora z przestrzenią roboczą, na której umieszczony jest Blok rekomendacji. Kliknij blok, po lewej stronie wyświetli się menu edycji.
3. Z rozwijalnej listy wybierz Adres WWW strony, na której ma się wyświetlać banner.
4. Wybierz Typ rekomendacji:
   • Items-to-user – wyświetla rekomendacje na podstawie zawartości koszyka klienta lub złożonych zamówień.
   • Items-to-item – wyświetla rekomendacje na podstawie produktu aktualnie oglądanego przez klienta.
5. Wybierz jeden z Trybów rekomendacji. Są one różne dla wspomnianych wcześniej typów:
   • Dla items-to-user są to rekomendacje: spersonalizowane, uzupełniające, bestsellery i popularne.
   • Dla items-to-item są to rekomendacje: podobne, bestsellery, cross-selling.
6. Zaznacz opcję Pokaż alternatywne rekomendacje, jeśli chcesz wyświetlać bannery z poleceniami również nowym klientom. Nie wymagają one danych behawioralnych, czyli informacji o zachowaniu użytkowników w twoim sklepie oraz historii zakupowej.
7. W następnych sekcjach określ maksymalną ilość polecanych produktów, które mają znaleźć się w bannerze. Dodatkowo zdecyduj o liczbie produktów w jednym wierszu oraz ich ułożeniu – jeden pod drugim lub obok siebie.
8. Przejdź do stylowania bannera – ustaw Margines, Kolor tła karty produktu i Ramki karty.
9. W sekcji Kompozycja karty produktu zdecyduj, które informacje o produkcie wyświetlą się w bannerze rekomendacji: Zdjęcie, Nazwa, Cena po obniżce, numer ID produktu, Cena i Przycisk z call to action.

Etap 4: Położenie

W tym miejscu wybierzesz miejsce w Twoim e-sklepie, w którym wyświetli się banner rekomendacji. Służą do tego selektory CSS – krótkie wyjaśnienie czym one są znajdziesz w sekcji Czym jest selektor CSS.

1. W sekcji Selektor CSS wprowadź nazwę, ID lub klasę selektora, który będzie punktem orientacyjnym dla bannera rekomendacji. Według tego selektora umiejscowimy banner na stronie Twojego sklepu. Jak znajdziesz selektor CSS na dowolnej stronie?
   • W osobnej karcie otwórz stronę, na której chcesz umieścić banner rekomendacji.
   • Najedź kursorem na element na stronie, względem którego chcesz umieścić banner z rekomendacjami (nad, pod lub wewnątrz elementu).
   • Kliknij prawym przyciskiem myszy na element i z podręcznego menu wybierz Zbadaj lub Inspect.
   • Po prawej stronie przeglądarki otworzy się okno z kodem strony.
   • Zobaczysz podświetlony na niebiesko wybrany przez Ciebie element strony.
   • Najedź na niego kursorem, kliknij prawy przycisk myszy i wybierz z menu pozycje Copy > Copy selector.
   • Przejdź do edytora bannerów i w sekcji Selektor CSS wklej skopiowany tekst.
   • Zwróć uwagę, czy selektor id jest poprzedzony haszem a selektor klasy – kropką.
2. W sekcji Pozycja bannera względem selektora wybierz umiejscowienie bannera na Twojej stronie względem wybranego wcześniej selektora:
   • Pierwsza pozycja wewnątrz – banner wyświetli się jako pierwszy element w grupie innych elementów. Może to być stały moduł widoczny na stronie sklepu, zawierający np. tekst, zdjęcia i przyciski. Banner wyświetli się wewnątrz takiego modułu, przed znajdującymi się w nim elementami.
   • Ostatnia pozycja wewnątrz – banner wyświetli się jako ostatni element wewnątrz grupy innych elementów.
   • Przed elementem – banner wyświetli się przed pojedynczym elementem, np. blokiem tekstu lub zdjęciem produktu.
   • Po elemencie – banner wyświetli się zaraz pod pojedynczym elementem, np. blokiem tekstu lub zdjęciem produktu.
   • Zastąp element – treść z podanego selektora zostanie zastąpiona bannerem stworzonym w ECDP.
3. Test na żywo – wstaw adres podstrony, na których chcesz wyświetlić banner rekomendacji i kliknij Test. Sprawdź, czy zaprojektowany przez Ciebie banner wyświetla się poprawnie. Pamiętaj, że podgląd zadziała wyłącznie na stronach, na których umieszczony jest nasz skrypt śledzący.

Czym jest selektor CSS?

Selektor CSS wskazuje konkretny element na stronie WWW, np. tekst lub zdjęcie, ale też całe moduły złożone z wielu elementów, np. pasek menu, stopka strony, moduł z artykułami blogowymi itp.

Dzięki selektorowi odnajdziesz w kodzie strony element, który Cię interesuje i nadasz mu unikalny styl, np. zmienisz kolor lub wielkość.

W banerach rekomendacji selektor CSS używany jest jako punkt orientacyjny. Wskazuje, względem którego elementu na stronie możesz ulokować banner z rekomendacjami, np. względem paska menu lub zdjęcia danego produktu.

W bannerach rekomendacji używane są następujące selektory:

• Nazwa – np. p to element o nazwie ‘akapit’, h oznacza nagłówek, np. h1
• Id – identyfikator elementu, np. footer, selektor ten jest zawsze poprzedzony haszem: #footer
• Klasa – zawsze poprzedzona znakiem kropki: .yellow

Etap 5: Podsumowanie

W Podsumowaniu wyświetlana jest lista kontrolna z elementami niezbędnymi do wyświetlenia bannera oraz ich statusem:

• Na zielono podświetlone są elementy wypełnione prawidłowo,
• Na czerwono podświetlone są opcje, które musisz poprawić lub uzupełnić. Kliknij ikonę ołówka, żeby przejść do ustawień danego elementu. Czerwone oznaczenia pojawią się też na górnej listwie przy krokach, które wymagają sprawdzenia.
• Pomarańczowe oznaczenie pojawi się przy elementach, których wydajność można poprawić. Jeśli nie wprowadzisz zmian, nie wpłynie na wyświetlenie bannera.

Dzięki liście kontrolnej szybko sprawdzisz, czy wybrane przez Ciebie ustawienia są prawidłowe. Jeśli zdecydujesz się na zmianę któregoś elementu, kliknij ikonę ołówka, aby przejść do edycji.

Na poziomie paska dostępu znajdują się dwa przyciski:

• Zapisz i zamknij – zapisze banner jako szkic i przeniesie Cię do listy bannerów w panelu kontrolnym.
• Aktywuj – banner rekomendacji zacznie wyświetlać się na stronie Twojego sklepu.