Sklep działał normalnie, ale konwersja nagle spadła o 40% w ciągu jednego dnia. Google Analytics pokazywał ruch na poziomie normy. Problem był niewidoczny gołym okiem – tylko przy konkretnym rozmiarze ekranu przyciski w checkoucie nachodziły na siebie i były nieaktywalne. Czas diagnozy: 3 godziny, naprawy: 30 minut.
Objawy
- Spadek konwersji o 40% bez wyraźnej przyczyny technicznej
- Sklep wygląda poprawnie na desktopie i popularnych rozmiarach mobilnych
- Nagrania sesji (Hotjar) pokazują użytkowników klikających w puste miejsce na ekranie
- Problem zaczął się po wdrożeniu aktualizacji motywu
Diagnoza
# Sprawdź nagrania sesji w Hotjar/Microsoft Clarity # Filtruj: strona = /checkout, kliknięcia = rage clicks (wielokrotne kliknięcia w to samo miejsce) # Sprawdź w DevTools przy różnych rozmiarach ekranu: # Chrome > DevTools > Toggle Device Toolbar > Custom: 375x667 (iPhone SE) # Custom: 390x844 (iPhone 14) # Custom: 412x915 (Pixel 7) # Sprawdź console na błędy JS # Często ukryty błąd JS blokuje działanie przycisku: # "Cannot read properties of undefined (reading 'addEventListener')"
Przyczyna
Aktualizacja motywu zmieniła z-index elementu overlay podczas ładowania. Na ekranach 360-400px szerokości overlay nakładał się na przycisk „Przejdź do kasy” czyniąc go nieklikalnym. Element był przezroczysty więc wizualnie niewidoczny.
Rozwiązanie
# Znajdź element blokujący kliknięcie # DevTools > Elements > kliknij prawym na przycisk > Inspect # Sprawdź w Styles panel: czy coś ma position: fixed lub z-index powyżej przycisku # Narzędzie do debugowania kliknięć: # Wklej w konsolę przeglądarki:
document.addEventListener('click', function(e) {
var el = document.elementFromPoint(e.clientX, e.clientY);
console.log('Kliknięto element:', el, 'z-index:', getComputedStyle(el).zIndex);
}, true);
# Napraw z-index w CSS motywu
# Przed: .loading-overlay { z-index: 9999; }
# Po: .loading-overlay { z-index: 100; pointer-events: none; }
# Dodaj pointer-events: none do overlayów które nie powinny blokować kliknięć
Wnioski
Każde wdrożenie zmian frontendowych wymaga testów na wielu rozmiarach ekranu – szczególnie 360px, 375px, 390px, 414px (najpopularniejsze szerokości mobilne w Polsce). Nagrania sesji (Hotjar, Clarity – Microsoft oferuje bezpłatnie) powinny być standardem. Monitoring konwersji z alertem przy spadku powyżej 15% wykrywa takie problemy w ciągu godzin, nie dni.
