Case StudyChrome ExtensionAllegro AdsE-commerce

Panel Pro: Jak zbudowaliśmy rozszerzenie do zarządzania AllegroAds dla 2000+ użytkowników agencyjnych

Opublikowano · 11 min czytania · Zespół Optymized

Panel Pro to zaawansowany panel do zarządzania AllegroAds, zbudowany jako rozszerzenie Chrome dla agencji marketingu cyfrowego prowadzących kampanie na Allegro — największej platformie e-commerce w Polsce. Stworzony we współpracy z Pryzmat.Media, zdobył ponad 2000 użytkowników i ocenę 4.4 gwiazdki w Chrome Web Store. To historia tego, jak go zbudowaliśmy i czego się po drodze nauczyliśmy.

1. Wyzwanie: ręczne zarządzanie ponad 50 kampaniami Allegro Ads

Allegro to dla Polski to, czym Amazon jest dla Stanów Zjednoczonych — dominujący marketplace e-commerce, na którym codziennie dochodzi do milionów transakcji. Dla agencji marketingu cyfrowego prowadzących kampanie Allegro Ads, natywny panel reklamowy jest głównym narzędziem pracy. Problem w tym, że nigdy nie był budowany z myślą o agencjach zarządzających dziesiątkami klientów na dużą skalę.

Problemy były konkretne i dotkliwe. Nie było operacji masowych — zmiana stawek w 50 kampaniach oznaczała wchodzenie w każdą z osobna, zmianę wartości, zapisanie, powrót do listy i powtórzenie procedury od nowa. Raportowanie międzykampanijne nie istniało — agencje musiały ręcznie eksportować dane z każdej kampanii, wklejać je do arkuszy kalkulacyjnych i budować własne zagregowane widoki. Zarządzanie wieloma klientami było koszmarem przełączania kart i mentalnego żonglowania kontekstem.

Agencje, z którymi rozmawialiśmy, traciły od 3 do 5 godzin tygodniowo na pracę czysto mechaniczną — nie strategiczną, nie kreatywną, a jedynie klikanie w ten sam interfejs w kółko. Dla zespołu zarządzającego ponad 20 klientami to się sumuje do pełnego etatu straconego na powtarzalne operacje.

Nasz partner biznesowy, Pryzmat.Media, przyszedł do nas z jasnym briefem: ich zespół agencyjny potrzebował lepszych narzędzi, a natywny panel Allegro Ads nie zamierzał ich dostarczyć w najbliższym czasie. Potrzebowali czegoś, co działa teraz, a nie prośby o funkcję wrzuconej do backlogu.

2. Dlaczego rozszerzenie przeglądarki — a nie osobny dashboard SaaS

Pierwszym odruchem większości zespołów jest zbudowanie osobnego dashboardu. Pobrać dane z API platformy, wyświetlić we własnym interfejsie, pozwolić użytkownikom zarządzać wszystkim z jednego miejsca. Brzmi czysto. W praktyce, w przypadku Allegro Ads, to było niewykonalne od samego początku.

API Allegro ma ograniczenia

Nie każda funkcja dostępna w panelu webowym jest udostępniona przez API. Niektóre ustawienia kampanii, granularności raportowania i akcje zarządzania po prostu nie są dostępne programistycznie. Budowanie dashboardu SaaS na bazie niekompletnego API oznacza, że zawsze jesteś o krok za natywnym interfejsem.

Zero zależności od API

Rozszerzenie przeglądarki wstrzykuje się bezpośrednio w istniejący dashboard Allegro Ads. Czyta te same dane, które widzi użytkownik. Klika te same przyciski, które klika użytkownik. Jeśli funkcja istnieje w interfejsie webowym, rozszerzenie może z nią pracować — niezależnie od tego, czy Allegro udostępniło ją przez API, czy nie.

Brak przełączania kontekstu

Zespoły agencyjne już znają interfejs Allegro Ads. Mają wyrobioną pamięć mięśniową, gdzie co się znajduje. Rozszerzenie przeglądarki wzbogaca interfejs, którego już używają, zamiast zmuszać ich do nauki zupełnie nowego narzędzia. Krzywa adopcji jest praktycznie płaska — zainstaluj rozszerzenie, a Twój dotychczasowy workflow zyskuje nowe supermoce.

Szybszy czas do wartości

Budowanie pełnego dashboardu SaaS oznacza uwierzytelnianie, synchronizację danych, uprawnienia, hosting i interfejs, który powiela to, co Allegro już zapewnia. Rozszerzenie przeglądarki pomija to wszystko. Zbudowaliśmy i wydaliśmy pierwszą działającą wersję w tygodnie, nie miesiące.

