Hvor legger jeg Consentify script-taggen i et Next.js App Router-prosjekt?

Legg den til i rot-layout.tsx-filen ved hjelp av next/script-komponenten med async-attributtet. Plasser den inne i body-elementet. Ingen 'use client'-direktiv er nødvendig — script-taggen i seg selv er et serverkomponent-kompatibelt element.

Må jeg sette gtag consent defaults til 'denied' i Next.js-koden min?

Ikke når du bruker Consentify. Sporings-skript konfigureres i Consentify-dashbordet, ikke i kodebasen din. Consentify håndterer blokkering av disse skriptene før samtykke og sender korrekte Consent Mode v2-signaler til GA4 automatisk. Du skriver ingen gtag consent-kode direkte.

Hvordan håndterer Consentify Next.js ruteendringer?

Consentifys skript avlytter den native History API pushState og replaceState-hendelsene. Dette betyr at det oppdager klientsidenavigasjon i Next.js og re-evaluerer samtykketilstand ved hver ruteendring uten ekstra kode i prosjektet ditt.

Vil samtykkebanneret komme i konflikt med Tailwind CSS eller komponentbiblioteket mitt?

Nei. Consentify gjengir banneret inne i en Shadow DOM, noe som holder det isolert fra applikasjonens stilark. Tailwind-klasser, CSS Modules, styled-components og global CSS vil ikke påvirke banneret, og bannerets stiler vil ikke påvirke layouten din.

Kan jeg legge til nye sporingsintegrasjoner uten å redeploy Next.js-appen?

Ja. Integrasjoner konfigureres i Consentify-dashbordet. Når du legger til eller fjerner et sporingsverktøy, oppdateres script-cachen automatisk. Ingen kodeendringer, ingen deployment og ingen endringer i layout.tsx nødvendig.

Slik legger du til cookie-samtykke i Next.js: den enkle måten

De fleste guider for cookie-samtykke i Next.js viser det samme: en useState-hook for samtykketilstand, en useEffect som leser localStorage, en egendefinert bannerkomponent, en gtag('consent', 'default', { analytics_storage: 'denied' })-blokk, og deretter mer kode for å oppdatere det når brukeren aksepterer. Det er 50 til 100 linjer med boilerplate før du har stylet noe som helst, og hver gang du legger til et nytt sporings-skript må du inn i kodebasen igjen.

Det finnes en enklere tilnærming. Én script-tag i layout.tsx. Sporingsverktøy konfigurert i et dashbord. Ingen samtykke-boilerplate i koden din i det hele tatt.

Hvorfor cookie-samtykke i Next.js normalt er komplisert

Next.js legger til spesifikke utfordringer som vanlige HTML-nettsteder ikke har. App Router deler rendering mellom server- og klientkomponenter, noe som betyr at kode som leser localStorage eller kaller window må leve i en 'use client'-komponent. Ruteendringer i Next.js utløser ikke en full sideinnlasting, så samtykklogikk må re-evalueres ved navigasjonshendelser, ikke bare ved innledende innlasting. Og next/script har fire lastingsstrategier — velger du feil, lastes samtykkebanneret etter at sporings-skriptene allerede har kjørt.

Den vanlige DIY-tilnærmingen håndterer alt dette i kode. Du ender opp med håndtering av samtykketilstand, en bannerkomponent, lyttere for ruteendringer og per-integrasjons blokkingslogikk som er koblet sammen manuelt. Det fungerer, men det er mye kode å skrive, teste og vedlikeholde.

Feil tilnærming: sporings-skript i kodebasen

Det vanligste mønsteret i Next.js samtykke-guider ser slik ut: legg GA4 direkte i layout.tsx, sett analytics_storage til 'denied' som standard, bygg en bannerkomponent som kaller gtag('consent', 'update', ...) når brukeren aksepterer, og lagre resultatet i localStorage.

Dette fungerer for GA4. Men hva skjer når du trenger å legge til Meta Pixel? Nå gjentar du mønsteret for et nytt skript. TikTok Pixel? Et tredje. Hver nye integrasjon betyr ny kode, ny testing, og enda en ting som kan gå i stykker når leverandøren oppdaterer sin snippet. Du bygger en mini tag manager inne i Next.js-appen din, og du kommer til å vedlikeholde den på ubestemt tid.

Den bedre tilnærmingen: én script-tag, alt i dashbordet

Ideen er den samme som Google Tag Manager, men for samtykkeadministrasjon. I stedet for å legge sporings-skript i kodebasen konfigurerer du dem i et dashbord. Samtykkeverktøyet håndterer blokkering, injeksjon etter samtykke og Consent Mode v2-signaler. Kodebasen forblir ren.

