Narzędzie Bloki HTML pozwala na prostą i szybką konfigurację dynamicznych elementów HTML bezpośrednio na stronie klienta.
Można z łatwością wdrażać takie rozwiązania jak np. sticky bar, bannery promocyjne, dynamiczne CTA czy okienka informacyjne. Co ważne, wszystkie te elementy można tworzyć za pomocą intuicyjnego czteroetapowego kreatora z możliwością podglądu dynamicznych treści na stronie.
Jak utworzyć nowy Blok HTML?
- Przejdź do: Kampanie → www → Bloki HTML.
- Kliknij przycisk „Dodaj nowy”.
- Przejdź przez 4-etapowy kreator konfiguracji bloku.
- Zapisz i aktywuj.
Dlaczego warto korzystać z Bloków HTML?
- Prosta i szybka konfiguracja
- Dynamiczne treści dopasowane do konkretnych grup odbiorców
- Intuicyjny interfejs i kreator krok po kroku
- Szybka edycja, kopiowanie i usuwanie elementów
- Harmonogram wyświetleń
- Pełne statystyki skuteczności – m.in. wyświetlenia, kliknięcia, przychód
Krok 1: Wygląd
W pierwszym kroku tworzysz i projektujesz blok:
- Nazwa – pole, w którym należy wprowadzić nazwę swojego bloku HTML. Nazwa powinna jednoznacznie identyfikować ten blok.
- Alias –pole aliasu, umożliwiające korzystanie z krótszej i łatwiejszej do zapamiętania nazwy bloku. Wymagany do zapisana.
- Opis – miejsce na krótki opis, który pomaga zrozumieć przeznaczenie lub funkcję bloku HTML. Opis ten może być pomocny dla innych użytkowników.
- Edytor kod HTML – obszar, w którym można edytować kod HTML bloku. Pozwala na dostosowywanie zawartości bloku zgodnie z własnymi potrzebami.
- Podgląd – sekcja, która prezentuje podgląd na bieżące zmiany w kodzie HTML. Pomaga wizualnie ocenić efekty wprowadzonych edycji przed zastosowaniem ich na stronie.
Jak uzupełnić dane:
- Podaj ID kontaktu (UUID) lub adres e-mail, aby wskazać odbiorcę, dla którego ma zostać wygenerowana treść.
Wartość musi odpowiadać istniejącemu kontaktowi w systemie.
Przykład: 2a20aed3-5568-34da-3954-3a1db92adc21 lub jan.kowalski@email.pl
- (Opcjonalnie) Uzupełnij parametr, jeśli jest wykorzystywany w kodzie HTML.
Wpisz nazwę lub wartość parametru, która zostanie użyta do personalizacji treści lub w logice warunkowej.
Przykład: campaign_id, source, promo_2025.
- Kliknij Generuj.
- W tym kroku możesz sprawdzić, jak blok będzie się wyświetlał na desktopie i na urządzeniach mobilnych, przełączając widok za pomocą ikon podglądu.
Krok 2: Odbiorcy
W tym kroku definiujesz grupę odbiorców, dla której blok ma się wyświetlać.
Krok 3: Ustawienia wyświetleń
Tutaj należy określić, kiedy i gdzie blok ma się pojawiać:
- Wybór urządzeń – desktop, mobile lub oba typy.
- Uwzględnianie stron – określ strony, na których blok ma się pojawiać, oraz te, które mają zostać wykluczone.
- Selektor CSS – wskaż element na stronie, pod którym chcesz wyświetlić blok HTML, np. tytuł produktu, przycisk „Dodaj do koszyka” albo opis produktu..
Przykłady:- .product-title – tytuł produktu
- #main-banner – baner główny
- button.add-to-cart – przycisk „Dodaj do koszyka”
Jak znaleźć selektor?
- Kliknij prawym przyciskiem myszy wybrany element na stronie.
- Wybierz „Zbadaj” lub „Inspect”.
- Skopiuj nazwę elementu lub selektor CSS z narzędzi deweloperskich przeglądarki.
Krok 4: Podsumowanie i Włączenie
Na zakończenie procesu:
- Sprawdź podsumowanie ustawień – parametry, wyświetlania, odbiorcy.
- Włącz blok – przełącznik znajduje się u góry ekranu (domyślnie blok jest wyłączony).
- Podgląd końcowy – upewnij się, że wszystko działa i wygląda zgodnie z oczekiwaniami.
Monitoring i statystyki
Wszystkie bloki można monitorować pod względem skuteczności – system umożliwia sprawdzenie:
- wyświetleń
- kliknięć
- CTR
- liczby zakupów
- wpływu na przychód
Statystyki prezentowane są w widoku listy z możliwością szybkiego sortowania danych, natomiast w widoku szczegółowym dostępne są dodatkowe opcje filtrowania według zakresu dat oraz rodzaju urządzenia (mobile lub desktop).
Przykłady zastosowania Bloków HTML:
- Sticky bar z kodem rabatowym na wszystkich stronach kategorii
- Licznik odliczający czas do końca promocji wyświetlany tylko na stronie koszyka
- Przycisk „Zobacz podobne” pojawiający się po dodaniu produktu do koszyka
Sterowanie włączeniem Bloków HTML – Krok po kroku
Możesz precyzyjnie zarządzać włączaniem i wyłączaniem Bloków HTML w systemie YouLead. Oto, jak skorzystać z nowych funkcji krok po kroku:
1. Włączanie lub wyłączanie Bloków HTML za pomocą przełącznika:
- Otwórz listę Bloków HTML w sekcji „Kampanie > WWW> Bloki HTML”.
- Utwórz nowy Blok HTML, lub przejdź do edycji.
- Znajdź przełącznik „Włączony/Wyłączony” i z jego pomocą steruj działaniem bloku.
- Zapisz zmiany.
- W widoku listy zobaczysz czerwoną kropkę dla bloków wyłączonych, a zieloną dla włączonych.
2. Ustawienie harmonogramu włączania/wyłączania Bloków HTML:
- Utwórz nowy lub przejdź do edycji wybranego bloku.
- Aby aktywować „Harmonogram” kliknij ikonę kalendarza.
- Zaznacz checkbox „Użyj harmonogramu”.
- Wybierz przedziały czasowe, w których Blok HTML ma być włączony:
- Kliknij w kalendarz, aby wybrać daty i godziny rozpoczęcia oraz zakończenia.
- Zapisz ustawienia.
- Blok HTML z harmonogramem wyświetlania oznaczony jest ikoną zielonego zegara w widoku listy.
3. Zarządzanie statusami Bloków HTML:
Stan bloku jest łatwy do sprawdzenia dzięki ikonom:
- Zielona kropka: Blok HTML jest włączony i działa bez harmonogramu.
- Czerwona kropka: Blok HTML jest wyłączony.
- Zielony zegar: Blok HTML jest włączony w oparciu o ustawiony harmonogram.
- Czerwony zegar: Blok HTML jest wyłączony, ale ma ustawiony harmonogram, który włączy go w przyszłości lub – po zakończeniu harmonogramu – ponownie zmieni jego status na wyłączony.
Dodatkowo, najechanie kursorem na ikonę wyświetli tooltip z informacjami o ustawionym harmonogramie.
4. Wyłączenie harmonogramu:
- Przejdź do edycji Bloku HTML.
- Kliknij ikonę kalendarza..
- Odznacz checkbox „Użyj harmonogramu”.
5. Zapisz zmiany:
- Włączaniem i wyłączaniem Bloku HTML można sterować wyłącznie za pomocą przełącznika „Włączony/Wyłączony”. Po każdej zmianie należy pamiętać o zapisaniu ustawień.
Podsumowanie
Narzędzie Bloki HTML to intuicyjny i elastyczny sposób na zarządzanie dynamicznymi treściami na stronie. 4-krokowy kreator, możliwość targetowania odbiorców, precyzyjne ustawienia wyświetleń oraz monitoring skuteczności dają użytkownikom pełną kontrolę nad tym, co, gdzie i komu wyświetlają.