Kluczowa decyzja

Zamiast budować obok platformy, zbudowaliśmy na niej. Rozszerzenie traktuje dashboard Allegro Ads jako fundament — dodając to, czego brakuje, bez zastępowania tego, co już działa. To jest fundamentalna przewaga podejścia opartego na rozszerzeniu przeglądarki dla narzędzi zależnych od platformy.

3. Architektura techniczna

Panel Pro jest zbudowany na tym samym stosie produkcyjnym, którego używamy do wszystkich naszych rozszerzeń, doskonalonym przez ponad 100 wydanych wersji. Oto jak poszczególne elementy do siebie pasują:

React + CRXJS + Vite

Główny pipeline budowania. CRXJS to plugin Vite, który rozumie strukturę rozszerzeń Chrome — jesteśmy kontrybutorami tego projektu. Czyta manifest, obsługuje content scripty, background workery i hot module replacement automatycznie. React zapewnia architekturę komponentową dla każdej warstwy UI: wstrzykiwanych paneli, popupów i stron ustawień.

Wstrzykiwanie content scriptów w SPA Allegro

Allegro Ads to aplikacja typu single-page. Trasy zmieniają się bez pełnego przeładowania strony. DOM jest stale przebudowywany przez framework. Nasza wewnętrzna biblioteka react-content-script-injector monitoruje punkty wstrzykiwania i automatycznie ponownie montuje komponenty UI Panel Pro, gdy Allegro się przerenderuje lub nawiguje. Zmiany tras po stronie klienta, dynamiczne ładowanie treści, testy A/B po stronie Allegro — wszystko obsługiwane automatycznie.

Shadow DOM do izolacji stylów

Panel Pro wstrzykuje własne elementy UI bezpośrednio na strony Allegro. Bez izolacji stylów CSS Allegro psułoby nasze komponenty, a nasze CSS psułoby układ Allegro. Shadow DOM zapewnia prawdziwą enkapsulację — style wewnątrz shadow root nie wyciekają na zewnątrz, a style Allegro nie wyciekają do środka. Nasza biblioteka obsługuje wstrzykiwanie Tailwinda do shadow root, ładowanie fontów przez granicę shadow oraz React Portale dla modali i dropdownów.

TanStack Query do cache'owania danych

Dane kampanii, informacje o stawkach i metryki raportowania są odczytywane z interfejsu Allegro i cache'owane lokalnie za pomocą TanStack Query. Dzięki temu interfejs rozszerzenia pozostaje responsywny nawet podczas ładowania stron Allegro. Wzorzec stale-while-revalidate utrzymuje dane świeże bez bombardowania DOM ciągłymi odczytami. Odświeżanie w tle zapewnia aktualność danych przy przełączaniu kart.

TypeScript od A do Z

Cały codebase jest w TypeScript. Typy Chrome API, schematy wiadomości między content scriptami a service workerem oraz modele danych kampanii i raportów są w pełni typowane. To wychwytuje całą klasę błędów na etapie budowania, które w przeciwnym razie pojawiłyby się jako ciche awarie w produkcji.

Background service worker do stanu między kartami

Użytkownicy agencyjni często mają otwartych wiele kart Allegro — po jednej na konto klienta. Background service worker działa jako centralny koordynator stanu, synchronizując ustawienia, cache'owane dane i preferencje użytkownika między wszystkimi aktywnymi kartami. Gdy użytkownik zmieni ustawienie w jednej karcie, każda inna karta natychmiast to odbiera za pomocą chrome.storage.onChanged.

Całe rozszerzenie jest pokryte testami end-to-end, integracyjnymi i jednostkowymi. CI/CD automatycznie buduje i wdraża przy każdej zmianie kodu — poprawka trafia z kodu do produkcji w minuty, nie dni.

4. Kluczowe funkcjonalności

Każda funkcja w Panel Pro była podyktowana tym samym pytaniem: co zespół robi dziś ręcznie, a co możemy zautomatyzować lub uprościć? Oto co dostarczyliśmy:

01

Masowe zarządzanie kampaniami

Zaznacz wiele kampanii i zastosuj zmiany do wszystkich naraz. Wstrzymaj, wznów, dostosuj budżety, zmień targetowanie — operacje, które wcześniej wymagały wchodzenia w każdą kampanię z osobna, teraz dzieją się jednym kliknięciem. To, co zajmowało 45 minut dla 50 kampanii, teraz trwa 30 sekund.

02

Automatyczne dostosowywanie stawek