Med Consentify er hele Next.js-integrasjonen én linje i rot-layout.tsx:

import Script from 'next/script'

const apiUrl =
  process.env.NODE_ENV === 'development'
    ? '/api/gateway?token=DIN_TOKEN'
    : 'https://www.consentify.app/api/gateway?token=DIN_TOKEN'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <Script async src={apiUrl} />
      </body>
    </html>
  )
}

Det er alt. Ingen 'use client'-direktiv nødvendig. Ingen samtykketilstand. Ingen useEffect. Ingen bannerkomponent å bygge eller style. Skriptet håndterer alt det selv.

Slik håndterer det Next.js-spesifikke problemer

Consentify bruker Shadow DOM for banneret, så det forblir isolert fra Next.js-appens CSS og kommer ikke i konflikt med Tailwind eller komponentbiblioteket du bruker. Det avlytter den native History API for å oppdage ruteendringer, noe som betyr at samtykketilstand re-evalueres korrekt ved Next.js-navigasjon uten ekstra kode på din side. Skriptet lastes asynkront fra et edge-nettverk, så det blokkerer ikke sidevisningen din eller påvirker Core Web Vitals.

For App Router spesifikt: skriptet plasseres i layout.tsx på rotnivå, ikke inne i en 'use client'-komponent. Next.js anbefaler bruk av next/script med async for tredjepartsskript som ikke trenger presis lasterekkefølge, noe som er nøyaktig dette. Samtykkebanneret må vises før sporing kjøres, og skriptet er designet til å initialisere før integrasjonene det administrerer.

Legge til og fjerne sporings-skript

Her er GTM-analogien mest nyttig. Når en klient vil legge til LinkedIn Insight Tag, rører du ikke kodebasen. Du logger inn i Consentify-dashbordet, legger til integrasjonen, limer inn piksel-ID-en og publiserer. Script-cachen invalideres og den nye integrasjonen er live innen minutter. Når en klient dropper et sporingsverktøy fjerner du det fra dashbordet. Ingen deployment, ingen kodegjennomgang, ingen risiko for å utilsiktet ødelegge noe annet i layouten.

Consentify støtter for øyeblikket Google Analytics 4, Google Tag Manager, Meta Pixel, TikTok Pixel, LinkedIn Insight Tag, Snapchat Pixel, PostHog, HubSpot, Intercom og mer. Egendefinerte skript-integrasjoner er også tilgjengelig på Pro-planer for alt som ikke er i den ferdigbygde listen. Se den fullstendige oppsettguiden for en komplett gjennomgang.

Hva med Consent Mode v2?

Kjører du Google Ads eller GA4, har Google Consent Mode v2 vært påkrevd for EØS-trafikk siden mars 2024. Den vanlige DIY-tilnærmingen innebærer å initialisere GA4 med alle samtykkeparametere satt til 'denied' og deretter oppdatere dem ved brukerhandling. Consentify håndterer dette automatisk når du konfigurerer GA4 som en integrasjon i dashbordet. Du skriver ingen gtag('consent', ...)-kall i koden din. Samtykke-signalene sendes korrekt uten boilerplate.

Hva du fortsatt må gjøre

Å legge til script-taggen er steg én, ikke hele oppsettet. I dashbordet må du konfigurere bannerdesignet, legge til integrasjonene dine og legge til en tilbakekallsknapp et sted på nettstedet. GDPR krever at besøkende kan endre samtykket etter det første besøket, så legg til et element med ID-en revoke-consent-btn i bunnteksten eller på personvernsiden din. Consentify kobler samtykkepanelet til det automatisk — ingen JavaScript nødvendig.

<!-- I footer-komponenten din -->
<button id="revoke-consent-btn">Informasjonskapsel-innstillinger</button>

Det enkeltelementet, kombinert med script-taggen i layout.tsx, er den komplette Next.js-implementeringen. Alt annet bor i dashbordet.

Når DIY-tilnærmingen gir mer mening

Har du veldig spesifikke krav — et fullt egendefinert bannerdesign som lever inne i React-komponenttreet ditt, serversidekontroll av samtykke for personalisert innhold, eller integrasjon med et egendefinert tilstandsadministrasjonssystem — gir det å bygge din egen samtykkflyt i kode mer kontroll. Avveiingen er vedlikeholdsomkostningene beskrevet ovenfor. For de fleste Next.js-prosjekter som bare trenger etterlevende samtykke for et standardsett med analyse- og markedsføringsverktøy, er énskript-tilnærmingen raskere å sende og enklere å overlevere til en klient eller en annen utvikler.

Klar til å komme i gang? Prøv Consentify gratis — ett domene, ingen tidsbegrensning.