Leiðbeiningar1. júní 2026 | FlexyConsent

Samskipan á kökukynningu fyrir Next.js, Gatsby og kyrrstæðar síður: Leiðarvísir fyrir forritara

Vandamálið með samþykkisglugga á kyrrstæðum síðum

Nútíma JavaScript-rammaverk eins og Next.js, Gatsby og Nuxt.js hafa breytt því hvernig vefsíður eru byggðar og afhentar. Síður eru for-uppgerðar (pre-rendered) við byggingu eða á netþjóni og síðan vökvaðar (hydrated) í vafranum. Þetta skapar sérstakt vandamál fyrir kökusamþykki: samþykkisborðinn þarf að vera tilbúinn áður en nokkur rekjunarskrift (tracking script) keyrir, en síðan sjálf getur þegar hafa verið uppgerð og skyndiminjuð á jaðarnetþjónum.

Hefðbundin CMP-kerfi voru hönnuð fyrir netþjóns-uppgerðar PHP eða einfaldar HTML-síður þar sem skjalið hleðst línulega ofan frá og niður. Í rammaheimi með kóðaskiptingu, letihleðslu (lazy loading) og streymandi netþjóns-uppgerð (streaming SSR) falla þessar forsendur. Til að útfæra samþykki rétt í þessu umhverfi þarf að skilja uppgerðarferlið.

Af hverju tímasetning skiptir enn meira máli en þ�� heldur

Á hefðbundinni HTML-síðu er einfalt að setja CMP-skriftu í <head> fyrir aðrar skriptur. Í Next.js App Router eða Gatsby er staðan flóknari:

For-uppgerð HTML kemur fyrst: Vafrinn fær fullbúið HTML frá CDN eða netþjóni. Ef einhver inline-skripta eða þriðju aðila merki eru innfelld í það HTML geta þau keyrt áður en samþykkisrökin þín hlaðast.
Vökvunarglufa: React-vökvun á sér stað eftir að HTML hefur verið teiknað. Ef samþykkisborðinn er React-hlutur er hann ekki virkur fyrr en vökvun er lokið. Á þessu bili geta Google-merki eða greiningarskriptur keyrt án samþykkis.
Flækjur vegna jaðarskyndiminnis: Ef þú notar ISR (Incremental Static Regeneration) eða edge functions er HTML skyndiminjað. Þú getur ekki sprautað inn samþykkisháðri rökfræði í skyndiminjað HTML án þess að nota viðskiptavinahlið (client-side) aðferð.

Kjarnareglan er þessi: samþykki verður að vera skilgreint á skriftustigi, ekki í viðmótshlutum. React-hlutur sem teiknar samþykkisborða er of seinn ef hann verður aðeins gagnvirkur eftir vökvun.

Samþætting með Next.js App Router

Next.js 13+ með App Router kynnti nýja leið til að meðhöndla skriptur. Hér er mælt með eftirfarandi nálgun fyrir samþykkissamþættingu:

Skref 1: Hlaða CMP-skriftu í rótarsniðmáti (root layout)

Notaðu Script-hlut Next.js með beforeInteractive-stefnu í rótarskránni þinni layout.tsx. Þetta segir Next.js að sprauta skriptunni inn í upphaflega HTML-skjalið, áður en vökvun hefst:

beforeInteractive-stefnan er lykilatriði. Sjálfgefna stefnan afterInteractive hleður skriptum eftir vökvun, sem er of seint fyrir samþykki. Með beforeInteractive er CMP-skriptu bætt inn í netþjóns-uppgerða HTML-ið og hún keyrir um leið og síðan hleðst.

Skref 2: Setja sjálfgefið samþykki áður en Google-merki hlaðast

Áður en Google Tag Manager eða gtag.js-búturinn er settur inn skaltu bæta við inline-skriftu sem skilgreinir sjálfgefin samþykkisástand. Þetta tryggir að jafnvel þótt GTM hlaðist áður en CMP-borðinn birtist, virði það sjálfgefin neitunarástand:

Þessi inline-skripta ætti að vera í <head> rótarsniðmátsins, á undan bæði CMP- og GTM-skriptum. Í Next.js geturðu notað venjulegt <script>-merki inni í <head>-hluta sniðmátsins í þessum tilgangi.

Skref 3: Meðhöndla leiðabreytingar

Í einnar síðu forritum (SPA) hleðst CMP-skripta einu sinni, en leiðabreytingar valda ekki fullri endurhleðslu síðu. CMP-kerfið þitt verður að haldast virkt yfir allar viðskiptavinahliðarleiðsagnir. FlexyConsent sér um þetta sjálfkrafa — þegar það hefur hlaðist helst það virkt yfir allar leiðabreytingar án endurupphafningar.

Samþætting með Next.js Pages Router

Fyrir verkefni sem enn nota Pages Router er nálgunin svipuð en notar _document.tsx í stað rótarsniðmáts. Settu CMP-skriftuna í <Head>-hlut sérsniðins Document-klasa. beforeInteractive-stefnan virkar á sama hátt í Pages Router.

Helsti munurinn er sá að _document.tsx er aðeins uppgert á netþjóni, þannig að öll samþykkisrökfræði þar er tryggilega hluti af upphaflegu HTML-svarinu.