Ustaw reguły automatycznych zmian stawek na podstawie metryk wydajności. Jeśli koszt kliknięcia kampanii przekroczy próg, obniż stawkę. Jeśli ROAS jest powyżej celu, zwiększ ją. Rozszerzenie monitoruje dane wydajnościowe kampanii i stosuje korekty zgodnie z regułami zdefiniowanymi przez agencję — koniec z ręcznym pilnowaniem stawek przez cały dzień.

03

Raportowanie międzykampanijne

Zagregowane widoki ze wszystkich kampanii, wszystkich klientów, wszystkich kont. Podsumowania wydajności, których natywny panel Allegro po prostu nie oferuje. Agencje mogą zobaczyć całkowite wydatki, średni ROAS i najlepiej działające kampanie w całym swoim portfolio bez opuszczania dashboardu Allegro.

04

Narzędzia do współpracy z klientami

Adnotacje, notatki i systemy tagowania nałożone na interfejs Allegro. Account managerowie mogą zostawiać kontekst o tym, dlaczego kampania została wstrzymana, czego zażyczył sobie klient lub jaki jest następny krok optymalizacji. Ten kontekst żyje w rozszerzeniu i podąża za zespołem — koniec z przeszukiwaniem wątków na Slacku w poszukiwaniu decyzji.

05

Eksport raportów jednym kliknięciem

Generuj raporty gotowe dla klienta bezpośrednio z dashboardu Allegro Ads. Zaznacz kampanie, wybierz zakres dat i wyeksportuj sformatowany raport, który można wysłać prosto do klienta. Koniec z kopiowaniem do arkuszy kalkulacyjnych, koniec z prezentacjami ze zrzutami ekranu, koniec z "wyślę Ci liczby do końca dnia."

Każda funkcja była budowana iteracyjnie z bezpośrednim feedbackiem od zespołów agencyjnych korzystających z Panel Pro na co dzień. Wydawaliśmy aktualizacje co tydzień, zbieraliśmy opinie i dostosowywaliśmy się. Funkcje, które istnieją dziś, to te, które przetrwały realne użytkowanie, a nie te, które dobrze brzmiały na spotkaniu planistycznym.

5. Wyniki: 2000+ użytkowników i 3-5 zaoszczędzonych godzin tygodniowo

Panel Pro rozwijał się wyłącznie dzięki poleceniom w polskiej społeczności e-commerce i marketingu cyfrowego. Bez płatnej akwizycji, bez launchu na Product Hunt, bez partnerstw z influencerami. Agencje zaczęły go używać, poleciły innym agencjom i tak się rozprzestrzeniał.

2000+

Aktywnych użytkowników w Chrome Web Store

4.4 / 5

Ocena gwiazdkowa w 13 recenzjach

3-5 godz.

Oszczędności tygodniowo na zespół agencyjny

Oszczędności czasu wynikają z kumulacji drobnych usprawnień: operacje masowe zamiast klikania po kolei, raporty generowane w sekundach zamiast składanych ręcznie przez godzinę, korekty stawek następujące automatycznie zamiast wymagać ciągłego monitorowania.

Dla agencji zarządzających ponad 20 kontami klientów te 3 do 5 godzin tygodniowo przekładają się bezpośrednio na zdolności operacyjne. To czas, który zespół może przeznaczyć na strategię, komunikację z klientem i optymalizację kampanii — pracę, która faktycznie przynosi wyniki.

Wzrost oparty na poleceniach mówi nam coś ważnego: gdy budujesz narzędzie, które rozwiązuje konkretny, dotkliwy problem dla zwartej społeczności, nie potrzebujesz budżetu marketingowego. Polska społeczność agencji e-commerce jest na tyle mała, że naprawdę użyteczne narzędzie zostaje szybko zauważone. Ocena 4.4 gwiazdki po 13 recenzjach to nie metryka próżności — to agencje głosujące swoimi workflow.

6. Wnioski i lekcje

Budowa Panel Pro utrwaliła kilka zasad, które mają zastosowanie do każdego rozszerzenia wstrzykującego się w aplikację trzeciej strony. Oto czego się nauczyliśmy:

SPA trzecich stron się zmieniają — buduj z myślą o tym

Allegro regularnie aktualizuje swój dashboard Ads. Nazwy klas CSS się zmieniają, struktura DOM się przesuwa, pojawiają się nowe elementy, stare są usuwane. Jeśli na sztywno zapiszesz selektory i założysz, że struktura strony zostanie taka sama, Twoje rozszerzenie się zepsuje w ciągu tygodni. Zbudowaliśmy solidne monitorowanie DOM z wieloma strategiami awaryjnymi: jeśli jeden selektor przestanie działać, rozszerzenie próbuje alternatywnych ścieżek. MutationObserver obserwuje zmiany strukturalne i automatycznie ponownie wstrzykuje komponenty. To podejście sprawia, że drobne aktualizacje Allegro rzadko wymagają aktualizacji Panel Pro.

