Slik legger du til cookie-banner på en Lovable-side (GDPR)

Lovable er en av de raskeste måtene å få en nettside som virker. Beskriv den, og noen minutter senere har du en publisert app på en lovable.app-adresse. Ber du om Google Analytics, legger den til det også.

Det den ikke gjør, er å spørre den besøkende først. Vi testet det: analysetaggen kjører når siden lastes, for alle, uten banner og uten mulighet til å si nei. I Norge og EU er det feil rekkefølge. Denne guiden viser hva Lovable lager, hvordan du fikser det med én prompt, og hvordan du sjekker resultatet.

Hva Lovable gjør når du ber om Google Analytics

Nye Lovable-prosjekter bygges på TanStack Start, et React-rammeverk som rendrer sidene på serveren. Det finnes ingen vanlig index.html å lime en tag inn i. Da vi ba et nytt prosjekt om å «add Google Analytics with measurement ID G-TEST123456», lagret Lovable ID-en i en miljøvariabel, hentet den gjennom en serverfunksjon og la inn gtag-scriptet i nettleseren på alle sider.

Det er ryddig kode. Det er også akkurat det samtykkereglene sier at du ikke skal gjøre: taggen laster og setter _ga-cookien før den besøkende har sagt ja. Det samme gjelder Meta Pixel, Hotjar og alle andre sporingsverktøy du ber den legge til.

Prosjektet vi testet, lastet også fontene fra fonts.googleapis.com. Det setter ingen cookies, men sender hver besøkendes IP-adresse til Google, noe en tysk domstol har regnet som et GDPR-brudd. Mer om det lenger ned.

Steg 1: Legg Lovable-siden inn i Consentify

Publiser Lovable-prosjektet først, så du har adressen. Opprett deretter en gratis Consentify-konto og legg inn adressen som et domene, for eksempel prosjektet-ditt.lovable.app. Scriptet laster bare på domenet det er laget for, så kobler du senere ditt eget domene til Lovable, må du legge det inn i Consentify også.

Steg 2: Lim denne prompten inn i Lovable

Når du legger til domenet, velger du AI builder (Lovable, Bolt, v0) i installasjonssteget. Dashbordet gir deg denne prompten med din egen script-tag ferdig utfylt. Du kan også kopiere den herfra og bytte ut YOUR_TOKEN. Prompten er på engelsk fordi AI-verktøyene følger den mest presist da:

Add the Consentify cookie consent script to this site. Put this exact script tag as the very first element inside <head>, so it is rendered on every page before any other script. Use the root HTML template or root layout (for example index.html, app/layout.tsx or the root route), and keep it as a plain script tag with the async attribute:

<script async src="https://www.consentify.app/api/gateway?token=YOUR_TOKEN"></script>

Then remove all Google Analytics, Google Tag Manager, Meta Pixel, Hotjar, LinkedIn, TikTok and other tracking or advertising code from the project, including environment variables and server functions that only exist for them. Consentify will load those tools after the visitor has agreed.

Finally, add a button with id="revoke-consent-btn" and the text "Cookie settings" to the footer, so visitors can change their choice later.

Å fjerne sporingskoden er like viktig som å legge til scriptet. En gtag som Lovable la inn tidligere, fortsetter å kjøre før samtykke, banner eller ikke.

I testen vår fulgte Lovable prompten nøyaktig. Den slettet serverfunksjonen, gtag-koden og miljøvariabelen, og la scriptet først i head i root-ruten, src/routes/__root.tsx:

function RootShell({ children }) {
  return (
    <html lang="en">
      <head>
        <script
          async
          src="https://www.consentify.app/api/gateway?token=YOUR_TOKEN"
        ></script>
        <HeadContent />
      </head>
      <body>
        {children}
        <Scripts />
      </body>
    </html>
  );
}

Publiser prosjektet på nytt.

Steg 3: Legg inn sporings-ID-ene i Consentify

Google Analytics er borte fra koden, så legg det inn igjen på riktig måte. Åpne Integrations i Consentify-dashbordet og lim inn måle-ID-en. Gjør det samme for Meta Pixel eller annet prompten fjernet. Consentify laster nå hvert verktøy først når den besøkende har godtatt den kategorien, og signalene for Google Consent Mode v2 sendes for deg.

Steg 4: Fiks Google Fonts

Dette handler ikke om samtykke, så et banner løser det ikke. Løsningen er å levere fontene fra din egen side. Lim dette inn i Lovable:

Replace the Google Fonts stylesheet links with self-hosted fonts. Install the matching @fontsource packages for every font the site uses, import them in the app, and remove all links and preconnects to fonts.googleapis.com and fonts.gstatic.com.

Google Fonts-siden vår forklarer hvorfor det er viktig.

Steg 5: Sjekk at det virker

Åpne den publiserte siden i et privat vindu. Banneret skal dukke opp, og ingenting skal spore ennå. For å være sikker kjører du adressen gjennom den gratis GDPR-skanningen. Den laster siden som en ny besøkende som ikke har klikket på noe, og lister alle sporere, cookies og tredjepartsforespørsler som starter likevel. På en Lovable-side som er riktig satt opp, kjører ikke Google Analytics i det hele tatt før samtykke, og Google Fonts dukker ikke lenger opp.

Ikke glem personvernerklæringen

Lovable legger ofte inn en lenke til en personvernerklæring i footeren. Sjekk hva som ligger bak den. Du trenger en cookie-erklæring som lister det siden faktisk setter, og Consentify kan vise en som oppdaterer seg selv når du legger til integrasjoner. Resten av personvernerklæringen handler om virksomheten din, og den delen må du skrive selv. Sjekklisten vår over 7 ting AI-en glemmer når den bygger nettsiden din dekker de andre hullene som er verdt å tette før lansering.