Prowadzisz sklep internetowy i widzisz, \u017ce klienci dodaj\u0105 produkty do koszyka, ale nie ko\u0144cz\u0105 zakupu? To zjawisko jest znane ka\u017cdemu e-commercerowi \u2013 \u015brednio 70% koszyk\u00f3w ko\u0144czy jako porzucone. Wi\u0119kszo\u015b\u0107 poradnik\u00f3w skupia si\u0119 na strategiach marketingowych: e-mailach przypominaj\u0105cych, pop-upach z rabatem czy optymalizacji procesu checkout. Ale co, je\u015bli powiem Ci, \u017ce cz\u0119sto problem le\u017cy g\u0142\u0119biej \u2013 w kodzie, kt\u00f3ry wywo\u0142uje nieoczekiwane b\u0142\u0119dy, spowalnia stron\u0119 lub blokuje p\u0142atno\u015b\u0107?<\/p>\n
W JurskiTech.pl podczas audyt\u00f3w technicznych regularnie znajdujemy proste, ale niszcz\u0105ce konwersj\u0119 problemy, kt\u00f3re nie s\u0105 widoczne go\u0142ym okiem. W tym artykule poka\u017c\u0119 Ci 3 techniczne b\u0142\u0119dy, kt\u00f3re najcz\u0119\u015bciej winduj\u0105 wska\u017anik porzuconych koszyk\u00f3w i jak je naprawi\u0107.<\/p>\n
Wyobra\u017a sobie klienta, kt\u00f3ry starannie wype\u0142nia formularz dostawy \u2013 imi\u0119, nazwisko, adres, kod pocztowy. Naciska „Dalej”, a strona prze\u0142adowuje si\u0119 z komunikatem „Uzupe\u0142nij wymagane pola”. Klient wraca do formularza i widzi\u2026 pusty ekran. Wszystkie dane znikn\u0119\u0142y. To klasyczny b\u0142\u0105d walidacji po stronie frontendu, kt\u00f3ry nie zapisuje stanu formularza w pami\u0119ci przegl\u0105darki.<\/p>\n
W jednym z audyt\u00f3w klienta z bran\u017cy modowej odkryli\u015bmy, \u017ce przy pr\u00f3bie przej\u015bcia do p\u0142atno\u015bci formularz adresu by\u0142 walidowany po stronie klienta, ale przy b\u0142\u0119dzie (np. brak numeru telefonu) strona od\u015bwie\u017ca\u0142a si\u0119 ca\u0142kowicie. Kod JavaScript nie zapisywa\u0142 wcze\u015bniej wprowadzonych danych w Zastosuj technik\u0119 „partial save” \u2013 przy ka\u017cdej zmianie pola zapisuj stan formularza w Dodatkowa korzy\u015b\u0107:<\/strong> Je\u015bli klient przypadkiem zamknie kart\u0119, ale wr\u00f3ci w ci\u0105gu tej samej sesji, dane wci\u0105\u017c b\u0119d\u0105 dost\u0119pne. To prosta zmiana, kt\u00f3ra mo\u017ce zmniejszy\u0107 porzucenia o 5\u201310%.<\/p>\n Drugi cz\u0119sty b\u0142\u0105d dotyczy integracji z dostawcami p\u0142atno\u015bci. Wielu programist\u00f3w umieszcza skrypty Stripe, PayU czy Przelewy24 w spos\u00f3b, kt\u00f3ry blokuje rendering strony. Gdy skrypt \u0142aduje si\u0119 wolno (np. z powodu s\u0142abego \u0142\u0105cza lub przeci\u0105\u017cenia serwera), klient widzi pust\u0105 sekcj\u0119 \u201eWybierz metod\u0119 p\u0142atno\u015bci\u201d przez kilka sekund. W tym czasie wiele os\u00f3b podejrzewa awari\u0119 i opuszcza sklep.<\/p>\n W sklepie z elektronik\u0105, kt\u00f3ry audytowali\u015bmy, skrypt bramki p\u0142atniczej by\u0142 za\u0142adowany synchronicznie w Prze\u0142\u0105cz skrypty p\u0142atno\u015bci na \u0142adowanie asynchroniczne z Dzi\u0119ki temu strona checkoutu \u0142aduje si\u0119 b\u0142yskawicznie, a skrypt p\u0142atno\u015bci jest pobierany tylko wtedy, gdy jest faktycznie potrzebny. To mo\u017ce skr\u00f3ci\u0107 czas \u0142adowania pierwszego widoku o 2\u20133 sekundy i zmniejszy\u0107 porzucenia o kolejne 10%.<\/p>\n Trzeci problem jest bardziej podst\u0119pny i dotyczy synchronizacji mi\u0119dzy frontendem a backendem. Wyobra\u017a sobie, \u017ce klient dodaje produkt do koszyka, loguje si\u0119, dodaje drugi produkt, po czym widzi, \u017ce pierwszy znikn\u0105\u0142. Albo gorzej \u2013 klient widzi w koszyku produkt, kt\u00f3ry jest ju\u017c niedost\u0119pny, i dostaje b\u0142\u0105d przy finalizacji zam\u00f3wienia.<\/p>\n Cz\u0119sto wynika to z tego, \u017ce koszyk jest przechowywany po stronie serwera (w sesji PHP lub Redis), a frontend wy\u015bwietla lokaln\u0105 kopi\u0119 w W sklepie z ksi\u0105\u017ckami koszyk by\u0142 zapisywany w sesji serwera, ale lista produkt\u00f3w w widoku pochodzi\u0142a z localStorage. Gdy klient zostawi\u0142 koszyk na kilka godzin, a w mi\u0119dzyczasie inny klient wykupi\u0142 ostatni egzemplarz, nasz klient widzia\u0142 ksi\u0105\u017ck\u0119 w koszyku, ale przy pr\u00f3bie zakupu dostawa\u0142 b\u0142\u0105d. Problem wyst\u0119powa\u0142 u 20% u\u017cytkownik\u00f3w, kt\u00f3rzy wracali do koszyka po d\u0142u\u017cszej przerwie.<\/p>\n Przy ka\u017cdym wej\u015bciu na stron\u0119 koszyka wykonuj zapytanie API, kt\u00f3re zwraca aktualny stan koszyka z serwera. Je\u015bli produkt zosta\u0142 usuni\u0119ty, poka\u017c informacj\u0119 i zaktualizuj localStorage. Dodatkowo, przy dodawaniu produktu do koszyka, od razu wysy\u0142aj \u017c\u0105danie do backendu, aby zarezerwowa\u0107 towar na 15 minut (je\u015bli platforma na to pozwala). Dzi\u0119ki temu klient widzi tylko dost\u0119pne produkty i unika niespodzianek.<\/p>\n W praktyce:<\/strong> endpoint Porzucone koszyki to nie tylko problem marketingowy \u2013 to cz\u0119sto wina technicznych detali, kt\u00f3re programi\u015bci pomijaj\u0105 w codziennej pracy. Wystarczy:<\/p>\n Ka\u017cda z tych poprawek jest stosunkowo prosta do wdro\u017cenia, a mo\u017ce poprawi\u0107 wsp\u00f3\u0142czynnik konwersji nawet o 20\u201330%. W JurskiTech.pl cz\u0119sto widzimy, \u017ce pozornie ma\u0142e b\u0142\u0119dy techniczne maj\u0105 ogromny wp\u0142yw na wyniki sprzeda\u017cowe. Je\u015bli chcesz, \u017ceby\u015bmy przyjrzeli si\u0119 Twojemu sklepowi i znale\u017ali podobne \u201ekoszyko\u017cerne\u201d b\u0142\u0119dy \u2013 daj zna\u0107. Czasem wystarczy jeden dzie\u0144 audytu, by odblokowa\u0107 wzrost przychod\u00f3w.<\/p>\n","protected":false},"excerpt":{"rendered":" Wprowadzenie Prowadzisz sklep internetowy i widzisz, \u017ce klienci dodaj\u0105 produkty do koszyka, ale nie ko\u0144cz\u0105 zakupu? To zjawisko jest znane ka\u017cdemu e-commercerowi \u2013 \u015brednio 70% koszyk\u00f3w ko\u0144czy jako porzucone. Wi\u0119kszo\u015b\u0107 poradnik\u00f3w skupia si\u0119 na strategiach marketingowych: e-mailach przypominaj\u0105cych, pop-upach z rabatem czy optymalizacji procesu checkout. Ale co, je\u015bli powiem Ci, \u017ce cz\u0119sto problem le\u017cy g\u0142\u0119biej<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[776,125,747,840],"class_list":["post-2250","post","type-post","status-publish","format-standard","hentry","category-warto-wiedziec","tag-ai-e-commerce","tag-optymalizacja-konwersji","tag-porzucone-koszyki","tag-techniczne-bledy"],"_links":{"self":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2250","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/comments?post=2250"}],"version-history":[{"count":0,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/posts\/2250\/revisions"}],"wp:attachment":[{"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/media?parent=2250"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/categories?post=2250"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/news.jurskitech.pl\/blog\/wp-json\/wp\/v2\/tags?post=2250"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}localStorage<\/code> ani sessionStorage<\/code>. Klient traci\u0142 15\u201320 sekund na ponowne wpisywanie danych \u2013 i cz\u0119sto po prostu rezygnowa\u0142.<\/p>\nRozwi\u0105zanie<\/h3>\n
sessionStorage<\/code>. W przypadku prze\u0142adowania, przywr\u00f3\u0107 dane z pami\u0119ci. W React lub Vue.js mo\u017cesz u\u017cy\u0107 hooka useEffect<\/code> z dependencies, kt\u00f3ry wywo\u0142uje zapis. W Vanilla JS wystarczy nas\u0142uchiwanie zdarzenia change<\/code>. Dzi\u0119ki temu nawet przy b\u0142\u0119dzie walidacji klient nie traci wpisanych informacji.<\/p>\n2. Op\u00f3\u017anione \u0142adowanie skrypt\u00f3w p\u0142atno\u015bci<\/h2>\n
Przyk\u0142ad z \u017cycia<\/h3>\n
<head><\/code>. Przy obci\u0105\u017conym serwerze procesora skrypt \u0142\u0105czy\u0142 si\u0119 z API dostawcy, co trwa\u0142o \u015brednio 3\u20134 sekundy. W tym czasie strona checkoutu by\u0142a w og\u00f3le nieinteraktywna \u2013 klient nie m\u00f3g\u0142 nawet zobaczy\u0107 podsumowania koszyka. Wsp\u00f3\u0142czynnik porzuce\u0144 w tym kroku wynosi\u0142 45%.<\/p>\nRozwi\u0105zanie<\/h3>\n
async<\/code> lub defer<\/code>, ale tylko wtedy, gdy nie s\u0105 potrzebne do pierwszego renderingu. Lepiej jednak u\u017cy\u0107 techniki \u201elazy load after interaction\u201d \u2013 za\u0142aduj skrypt dopiero w momencie, gdy u\u017cytkownik kliknie \u201ePrzejd\u017a do p\u0142atno\u015bci\u201d. Wystarczy dynamicznie doda\u0107 tag <script><\/code> po klikni\u0119ciu:<\/p>\ndocument.getElementById('go-to-payment').addEventListener('click', function() {\n var script = document.createElement('script');\n script.src = 'https:\/\/js.stripe.com\/v3\/';\n document.head.appendChild(script);\n});\n<\/code><\/pre>\n3. Nieaktualne sesje koszyka \u2013 ghost koszyki<\/h2>\n
Mechanizm problemu<\/h3>\n
localStorage<\/code>. Gdy backend zmieni stan koszyka (np. usunie produkt z powodu wyczerpania stanu magazynowego), frontend nie zostaje o tym poinformowany. Klient podejmuje decyzj\u0119 o zakupie, przechodzi do p\u0142atno\u015bci i nagle widzi b\u0142\u0105d \u201eProdukt niedost\u0119pny\u201d. To frustruj\u0105ce i prowadzi do utraty zaufania.<\/p>\nPrzyk\u0142ad z audytu<\/h3>\n
Rozwi\u0105zanie<\/h3>\n
GET \/api\/cart<\/code> zwracaj\u0105cy JSON z list\u0105 produkt\u00f3w i ich statusami. Frontend po otrzymaniu odpowiedzi aktualizuje widok. Je\u015bli produkt jest niedost\u0119pny, wy\u015bwietlamy go z przekre\u015bleniem i informacj\u0105: \u201eNiestety, produkt zosta\u0142 wyprzedany\u201d. To buduje transparentno\u015b\u0107 i zmniejsza liczb\u0119 porzuconych koszyk\u00f3w spowodowanych b\u0142\u0119dami.<\/p>\nPodsumowanie<\/h2>\n
\n