Mafunzo1 Juni 2026 | FlexyConsent

Idhini ya Vidakuzi kwa Next.js, Gatsby, na Tovuti Tulivu: Mwongozo wa Ujumuishaji kwa Wasanidi

Tatizo la Idhini kwenye Tovuti Tulivu

Fremu za kisasa za JavaScript kama Next.js, Gatsby, na Nuxt.js zimeleta mabadiliko makubwa katika jinsi kurasa za wavuti zinavyotengenezwa na kutolewa. Kurasa hutengenezwa mapema wakati wa ujenzi au kwenye seva, kisha kupewa hydration kwenye mteja. Hili linaleta changamoto ya kipekee kwa idhini ya vidakuzi: bango la idhini lazima liwe tayari kabla hati zozote za ufuatiliaji kuanza kutekelezwa, lakini ukurasa wenyewe unaweza tayari kuwa umetengenezwa na kuhifadhiwa kwenye kingo (edge).

CMP za jadi zilibuniwa kwa kurasa za PHP zinazotolewa na seva au kurasa rahisi za HTML ambapo hati ya waraka hupakiwa kwa mtiririko kutoka juu hadi chini. Katika ulimwengu wa fremu zenye mgawanyo wa msimbo (code splitting), upakiaji wa uvivu (lazy loading), na utoaji wa kurasa kwenye seva kwa mtiririko (streaming server-side rendering), dhana hizo zinavunjika. Kupata idhini kwa usahihi katika mazingira haya kunahitaji kuelewa mkondo wa utoaji wa kurasa.

Kwanini Muda ni Muhimu Zaidi ya Unavyofikiri

Katika ukurasa wa kawaida wa HTML, kuweka hati ya CMP ndani ya <head> kabla ya hati nyingine ni jambo rahisi. Katika Next.js App Router au Gatsby, hali ni changamano zaidi:

Kanuni kuu ni hii: idhini lazima isimamiwe kwenye kiwango cha hati, si kiwango cha sehemu (component). Sehemu ya React inayochora bango la idhini inachelewa ikiwa inakuwa shirikishi tu baada ya hydration.

Ujumuishaji wa Next.js App Router

Next.js 13+ yenye App Router imeanzisha njia mpya ya kushughulikia hati. Hivi ndivyo mbinu inayopendekezwa kwa ujumuishaji wa idhini:

Hatua ya 1: Pakia Hati ya CMP kwenye Mpangilio wa Mzizi

Tumia sehemu ya Script ya Next.js yenye mkakati wa beforeInteractive ndani ya layout.tsx yako ya mzizi. Hii inaiambia Next.js kupachika hati ndani ya hati ya awali ya HTML, kabla ya hydration kuanza:

Mkakati wa beforeInteractive ni muhimu sana. Mkakati chaguo-msingi wa afterInteractive hupakia hati baada ya hydration, jambo ambalo ni kuchelewa mno kwa idhini. Ukiwa na beforeInteractive, hati ya CMP inajumuishwa kwenye HTML inayotolewa na seva na kutekelezwa wakati ukurasa unapopakiwa.

Hatua ya 2: Weka Chaguo-msingi za Idhini Kabla ya Lebo za Google

Kabla ya sehemu yako ya Google Tag Manager au gtag.js, ongeza hati ya ndani (inline) inayoweka hali za chaguo-msingi za idhini. Hii inahakikisha kwamba hata kama GTM itapakiwa kabla ya bango la CMP kuonekana, inaheshimu hali za kukataliwa kama chaguo-msingi:

Hati hii ya ndani inapaswa kuwekwa ndani ya <head> ya mpangilio wako wa mzizi, kabla ya hati za CMP na GTM. Katika Next.js, unaweza kutumia lebo ya kawaida ya <script> ndani ya kipengele cha <head> cha mpangilio wako kwa kusudi hili.

Hatua ya 3: Shughulikia Mabadiliko ya Njia