Shadow DOM jest koniecznością

Nauczyliśmy się tego na własnej skórze przy wcześniejszych projektach. Bez izolacji Shadow DOM wstrzyknięty interfejs jest na łasce CSS strony hosta. Arkusze stylów Allegro są złożone i zmieniają się często. Aktualizacja CSS po ich stronie mogłaby nagle zepsuć stylowanie Twoich przycisków, zepsuć układ lub uczynić tekst nieczytelnym. Shadow DOM eliminuje całą tę klasę problemów. To więcej pracy na początku — trzeba obsłużyć ładowanie fontów, renderowanie portali i wstrzykiwanie Tailwinda do shadow root — ale zwraca się w ciągu pierwszego miesiąca użytkowania produkcyjnego.

Buduj pod konkretny workflow, nie ogólne narzędzie

Panel Pro to nie "ogólne ulepszenie Allegro." To narzędzie dla agencji zarządzających wieloma kampaniami Allegro Ads. Ta konkretność jest jego siłą. Dokładnie wiemy, kim jest użytkownik, co robi każdego dnia i gdzie są punkty bólu. Każda funkcja mapuje się na realny krok workflow. Ten fokus doprowadził do szybszej adopcji niż osiągnęłoby szersze, bardziej ogólne narzędzie. Użytkownicy instalują je i natychmiast widzą wartość, bo rozwiązuje ich dokładny problem, a nie jego generyczne przybliżenie.

Monitoring błędów nie jest opcjonalny

Kiedy Allegro wypuszcza aktualizację, musimy wiedzieć w ciągu minut, czy coś się zepsuło. Panel Pro zawiera wbudowane raportowanie błędów, które alarmuje nas o awariach wstrzykiwania, zmianach DOM wpływających na nasze selektory i błędach runtime w całej bazie użytkowników. Często wiemy o zmianach UI Allegro, zanim większość użytkowników to zauważy. To pozwala nam proaktywnie wypuszczać poprawki, czasem zanim jakikolwiek użytkownik zgłosi problem.

Cotygodniowe wydania budują zaufanie

Wydawaliśmy aktualizacje Panel Pro co tydzień podczas aktywnego rozwoju. Ta kadencja budowała zaufanie wśród użytkowników agencyjnych — widzieli, jak ich feedback zamienia się w funkcje w ciągu dni, nie kwartałów. Oznaczało to też, że błędy były wychwytywane i naprawiane szybko. Nasz pipeline CI/CD czyni to zrównoważonym: każdy merge do main uruchamia cykl budowania, testowania i wdrażania. Żadnych manualnych kroków, żadnych ceremonii deploymentu.

Najważniejszy wniosek

Budowanie na platformie, której nie kontrolujesz, to fundamentalnie inne wyzwanie inżynieryjne niż budowanie własnej aplikacji. Platforma będzie się zmieniać pod Tobą. Pytanie nie brzmi, czy coś się zepsuje — ale jak szybko to wykryjesz i naprawisz. Inwestuj w monitoring, strategie awaryjne i szybki pipeline wdrożeniowy. Wszystko inne wynika z tego.

Potrzebujesz rozszerzenia dopasowanego do workflow Twojej agencji?

Zbudowaliśmy Panel Pro od zera do ponad 2000 użytkowników. Jeśli Twój zespół agencyjny traci godziny na powtarzalną pracę w przeglądarce, możemy zbudować rozszerzenie, które to rozwiąże. Opisz nam swój workflow — powiemy Ci, co możemy zautomatyzować.

Kto za tym stoi

Tomasz Dłuski

Tomasz Dłuski

Założyciel & CEO

Senior Software Engineer z 10+ letnim doświadczeniem. W poprzedniej firmie był częścią firmy, która wyskalowała się z 5 do 50+ inżynierów. Teraz buduje Optymized — firmę, która łączy doświadczenie w dostarczaniu projektów enterprise z własnymi produktami SaaS. Maintainer CRXJS (3.9k stars na GitHubie), jednego z najpopularniejszych narzędzi do budowy rozszerzeń przeglądarek.

Porozmawiajmy o Twoim projekcie

Potrzebujesz rozszerzenia do przeglądarki, dedykowanego zespołu, czy konsultacji technicznej? Znajdźmy najlepsze podejście razem.

lub napisz do nas