Jak dodać powiadomienia push w PrestaShop

Chcesz zwiększyć ruch powracający i sprzedaż bez konieczności pozyskiwania maili? Dodaj do swojego sklepu PrestaShop webowe powiadomienia push. To szybki kanał komunikacji w przeglądarce, który działa nawet, gdy użytkownik nie ma otwartej karty sklepu. Poniżej znajdziesz instrukcję krok po kroku: od wymagań technicznych, przez wybór modułu lub ręczną integrację, po zgodność z RODO, testy i diagnozowanie błędów. Wszystko z myślą o bezpieczeństwie, wydajności i realnym wpływie na konwersja.

Fundamenty wdrożenia: jak działają web push i czego potrzebujesz

Architektura web push w skrócie

Web push opiera się na trzech elementach: przeglądarce, serwerze push dostawcy (np. Google/Apple) oraz Twojej aplikacji front–back. Użytkownik akceptuje subskrypcja powiadomień w przeglądarce; zgoda zapisywana jest jako obiekt z adresem endpoint i kluczami. Po stronie sklepu przechowujesz te dane i wysyłasz do serwera push żądanie notyfikacji. Przeglądarka dostarcza komunikat użytkownikowi. Kluczowy plik to service worker – niewidoczny skrypt działający w tle, odbierający i wyświetlający powiadomienia, nawet gdy karta jest zamknięta.

Wymagania wstępne i kontrola środowiska

• SSL/TLS: web push wymaga HTTPS na domenie, której używasz do wyświetlania prośby o zgodę oraz hostowania service workera.
• Dostęp do serwera/hostingu: potrzebny do wgrania plików (np. worker, manifest) i ewentualnych zmian w szablonie lub module.
• Aktualna wersja sklepu: PrestaShop 1.7 lub 8; polecany PHP zgodny z wersją sklepu (np. 7.4–8.1 w zależności od wydania).
• Uprawnienia w BO (Back Office) do instalacji modułów i zmiany ustawień Motywu.
• Możliwość modyfikacji nagłówków HTTP (dla cors/cache) oraz wyłączenia kompresji dla plików worker, jeśli to konieczne.

Scenariusze i cele biznesowe

• Ratowanie porzuconych koszyków: przypomnienie o produktach, kod rabatowy, limit czasowy.
• Nowości i promocje: kampanie sezonowe, premiery kolekcji, alerty o dostawie do magazynu.
• Transakcyjne: potwierdzenie zamówienia, status wysyłki, dostępność dokumentów.
• Personalizacja: segmentacja według języka, kraju, kategorii przeglądanych produktów, LTV.
• Automaty: cykliczne automatyzacje po zdarzeniach (dodanie do koszyka, rejestracja, brak aktywności).

Specyfika PrestaShop: motywy, hooki i multistore

• Hooki: zwykle korzystasz z displayHeader (wstrzyknięcie SDK i manifestu) oraz displayFooter (inicjalizacja), a także akcyjnych, np. actionValidateOrder do tagowania zdarzeń.
• Motywy i child theme: zmiany wstawiaj w motywie potomnym, aby nie stracić ich przy aktualizacji.
• Multistore: konfigurację push prowadzisz per domena/sklep – osobne klucze i osobny worker, aby zachować porządek i separację subskrybentów.

Metoda 1 – szybki start z modułem z Addons

Wybór modułu: na co zwrócić uwagę

• Zgodność z Twoją wersją sklepu i motywem, aktywne wsparcie i aktualizacje.
• Obsługa HTTPS, własnej domeny i trybu multistore.
• Reguły i automaty (porzucone koszyki), harmonogram wysyłek, targetowanie.
• Integracja z analityką (UTM), eksport/backup subskrypcji, limity w planach cenowych.
• Dostęp do plików service worker oraz możliwość modyfikacji wyglądu prośby o zgodę.

Instalacja modułu przez Back Office