Katika urambazaji wa programu ya ukurasa mmoja, hati ya CMP hupakiwa mara moja lakini mabadiliko ya njia hayasababishi upakiaji kamili wa ukurasa. CMP yako lazima idumu katika urambazaji wa upande wa mteja. FlexyConsent hushughulikia hili kiotomatiki — mara tu inapopakiwa, inabaki kuwa hai katika mabadiliko yote ya njia bila kuanzishwa upya.

Ujumuishaji wa Next.js Pages Router

Kwa miradi inayotumia bado Pages Router, mbinu ni sawa lakini inatumia _document.tsx badala ya mpangilio wa mzizi. Weka hati ya CMP ndani ya sehemu ya <Head> ya darasa lako maalum la Document. Mkakati wa beforeInteractive hufanya kazi kwa namna ile ile katika Pages Router.

Tofauti kuu ni kwamba _document.tsx hutolewa tu kwenye seva, kwa hiyo mantiki yoyote ya idhini hapa inahakikishwa kuwemo kwenye mzigo wa awali wa HTML.

Ujumuishaji wa Tovuti Tulivu ya Gatsby

Gatsby hutengeneza HTML tulivu kabisa wakati wa ujenzi. Hakuna utoaji wa kurasa kwenye seva wakati wa ombi, jambo linalorahisisha baadhi ya vipengele lakini pia linachanganya vingine:

Mtazamo wa Gatsby wa ujenzi-wa-wakati (build-time) unamaanisha kila faili ya HTML kwenye CDN yako itajumuisha hati ya idhini. Hili kwa kweli ni bora — hakuna mantiki ya seva ya kushindwa au kuhifadhiwa vibaya.

Mambo ya Kuzingatia kwenye Nuxt.js

Nuxt.js (inayotumia Vue) ina miundo yake maalum. Katika Nuxt 3, tumia composable ya useHead au usanidi wa kichwa cha programu kwenye nuxt.config.ts kuongeza hati ya CMP kimataifa. Nuxt inaunga mkono chaguo la body: false (linaloweka hati kwenye head) na sifa ya async kwa upakiaji usiozuia utoaji wa ukurasa.

Kwa hali ya utoaji wa kurasa kwenye seva ya Nuxt, kanuni ni ile ile: hati ya CMP lazima iwe kwenye mwitikio wa awali wa HTML, si kupachikwa kwa namna ya nguvu na sehemu ya Vue baada ya mount.

Kuepuka Mabadiliko ya Mpangilio (Layout Shift)

Mabango ya idhini yanajulikana kwa kusababisha Cumulative Layout Shift (CLS), kipimo cha Core Web Vitals kinachoathiri viwango vya SEO. Wakati bango linapoibuka baada ya ukurasa kutolewa, linasukuma maudhui chini au kuyafunika bila kutarajiwa.

Mikakati ya kupunguza CLS kutokana na mabango ya idhini:

Mtazamo Usiofungamana na Fremu wa FlexyConsent

FlexyConsent ilibuniwa kufanya kazi na fremu yoyote — au bila fremu kabisa — kwa kufanya kazi kwenye kiwango cha hati badala ya kiwango cha sehemu. Hivi ndivyo hili linavyokuwa muhimu:

Kidokezo kwa msanidi: Jaribio rahisi zaidi la ujumuishaji sahihi wa CMP ni kufungua kichupo cha Network kwenye kivinjari chako, kuchuja kwa vikoa vya Google, kisha upakie ukurasa upya. Hakuna ombi la Google linalopaswa kutumwa kabla ya amri ya chaguo-msingi ya idhini kuonekana kwenye console. Ikiwa yapo, CMP yako inapakiwa kwa kuchelewa.

Mpango wa bure wa FlexyConsent unaunga mkono idadi isiyo na kikomo ya mwonekano wa kurasa na hufanya kazi na Next.js, Gatsby, Nuxt, Astro, SvelteKit, Remix, na HTML rahisi. Ujumuishaji ni ule ule katika zote: lebo moja ya hati, iliyowekwa mahali panapofaa.

← Blogu Soma Zote →