Przejdź do głównej zawartości
P2Lab Stage

Twoja pierwsza scena

Ten walkthrough tworzy wycentrowany modalny popup z obrazem i buttonem “Close”, przypisuje go do kanału sprzedaży i pokazuje podgląd. Gdy zrobisz to raz, każda kolejna scena, którą zbudujesz, idzie według tego samego pięciostopniowego schematu.

Czego potrzebujesz przed startem

Dział zatytułowany „Czego potrzebujesz przed startem”
  • Plugin jest zainstalowany i aktywowany (Instalacja).
  • Master switch włączony dla co najmniej jednego kanału sprzedaży.
  • Jeden obraz w bibliotece mediów (cokolwiek — placeholder też wystarczy).

Krok 1 — Otwórz moduł

Dział zatytułowany „Krok 1 — Otwórz moduł”

Idź do Marketing → Stages w sidebarze admina. Przy pierwszej wizycie zobaczysz pusty stan — No stages yet.

Krok 2 — Utwórz scenę

Dział zatytułowany „Krok 2 — Utwórz scenę”

Kliknij Add stage w prawym górnym rogu. Otwiera się modal Create new stage. Wypełnij:

  • Name — My first popup (cokolwiek działa).
  • Type — Popup (drugi wybór, Slider, osadza się w stronach CMS i wymaga sekcji CMS jako hosta — poza zakresem tego pierwszego walkthrough’a).
  • Display type — Modal (centered with overlay).
  • Default content mode — zostaw domyślnie.
  • Width / Height — zostaw domyślne (600 × 400 px).

Kliknij Create. Scena jest utworzona i lądujesz na jej stronie szczegółów, w zakładce Overview.

Krok 3 — Zbuduj płótno

Dział zatytułowany „Krok 3 — Zbuduj płótno”

Przełącz na zakładkę Editor. Jesteś w wizualnym edytorze — górny toolbar, lewy pasek narzędzi, środkowe płótno, prawe panele, dolna oś czasu.

Dodaj warstwę obrazu:

  1. Na lewym pasku narzędzi kliknij Add image layer.
  2. Warstwa obrazu pojawia się wycentrowana na płótnie. Prawy panel przełącza się na Properties warstwy.
  3. W Properties kliknij image picker i wybierz plik z biblioteki mediów.

Dodaj warstwę buttona:

  1. Kliknij Add button layer na lewym pasku narzędzi.
  2. W Properties ustaw Label na Got it.
  3. Przesuń button pod obraz przeciągając go po płótnie.

Skonfiguruj akcję kliknięcia buttona, żeby zamykał popup:

  1. Kliknij dwukrotnie warstwę buttona w panelu Layers po prawej. Otwiera się modal Layer style.
  2. Przełącz na zakładkę Click action.
  3. Włącz Enable, ustaw Action na Close popup.
  4. Kliknij Apply, żeby zamknąć modal.

Naciśnij Save w górnym toolbarze. Scena ma już zawartość.

Krok 4 — Skonfiguruj trigger, częstotliwość i targetowanie

Dział zatytułowany „Krok 4 — Skonfiguruj trigger, częstotliwość i targetowanie”

Wróć do zakładki Overview (zakładki są na górze strony szczegółów).

W Trigger:

  • Trigger type — Immediately on page load.

W Frequency & dismissal:

  • Frequency — Once per session (odwiedzający widzi go raz, potem jest suppressed do zamknięcia przeglądarki).
  • Show close (X) button — włączone (żeby odwiedzający mogli też zamknąć przez X).
  • Close on overlay click — włączone (kliknięcie poza popupem też go zamyka).

Przełącz na zakładkę Targeting.

W Channels & customer groups:

  • Sales channels — wybierz storefront, na którym ma odpalać.

Resztę (reguły, typy stron, wzorce URL, grupy klientów) zostaw pustą na razie — puste oznacza “dowolne” na tej osi, więc popup będzie odpalał na każdej stronie tego kanału sprzedaży.

Kliknij Save na górze.

Krok 5 — Podgląd na storefroncie

Dział zatytułowany „Krok 5 — Podgląd na storefroncie”

Otwórz storefront wybranego kanału sprzedaży. Popup powinien pojawić się natychmiast po załadowaniu strony. Kliknij Got it albo X — zamyka się. Odśwież stronę — nie pojawia się ponownie (zadziałał limit częstotliwości). Otwórz storefront w trybie incognito — pojawia się ponownie (nowa sesja, brak stanu suppression).

To kompletna scena, od początku do końca.

Co się stało pod maską

Dział zatytułowany „Co się stało pod maską”
  1. Template footera (layout_footer_inner_container) wstrzyknął ukryty kontener [data-p2lab-stage] z kontekstem strony.
  2. Browser JS strzelił do /p2lab-stage/resolve z tym kontekstem.
  3. Backend przefiltrował każdą aktywną scenę przez kanał sprzedaży / typ strony / URL / reguły / harmonogram / stan częstotliwości, pre-renderował te pasujące do HTML i zwrócił.
  4. Plugin zaplanował popup zgodnie z triggerem (natychmiastowy), zamontował, zarejestrował event impression i podłączył handlery close + click-action.
  5. Przy zamknięciu zarejestrował event close i (zależnie od trybu GDPR) zapisał stan odrzucenia do sessionStorage albo sesji PHP.

Gdzie dalej

Dział zatytułowany „Gdzie dalej”