• BO → Moduły → Katalog modułów → wyszukaj „web push” lub OneSignal, Webpushr, PushOwl (nazwy mogą się różnić w zależności od dostawcy).
• Kliknij Zainstaluj, potwierdź uprawnienia.
• W przypadku modułów z rynku zewnętrznego: BO → Moduły → Menedżer modułów → Prześlij moduł (zip) → Zainstaluj.

Konfiguracja podstawowa

• Wklej klucze API i identyfikatory aplikacji wygenerowane u dostawcy push.
• Dodaj ikonę powiadomień (np. 192×192 PNG, lekka, kontrastowa).
• Ustaw domenę i ścieżkę pliku worker (zwykle w katalogu głównym domeny).
• Włącz powiadomienia na podstronach kluczowych (karta produktu, koszyk, checkout) – tylko po akceptacji zgody.

Projekt okna zgody i doświadczenie użytkownika

• Dwustopniowy prompt: najpierw własny baner wyjaśniający korzyści, dopiero potem natywny prompt przeglądarki.
• Widget „dzwonek” do szybkiego wypisania/wypisania i zarządzania zgodą.
• Wersje językowe: automatyczne dopasowanie do języka sklepu i przeglądarki.
• Zasada minimalizmu: nie zasłaniaj krytycznych przycisków (Dodaj do koszyka), nie pokazuj prośby zbyt agresywnie.

Reguły wysyłki, targetowanie i automaty

• Ustaw etykiety subskrybenta na podstawie treści przeglądanej (kategorie, tagi, ceny).
• Twórz segmenty: nowi vs. powracający, geolokalizacja, język, dzień/godzina aktywności.
• Automaty porzuconego koszyka: 3-stopniowa sekwencja z rosnącą wartością zachęty i limitem częstotliwości.
• Dynamiczne parametry: ID produktu, cena, rabat – wstawiane do treści notyfikacji.

Testy i weryfikacja

• Subskrypcja testowa na Chrome/Firefox/Safari, na desktopie i mobile (PWA/standalone dla iOS).
• Sprawdź, czy worker jest poprawnie serwowany (nagłówki content-type, brak cache „na twardo”).
• Wyślij kampanię testową do siebie i sprawdź emoji, polskie znaki, działanie linków UTM.
• Zweryfikuj wypisanie: klik w widget/dzwonek usuwa subskrypcję po stronie dostawcy i w Twojej bazie.

Metoda 2 – integracja OneSignal krok po kroku

Zakładanie projektu i podstawowe ustawienia

• Utwórz aplikację w panelu OneSignal; wybierz Web Push → Typical Site.
• Ustaw domenę (HTTPS), dodaj ikonę i nazwy, włącz auto–prompt lub własny prompt.
• Skopiuj App ID i klucze REST do późniejszej konfiguracji w sklepie.

Publikacja plików i manifestu

• Pobierz i wgraj do katalogu głównego pliki: OneSignalSDKWorker.js oraz OneSignalSDKUpdaterWorker.js.
• Jeśli używasz niestandardowej ścieżki, zaktualizuj konfigurację w panelu OneSignal (path) i w motywie.
• Dodaj link do manifestu w hooku displayHeader: <link rel=”manifest” href=”/manifest.json”>, a sam manifest umieść w głównym katalogu domeny.

Wstrzyknięcie SDK do motywu PrestaShop

• W pliku nagłówka motywu (np. themes/yourtheme/templates/_partials/head.tpl) dodaj inicjalizację OneSignal SDK.
• Dopasuj język przycisków i komunikatów do aktualnego iso_code sklepu, korzystając z Smarty/JS.
• W hooku displayFooter wywołaj inicjalizację i logikę wyświetlania promtu dwustopniowego.

Tagowanie i eventy z PrestaShop

• Po załadowaniu strony kategorii – dodaj tag kategorii do subskrybenta (OneSignal setExternalUserId/setTags).
• Po dodaniu do koszyka – wyślij zdarzenie i zapisz koszyk w localStorage; w automatach użyj go jako warunku wysyłki.
• Po złożeniu zamówienia (hook actionValidateOrder) – oznacz klienta tagiem „customer” i przekaż wartość zamówienia.

