Co Lovable dostarcza, a czego nie
Projekt Lovable to standardowa aplikacja Vite i React: index.html w katalogu głównym, folder src/, który agent przepisuje przy każdym promptcie, i, jeśli to włączyłeś, backend Supabase do uwierzytelniania i danych. Po publikacji aplikacja trafia na your-project.lovable.app albo na Twoją własną domenę, gdy ją podłączysz.
Z tą aplikacją przychodzą trzy rzeczy mające konsekwencje dla zgody. Po pierwsze, własna analityka odwiedzin Lovable. Dokumentacja mówi, że jest domyślnie włączona, że śledzi odwiedzających, odsłony, współczynnik odrzuceń, czas wizyty, źródła ruchu i urządzenia, i że „mierzy ogólny ruch, nie pojedyncze osoby”. Nie mówi, co, jeśli w ogóle, zapisuje w przeglądarce odwiedzającego. Po drugie, to, o co poprosiłeś: „Add Google Analytics” wstawia snippet GA4 do head, „Add the Meta pixel” robi to samo dla Facebooka. Po trzecie, osadzenia: wideo z YouTube lub Google Map w komponencie ustawia cookies w chwili załadowania iframe’a.
Nie przychodzi natomiast nic, co wstrzymywałoby te skrypty do decyzji odwiedzającego. A jeśli wpiszesz prompt „add a GDPR cookie banner”, Lovable zrobi to, co każdy agent kodujący: napisze ładny komponent React z przyciskiem Akceptuj, który ustawia flagę w localStorage i nic nie blokuje. To baner, za który CNIL ukarał SHEIN kwotą 150 milionów euro we wrześniu 2025 r., tylko w ładniejszej czcionce. Ten wpis to alternatywa, która zajmuje około dziesięciu minut.
Gdzie trafia tag
Runtime zgody to jeden tag script i musi być pierwszym elementem w <head> pliku index.html. Nie w App.tsx, nie w useEffect, nie w komponencie layoutu. Dwa powody. Runtime instaluje interceptor synchronicznie, więc wszystko, co działa wcześniej, może ustawić cookie, którego runtime nie cofnie. A index.html to jedyny plik, którego prompt Lovable prawie nigdy nie przepisuje, więc tag przetrwa kolejne pięćdziesiąt iteracji Twojego landing page’a.
Krok 1: zdobądź klucz
Załóż darmowe konto, dodaj stronę i wpisz domenę, na której opublikowana jest aplikacja. Jeśli nie podłączyłeś jeszcze własnej domeny, to adres lovable.app; możesz go później zmienić bez dotykania tagu. Otwórz Instalacja i skopiuj klucz produkcyjny. Każda strona ma też klucz preview, który serwuje to, co opublikowałeś na podgląd, i to jego należy użyć na adresie podglądowym Lovable podczas testów.
Krok 2: prompt
W darmowym planie karta Code w Lovable jest tylko do odczytu, więc edycję wykonuje agent. W planie płatnym możesz otworzyć index.html w karcie Code i wkleić tag samodzielnie, a z włączoną synchronizacją z GitHubem zrobić to we własnym edytorze i wypchnąć. Którąkolwiek drogą, polecenie jest to samo, a ważne jest to, czego zabrania.
Add this script tag as the very first element inside <head> of index.html, unchanged:
<script src="https://app.cookiecrumbs.eu/runtime/cc.js"
data-cc-site="pk_live_…"
data-cc-env="production"></script>
Then, for every analytics, advertising or social script already in index.html (Google Analytics, gtag, Meta Pixel, TikTok, Hotjar, Clarity), change type to "text/plain" and add data-cc-category="analytics" or data-cc-category="marketing". Do not build a cookie banner component. Do not change anything else.
Przeczytaj diff, zanim go zaakceptujesz. Powinien dodać cztery linie na początku index.html i zmienić atrybut type Twoich skryptów śledzących. Jeśli agent tworzy też CookieBanner.tsx, odrzuć zmianę i powtórz ostatnie zdanie promptu. Potem opublikuj.
Krok 3: przypisz to, co ładuje aplikacja
W panelu uruchom pierwszy skan. Otwiera Twoją opublikowaną aplikację trzy razy w prawdziwej przeglądarce, z odmową zgody, zgodą per kategoria i zgodą na wszystko, i wypisuje każde żądanie i cookie, które pojawiło się przed wyborem. Ta lista to prawda o Twojej aplikacji, cokolwiek mówi historia promptów.
Większość znalezisk przypisuje się sama: GA4, Hotjar i Clarity to statystyki; piksel Meta, tagi TikToka i LinkedIna to marketing; sesja Supabase mieszka w localStorage, jest ściśle niezbędna w aplikacji z logowaniem i nie wymaga zgody. Osadzone iframe’y YouTube i Maps to marketing, a runtime zastępuje je placeholderem i przyciskiem „Ustawienia cookies”, dopóki kategoria nie zostanie przyznana.
Jedyny wiersz, którego nie zablokujesz tagiem, to własna analityka odwiedzin Lovable, bo hosting Lovable dodaje ją poza Twoim kodem. Jeśli skan pokaże, że zapisuje identyfikator w przeglądarce albo wywołuje firmę trzecią, masz dwie uczciwe opcje: wyłączyć ją w Project settings, General, Publishing albo wymienić w deklaracji cookies i traktować jako analitykę ładowaną przed zgodą, co w UE jest problemem. Polecamy przełącznik. Liczniki serwerowe u Twojego hosta lub własna analityka za zgodą dają te same liczby bez tego pytania.
Krok 4: opublikuj, przeskanuj, udowodnij
Przypisz każde znalezisko do jego kategorii, ustaw linki do polityki prywatności i, jeśli jesteś w Niemczech, do impressum, i opublikuj baner. Potem uruchom test instalacji. Ładuje Twój opublikowany adres jak odwiedzający i potwierdza, że runtime uruchomił się pierwszy i nic nieniezbędnego nie odpaliło przed wyborem. Ten ptaszek ze znacznikiem czasu to artefakt, który zachowujesz. Zrób też zrzut ekranu kliknięcia Odrzuć w oknie prywatnym; panel storage przeglądarki nie powinien potem pokazywać cookies analitycznych ani marketingowych.
Gdy później podłączysz własną domenę, zaktualizuj domenę w ustawieniach strony, żeby skaner za nią podążał. Klucz się nie zmienia, więc tag w index.html zostaje bez zmian.
Consent Mode v2 w aplikacji SPA
Jeśli używasz Google Analytics lub Google Ads z odwiedzającymi z EOG, Wielkiej Brytanii lub Szwajcarii, Google wymaga sygnałów Consent Mode v2. Runtime wypycha wartości domyślne „denied”, zanim jakikolwiek tag Google zdąży się uruchomić, i aktualizuje je, gdy odwiedzający zdecyduje, więc nie ma nic do kodowania. Dwa szczegóły mają znaczenie właśnie w aplikacji Lovable. GA4 potrzebuje odsłony przy każdej zmianie trasy po stronie klienta, co załatwia zwykły useEffect na lokalizacji routera; ponieważ sam skrypt gtag jest wstrzymany do przyznania statystyk, te wywołania nieszkodliwie czekają w kolejce. I trzymaj snippet GA4 w index.html, nie w komponencie, żeby obejmowała go bramka text/plain. Pełna lista sygnałów i zmiana z czerwca 2026 r. są we wpisie o Consent Mode.
Co się dzieje, gdy promptujesz ponownie
Prompty przepisują src/. Rzadko dotykają index.html, ale „rebuild the landing page from scratch” albo „add the TikTok pixel” mogą, a agent dodający tag dodaje go na żywo, nie za bramką. Dwie siatki bezpieczeństwa to pokrywają. Zaplanowany ponowny skan ładuje opublikowaną aplikację jeszcze raz z odmową zgody i podnosi alert przy wszystkim nowym przed zgodą, z datą pojawienia się. A jeśli synchronizacja z GitHubem jest włączona, diff każdego promptu trafia do repozytorium, gdzie test CLI może zablokować deploy wprowadzający niesklasyfikowany tracker. Traktuj alert jak nieprzechodzący test: przypisz nowego dostawcę, opublikuj, gotowe.
Lista kontrolna
- Tag zgody jest pierwszym elementem w head pliku
index.html, z kluczem produkcyjnym. - Każdy skrypt analityczny i marketingowy w
index.htmlmatype="text/plain"i kategorię. - Analityka odwiedzin Lovable jest wyłączona albo wyjaśniona w deklaracji, po tym jak skan powiedział Ci, co robi.
- Pierwszy skan przeszedł na opublikowanym adresie, każde znalezisko ma kategorię, a baner jest opublikowany.
- Test instalacji zaliczony, a Odrzuć w oknie prywatnym nie zostawia cookies analitycznych ani marketingowych.
- Zaplanowane ponowne skany są włączone, więc następny prompt nie doda po cichu piksela.
Jeśli chcesz krótszą wersję ze szczegółami darmowego planu, ma ją przewodnik integracji Lovable, a darmowy skan powie Ci bez konta, co Twoja aplikacja ładuje dzisiaj.
Źródła
- Dokumentacja Lovable, „Project analytics”, odczyt 5 września 2026
- FAQ Lovable, „Can I see analytics for my published projects?”, odczyt 5 września 2026
- Dokumentacja Lovable, „View and edit your project’s code”, odczyt 5 września 2026
- Dokumentacja Lovable, integracja z GitHubem i przegląd synchronizacji Git
- Google, „Consent mode on websites and mobile apps”, dokumentacja Tag Platform
- CNIL, „Cookies placed without consent: SHEIN fined 150 million euros”, 3 września 2025
- EROD, Wytyczne 03/2022 w sprawie zwodniczych wzorców projektowych, przyjęte 14 marca 2022