{"id":12212,"date":"2025-01-13T10:06:10","date_gmt":"2025-01-13T09:06:10","guid":{"rendered":"https:\/\/help.expertsender.com\/?post_type=ecdp&#038;p=12212"},"modified":"2025-09-19T15:15:12","modified_gmt":"2025-09-19T14:15:12","slug":"tworzenie-pop-upow","status":"publish","type":"ecdp","link":"https:\/\/help.expertsender.com\/pl\/ecdp\/tworzenie-pop-upow\/","title":{"rendered":"Pop-upy"},"content":{"rendered":"\n<p>Pop-up to okno z grafik\u0105, kt\u00f3ra wy\u015bwietla si\u0119 klientom odwiedzaj\u0105cym Twoj\u0105 stron\u0119. Z pomoc\u0105 pop-up\u00f3w mo\u017cesz informowa\u0107 klient\u00f3w o trwaj\u0105cej promocji, nowo\u015bciach lub zach\u0119ca\u0107 do zapisu na newsletter. Na podstawie danych zebranych w platformie mo\u017cesz personalizowa\u0107 tre\u015b\u0107 pop-up\u00f3w i wy\u015bwietla\u0107 je zdefiniowanym wcze\u015bniej segmentom klient\u00f3w.<\/p>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"wymagania\">Wymagania<\/h2>\n\n\n\n<p>Oba rodzaje banner\u00f3w dzia\u0142aj\u0105 na podstawie danych pozyskanych ze strony Twojego sklepu. \u017beby wy\u015bwietla\u0142y si\u0119 prawid\u0142owo, upewnij si\u0119, \u017ce <strong><a href=\"https:\/\/help.expertsender.com\/pl\/ecdp\/konfiguracja-konta-w-expertsender\/#konfiguracja-kanalu-web-tracking\">kana\u0142 Web Tracking jest poprawnie skonfigurowany<\/a><\/strong>.<\/p>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"statusy-i-metryki\">Pop-upy \u2013 statusy i metryki marketingowe<\/h2>\n\n\n\n<p>Statusy wszystkich utworzonych pop-up\u00f3w oraz dane o ich skuteczno\u015bci znajdziesz w tabeli w sekcji <strong>Automatyzacja <\/strong>&gt;<strong> Pop-upy<\/strong>. Dzi\u0119ki niej mo\u017cesz \u015bledzi\u0107 wyniki ka\u017cdego pop-upu i dostosowywa\u0107 strategi\u0119 sprzeda\u017cy.<\/p>\n\n\n\n<p>Pop-upy maj\u0105 nast\u0119puj\u0105ce statusy<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Wszystkie<\/strong> \u2013 ta kategoria wy\u015bwietla wszystkie pop-upy zapisane w platformie,<\/li>\n\n\n\n<li><strong>Aktywny<\/strong> \u2013 wy\u015bwietla uruchomione na Twojej stronie pop-upy. Z tego poziomu nie mo\u017cesz edytowa\u0107 pop-upa, a jedynie podejrze\u0107 jego projekt, dezaktywowa\u0107 lub usun\u0105\u0107.<\/li>\n\n\n\n<li><strong>Nieaktywny<\/strong> \u2013 wy\u015bwietla pop-upy, kt\u00f3re nie s\u0105 u\u017cywane. Lista ta nie zawiera szkic\u00f3w.&nbsp; Z tego poziomu mo\u017cesz aktywowa\u0107 dowolny pop-up klikaj\u0105c w ikon\u0119 Aktywuj.<\/li>\n\n\n\n<li><strong>Szkic<\/strong> \u2013 wy\u015bwietla pop-upy trakcie projektowania. Mo\u017cesz doko\u0144czy\u0107 projekt pop-upa klikaj\u0105c w ikon\u0119 Edytuj.<\/li>\n\n\n\n<li><strong>Usuni\u0119ty<\/strong> \u2013 wy\u015bwietla zb\u00f3r wszystkich usuni\u0119tych pop-up\u00f3w. Nie ma mo\u017cliwo\u015bci przywr\u00f3cenia raz usuni\u0119tego pop-upa.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Metryki marketingowe dost\u0119pne w tabeli to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Wy\u015bwietlenia <\/strong>\u2013 pokazuje \u0142\u0105czn\u0105 liczb\u0119 wy\u015bwietle\u0144 pop-upa w ustawionym przez Ciebie czasie, na wszystkich podstronach Twojego sklepu.<\/li>\n\n\n\n<li><strong>Klikni\u0119cia<\/strong> \u2013 pokazuje \u0142\u0105czn\u0105 liczb\u0119 klikni\u0119\u0107 w wy\u015bwietlanego pop-upa.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"tworzenie-pop-upow\">Tworzenie pop-up\u00f3w<\/h2>\n\n\n\n<p>Nad tabel\u0105, po prawej stronie kliknij przycisk <strong>Stw\u00f3rz nowy pop-up<\/strong>.<\/p>\n\n\n\n<p>Na g\u00f3rze znajdziesz pasek post\u0119pu z etapami tworzenia pop-up\u00f3w. Etap, na kt\u00f3rym obecnie si\u0119 znajdujesz podkre\u015blony jest kolorow\u0105 lini\u0105. Mo\u017cesz dowolnie przechodzi\u0107 mi\u0119dzy etapami klikaj\u0105c w nie.<\/p>\n\n\n\n<p>Po przej\u015bciu do Podsumowania, przy wcze\u015bniejszych etapach mo\u017ce pojawi\u0107 si\u0119 kropka \u2013 oznacza to, \u017ce dany etap wymaga uzupe\u0142nienia.<\/p>\n\n\n\n<div class=\"infobox infobox-yellow\">\n  <div class=\"infobox-inner\">\n    <div class=\"infobox-icon\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M12 8.62988C12.4142 8.62988 12.75 8.96567 12.75 9.37988V13.1199C12.75 13.5341 12.4142 13.8699 12 13.8699C11.5858 13.8699 11.25 13.5341 11.25 13.1199V9.37988C11.25 8.96567 11.5858 8.62988 12 8.62988Z\" fill=\"currentColor\"\/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M11.9939 15.375C11.9956 15.375 11.9973 15.375 11.999 15.375C12.0238 15.375 12.0483 15.3762 12.0725 15.3786C12.5566 15.4197 12.999 15.8152 12.999 16.375C12.999 16.6701 12.8662 16.9159 12.7031 17.0791C12.5399 17.2422 12.2941 17.375 11.999 17.375C11.4255 17.375 10.999 16.8997 10.999 16.375C10.999 15.845 11.4067 15.4141 11.9271 15.3775C11.9475 15.3759 11.9681 15.375 11.989 15.375C11.9906 15.375 11.9923 15.375 11.9939 15.375Z\" fill=\"currentColor\"\/><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M13.3559 4.5009C12.7442 3.42451 11.2053 3.42989 10.6034 4.4984L10.6015 4.50185L2.95204 17.9156C2.34706 18.9735 3.11079 20.2903 4.32998 20.2903H19.65C20.8644 20.2903 21.6305 18.965 21.0286 17.9168L21.0276 17.9151L13.4395 4.61952C13.4081 4.58298 13.38 4.54329 13.3559 4.5009ZM14.5885 3.63986C13.3595 1.67728 10.4533 1.71162 9.29754 3.76042C9.2972 3.76102 9.29686 3.76162 9.29652 3.76222L1.64993 17.171C1.64984 17.1711 1.64976 17.1713 1.64967 17.1714C0.473119 19.2295 1.95934 21.7903 4.32998 21.7903H19.65C22.0132 21.7903 23.5071 19.2223 22.3299 17.1707C22.3297 17.1704 22.3296 17.1701 22.3294 17.1699L14.6804 3.76755C14.6541 3.72162 14.6233 3.67887 14.5885 3.63986Z\" fill=\"currentColor\"\/><\/svg>    <\/div>\n    <div class=\"infobox-content\">\n                    <div class=\"infobox-text\">\n          <p>Regularnie\u00a0<strong>zapisuj swoje projekty<\/strong>, poniewa\u017c funkcja automatycznego zapisu nie jest jeszcze dost\u0119pna.<\/p>\n        <\/div>\n          <\/div>\n  <\/div>\n<\/div>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"podstawowe-ustawienia\">Etap 1: Podstawowe ustawienia<\/h3>\n\n\n\n<p>W tej sekcji wprowadzisz wst\u0119pne informacje o tym, w jaki spos\u00f3b ma dzia\u0142a\u0107 pop-up.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Nadaj <strong>nazw\u0119<\/strong> tworzonemu pop-upowi, b\u0119dzie ona widoczna w panelu kontrolnym.<\/li>\n\n\n\n<li>W sekcji <strong>Strona WWW<\/strong> wybierz z rozwijanego menu adres strony, na kt\u00f3rej ma si\u0119 wy\u015bwietla\u0107 pop-up.<\/li>\n\n\n\n<li>Wybierz <strong>Zakres czasowy,<\/strong> w jakim ma dzia\u0142a\u0107 pop-up &#8211; ustaw dat\u0119 rozpocz\u0119cia i zako\u0144czenia wy\u015bwietlania si\u0119 pop-upa.<\/li>\n\n\n\n<li>W sekcji <strong>Cz\u0119stotliwo\u015b\u0107<\/strong> ustawisz cz\u0119stotliwo\u015b\u0107 wy\u015bwietlania si\u0119 grafiki:\n<ul class=\"wp-block-list\">\n<li><strong>Wy\u015bwietl raz na sesj\u0119<\/strong> \u2013 wy\u015bwietla pop-up raz na jedn\u0105 wizyt\u0119 klienta w Twoim sklepie. Je\u015bli klient opu\u015bci Tw\u00f3j sklep zamykaj\u0105c kart\u0119 lub okno przegl\u0105darki, oznacza to koniec sesji. Je\u015bli ponownie odwiedzi sklep, pop-up zostanie wy\u015bwietlony.<\/li>\n\n\n\n<li><strong>Wy\u015bwietl raz na <\/strong>+ filtr \u2013 ustaw ile razy na dan\u0105 jednostk\u0119 czasu ma by\u0107 wy\u015bwietlony pop-up, np. raz na 2 dni, raz na 2 tygodnie.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li>W sekcji <strong>\u015aledzenie<\/strong> w\u0142\u0105czysz \u015bledzenie parametr\u00f3w niestandardowych i Google Analytics.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-ustawienia-podstawowe.png\"><img loading=\"lazy\" decoding=\"async\" width=\"814\" height=\"881\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-ustawienia-podstawowe.png\" alt=\"\" class=\"wp-image-12939\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-ustawienia-podstawowe.png 814w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-ustawienia-podstawowe-277x300.png 277w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-ustawienia-podstawowe-768x831.png 768w\" sizes=\"auto, (max-width: 814px) 100vw, 814px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"zachowanie\">Etap 2: Zachowanie<\/h3>\n\n\n\n<p>Tutaj zdecydujesz, w jakiej sytuacji wy\u015bwietli si\u0119 pop-up. W polu <strong>Zdarzenie<\/strong> wybierz jedn\u0105 lub kilka z pi\u0119ciu akcji:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Wej\u015bcie<\/strong> \u2013 pop-up wy\u015bwietli si\u0119 przy wej\u015bciu u\u017cytkownika na stron\u0119.<\/li>\n\n\n\n<li><strong>Pr\u00f3ba wyj\u015bcia<\/strong> &#8211; pop-up wy\u015bwietli si\u0119, gdy u\u017cytkownik wyjedzie kursorem poza okno strony sklepu.<\/li>\n\n\n\n<li><strong>Przewijanie<\/strong> \u2013 pop-up poka\u017ce si\u0119, gdy u\u017cytkownik zacznie przewija\u0107 stron\u0119. Ustaw pr\u00f3g (g\u0142\u0119boko\u015b\u0107 przewijania strony w proc.), kt\u00f3rego mini\u0119cie wywo\u0142a pop-up.<\/li>\n\n\n\n<li><strong>Dodanie do koszyka<\/strong> &#8211; pop-up wy\u015bwietli si\u0119, gdy u\u017cytkownik doda rzecz do koszyka.<\/li>\n\n\n\n<li><strong>Usuni\u0119cie z koszyka<\/strong> &#8211; pop-up wy\u015bwietli si\u0119 po usuni\u0119ciu dowolnego produktu z koszyka.<\/li>\n\n\n\n<li><strong>Zdarzenie niestandardowe <\/strong>\u2013 pop-up wy\u015bwietli si\u0119 w wyniku wykonania jakiej\u015b akcji przez u\u017cytkownika w Twoim sklepie, np. klikni\u0119cia przycisku lub linku, zamiast od razu po wej\u015bciu na stron\u0119. Aby skorzysta\u0107 ze zdarzenia niestandardowego, trzeba wykona\u0107 kilka dodatkowych krok\u00f3w. Instrukcj\u0119 znajdziesz w sekcji <strong><a href=\"https:\/\/help.expertsender.com\/pl\/ecdp\/tworzenie-pop-upow\/#zdarzenie-niestandardowe-konfiguracja\">Jak skonfigurowa\u0107 zdarzenie niestandardowe<\/a><\/strong>.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-zdarzenia-1.png\"><img loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"796\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-zdarzenia-1.png\" alt=\"\" class=\"wp-image-14725\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-zdarzenia-1.png 683w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-zdarzenia-1-257x300.png 257w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><\/a><\/figure>\n\n\n\n<p>W sekcji <strong>Wy\u015bwietlanie i interakcja<\/strong> w\u0142\u0105czysz opcj\u0119 zamykania pop-upu na klikni\u0119cie t\u0142a.<\/p>\n\n\n\n<div style=\"height:0px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>W polu <strong>Warunki<\/strong> ustawisz dodatkowe wymogi, kt\u00f3re doprecyzuj\u0105 moment wy\u015bwietlania pop-up\u00f3w:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Typ strony<\/strong> \u2013 kliknij wy\u015bwietlone okno i wybierz typ podstrony, na kt\u00f3rej ma si\u0119 pojawi\u0107 tworzony pop-up, np. strona produktu, koszyka lub potwierdzenia p\u0142atno\u015bci.<a href=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-typstrony.png.webp\">\n<img loading=\"lazy\" decoding=\"async\" width=\"1820\" height=\"933\" class=\"wp-image-12948\" style=\"width: 1820px;\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-typstrony.png\" alt=\"\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-typstrony.png 661w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-typstrony-300x154.png 300w\" sizes=\"auto, (max-width: 1820px) 100vw, 1820px\" \/><\/a><\/li>\n\n\n\n<li><strong>Adres strony<\/strong> \u2013 pojawi\u0105 si\u0119 trzy filtry, z pomoc\u0105 kt\u00f3rych ustawisz adres docelowej strony lub stron dla pop-upa:\n<ul class=\"wp-block-list\">\n<li><strong>Warunek<\/strong> \u2013 wybierz opcj\u0119: r\u00f3wna si\u0119, rozpoczyna si\u0119, zawiera lub wyra\u017cenie regularne. Opcja wyra\u017cenie regularne otwiera okno na wprowadzenie maksymalnie 10 wyra\u017ce\u0144 regularnych.<\/li>\n\n\n\n<li><strong>Warto\u015b\u0107<\/strong> \u2013 wprowad\u017a wyra\u017cenie, liczb\u0119, s\u0142owo kluczowe, kt\u00f3re jest zawarte w adresie strony<\/li>\n\n\n\n<li><strong>Warto\u015b\u0107 testowa<\/strong> \u2013 wprowad\u017a adres strony lub podstrony, na kt\u00f3rej chcesz przetestowa\u0107 pop-up. Po wprowadzeniu&nbsp; kliknij Test i sprawd\u017a, czy pop-up pojawi\u0142 si\u0119 na stronie.<a href=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-warunki-adres-strony.png.webp\">\n<img loading=\"lazy\" decoding=\"async\" width=\"1820\" height=\"1253\" class=\"wp-image-12951\" style=\"width: 1820px;\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-warunki-adres-strony.png\" alt=\"\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-warunki-adres-strony.png 661w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-warunki-adres-strony-300x207.png 300w\" sizes=\"auto, (max-width: 1820px) 100vw, 1820px\" \/><\/a><\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Czas trwania sesji<\/strong> \u2013 ustaw przedzia\u0142 czasowy, po kt\u00f3rym wy\u015bwietli si\u0119 pop-up, gdy u\u017cytkownik wejdzie na stron\u0119, np. mi\u0119dzy 3 a 5 sekund.<\/li>\n\n\n\n<li><strong>Liczba odwiedzonych stron<\/strong> \u2013 ustaw liczb\u0119 stron, po kt\u00f3rych ma si\u0119 wy\u015bwietli\u0107 pop-up. Wska\u017c r\u00f3wnie\u017c typ strony, jakie musia\u0142 odwiedzi\u0107 u\u017cytkownik, aby pop-up zosta\u0142 wy\u015bwietlony: dowolna strona, strona produktu, strona koszyka, strona potwierdzenia p\u0142atno\u015bci.<\/li>\n<\/ol>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-warunki-czas-sesji.png\"><img loading=\"lazy\" decoding=\"async\" width=\"661\" height=\"386\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-warunki-czas-sesji.png\" alt=\"\" class=\"wp-image-12955\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-warunki-czas-sesji.png 661w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-warunki-czas-sesji-300x175.png 300w\" sizes=\"auto, (max-width: 661px) 100vw, 661px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>W polu <strong>Odbiorcy<\/strong> zaw\u0119zisz liczb\u0119 odbiorc\u00f3w, kt\u00f3rym zostanie wy\u015bwietlony pop-up.<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Nowy \/ powracaj\u0105cy<\/strong> \u2013 wybierz typ u\u017cytkownika z rozwijanej listy.<\/li>\n\n\n\n<li><strong>Klient \/ nie-klient<\/strong> \u2013 wybierz, czy pop-up ma by\u0107 wy\u015bwietlony aktualnym klientom Twojego sklepu, czy wy\u0142\u0105cznie osobom, kt\u00f3re nie s\u0105 jeszcze Twoimi klientami.<\/li>\n\n\n\n<li><strong>Zgody<\/strong> \u2013 zdecyduj, ile i jakich zg\u00f3d musz\u0105 udzieli\u0107 odbiorcy, \u017ceby mo\u017cna by\u0142o im wy\u015bwietla\u0107 pop-up. Mo\u017cesz wybra\u0107 jedn\u0105 lub wiele zg\u00f3d:\n<ul class=\"wp-block-list\">\n<li>Wy\u015bwietl odwiedzaj\u0105cym, kt\u00f3rzy udzielili wszystkich zg\u00f3d \u2013 pop-up zobacz\u0105 odwiedzaj\u0105cy, kt\u00f3rzy udzielili wszystkich wybranych przez Ciebie zg\u00f3d.<\/li>\n\n\n\n<li>Wy\u015bwietl odwiedzaj\u0105cym, kt\u00f3rzy nie udzielili zg\u00f3d \u2013 pop-up zobacz\u0105 odwiedzaj\u0105cy, kt\u00f3rzy nie udzielili \u017cadnej z wybranych przez Ciebie zg\u00f3d.<\/li>\n\n\n\n<li>Wy\u015bwietl odwiedzaj\u0105cym, kt\u00f3rzy udzielili dowolnych zg\u00f3d \u2013 pop-up zobacz\u0105 odwiedzaj\u0105cy, kt\u00f3rzy udzielili jednej z wybranych przez Ciebie zg\u00f3d.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>\u0179r\u00f3d\u0142o sesji<\/strong> \u2013 wska\u017c, sk\u0105d maj\u0105 przyj\u015b\u0107 klienci, kt\u00f3rym wy\u015bwietli si\u0119 pop-up, np. konkretny kana\u0142 spo\u0142eczno\u015bciowy, wyszukiwarka, artyku\u0142 linkuj\u0105cy na stron\u0119 z pop-upem. Mo\u017cesz te\u017c poda\u0107 znacznik UTM konkretnej kampanii marketingowej.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-odbiorcy.png\"><img loading=\"lazy\" decoding=\"async\" width=\"684\" height=\"500\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-odbiorcy.png\" alt=\"\" class=\"wp-image-12958\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-odbiorcy.png 684w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-zachowanie-odbiorcy-300x219.png 300w\" sizes=\"auto, (max-width: 684px) 100vw, 684px\" \/><\/a><\/figure>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"tresc\">Etap 3: Tre\u015b\u0107<\/h3>\n\n\n\n<p>Do projektowania banner\u00f3w s\u0142u\u017cy edytor. Takiego samego edytora u\u017cywasz w ECDP do tworzenia e-maili, formularzy i banner\u00f3w.<\/p>\n\n\n\n<p>Je\u015bli to Twoja pierwsza styczno\u015b\u0107 z edytorem w platformie ExpertSender, dok\u0142adny opis jego funkcji oraz blok\u00f3w tre\u015bci znajdziesz w artykule: <strong><a href=\"https:\/\/help.expertsender.com\/pl\/ecdp\/jak-dziala-edytor-tresci\/\">Jak dzia\u0142a edytor tre\u015bci?<\/a><\/strong><\/p>\n\n\n\n<p>W edytorze stworzysz r\u00f3wnie\u017c pop-up z zawarto\u015bci\u0105 koszyka lub z rekomendacjami. Szczeg\u00f3\u0142owy opis znajdziesz w tym artykule: <strong>Koszyk i rekomendacje w tre\u015bciach \u2013 konfiguracja krok po kroku<\/strong>.<\/p>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"zakladka-pop-up\">Zak\u0142adka \u201ePop-up\u201d<\/h4>\n\n\n\n<p>W zak\u0142adce ustawisz, w kt\u00f3rym miejscu pop-up wy\u015bwietli si\u0119 na ekranie komputera, telefonu b\u0105d\u017a tabletu oraz przetestujesz jak pop-up prezentuje si\u0119 na Twojej stronie.<\/p>\n\n\n\n<p>W sekcji <strong>Pop-up<\/strong> ustawisz<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Pozycj\u0119<\/strong> pop-upu na stronie.<\/li>\n\n\n\n<li>Jego<strong> Szeroko\u015b\u0107, <\/strong>w pikselach, procentach lub automatyczn\u0105.<\/li>\n\n\n\n<li>Zdecydujesz, czy pop-up ma mie\u0107<strong> zaokr\u0105glone rogi.<\/strong><\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-polozenie.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"919\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-polozenie.gif\" alt=\"\" class=\"wp-image-12961\"\/><\/a><\/figure>\n\n\n\n<p>W nast\u0119pnych sekcjach ustawisz:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Content<\/strong> \u2013 wygl\u0105d i po\u0142o\u017cenie <strong>tre\u015bci<\/strong> wy\u015bwietlanych w pop-upie.<\/li>\n\n\n\n<li><strong>Overlay <\/strong>\u2013 kolor <strong>t\u0142a<\/strong> widocznego za pop-upem.<\/li>\n\n\n\n<li><strong>Close buton<\/strong> \u2013 umiejscowienie i wygl\u0105d <strong>przycisku zamykania<\/strong>, widocznego na pop-upie.<\/li>\n\n\n\n<li><strong>\u0141\u0105cza<\/strong> \u2013 kolor, podkre\u015blenie i zmiana wygl\u0105du &nbsp;link\u00f3w po najechaniu kursorem.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-tlo.gif\"><img loading=\"lazy\" decoding=\"async\" width=\"1920\" height=\"919\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/pop-up-tlo.gif\" alt=\"\" class=\"wp-image-12964\"\/><\/a><\/figure>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"podsumowanie\">Etap 5: Podsumowanie<\/h3>\n\n\n\n<p>To ostatni etap tworzenia pop-up\u00f3w. Tutaj sprawdzisz, jak wy\u015bwietla si\u0119 Tw\u00f3j pop-up na ekranie komputera i na urz\u0105dzeniu mobilnym. Kliknij ikon\u0119 <strong>Desktop<\/strong> i <strong>Mobile<\/strong>, aby prze\u0142\u0105cza\u0107 mi\u0119dzy widokami.<\/p>\n\n\n\n<p>Po lewej stronie znajdziesz list\u0119 kontrol\u0105 z elementami niezb\u0119dnymi do publikacji pop-upa na twojej stronie<del>.<\/del><ins>:<\/ins><ins><\/ins><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Na zielono pod\u015bwietlamy elementy wprowadzone prawid\u0142owo.<ul><li>&nbsp;Na czerwono \u2013 elementy wymagaj\u0105ce poprawy. Poprawisz je klikaj\u0105c ikon\u0119 o\u0142\u00f3wka.<\/li><\/ul><ul><li>Pomara\u0144czowe oznaczenie dodajemy przy elementach, kt\u00f3re mog\u0105 dzia\u0142a\u0107 lepiej, ale poprawki nie s\u0105 konieczne do wy\u015bwietlenia pop-upa.<\/li><\/ul>\n<ul class=\"wp-block-list\">\n<li>Kolorem niebieskim oznaczane s\u0105 sugestie jak ulepszy\u0107 tre\u015b\u0107 pod k\u0105tem marketingowym.&nbsp;<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p>Na tym etapie masz mo\u017cliwo\u015b\u0107 zapisania stworzonego pop-upa na p\u00f3\u017aniej lub jego uruchomienia:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Zapisz i zamknij \u2013 przycisk ten zapisze wiadomo\u015b\u0107 jako szkic i przeniesie Ci\u0119 do listy e-maili w panelu kontrolnym.<\/li>\n\n\n\n<li>Aktywuj \u2013 klikni\u0119cie przycisku spowoduje publikacj\u0119 pop-upa na Twojej stronie.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--30)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"zdarzenie-niestandardowe-konfiguracja\"><strong>Jak skonfigurowa\u0107 zdarzenie niestandardowe<\/strong><\/h3>\n\n\n\n<p>Zdarzenie niestandardowe ma posta\u0107 funkcji: <strong>$ecdp.api.getContent(type, id, maxWaitTime)<\/strong>.<\/p>\n\n\n\n<p>Zawiera ona trzy parametry odnosz\u0105ce si\u0119 do tre\u015bci, kt\u00f3r\u0105 chcesz wy\u015bwietli\u0107. S\u0105 to:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><em>type <\/em>\u2013 wmagany \u2013 oznacza typ tre\u015bci, np. banner.<\/li>\n\n\n\n<li><em>id<\/em> \u2013 wymagany \u2013 oznacza identyfikator konkretnej tre\u015bci, kt\u00f3r\u0105 chcesz wy\u015bwietli\u0107. ID znajdziesz w Automatyzacja &gt; Pop-upy &gt; kolumna \u2018ID\u2019.<\/li>\n\n\n\n<li><em>maxWaitTime <\/em>\u2013 opcjonalny \u2013 okre\u015bla przez jaki czas system b\u0119dzie pr\u00f3bowa\u0142 wy\u015bwietli\u0107 banner po wykonaniu akcji przez u\u017cytkownika. Zakres czasowy to 0-10 000 milisekund (domy\u015blnie jest to 0 ms). <\/li>\n<\/ul>\n\n\n\n<div class=\"infobox infobox-blue\">\n  <div class=\"infobox-inner\">\n    <div class=\"infobox-icon\">\n      <svg width=\"24\" height=\"24\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\"><path fill-rule=\"evenodd\" clip-rule=\"evenodd\" d=\"M8.26884 2.99217C9.45176 2.50219 10.7196 2.25 12 2.25C13.2804 2.25 14.5482 2.50219 15.7312 2.99217C16.9141 3.48216 17.9889 4.20034 18.8943 5.10571C19.7997 6.01108 20.5178 7.08591 21.0078 8.26884C21.4978 9.45176 21.75 10.7196 21.75 12C21.75 13.2804 21.4978 14.5482 21.0078 15.7312C20.5178 16.9141 19.7997 17.9889 18.8943 18.8943C17.9889 19.7997 16.9141 20.5178 15.7312 21.0078C14.5482 21.4978 13.2804 21.75 12 21.75C10.7196 21.75 9.45176 21.4978 8.26884 21.0078C7.08591 20.5178 6.01108 19.7997 5.10571 18.8943C4.20034 17.9889 3.48216 16.9141 2.99217 15.7312C2.50219 14.5482 2.25 13.2804 2.25 12C2.25 10.7196 2.50219 9.45176 2.99217 8.26884C3.48216 7.08591 4.20034 6.01108 5.10571 5.10571C6.01108 4.20034 7.08591 3.48216 8.26884 2.99217ZM12 3.75C10.9166 3.75 9.8438 3.96339 8.84286 4.37799C7.84193 4.79259 6.93245 5.40029 6.16637 6.16637C5.40029 6.93245 4.7926 7.84193 4.37799 8.84286C3.96339 9.8438 3.75 10.9166 3.75 12C3.75 13.0834 3.96339 14.1562 4.37799 15.1571C4.7926 16.1581 5.40029 17.0675 6.16637 17.8336C6.93245 18.5997 7.84193 19.2074 8.84286 19.622C9.8438 20.0366 10.9166 20.25 12 20.25C13.0834 20.25 14.1562 20.0366 15.1571 19.622C16.1581 19.2074 17.0675 18.5997 17.8336 17.8336C18.5997 17.0675 19.2074 16.1581 19.622 15.1571C20.0366 14.1562 20.25 13.0834 20.25 12C20.25 10.9166 20.0366 9.8438 19.622 8.84286C19.2074 7.84193 18.5997 6.93245 17.8336 6.16637C17.0675 5.40029 16.1581 4.79259 15.1571 4.37799C14.1562 3.96339 13.0834 3.75 12 3.75ZM10.25 15.5002C10.25 15.086 10.5858 14.7502 11 14.7502H11.4088V12H11.0088C10.5946 12 10.2588 11.6642 10.2588 11.25C10.2588 10.8358 10.5946 10.5 11.0088 10.5H12.1588C12.573 10.5 12.9088 10.8358 12.9088 11.25V14.7502H13.31C13.7242 14.7502 14.06 15.086 14.06 15.5002C14.06 15.9144 13.7242 16.2502 13.31 16.2502H11C10.5858 16.2502 10.25 15.9144 10.25 15.5002ZM11.8501 7.23972C12.3748 7.23972 12.8501 7.66627 12.8501 8.23972C12.8501 8.24199 12.8501 8.24426 12.8501 8.24652C12.8481 8.53863 12.7161 8.78189 12.5542 8.9438C12.391 9.10697 12.1452 9.23972 11.8501 9.23972C11.2766 9.23972 10.8501 8.76443 10.8501 8.23972C10.8501 7.68551 11.2959 7.23972 11.8501 7.23972Z\" fill=\"currentColor\"\/><\/svg>    <\/div>\n    <div class=\"infobox-content\">\n                    <div class=\"infobox-text\">\n          <p>Aby zdarzenie niestandardowe zadzia\u0142a\u0142o poprawnie i pop-up wy\u015bwietli\u0142 si\u0119 na po\u017c\u0105dan\u0105 akcj\u0119, poczekaj, a\u017c nasz skrypt \u015bledz\u0105cy si\u0119 za\u0142aduje.<\/p>\n<p>Sprawdzisz to korzystaj\u0105c z funkcji: <strong>$ecdp.helpers.websiteIsReady<\/strong><\/p>\n        <\/div>\n          <\/div>\n  <\/div>\n<\/div>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--30)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"dodaj-zdarzenie-niestandardowe-w-kodzie-stony\">Dodaj zdarzenie niestandardowe w kodzie HTML strony<\/h4>\n\n\n\n<p>Mo\u017cesz podpi\u0105\u0107 funkcj\u0119 do konkretnego elementu na stronie, np. przycisku lub linku. Dzi\u0119ki temu banner wy\u015bwietli si\u0119 automatycznie po klikni\u0119ciu tego elementu.<\/p>\n\n\n\n<p>Poni\u017cej znajdziesz dwa przyk\u0142ady. W obu przypadkach wykorzystywana jest metoda <em>getContent<\/em>, kt\u00f3ra uruchamia banner o wskazanym ID.<\/p>\n\n\n\n<p><\/p>\n\n\n\n<p><strong>Przyk\u0142ad 1: Przycisk<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#babed8;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" data-code=\"&lt;button id=&quot;myButton&quot;&gt;Otw\u00f3rz pop-up&lt;\/button&gt;\n\n&lt;script&gt;\u00a0\ndocument.getElementById(&quot;myButton&quot;).addEventListener(&quot;click&quot;, function() {\n\u00a0\u00a0\u00a0 $ecdp.api.getContent(&quot;popup&quot;, 586);\n});\n&lt;\/script&gt;\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-palenight\" style=\"background-color: #292D3E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">button<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">id<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">myButton<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Otw\u00f3rz pop-up<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">button<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">script<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">\u00a0<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">document.getElementById(&quot;myButton&quot;).addEventListener(&quot;click&quot;, function() <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">\u00a0\u00a0\u00a0 $ecdp<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">api<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">getContent<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">popup<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">586<\/span><span style=\"color: #BABED8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">script<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p><strong>Przyk\u0142ad 2: Link<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#babed8;--cbp-line-number-width:calc(1 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" data-code=\"&lt;a href=&quot;#&quot; id=&quot;popupLink&quot;&gt;Otw\u00f3rz pop-up&lt;\/a&gt;\n\n&lt;script&gt;\ndocument.getElementById(&quot;popupLink&quot;).addEventListener(&quot;click&quot;, function(event) {\nevent.preventDefault(); \/\/ Zapobiega domy\u015blnej akcji linku\n\u00a0\u00a0\u00a0 $ecdp.api.getContent(&quot;popup&quot;, 586);\n});\n&lt;\/script&gt;\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-palenight\" style=\"background-color: #292D3E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">a<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">href<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">#<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\"> <\/span><span style=\"color: #C792EA\">id<\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">popupLink<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Otw\u00f3rz pop-up<\/span><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">a<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">&lt;<\/span><span style=\"color: #F07178\">script<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">document.getElementById(&quot;popupLink&quot;).addEventListener(&quot;click&quot;, function(event) <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">event<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">preventDefault<\/span><span style=\"color: #BABED8\">(); <\/span><span style=\"color: #676E95; font-style: italic\">\/\/ Zapobiega domy\u015blnej akcji linku<\/span><\/span>\n<span class=\"line\"><span style=\"color: #BABED8\">\u00a0\u00a0\u00a0 $ecdp<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">api<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">getContent<\/span><span style=\"color: #BABED8\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">popup<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #F78C6C\">586<\/span><span style=\"color: #BABED8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">&lt;\/<\/span><span style=\"color: #F07178\">script<\/span><span style=\"color: #89DDFF\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p>W obu przypadkach funkcja:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>\u201enas\u0142uchuje\u201d klikni\u0119cia,<\/li>\n\n\n\n<li>po klikni\u0119ciu uruchamia banner o ID 586.<\/li>\n<\/ul>\n\n\n\n<p>Upewnij si\u0119, \u017ce wybrany banner ma status <strong>Aktywny<\/strong>, w przeciwnym razie nie zostanie wy\u015bwietlony.<\/p>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p><strong>Przyk\u0142ad 3: Sprawdzanie czy skrypt zosta\u0142 za\u0142adowany przed uruchomieniem pop-upu<\/strong><\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#babed8;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span role=\"button\" tabindex=\"0\" data-code=\"\/\/ Check if ECDP script is ready and trigger pop-up\nif ($ecdp.helpers.websiteIsReady) {\n    \/\/ Website is ready, trigger the pop-up\n    $ecdp.api.getContent(&quot;popup&quot;, 586);\n} else {\n    \/\/ ECDP script not ready yet, wait and check periodically\n    const checkReady = setInterval(() =&gt; {\n        if ($ecdp.helpers.websiteIsReady) {\n            $ecdp.api.getContent(&quot;popup&quot;, 586);\n            clearInterval(checkReady);\n        }\n    }, 100);\n}\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M4.5 12.75l6 6 9-13.5\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M16.5 8.25V6a2.25 2.25 0 00-2.25-2.25H6A2.25 2.25 0 003.75 6v8.25A2.25 2.25 0 006 16.5h2.25m8.25-8.25H18a2.25 2.25 0 012.25 2.25V18A2.25 2.25 0 0118 20.25h-7.5A2.25 2.25 0 018.25 18v-1.5m8.25-8.25h-6a2.25 2.25 0 00-2.25 2.25v6\"><\/path><\/svg><\/span><pre class=\"shiki material-theme-palenight\" style=\"background-color: #292D3E\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #676E95; font-style: italic\">\/\/ Check if ECDP script is ready and trigger pop-up<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF; font-style: italic\">if<\/span><span style=\"color: #BABED8\"> ($ecdp<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">helpers<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">websiteIsReady) <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">    <\/span><span style=\"color: #676E95; font-style: italic\">\/\/ Website is ready, trigger the pop-up<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #BABED8\">$ecdp<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">api<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">getContent<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">popup<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #F78C6C\">586<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF; font-style: italic\">else<\/span><span style=\"color: #BABED8\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">    <\/span><span style=\"color: #676E95; font-style: italic\">\/\/ ECDP script not ready yet, wait and check periodically<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #C792EA\">const<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #BABED8\">checkReady<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">=<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #82AAFF\">setInterval<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">()<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #C792EA\">=&gt;<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">        <\/span><span style=\"color: #89DDFF; font-style: italic\">if<\/span><span style=\"color: #F07178\"> (<\/span><span style=\"color: #BABED8\">$ecdp<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">helpers<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">websiteIsReady<\/span><span style=\"color: #F07178\">) <\/span><span style=\"color: #89DDFF\">{<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">            <\/span><span style=\"color: #BABED8\">$ecdp<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #BABED8\">api<\/span><span style=\"color: #89DDFF\">.<\/span><span style=\"color: #82AAFF\">getContent<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #C3E88D\">popup<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">,<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #F78C6C\">586<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">            <\/span><span style=\"color: #82AAFF\">clearInterval<\/span><span style=\"color: #F07178\">(<\/span><span style=\"color: #BABED8\">checkReady<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">        <\/span><span style=\"color: #89DDFF\">}<\/span><\/span>\n<span class=\"line\"><span style=\"color: #F07178\">    <\/span><span style=\"color: #89DDFF\">},<\/span><span style=\"color: #F07178\"> <\/span><span style=\"color: #F78C6C\">100<\/span><span style=\"color: #F07178\">)<\/span><span style=\"color: #89DDFF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #89DDFF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--30)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"dodaj-zdarzenie-niestandardowe-w-edytorze-drag-and-drop\">Dodaj zdarzenie niestandardowe w edytorze drag&amp;drop<\/h4>\n\n\n\n<p>Je\u015bli nie chcesz edytowa\u0107 kodu swojej strony bezpo\u015brednio, mo\u017cesz skorzysta\u0107 z bloku tre\u015bci HTML w edytorze drag&amp;drop. Skorzystanie z tej metody wymaga u\u017cycia kodu JavaScript.<\/p>\n\n\n\n<p>W edytorze drag&amp;drop:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Znajd\u017a i dodaj blok HTML.<\/li>\n\n\n\n<li>Wstaw w nim kod JavaScript z przyk\u0142ad\u00f3w powy\u017cej.<\/li>\n\n\n\n<li>Dostosuj ID element\u00f3w i parametry banneru do swoich potrzeb.<\/li>\n<\/ul>\n\n\n\n<p><strong>Wa\u017cne informacje<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Banner zostanie za\u0142adowany dopiero po wywo\u0142aniu funkcji.<\/li>\n\n\n\n<li>Zostanie wy\u015bwietlony tylko raz na ods\u0142on\u0119 wybranej strony, dla tej samej kombinacji parametr\u00f3w <em>type<\/em> i <em>ID<\/em>.<\/li>\n\n\n\n<li>Zdarzenie niestandardowe dzia\u0142a tylko dla banner\u00f3w o statusie <strong>Aktywny<\/strong>.<\/li>\n<\/ul>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--30)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"dodaj-zdarzenie-niestandardowe-z-google-tag-manager\">Dodaj zdarzenie niestandardowe za pomoc\u0105 Google Tag Manager<\/h4>\n\n\n\n<p>Je\u015bli nie chcesz edytowa\u0107 kodu swojej strony r\u0119cznie, mo\u017cesz u\u017cy\u0107 Google Tag Managera, \u017ceby doda\u0107 zdarzenie niestandardowe. To rozwi\u0105zanie sprawdzi si\u0119, je\u015bli korzystasz z GTM i chcesz u\u017cy\u0107 zdarzenia niestandardowego bez pomocy programisty.<\/p>\n\n\n\n<p>\u017beby skorzysta\u0107 z tego sposobu, musisz mie\u0107 konto w Google Tag Manager po\u0142\u0105czone z Twoim sklepem.<\/p>\n\n\n\n<p><strong>Utw\u00f3rz tag ze zdarzeniem niestandardowym wywo\u0142uj\u0105cym banner<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Przejd\u017a do narz\u0119dzia <strong>Google Tag Manager.<\/strong><\/li>\n\n\n\n<li>Przejd\u017a do kontenera, kt\u00f3ry jest po\u0142\u0105czony ze stron\u0105, na kt\u00f3rej umie\u015bcisz kod.<\/li>\n\n\n\n<li>Przejd\u017a do zak\u0142adki <strong>Tagi<\/strong>.<\/li>\n\n\n\n<li>Kliknij&nbsp;<strong>Nowy<\/strong>, \u017ceby utworzy\u0107 nowy tag.<\/li>\n\n\n\n<li>Nadaj tagowi nazw\u0119, np. \u2018Zdarzenie niestandardowe \u2013 klikni\u0119cie linku\u2019 a nast\u0119pnie kliknij<strong>&nbsp;Konfiguracja tagu<\/strong>.<\/li>\n\n\n\n<li>Wybierz&nbsp;<strong>Niestandardowy kod HTML<\/strong>.<\/li>\n\n\n\n<li>W sekcji <strong>HTML<\/strong> wstaw funkcj\u0119 ze zdefiniowanymi parametrami <em>type<\/em> i <em>id, <\/em>np.: $ecdp.api.getContent(&#8220;banner&#8221;, 586); Parametry wskazuj\u0105, kt\u00f3r\u0105 tre\u015b\u0107 stworzon\u0105 w ECDP wywo\u0142a klikni\u0119cie linku.<\/li>\n<\/ol>\n\n\n\n<p><strong>Ustal, kiedy tag ma si\u0119 uruchomi\u0107<\/strong><\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Przejd\u017a do sekcji <strong>Regu\u0142y <\/strong>(triggers), w kt\u00f3rej konfigurujesz zasad\u0119, wed\u0142ug kt\u00f3rej zostanie wywo\u0142any tag.<\/li>\n\n\n\n<li>Wybierz z listy regu\u0142\u0119 <strong>Klikni\u0119cie \u2013 Wszystkie elementy<\/strong>.<\/li>\n\n\n\n<li>W sekcji <strong>Regu\u0142a aktywuje si\u0119 dla <\/strong>zaznacz opcj\u0119 <strong>Niekt\u00f3re klikni\u0119cia<\/strong>.<\/li>\n\n\n\n<li>W sekcji <strong>Aktywuj t\u0119 regu\u0142\u0119, gdy wyst\u0105pi zdarzenie i wszystkie z poni\u017cszych warunk\u00f3w b\u0119d\u0105 spe\u0142nione<\/strong>:<ul><li>w pierwszym polu wybierz <strong>Click Text<\/strong>.<\/li><\/ul><ul><li>w drugim polu ustaw warunek <strong>r\u00f3wna si\u0119.<\/strong><\/li><\/ul>\n<ul class=\"wp-block-list\">\n<li>W ostatnim polu wpisz tekst, kt\u00f3rego klikni\u0119cie ma wy\u015bwietli\u0107 banner.<\/li>\n<\/ul>\n<\/li>\n\n\n\n<li><strong>Zapisz<\/strong> wprowadzone zmiany.<\/li>\n<\/ul>\n\n\n\n<p>Je\u015bli nie widzisz zmiennej <strong>Click Text<\/strong> w rozwijanym menu, upewnij si\u0119, \u017ce jest aktywna:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Przejd\u017a do zak\u0142adki <strong>Zmienne<\/strong>.<ol><li>Kliknij <strong>Skonfiguruj<\/strong>.<\/li><\/ol>\n<ol class=\"wp-block-list\">\n<li>W sekcji <strong>Klikni\u0119cia<\/strong> zaznacz <strong>Click Text<\/strong>.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n\n\n\n<p><strong>Sprawd\u017a, czy tag dzia\u0142a<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Przetestuj<\/strong>, czy kod zosta\u0142 dodany prawid\u0142owo \u2013 kliknij&nbsp;<strong>Podgl\u0105d<\/strong>&nbsp;w prawym g\u00f3rnym rogu ekranu.<\/li>\n\n\n\n<li>Nast\u0119pnie przejd\u017a na swoj\u0105 stron\u0119 i kliknij tekst, pod kt\u00f3ry podpi\u0119ta jest funkcja wywo\u0142uj\u0105ca banner.<\/li>\n\n\n\n<li>Wr\u00f3\u0107 do okna podgl\u0105du i sprawd\u017a, czy utworzony tag zosta\u0142 wywo\u0142any.<\/li>\n\n\n\n<li>Zamknij okno podgl\u0105du i kliknij&nbsp;<strong>Publikuj<\/strong>.<\/li>\n<\/ol>\n\n\n\n<div style=\"height:var(--wp--preset--spacing--30)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<h4 class=\"wp-block-heading\" id=\"zdarzenie-niestandardowe-test-na-zywo\">Jak przetestowa\u0107 na \u017cywo pro\u015bb\u0119 o zgod\u0119 wywo\u0142an\u0105 przez zdarzenie niestandardowe?<\/h4>\n\n\n\n<p>Funkcja musi zosta\u0107 wywo\u0142ana w przegl\u0105darce r\u00f3wnie\u017c wtedy, gdy chcesz przetestowa\u0107 pro\u015bb\u0119 ze zdarzeniem niestandardowym za pomoc\u0105 opcji \u201eTest na \u017cywo\u201d:<\/p>\n\n\n\n<ol start=\"1\" class=\"wp-block-list\">\n<li>Przejd\u017a na stron\u0119 swojego sklepu i uruchom funkcj\u0119 <strong>Zbadaj<\/strong> (Inspect):\n<ul class=\"wp-block-list\">\n<li>za pomoc\u0105 klawiatury, wybieraj\u0105c F12,<\/li>\n\n\n\n<li>lub klikaj\u0105c prawym przyciskiem myszy wybierz j\u0105 z menu podr\u0119cznego.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n\n\n\n<ol start=\"2\" class=\"wp-block-list\">\n<li>Wybierz zak\u0142adk\u0119 <strong>Console<\/strong>.<\/li>\n\n\n\n<li>Wpisz lub wklej skopiowan\u0105 funkcj\u0119 z parametrami pro\u015bby.<\/li>\n\n\n\n<li>Naci\u015bnij <strong>Enter<\/strong>, aby uruchomi\u0107 skrypt.<\/li>\n\n\n\n<li>Spowoduje to wywo\u0142anie pro\u015bby bezpo\u015brednio z konsoli, co jest konieczne do aktywacji zdarzenia niestandardowego.<\/li>\n<\/ol>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"template":"","ecdp-category":[104],"class_list":["post-12212","ecdp","type-ecdp","status-publish","hentry","ecdp-category-automatyzacja-dzialan"],"acf":[],"_links":{"self":[{"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/ecdp\/12212","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/ecdp"}],"about":[{"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/types\/ecdp"}],"author":[{"embeddable":true,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/users\/6"}],"version-history":[{"count":43,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/ecdp\/12212\/revisions"}],"predecessor-version":[{"id":15554,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/ecdp\/12212\/revisions\/15554"}],"wp:attachment":[{"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/media?parent=12212"}],"wp:term":[{"taxonomy":"ecdp-category","embeddable":true,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/ecdp-category?post=12212"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}