Porzucony koszyk i automatyzacje

• Skrypt śledzący ostatnią aktywność koszyka (czas, suma, waluta); jeśli brak transakcji w X minut – wyzwól kampanię.
• W OneSignal skonfiguruj sekwencję 3 wiadomości z rosnącym CTA; ogranicz do 1 sekwencji/7 dni na użytkownika.
• Dodaj deep link do koszyka z prefill danych i parametrami UTM dla analityki.

Zmiana domeny i HTTPS

• Przy migracji na HTTPS lub nową domenę utwórz osobną aplikację w OneSignal, by uniknąć konfliktów subskrypcji.
• Upewnij się, że worker i manifest są dostępne pod nową domeną (brak mixed content).

Metoda 3 – własna implementacja na FCM + VAPID

Projekt w Firebase i klucze

• Utwórz projekt w konsoli Firebase; dodaj Web App i włącz Cloud Messaging.
• Skonfiguruj klucze serwera i publiczny klucz VAPID – będziesz ich używać do subskrypcji i wysyłki.

Service worker i rejestracja subskrypcji

• Umieść /firebase-messaging-sw.js lub własny worker w katalogu głównym domeny.
• W kodzie front-end zarejestruj worker, pobierz token i poproś o zgodę przeglądarki. Dla przeglądarek wspierających standard Web Push bez bibliotek Firebase użyj czystego Push API z VAPID.
• Przekaż token/endpoint do backendu (kontroler modułu), związując go z visitor_id/guest_id i ewentualnie customer_id.

Backend PrestaShop: zapis subskrypcji

• Utwórz moduł z własną tabelą, np. ps_webpush_subscriptions (id, endpoint, publicKey, auth, language, country, created_at, last_seen, customer_id/guest_id).
• Dodaj kontroler typu ModuleFrontController do przyjmowania POST z subskrypcją (CSRF token, walidacja domeny, ratelimit).
• Powiąż subskrypcję z ciasteczkiem PrestaShop (id_guest) i aktualizuj last_seen przy każdym odsłonięciu strony.

Wysyłka wiadomości z PHP

• Zastosuj bibliotekę web-push (np. Minishlink/WebPush) do obsługi VAPID i szyfrowania.
• Przygotuj CRON do zbiorczych kampanii oraz worker queue do wysyłek dużych wolumenów (chunking po 1–2 tys. endpointów).
• Obsłuż odpowiedzi 404/410 i automatycznie usuwaj nieaktywne subskrypcje, aby nie generować zbędnych kosztów.

Projekt treści i kontrola UX

• Tytuł do 45–60 znaków, treść do 120–140 znaków; CTA w linku i akcjach powiadomienia.
• Ikona i obrazek dużego formatu (Chrome) – dostosuj wagę i proporcje, by skrócić czas renderowania.
• Ustal politykę częstotliwości: max 1–2 kampanie dziennie na użytkownika z cappingiem tygodniowym.

Zgody i prywatność

• Wyświetl jasną informację, po co chcesz wysyłać notyfikacje, jak się wypisać i jak długo przechowujesz dane.
• Przechowuj minimalny zestaw danych identyfikujących; nie łącz wprost z danymi osobowymi, jeśli nie jest to niezbędne.
• Udostępnij mechanizm wypisania i usunięcia subskrypcji na żądanie.

Analityka, utrzymanie i bezpieczeństwo

Mierzenie efektów i atrybucja

• Dodaj parametry UTM do linków, aby śledzić wizyty i sprzedaż w GA/Matomo.
• Konfiguruj cele i zdarzenia: klik w powiadomienie, powrót do koszyka, zakup w sesji post-click.
• Porównuj wskaźniki: subskrypcje/dzień, CTR, konwersje, LTV subskrybentów względem użytkowników bez push.

Jakość dostarczania i harmonogram