Samþætting á kyrrstæðum Gatsby-síðum

Gatsby býr til fullkomlega kyrrstætt HTML við byggingu. Það er engin netþjóns-uppgerð við beiðni, sem einfaldar sumt en flækir annað:

Notaðu gatsby-ssr.tsx til að sprauta CMP-skriftu í <head> á hverri síðu. onRenderBody-API-ið leyfir þér að bæta skriptum í head sem verða til staðar í hverri kyrrstæðri HTML-skr��.
Forðastu Gatsby-viðbætur sem hlaða samþykki seint: Sum samfélagsviðbætur vefja samþykki inn í React-hluti sem aðeins festast (mount) eftir vökvun. Þetta skapar tímaglufuna sem rætt var um hér að ofan.
Settu sjálfgefið samþykki inline: Notaðu setHeadComponents í gatsby-ssr.tsx til að bæta við inline-skriftu sem setur sjálfgefin samþykkisástand. Þessi skrift verður í kyrrstæðu HTML-inu og keyrir strax.

Byggingartilgangur Gatsby þýðir að hver HTML-skrá á CDN-inu þínu mun innihalda samþykkis-skriftuna. Þetta er í raun kjörin lausn — engin netþjónsrökfræði sem getur brugðist eða skyndiminjast rangt.

Atriði varðandi Nuxt.js

Nuxt.js (byggt á Vue) hefur sín eigin mynstur. Í Nuxt 3 skaltu nota useHead-fallið eða nuxt.config.ts app head stillinguna til að bæta CMP-skriftunni inn á heimsvísu. Nuxt styður body: false valkost (sem setur skriptur í head) og async-eigind fyrir óhindrandi hleðslu.

Fyrir netþjóns-uppgerðarham Nuxt gildir sama regla: CMP-skriptu verður að vera hluti af upphaflegu HTML-svari, ekki sprautað inn af Vue-hluta eftir að hann hefur fest sig.

Að forðast uppsetningarskrið (layout shift)

Samþykkisborðar eru alræmdir fyrir að valda Cumulative Layout Shift (CLS), Core Web Vital-mælikvarða sem hefur áhrif á SEO-einkunnir. Þegar borði skýtur upp kollinum eftir að síðan hefur verið teiknuð ýtir hann efni niður eða leggst óvænt ofan á það.

Aðferðir til að minnka CLS vegna samþykkisborða:

Notaðu borða neðst á skjánum: Borðar neðst í sýnilegu svæði hreyfa ekki síðuefni. Þetta er vænlegasta nálgunin fyrir lágt CLS.
Varðveittu pláss: Ef þú verður að nota borða efst skaltu áskilja lóðrétt pláss í CSS þannig að síðusniðið taki mið af borðanum áður en hann birtist.
Forðastu yfirlagsglugga (modal) við hleðslu: Fullskjássamþykkisveggir sem birtast eftir að síðan hefur verið teiknuð valda skynjuðum óstöðugleika í uppsetningu. Ef þú þarft slíkan vegg skaltu teikna hann sem hluta af upphafsstöðu síðunnar.
Hladdu CMP samstillt í head: Þegar CMP er hlaðið sem teikniblokkerandi (render-blocking) skrift í head getur borðinn birst sem hluti af fyrstu teiknun í stað þess að skjóta upp kollinum síðar.

Rammaóháð nálgun FlexyConsent

FlexyConsent var hannað til að virka með hvaða ramma sem er — eða engum ramma — með því að starfa á skriftustigi fremur en á viðmótshlutastigi. Þetta skiptir máli af eftirfarandi ástæðum:

Eitt async-skriptumerki: Eitt <script>-merki í <head> er allt sem þarf. Engar npm-pakkauppsetningar, engin rammasértæk vefhula, engar byggingarstillingar.
Sjálfgefið samþykki keyrir strax: Skriptan setur Consent Mode V2 sjálfgefin gildi sem fyrstu aðgerð, áður en nokkur callback eða DOM-manipulation á sér stað. Þetta þýðir að Google-merki virða samþykki frá fyrstu millisekúndu.
Engin DOM-háð: Samþykkisrökin bíða ekki eftir að React, Vue eða Svelte vökvi. Þau starfa óháð líftíma rammans.
Virkar með SSG, SSR, ISR og CSR: Þar sem þetta er einföld skrift virkar hún eins hvort sem síðan var kyrrstætt uppgerð, netþjóns-uppgerð, enduruppgerð í skrefum eða uppgerð á viðskiptavinahlið.

Ráð fyrir forritara: Einfaldasta prófið á því hvort CMP sé rétt samþætt er að opna Network-flipann í vafranum, sía eftir Google-lénum og endurhlaða síðuna. Engar Google-beiðnir ættu að fara af stað áður en skipunin um sjálfgefið samþykki birtist í console. Ef þær gera það hleðst CMP-kerfið of seint.

Ókeypis áskrift FlexyConsent styður ótakmarkaðar síðuskoðanir og virkar með Next.js, Gatsby, Nuxt, Astro, SvelteKit, Remix og hreinu HTML. Samþættingin er sú sama alls staðar: eitt script-merki, rétt staðsett.