{"id":12242,"date":"2025-01-13T13:07:32","date_gmt":"2025-01-13T12:07:32","guid":{"rendered":"https:\/\/help.expertsender.com\/?post_type=ecdp&#038;p=12242"},"modified":"2025-10-10T08:32:07","modified_gmt":"2025-10-10T07:32:07","slug":"tworzenie-bannerow","status":"publish","type":"ecdp","link":"https:\/\/help.expertsender.com\/pl\/ecdp\/tworzenie-bannerow\/","title":{"rendered":"Bannery"},"content":{"rendered":"\n<p>Chcesz zwi\u0119kszy\u0107 warto\u015b\u0107 zam\u00f3wie\u0144 w swoim sklepie i zach\u0119ci\u0107 klient\u00f3w do wi\u0119kszych zakup\u00f3w? Bannery to narz\u0119dzie, kt\u00f3re pomo\u017ce Ci osi\u0105gn\u0105\u0107 ten cel.<\/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 id=\"jak-dzialaja-bannery\"><strong>Jak dzia\u0142aj\u0105 bannery?<\/strong><\/p>\n\n\n\n<p>Platforma ECDP umo\u017cliwia tworzenie standardowych, statycznych banner\u00f3w oraz banner\u00f3w dynamicznych, kt\u00f3re wy\u015bwietlaj\u0105:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Zawarto\u015b\u0107 koszyka<\/strong>: produkty, kt\u00f3re klient ju\u017c wybra\u0142.<\/li>\n\n\n\n<li><strong>Rekomendacje produkt\u00f3w<\/strong>: spersonalizowane sugestie oparte na zachowaniach klient\u00f3w i danych o produktach.<\/li>\n<\/ol>\n\n\n\n<p>Oba typy banner\u00f3w dzia\u0142aj\u0105 w czasie rzeczywistym, dopasowuj\u0105c tre\u015b\u0107 do bie\u017c\u0105cych dzia\u0142a\u0144 klienta na stronie.<\/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 id=\"zalety-bannerow\"><strong>Co mo\u017cesz osi\u0105gn\u0105\u0107 dzi\u0119ki bannerom?<\/strong><\/p>\n\n\n\n<p>Dodaj\u0105c banner na swojej stronie zwi\u0119kszysz warto\u015b\u0107 zam\u00f3wienia i poprawisz do\u015bwiadczenia zakupowe klient\u00f3w, oferuj\u0105c im \u0142atwy podgl\u0105d produkt\u00f3w, kt\u00f3re zamierzaj\u0105 kupi\u0107.<\/p>\n\n\n\n<p>Mo\u017cesz te\u017c dotrze\u0107 do swoich klient\u00f3w z szersz\u0105 ofert\u0105 i tym samym<strong> podnie\u015b\u0107 warto\u015b\u0107 zam\u00f3wie\u0144.<\/strong><\/p>\n\n\n\n<p>Bannery te s\u0105 wszechstronnym narz\u0119dziem <strong>zwi\u0119kszaj\u0105cym konwersj\u0119 w sklepie<\/strong>. Klienci doceniaj\u0105 personalizowane podej\u015bcie i intuicyjne sugestie zakupowe.<\/p>\n\n\n\n<p>Umie\u015bcisz je na dowolnych stronach swojego sklepu, takich jak:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>strona g\u0142\u00f3wna,<\/li>\n\n\n\n<li>podstrona z opisem produktu,<\/li>\n\n\n\n<li>strona koszyka,<\/li>\n\n\n\n<li>strona z potwierdzeniem p\u0142atno\u015bci promocji i kampanii marketingowych.<\/li>\n<\/ul>\n\n\n\n<p>Dzi\u0119ki prostemu edytorowi mo\u017cesz dostosowa\u0107 wygl\u0105d i tre\u015b\u0107 banner\u00f3w, aby idealnie pasowa\u0142y do stylu Twojego sklepu.<\/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\"><strong>Wymagania<\/strong><\/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 <a href=\"https:\/\/help.expertsender.com\/pl\/ecdp\/konfiguracja-konta-w-expertsender\/#konfiguracja-kanalu-web-tracking\"><strong>kana\u0142 Web Tracking jest poprawnie skonfigurowany<\/strong> <\/a>.<\/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\"><strong>Bannery \u2013 statusy i metryki marketingowe<\/strong><\/h2>\n\n\n\n<p>Informacje o statusach wszystkich utworzonych banner\u00f3w oraz ich skuteczno\u015bci znajdziesz w tabeli dost\u0119pnej w sekcji <strong>Automatyzacja <\/strong>&gt;<strong> Bannery<\/strong>. Z jej pomoc\u0105 mo\u017cesz monitorowa\u0107 efektywno\u015b\u0107 ka\u017cdego banneru i optymalizowa\u0107 strategi\u0119 sprzeda\u017cy.<\/p>\n\n\n\n<p>Stworzone przez Ciebie bannery s\u0105 pogrupowane wed\u0142ug status\u00f3w:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Wszystkie<\/strong>&nbsp;\u2013 tu znajdziesz zbi\u00f3r wszystkich stworzonych banner\u00f3w.<\/li>\n\n\n\n<li><strong>Aktywny<\/strong>&nbsp;\u2013 wy\u015bwietla bannery, kt\u00f3re s\u0105 w u\u017cyciu. Masz do dyspozycji opcje podgl\u0105du aktywnych banner\u00f3w, mo\u017cesz wstrzyma\u0107 ich wy\u015bwietlanie lub je usun\u0105\u0107. Nie mo\u017cesz ich edytowa\u0107.<\/li>\n\n\n\n<li><strong>Nieaktywny<\/strong>&nbsp;\u2013 na tej li\u015bcie znajduj\u0105 si\u0119 wszystkie niewy\u015bwietlane ju\u017c bannery. &nbsp;Z tego miejsca mo\u017cesz je podejrze\u0107, edytowa\u0107, aktywowa\u0107 oraz usun\u0105\u0107.<\/li>\n\n\n\n<li><strong>Szkice<\/strong>&nbsp;\u2013 wy\u015bwietla bannery w trakcie tworzenia. Ich szkice mo\u017cesz podejrze\u0107, edytowa\u0107 lub usun\u0105\u0107.<\/li>\n\n\n\n<li><strong>Usuni\u0119ty<\/strong>&nbsp;\u2013 trafia tu ka\u017cdy usuni\u0119ty banner. Masz do dyspozycji jedynie opcj\u0119 podgl\u0105du.<\/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>&nbsp;\u2013 informuje, ile razy zosta\u0142 wy\u015bwietlony dany banner.<\/li>\n\n\n\n<li><strong>Klikni\u0119cia<\/strong>&nbsp;\u2013 informuje, ile razy klient klikn\u0105\u0142 banner.<\/li>\n<\/ul>\n\n\n\n<p>Szczeg\u00f3\u0142owe ustawienia danego bannera znajdziesz w podgl\u0105dzie.<\/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=\"tworzenie-bannerow\"><strong>Tworzenie banner\u00f3w<\/strong><\/h2>\n\n\n\n<p>Przejd\u017a do <strong>Automatyzacja <\/strong>&gt; <strong>Bannery<\/strong> &gt; <strong>Stw\u00f3rz nowy banner<\/strong>.<\/p>\n\n\n\n<p>Na g\u00f3rze znajdziesz pasek post\u0119pu z kolejnymi etapami tworzenia bannera. Jest ich pi\u0119\u0107. Etap, nad kt\u00f3rym aktualnie pracujesz podkre\u015blony jest kolorow\u0105 lini\u0105. Mo\u017cesz swobodnie porusza\u0107 si\u0119 mi\u0119dzy etapami klikaj\u0105c na nie. Nie spowoduje to utraty wprowadzonych danych.<\/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<h3 class=\"wp-block-heading\" id=\"podstawowe-ustawienia\"><strong>Etap 1: Podstawowe ustawienia<\/strong><\/h3>\n\n\n\n<p>W tym miejscu:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Wpisz <strong>nazw\u0119<\/strong> bannera, b\u0119dzie ona widoczna w tabeli ze statystykami dost\u0119pnej w panelu.<\/li>\n\n\n\n<li>Z rozwijalnej listy wybierz adres <strong>strony WWW<\/strong>, na kt\u00f3rej b\u0119dzie wy\u015bwietlany banner.<\/li>\n\n\n\n<li>Opcjonalnie ustaw <strong>zakres czasowy<\/strong> \u2013 dat\u0119 i czas \u2013 w jakim ma wy\u015bwietla\u0107 si\u0119 banner.<\/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\/bannery-ustawienia-podstawowe-2.png\"><img loading=\"lazy\" decoding=\"async\" width=\"760\" height=\"758\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-ustawienia-podstawowe-2.png\" alt=\"\" class=\"wp-image-14720\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-ustawienia-podstawowe-2.png 760w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-ustawienia-podstawowe-2-300x300.png 300w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-ustawienia-podstawowe-2-150x150.png 150w\" sizes=\"auto, (max-width: 760px) 100vw, 760px\" \/><\/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\"><strong>Etap 2: Zachowanie<\/strong><\/h3>\n\n\n\n<p>Tutaj zadecydujesz, w jakiej sytuacji wy\u015bwietli si\u0119 banner. W polu <strong>Zdarzenie<\/strong> wybierz jedn\u0105 z akcji:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Wej\u015bcie<\/strong> \u2013 banner wy\u015bwietli si\u0119, przy wej\u015bciu u\u017cytkownika na stron\u0119.<\/li>\n\n\n\n<li><strong>Zdarzenie niestandardowe <\/strong>\u2013 banner 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-bannerow\/#zdarzenie-niestandardowe-konfiguracja\">Jak skonfigurowa\u0107 zdarzenie niestandardowe<\/a><\/strong>.<\/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\/bannery-warunki-zdarzenia.png\"><img loading=\"lazy\" decoding=\"async\" width=\"683\" height=\"532\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-warunki-zdarzenia.png\" alt=\"\" class=\"wp-image-14716\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-warunki-zdarzenia.png 683w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-warunki-zdarzenia-300x234.png 300w\" sizes=\"auto, (max-width: 683px) 100vw, 683px\" \/><\/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 sekcji <strong>Warunki <\/strong>ustawisz:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Typ strony<\/strong> \u2013 zaw\u0119\u017a mo\u017cliwo\u015b\u0107 wy\u015bwietlania bannera do wybranego typu strony, np. 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 doprecyzuj, jakie s\u0142owa kluczowe, frazy lub elementy nazwy domeny musz\u0105 znale\u017a\u0107 si\u0119 w adresie URL strony, \u017ceby wy\u015bwietli\u0142 si\u0119 na niej banner. Do wyboru masz:\n<ul class=\"wp-block-list\">\n<li><strong>Warunek<\/strong>: r\u00f3wna si\u0119, rozpoczyna si\u0119, zawiera, wyra\u017cenie regularne. &nbsp;\u2013 opcja ta otwiera okno na wprowadzenie maksymalnie 10 wyra\u017ce\u0144 regularnych.<\/li>\n\n\n\n<li><strong>Warto\u015b\u0107<\/strong> \u2013 pole, w kt\u00f3rym umieszczasz s\u0142owo kluczowe lub adres URL.<\/li>\n\n\n\n<li><strong>Warto\u015b\u0107 testowa<\/strong> &#8211; \u2013 wprowad\u017a adres strony lub podstrony, na kt\u00f3rej chcesz przetestowa\u0107 banner. Po wprowadzeniu kliknij <strong>Test<\/strong> i sprawd\u017a, czy banner wy\u015bwietla si\u0119 na stronie.<a href=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-warunki-adres-strony.png.webp\">\n<img loading=\"lazy\" decoding=\"async\" width=\"1820\" height=\"1274\" class=\"wp-image-13012\" style=\"width: 1820px;\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-warunki-adres-strony.png\" alt=\"\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-warunki-adres-strony.png 663w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-warunki-adres-strony-300x210.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>&nbsp;\u2013 ustaw przedzia\u0142 czasowy, po kt\u00f3rym wy\u015bwietli si\u0119 banner, gdy u\u017cytkownik wejdzie na stron\u0119, np. mi\u0119dzy 10 a 20 sekund.<\/li>\n\n\n\n<li><strong>Liczba odwiedzonych stron<\/strong>&nbsp;\u2013 ustaw liczb\u0119 stron, po kt\u00f3rych ma si\u0119 wy\u015bwietli\u0107 banner. Wska\u017c r\u00f3wnie\u017c typ strony, jakie musia\u0142 odwiedzi\u0107 u\u017cytkownik, aby banner zosta\u0142 wy\u015bwietlony: dowolna strona, strona produktu, strona koszyka, strona potwierdzenia p\u0142atno\u015bci.<a href=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-warunki-czas-i-sesja.png.webp\">\n<img loading=\"lazy\" decoding=\"async\" width=\"1820\" height=\"1085\" class=\"wp-image-13015\" style=\"width: 1820px;\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-warunki-czas-i-sesja.png\" alt=\"\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-warunki-czas-i-sesja.png 666w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-warunki-czas-i-sesja-300x179.png 300w\" sizes=\"auto, (max-width: 1820px) 100vw, 1820px\" \/><\/a><\/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<p>W sekcji&nbsp;<strong>Odbiorcy<\/strong>&nbsp;zdecydujesz, kt\u00f3rzy klienci zobacz\u0105 banner:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Nowy \/ powracaj\u0105cy<\/strong>&nbsp;\u2013 wybierz typ u\u017cytkownika z rozwijanej listy.<\/li>\n\n\n\n<li><strong>Klient \/ nie-klient<\/strong>&nbsp;\u2013 wybierz, czy banner ma si\u0119 wy\u015bwietli\u0107 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\u015bwietli\u0107 banner.<\/li>\n\n\n\n<li><strong>\u0179r\u00f3d\u0142o sesji<\/strong>&nbsp;\u2013 wska\u017c, sk\u0105d maj\u0105 przyj\u015b\u0107 klienci, kt\u00f3rym wy\u015bwietli si\u0119 banner.<\/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\/bannery-warunki-odbiorcy.png\"><img loading=\"lazy\" decoding=\"async\" width=\"644\" height=\"498\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-warunki-odbiorcy.png\" alt=\"\" class=\"wp-image-13018\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-warunki-odbiorcy.png 644w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-warunki-odbiorcy-300x232.png 300w\" sizes=\"auto, (max-width: 644px) 100vw, 644px\" \/><\/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=\"tre\u015b\u0107\"><strong>Etap 3: Tre\u015b\u0107<\/strong><\/h3>\n\n\n\n<p>Do projektowania banner\u00f3w s\u0142u\u017cy edytor tre\u015bci. Takiego samego edytora u\u017cywasz w ECDP do tworzenia e-maili, formularzy i pop-up\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>Cz\u0119sto wy\u015bwietlan\u0105 tre\u015bci\u0105 w bannerach jest zawarto\u015b\u0107 koszyka klienta oraz spersonalizowane rekomendacje produkt\u00f3w. W tym artykule znajdziesz instrukcj\u0119 jak stworzy\u0107 tak\u0105 tre\u015b\u0107 w edytorze: <strong><a href=\"https:\/\/help.expertsender.com\/pl\/ecdp\/konfiguracja-koszyka-i-rekomendacji-w-roznych-rodzajach-tresci\/\">Konfiguracja koszyka i rekomendacji w r\u00f3\u017cnych rodzajach tre\u015bci<\/a><\/strong><\/p>\n\n\n\n<p>Je\u015bli chcesz przetestowa\u0107 wy\u015bwietlanie si\u0119 banner\u00f3w na Twojej stronie, stw\u00f3r testopwy banner za pomoc\u0105 bloku <strong>Tekst<\/strong>, i podstawowego stylowania.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><a href=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-tresc-przykladowy-banner.png\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"287\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-tresc-przykladowy-banner-1024x287.png\" alt=\"\" class=\"wp-image-13116\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-tresc-przykladowy-banner-1024x287.png 1024w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-tresc-przykladowy-banner-300x84.png 300w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-tresc-przykladowy-banner-768x215.png 768w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-tresc-przykladowy-banner-1536x430.png 1536w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-tresc-przykladowy-banner.png 1845w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/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=\"polozenie\"><strong>Etap 4: Po\u0142o\u017cenie<\/strong><\/h3>\n\n\n\n<p>W tym miejscu wybierzesz miejsce w Twoim e-sklepie, w kt\u00f3rym wy\u015bwietli si\u0119 banner. S\u0142u\u017c\u0105 do tego selektory CSS \u2013 kr\u00f3tkie wyja\u015bnienie czym one s\u0105 znajdziesz w sekcji <strong><a href=\"https:\/\/help.expertsender.com\/pl\/ecdp\/tworzenie-bannerow\/#czym-jest-selektoc-css\">Czym jest selektor CSS?<\/a><\/strong> <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie.png\"><img loading=\"lazy\" decoding=\"async\" width=\"987\" height=\"760\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie.png\" alt=\"\" class=\"wp-image-13046\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie.png 987w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-300x231.png 300w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-768x591.png 768w\" sizes=\"auto, (max-width: 987px) 100vw, 987px\" \/><\/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 sekcji <strong>Selektor CSS<\/strong> wprowad\u017a nazw\u0119, ID lub klas\u0119 selektora, kt\u00f3ry b\u0119dzie punktem orientacyjnym dla bannera. Wed\u0142ug tego selektora umiejscowimy banner na stronie Twojego sklepu. Jak znajdziesz selektor CSS na dowolnej stronie?<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>W osobnej karcie otw\u00f3rz stron\u0119, na kt\u00f3rej chcesz umie\u015bci\u0107 banner.<\/li>\n\n\n\n<li>Najed\u017a kursorem na element na stronie, wzgl\u0119dem, kt\u00f3rego chcesz go umie\u015bci\u0107 (nad, pod lub wewn\u0105trz elementu).<\/li>\n\n\n\n<li>Kliknij prawym przyciskiem myszy na element i z podr\u0119cznego menu wybierz <em>Zbadaj <\/em>lub<em> Inspect<\/em>.<a href=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-zbadaj-1-1024x447.png.webp\">\n<img loading=\"lazy\" decoding=\"async\" width=\"1820\" height=\"795\" class=\"wp-image-13024\" style=\"width: 1820px;\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-zbadaj-1.png\" alt=\"\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-zbadaj-1.png 1561w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-zbadaj-1-300x131.png 300w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-zbadaj-1-1024x447.png 1024w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-zbadaj-1-768x336.png 768w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-zbadaj-1-1536x671.png 1536w\" sizes=\"auto, (max-width: 1820px) 100vw, 1820px\" \/><\/a><\/li>\n\n\n\n<li>Po prawej stronie przegl\u0105darki otworzy si\u0119 okno z kodem strony.<\/li>\n\n\n\n<li>Zobaczysz pod\u015bwietlony na niebiesko wybrany przez Ciebie element strony.<\/li>\n\n\n\n<li>Najed\u017a na niego kursorem, kliknij prawy przycisk myszy i wybierz pozycj\u0119 <em>Copy<\/em> &gt; <em>Copy selector<\/em>.<a href=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-kopiuj-selektor-1024x380.png.webp\">\n<img loading=\"lazy\" decoding=\"async\" width=\"1820\" height=\"675\" class=\"wp-image-13027\" style=\"width: 1820px;\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-kopiuj-selektor.png\" alt=\"\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-kopiuj-selektor.png 1594w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-kopiuj-selektor-300x111.png 300w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-kopiuj-selektor-1024x380.png 1024w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-kopiuj-selektor-768x285.png 768w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-kopiuj-selektor-1536x569.png 1536w\" sizes=\"auto, (max-width: 1820px) 100vw, 1820px\" \/><\/a><\/li>\n\n\n\n<li>Przejd\u017a do edytora banner\u00f3w i w sekcji Selektor SCC wklej skopiowany tekst. Zwr\u00f3\u0107 uwag\u0119 czy selektor id jest poprzedzony haszem a selektor klasy \u2013 kropk\u0105.<a href=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-wklej-selektor-css.png.webp\">\n<img loading=\"lazy\" decoding=\"async\" width=\"1820\" height=\"448\" class=\"wp-image-13033\" style=\"width: 1820px;\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-wklej-selektor-css.png\" alt=\"\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-wklej-selektor-css.png 658w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-wklej-selektor-css-300x74.png 300w\" sizes=\"auto, (max-width: 1820px) 100vw, 1820px\" \/><\/a><\/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<p>W sekcji <strong>Pozycja bannera wzgl\u0119dem selektora<\/strong> wybierz umiejscowienie bannera wzgl\u0119dem wybranego wcze\u015bniej selektora: na Twojej stronie wzgl\u0119dem innych element\u00f3w, kt\u00f3re si\u0119 na niej znajduj\u0105:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Pierwsza pozycja wewn\u0105trz<\/strong> \u2013 banner wy\u015bwietli si\u0119 jako pierwszy element w grupie innych element\u00f3w. Mo\u017ce to by\u0107 sta\u0142y modu\u0142 widoczny na stronie sklepu, zawieraj\u0105cy np. tekst, zdj\u0119cia i przyciski. Banner wy\u015bwietli si\u0119 wewn\u0105trz takiego modu\u0142u, przed znajduj\u0105cymi si\u0119 w nim elementami.<\/li>\n\n\n\n<li><strong>Ostatnia pozycja wewn\u0105trz<\/strong> \u2013 banner wy\u015bwietli si\u0119 jako ostatni element wewn\u0105trz grupy innych element\u00f3w.<\/li>\n\n\n\n<li><strong>Przed elementem<\/strong> \u2013 banner wy\u015bwietli si\u0119 przed pojedynczym elementem, np. blokiem tekstu lub zdj\u0119ciem produktu.<\/li>\n\n\n\n<li><strong>Po elemencie<\/strong> \u2013 banner wy\u015bwietli si\u0119 zaraz pod pojedynczym elementem, np. blokiem tekstu lub zdj\u0119ciem produktu.<\/li>\n\n\n\n<li><strong>Zast\u0105p element <\/strong>\u2013 tre\u015b\u0107 z podanego selektora zostanie zast\u0105piona bannerem.<\/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\/banner-pozycja-wzgledem-selektora.png\"><img loading=\"lazy\" decoding=\"async\" width=\"648\" height=\"356\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/banner-pozycja-wzgledem-selektora.png\" alt=\"\" class=\"wp-image-13051\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/banner-pozycja-wzgledem-selektora.png 648w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/banner-pozycja-wzgledem-selektora-300x165.png 300w\" sizes=\"auto, (max-width: 648px) 100vw, 648px\" \/><\/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><strong>Test na \u017cywo<\/strong> \u2013 wstaw adres podstrony, na kt\u00f3rych chcesz wy\u015bwietli\u0107 banner i kliknij <strong>Test<\/strong>. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-przetestuj-banner.png\"><img loading=\"lazy\" decoding=\"async\" width=\"647\" height=\"162\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-przetestuj-banner.png\" alt=\"\" class=\"wp-image-13030\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-przetestuj-banner.png 647w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-przetestuj-banner-300x75.png 300w\" sizes=\"auto, (max-width: 647px) 100vw, 647px\" \/><\/a><\/figure>\n\n\n\n<p>Sprawd\u017a, czy zaprojektowany przez Ciebie banner wy\u015bwietla si\u0119 poprawnie. Pami\u0119taj, \u017ce podgl\u0105d zadzia\u0142a wy\u0142\u0105cznie na stronach, na kt\u00f3rych umieszczony jest nasz skrypt \u015bledz\u0105cy.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><a href=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-test-bannera-na-stronie.jpg\"><img loading=\"lazy\" decoding=\"async\" width=\"687\" height=\"363\" src=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-test-bannera-na-stronie.jpg\" alt=\"\" class=\"wp-image-13040\" srcset=\"https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-test-bannera-na-stronie.jpg 687w, https:\/\/help.expertsender.com\/wp-content\/uploads\/2025\/01\/bannery-polozenie-test-bannera-na-stronie-300x159.jpg 300w\" sizes=\"auto, (max-width: 687px) 100vw, 687px\" \/><\/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<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=\"czym-jest-selektoc-css\"><strong>Czym jest selektor CSS?<\/strong><\/h4>\n\n\n\n<p>Selektor CSS wskazuje konkretny element na stronie WWW, np. tekst lub zdj\u0119cie, ale te\u017c ca\u0142e modu\u0142y z\u0142o\u017cone z wielu element\u00f3w, np. pasek menu, stopka strony, modu\u0142 z artyku\u0142ami blogowymi itp.<\/p>\n\n\n\n<p>Dzi\u0119ki selektorowi odnajdziesz w kodzie strony element, kt\u00f3ry Ci\u0119 interesuje i nadasz mu unikalny styl, np. zmienisz kolor lub wielko\u015b\u0107.<\/p>\n\n\n\n<p>W banerach selektor CSS u\u017cywany jest jako punkt orientacyjny. Wskazuje, wzgl\u0119dem kt\u00f3rego elementu na stronie mo\u017cesz ulokowa\u0107 banner, np. wzgl\u0119dem paska menu lub zdj\u0119cia danego produktu.<\/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>W bannerach u\u017cywane s\u0105 nast\u0119puj\u0105ce selektory:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>nazwa \u2013 np. \u2018p\u2019 to element o nazwie \u2018akapit\u2019, \u2018h\u2019 to \u2018nag\u0142\u00f3wek\u2019: h1<\/li>\n\n\n\n<li>id \u2013 identyfikator elementu, np. footer; selektor ten jest zawsze poprzedzony haszem: #footer<\/li>\n\n\n\n<li>klasa \u2013 zawsze poprzedzona znakiem kropki: .yellow<\/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<h3 class=\"wp-block-heading\" id=\"podsumowanie\"><strong>Podsumowanie<\/strong><\/h3>\n\n\n\n<p>W <strong>Podsumowaniu<\/strong> wy\u015bwietlana jest lista kontrolna z elementami niezb\u0119dnymi do wy\u015bwietlenia bannera oraz ich statusem:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Na zielono pod\u015bwietlone s\u0105 elementy wype\u0142nione prawid\u0142owo,<\/li>\n\n\n\n<li>Na czerwono pod\u015bwietlone s\u0105 opcje, kt\u00f3re musisz poprawi\u0107 lub uzupe\u0142ni\u0107. Kliknij ikon\u0119 o\u0142\u00f3wka, \u017ceby przej\u015b\u0107 do ustawie\u0144 danego elementu. Czerwone oznaczenia pojawi\u0105 si\u0119 te\u017c na g\u00f3rnej listwie przy krokach, kt\u00f3re wymagaj\u0105 sprawdzenia.<\/li>\n\n\n\n<li>Pomara\u0144czowe oznaczenie pojawi si\u0119 przy elementach, kt\u00f3rych wydajno\u015b\u0107 mo\u017cna poprawi\u0107. Je\u015bli nie wprowadzisz zmian, nie wp\u0142ynie na wy\u015bwietlenie bannera.<\/li>\n\n\n\n<li>Kolorem niebieskim oznaczane s\u0105 sugestie jak ulepszy\u0107 tre\u015b\u0107 pod k\u0105tem marketingowym.&nbsp;<\/li>\n<\/ul>\n\n\n\n<p>Dzi\u0119ki li\u015bcie kontrolnej szybko sprawdzisz, czy wybrane przez Ciebie ustawienia s\u0105 prawid\u0142owe. Je\u015bli zdecydujesz si\u0119 na zmian\u0119 kt\u00f3rego\u015b elementu, kliknij ikon\u0119 o\u0142\u00f3wka, aby przej\u015b\u0107 do edycji.<\/p>\n\n\n\n<p>Na poziomie paska dost\u0119pu znajduj\u0105 si\u0119 dwa przyciski:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Zapisz i zamknij<\/strong> \u2013 zapisze banner jako szkic i przeniesie Ci\u0119 do listy banner\u00f3w w panelu kontrolnym.<\/li>\n\n\n\n<li><strong>Aktywuj<\/strong> \u2013 banner zacznie wy\u015bwietla\u0107 si\u0119 na stronie Twojego sklepu.<\/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<h3 class=\"wp-block-heading\" id=\"zdarzenie-niestandardowe-konfiguracja\">Jak skonfigurowa\u0107 zdarzenie niestandardowe?<\/h3>\n\n\n\n<p>Zdarzenie niestandardowe ma posta\u0107 funkcji: $ecdp.api.getContent(type, id, maxWaitTime).<\/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 wymagany \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. ID znajdziesz w Automatyzacja &gt; Bannery &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 banner 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><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\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;button id=\"myButton\">Otw\u00f3rz banner&lt;\/button>\n\n&lt;script>\u00a0\ndocument.getElementById(\"myButton\").addEventListener(\"click\", function() {\n\u00a0\u00a0\u00a0 $ecdp.api.getContent(\"banner\", 586);\n});\n&lt;\/script><\/textarea><\/pre><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 banner<\/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\">banner<\/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<div style=\"height:var(--wp--preset--spacing--20)\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/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\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>&lt;a href=\"#\" id=\"bannerLink\">Otw\u00f3rz banner&lt;\/a>\n\n&lt;script>\ndocument.getElementById(\"bannerLink\").addEventListener(\"click\", function(event) {\nevent.preventDefault(); \/\/ Zapobiega domy\u015blnej akcji linku\n\u00a0\u00a0\u00a0 $ecdp.api.getContent(\"banner\", 586);\n});\n&lt;\/script><\/textarea><\/pre><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\">bannerLink<\/span><span style=\"color: #89DDFF\">&quot;<\/span><span style=\"color: #89DDFF\">&gt;<\/span><span style=\"color: #BABED8\">Otw\u00f3rz banner<\/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;bannerLink&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\">banner<\/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 banneru<\/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\" style=\"color:#babed8;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><pre class=\"code-block-pro-copy-button-pre\" aria-hidden=\"true\"><textarea class=\"code-block-pro-copy-button-textarea\" tabindex=\"-1\" aria-hidden=\"true\" readonly>\/\/ Check if ECDP script is ready and trigger banner\nif ($ecdp.helpers.websiteIsReady) {\n    \/\/ Website is ready, trigger the banner\n    $ecdp.api.getContent(\"banner\", 586);\n} else {\n    \/\/ ECDP script not ready yet, wait and check periodically\n    const checkReady = setInterval(() => {\n        if ($ecdp.helpers.websiteIsReady) {\n            $ecdp.api.getContent(\"banner\", 586);\n            clearInterval(checkReady);\n        }\n    }, 100);\n}<\/textarea><\/pre><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 banner<\/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 banner<\/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\">banner<\/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\">banner<\/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--20)\" 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<ol 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<\/ol>\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>.<\/li>\n\n\n\n<li><span style=\"font-size: 1rem;\">Kliknij <\/span><strong style=\"font-size: 1rem;\">Skonfiguruj<\/strong><span style=\"font-size: 1rem;\">.<\/span><\/li>\n\n\n\n<li>W sekcji <strong>Klikni\u0119cia<\/strong> zaznacz <strong>Click Text<\/strong>.<\/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\n\n\n<p><a id=\"_msocom_1\"><\/a><\/p>\n","protected":false},"author":6,"featured_media":0,"parent":0,"menu_order":0,"template":"","ecdp-category":[104],"class_list":["post-12242","ecdp","type-ecdp","status-publish","hentry","ecdp-category-automatyzacja-dzialan"],"acf":[],"_links":{"self":[{"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/ecdp\/12242","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":45,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/ecdp\/12242\/revisions"}],"predecessor-version":[{"id":15677,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/ecdp\/12242\/revisions\/15677"}],"wp:attachment":[{"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/media?parent=12242"}],"wp:term":[{"taxonomy":"ecdp-category","embeddable":true,"href":"https:\/\/help.expertsender.com\/pl\/wp-json\/wp\/v2\/ecdp-category?post=12242"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}