• Wysyłaj w porach największej aktywności odbiorców (lokalna strefa czasowa); stosuj time zone sending.
• Deduplicate: nie wysyłaj push i e-maila o tej samej godzinie dla tego samego segmentu.
• Warm-up dla dużej bazy: stopniowo zwiększaj wolumen, monitorując błędy i czas odpowiedzi serwera.

Utrzymanie i zgodność techniczna

• Aktualizuj worker i SDK po każdej aktualizacji motywu/modules; sprawdzaj kompatybilność przy przejściu na nowy PHP.
• Backupuj listę subskrypcji i ustawienia kampanii; przy migracjach zachowaj spójność domen/współdzielonych ciasteczek.
• W CI/CD dodaj testy smoke: dostępność worker, nagłówki, manifest, brak mixed content.

Bezpieczeństwo i zgodność prawna

• Wymuś HTTPS na całym sklepie; dodaj HSTS i poprawny content-type dla plików worker/manifest.
• Zabezpiecz endpoint zapisu subskrypcji przed nadużyciem (CSRF, ratelimit, walidacja hosta referer/origin).
• Zadbaj o polityki prywatności, rejestr czynności przetwarzania i łatwą rezygnację – to baza zgodności z RODO.

Najczęstsze błędy i jak je naprawić

• Worker 404 lub zły katalog: plik musi być w katalogu głównym domeny, bo scope decyduje o dostępności na całym serwisie.
• Mixed content: wszystkie zasoby dla powiadomień muszą być przez HTTPS.
• Brak zgody użytkowników: napraw UX zgody – pokaż wartości korzyści, opóźnij prompt do chwili zaangażowania (scroll, klik).
• Wysoka rezygnacja: ogranicz częstotliwość, lepiej targetuj i personalizuj treści.
• Niska dostarczalność w iOS: upewnij się, że użytkownik dodał stronę do ekranu głównego (PWA) lub użyj rozwiązań wspieranych przez Safari.
• Brak konwersji: testuj A/B tytuły, obrazki i CTA; koreluj czas wysyłki z porą dnia użytkownika.

Lista kontrolna wdrożenia

• HTTPS wdrożone i zweryfikowane; manifest i worker dostępne publicznie.
• Prompt dwustopniowy, zgodny z wytycznymi przeglądarek i czytelny dla użytkownika.
• Zapis i wypis subskrypcji działają; dane są czyszczone po 404/410.
• Segmenty zdefiniowane; reguły automatyczne dla porzuconych koszyków gotowe.
• Analityka z UTM, dashboard KPI i alerty dla spadków CTR/konwersji.
• Procedury backupu i migracji; testy po aktualizacjach sklepu i modułów.

Przykładowy przepływ wdrożenia w 60–90 minut

Etap 1: przygotowanie

• Sprawdź HTTPS, dostęp do FTP/SSH i wersję sklepu.
• Wybierz tryb: gotowy moduł czy integracja własna (np. z FCM).

Etap 2: instalacja

• Zainstaluj moduł z Addons lub przygotuj pliki worker/manifest i skonfiguruj hooki displayHeader/displayFooter.
• Skonfiguruj ikonę, języki, domenę i ścieżki.

Etap 3: testy

• Subskrybuj się na desktopie i telefonie; wyślij notyfikację testową.
• Sprawdź wypis, segmenty i automaty; włącz A/B test tytułu.

Etap 4: start produkcyjny

• Włącz harmonogram wysyłek; ustaw cap częstotliwości.
• Monitoruj CTR i sprzedaż; optymalizuj treści i pory.

Dodatkowe wskazówki operacyjne:

• Nie mieszaj wielu dostawców naraz na jednej domenie – prowadzi to do konfliktów workerów i dublowania subskrypcji.
• Utrzymuj spójność brandingu: ikona, ton komunikatów i strona docelowa kampanii.
• Regularnie czyść nieaktywne subskrypcje – poprawia to dostarczalność i szybkość wysyłki.
• Stosuj kody awaryjne i linki zapasowe (fallback), gdy produkt jest niedostępny lub link wygasł.